STEP 1 - USER FLOWS

Here are 2 examples of User Flows for Coffee 2 Go.

The first, below, is a (simplified) User Flow map showing the steps a user would take to order a coffee. It has:

- A beginning

- A happy path

- Decision points

- Error / recovery paths

- An ending
Coffee2Go App - image 1 - student project

The second, below, is an illustrated user story that shows the context of why someone would use our app, and some of the core steps taken.

Coffee2Go App - image 2 - student project

------------- ------------- ------------- ------------- ------------- ------------- ------------- ------------- ------------- -------------

STEP 2 - SKETCHES

I did some really rough sketches in the lesson.

I have tidied up 2 of the possible screens, attached below.

------------- ------------- ------------- ------------- ------------- ------------- ------------- ------------- ------------- -------------

STEP 3 - WIREFRAMES

I created these wireframes using Sketch and exported each screen as an images attached below.

As you can see, they are not the final styles but some structure is there to show interaction (e.g. big call to action buttons vs. links in blue). I have still not thought out everything at this stage

Coffee2Go App - image 3 - student project

------------- ------------- ------------- ------------- ------------- ------------- ------------- ------------- ------------- -------------

STEP 4 - PROTOTYPE

I created my prototype using Axure and hosted in on Axshare, available here https://n3sw4v.axshare.com/home.html

------------- ------------- ------------- ------------- ------------- ------------- ------------- ------------- ------------- -------------

STEP 5 - DOCUMENTATION

I documented my wireframes using

The prototype from above https://n3sw4v.axshare.com/home.html
Screenshots of the links in Sketch between the wireframes with text annotations

Coffee2Go App - image 4 - student project Coffee2Go App - image 5 - student project

Kayla Heffernan

UX Design Lead, PhD Candidate & Public S

79

9