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!

Desktop: https://invis.io/MDAKYEJVS

Mobile: https://invis.io/TVAKYDSQB

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
Show your support

Clapping shows how much you appreciated Joy Jean’s story.