Week 5: User Flows

Yesterday’s lesson was mostly practical but we started off with a bit of theory.  First off we defined what a user flow is and their potential benefits. User flows map out versions of how people ‘go though’ your site, it is how they interact with a particular situation or artefact.  User flows allow you to quickly draw out all possible choices, outcomes, scenarios or indeed errors a user may make and make iterations quickly.  They help designers think at a system level, as a designer you don’t want to be covering any interfaces with loads of notes, get that thinking done first.  You also want to discover any potential problems before any detail is gone in to!  User flows are really important as they show you what you need to do to build your product/ service however, they can often be quite tricky to execute!

User flows can be low fidelity, technical or to do with process.  In any flow if you can’t understand it then your client certainly will not be able to.  In general the business heads need a more visual flow and the development team will need more technical detail, so you may need to make bespoke ones for each party.

It is a good idea to start simple, initially just map the ‘happy ideal’, you can always add more detail later.  Bare in mind also that navigation will always support the primary user flow.  Leave space between boxes for things you have forgotten, you can test your flows with different example situations.  One more thing; you only need to cover the steps the user sees, not what goes on behind the scenes.

Sometimes you will need to share user flows with company stakeholders, if for example you are pitching more than one page of design.  It is also good for the whole team to get together and use user flows to help define the scope of the project before committing to anything else.

Task:  Create a flow for ordering pizza online, primary then secondary flows, then class discussion: 30 minutes.

This was really fun!  I went a bit alternative and decided to design my ideal pizza service.  I really enjoy cooking so for me the fun is in creating the pizza, I like to pick and choose what I want depending on my mood.  Here is my initial flow:

2015-06-12 10.56.57

In the group discussion, Matt pointed out that I didn’t need to put down all of the ‘go back arrows’  I could simply add a note to say that this was the general state.  He also advised that I could have written my ‘choose topping’ section simpler (you can see is annotation on the diagram).  My tutor Irene helped me to understand how to use the different symbols in a yes/ no situation, you can see the example flow bottom left, however you really do not have to follow the rule book here.  My classmates said that my user flow made them hungry, a good sign!?

My classmate also followed his ideal process (seems like everyone did, derr!).   His was based around a personalised account where you could repeat orders or, if you didn’t have an account you would be initially directed to money saving deals.  He didn’t have much about actually choosing a new pizza.  Another classmate focused on the account and payment section.

Task 2: Revise and add detail, include the things you forgot and share: 30 minutes

I followed all of the advice I had been given as well as adding a bit more account detail.  I liked my classmates idea of being able to save favourites to stream line the ordering process so I added that in.  I quickly got confused about when someone ‘had’ to make an account, as you can see below.  In the discussion afterword Matt said that I needed to de-scope the flow and put all account stuff in a new one.  I was pleased to see that my ‘pizza deals’ classmate had put in more pizza customisation options.  Looks like we did a swap of ideas!

2015-06-12 10.56.46

Our homework this week is to create user flows for our GA projects.  We need to take one or two of our project goals and map out the user journey.  We will be having an open session next Wednesday to go over ideas and receive some feedback about our projects.


One thought on “Week 5: User Flows

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s