13a.png

15: USER FLOW

Tentative features and capabilities for this flow: 1: The ability to search a database of produce and ingredients 2: The ability to access tips and criteria for how to best choose produce 3: The ability to make, access, edit, and check off grocery lists. My user flow doesn’t accommodate every possible interaction, only the happy paths that a user is most likely to take when executing tasks. I found this especially helpful because the way in which a user may use this app is anything but linear. I want to make sure that jumping around still feels intuitive and consistent.

 
14.png

16: LO-FI WIREFRAMES

With a flow in place, I can start laying out rough key screens. Navigation elements are placed, space is allocated. I use these screens to create paper prototypes and do some preliminary usability testing with a few people. Then I make some adjustments and repeat until the user’s journey begins to smooth out.

 
15.png

17: MED-FI WIREFRAMES

As I begin to tighten up my key screens, I start looking more closely at the arrangement of elements, and how the experience will differ on different mobile platforms and screen sizes. Now that I’ve chosen Android as my platform, I also start to use some of Google’s Material Design assets so that users will find conventions to be natural and straightforward. While lo-fi wireframes were designed on paper and in Adobe Illustrator, these med-fi iterations are designed in Sketch. I go back and user test these screens on paper, and then begin prototyping them in Invision.

 
16.jpg

18: HI-FI WIREFRAMES

Once I have my key screens working smoothly, I start to bring in color, typography, logos, transparency, and shadow. I want the overall feel of the app to denote freshness and openness, so I chose a green burst gradient for upper elements, white for content background, and black for persistent navigation on the bottom. For checkboxes and small highlighted elements, I chose magenta. In invision, I start to play with different screen transitions to get the experience to feel smart and polished.

 
animate-1.gif

19: NEXT STEPS  

This is work in progress! Before this project is done, I still have a good amount of usability testing to go and secondary screens that need to be created before I create my clickable prototype. A lot of what I have learned as a product designer really seems to lend itself towards strategizing and creating meaningful experiences. I think that’s why so many industrial designers are finding such satisfaction in the UX realm. Be it an alarm clock, a toothbrush, a kiosk at an airport, or a computer mouse, the constant is there if you look for it: Good design revolves around people, and if you do it right, they will scarcely notice it.