UX DESIGN

Why You Should Use UX Flows and Prototypes When Starting App Development

Project man­agers of­ten have an idea of how they want the ap­pli­ca­tion to look but may not have the cre­ative skills to pre­sent a vi­sual ex­pla­na­tion of the processes and func­tion­al­ity of the app. Something is needed to trans­late their ab­stract idea into some­thing tan­gi­ble that the de­sign­ers and de­vel­op­ers can use. This is where a UX flow and pro­to­type come into play.

UX Flow

A UX flow uses wire­frames to map out the user’s ex­pe­ri­ence while they’re us­ing the soft­ware. These wire­frames al­low the de­signer to plan the lay­out and in­ter­ac­tion of an in­ter­face in low fi­delity or high fi­delity (low-fi or hi-fi). A low-fi wire­frame won’t go into minute de­tail like the type­face choices. Instead they act as a start­ing point for a de­signer to work on the lay­out. They also give the pro­ject man­ager an idea of the room avail­able for con­tent on each page. The im­age be­low is an ex­am­ple of a low fi­delity wire­frame. It shows how the user can nav­i­gate around the ap­pli­ca­tion and the gen­eral lay­out of each screen.

Image

A high-fi mockup is a more de­tailed ver­sion of the UX flow. It has re­al­is­tic con­tent, spe­cific type­face choices, im­age di­men­sions and par­tic­u­lar but­ton styles. They are used only to ex­pand out cer­tain low-fi screens that may re­quire more de­tail.

Image

At WorkingMouse, part of our scop­ing process is to pro­vide low-fi wire­frames, as well as a pro­to­type of the ap­pli­ca­tion for cus­tomers.

Prototyping

After the UX flow is com­pleted, the next log­i­cal step is to cre­ate a pro­to­type. Now keep in mind a pro­to­type is very dif­fer­ent to an MVP (minimum vi­able prod­uct). Generally there’s no func­tion­al­ity when you’re pro­to­typ­ing. For ex­am­ple, you may have a dash­board that dis­plays a still im­age of what data you might ex­pect to see in your fin­ished prod­uct, but not the ac­tual data. This step in the scop­ing process is a way of demon­strat­ing how the site will look and feel. By cre­at­ing some ba­sic in­ter­ac­tions, users are able to click through screens. This gives the pro­ject man­ager an idea of what but­ton does what.

However, a pro­to­type could also be a piece of func­tion­ing soft­ware that proves the idea is fea­si­ble. For ex­am­ple, at a hackathon the fo­cus is on cre­at­ing a semi-func­tional pro­to­type in a lim­ited amount of time (not a pol­ished fi­nal prod­uct).

My weapon of choice when cre­at­ing these is InVision. It’s a very sim­ple tool that al­lows you to po­si­tion your im­ages and text on a screen. You can then cre­ate mul­ti­ple re­lated pages and click through to test.

Image

Image

For ex­am­ple in the im­age above, once you click on Continue’ on the first page, you’re then taken to the sec­ond page where you can fill in your de­tails.

A key ad­van­tage of pro­to­types is that its pol­ished ap­pear­ance speaks for the time de­voted to it and pro­vides a clear idea as to how the in­ter­face will look and work. Check out our blog for more on the ba­sics of user in­ter­face de­sign.

We be­lieve it’s im­por­tant to part­ner with our cus­tomers, trans­lat­ing their idea into a func­tion­ing ap­pli­ca­tion. However, when it comes to im­prov­ing the user ex­pe­ri­ence, it’s im­por­tant to con­sult UX de­sign­ers. That’s where soft­ware de­vel­op­ment be­comes a col­lab­o­ra­tive process, with each stake­holder bring­ing dif­fer­ent skills/​at­trib­utes to the table. While it’s bet­ter to leave the de­sign­ers cre­ate the pro­to­types, it is im­por­tant to un­der­stand the process.

ABOUT THE AUTHOR

Isaac Joekong

Get cu­rated con­tent on soft­ware de­vel­op­ment, straight to your in­box.

Your vi­sion,

our ex­per­tise

Book a con­sul­ta­tion