Wireframe Prototype: Grocery List App
The assignment this week has three topics to choose from, grocery shopping, task management, or civil engagement. I chose to do the one most relevant to me, which is grocery shopping because I cook very often. Here is the listed description.
Grocery shopping: keeping track of grocery shopping lists and the using them while in the store, bypassing the store for online/delivery, etc. This requires both a web and mobile component and concentrate on the interaction design. Implement a prototype of the both components in wireframe format.
Grocery shopping… I usually write down my lists on my notes, but I thought — not everyone is like me; I am not the user; time to do some research! I started out by doing some competitive analysis on existing apps. Here are a few of the apps, noting their functions and additional strengths if it has any.
Additionally, I conducted user research with peers around me, both interviewing them and asking them to fill out surveys about their grocery shopping habits.
I categorized the data and interpreted my major findings from the survey, shown below.
All of my four participants preferred sticky notes or checking the fridge instead of an app; additionally, they do not like organizing their items by categories because it is too much work and a simple list will do.
Based on the characteristics of the participants for user research, I created a persona, Lydia.
By considering all the user needs in mind, I developed a list of all the content and function I would incorporate in my app. Moreover, I sketched a sitemap of the site organization and architecture in order to logically plan my wireframe screens.
Then, I started out by drawing “sketchy” layout templates, which is the first screen, and basically all the other wireframes follow the first screen’s layout. I did this using my iPad.
Lastly, I implemented the wireframes using Sketch, in order to make the lines less “sketchy”. Also, I added interactivity in order to simulate a more real feeling for user testing in class.
Here are the interactive wireframes made with Sketch and InVision if you would like to try out the app yourself!
Some feedback I received from the peer critique was the cool features I implemented in the system, including having a route feature on the mobile app. Additionally, some thought being able to add a recipe and auto-generate a list was a great function. Some feedback I received for further improvements for my next iteration are listed below:
- Making a tab especially for coupons
- Change layout of website to follow conventions (menu on top)
- Maybe could view multiple lists in one setting on desktop because there’s a lot of horizontal space
- being able to add recipes instead of only lists, then moving the recipes over if you want to purchase it later