Ugrocery — plan and execute your grocery shopping

Ugrocery is a tool that can help the user plan and execute their grocery shopping lists. By being able to switch between planning mode and shopping mode, the users are able to add, edit, delete and use their shopping lists at any time on their mobile application.

Design problem and motivation

During my daily observation, I noticed that people use different tools for creating and using a shopping list, and each method has its own pros and cons. I, for instance, writes on sticky notes to create shopping lists, but the glued side of the sticky note always end up sticking into my pocket. My roommate uses a piece of scratch paper, but it looks a bit awkward to cross things out using a pen in a grocery store. A friend of mine uses a grocery shopping application that cost her $5 from the app store, which works with recipes but not really interactive.

The need to create a digital, interactive and efficient shopping list drives me to create an application like this. I decide to focus on feasibility and usability for this application and the final product should be a high-fidelity prototype that can be used on a mobile device.

Design process

Since the target user of this application is student like me, I decided to name it as “Ugrocery”, with the U standing for University. And the main color pallet will be the purple that is close to University of Washington logo’s purple. The final decision on the color palette for the application is shown below.

Color palette for the application (from ColorHunt)

Next, I started making the wireframe/low fidelity prototype using Axure. Even though I am making a low fidelity prototype, I applied colors and interactions so that during the first series of testings I will get as much feedback as possible from the test users.

Wireframe screens

The usability testings of the wireframe did gave me a lot of helpful feedbacks. Both of my test users were confused by my button designs in the wireframe. One of them was so confused that he didn’t touch the mode switching button until I told him to do so. Also the white spaces in the lower part of the page made them both try to swipe down to see if there are other contents outside of the page. They also provided feedback on details about font, color choices and other details.

Moving on to designing the high fidelity prototype, I focused more on details. Also, this time I picked a new tool, Sketch, which turned out to be a better tool than Axure in making high fidelity mockup. And after I done polishing them in Sketch, I exported everything as images and uploaded them to Marvel in order to make the interactions.

High fidelity working in progress

While designing the interactions, I was also thinking about the usability testings. Since I was planning to do a systematic usability testing with scenarios, recordings as well as script, I made the interactions linear so that the user won’t easily get lost while they are following the tasks. Also, when they did something wrong, the interaction frames on the screen will pop up, indicating they clicked somewhere they shouldn’t touch.

Making the interactions in Marvel

And here is the interactive application, go ahead and try it!

Different from the first usability testing, the usability testings conducted for the high fidelity prototype is more systematic and critical. Before testing, I came up with the task lists for the test users. I also decided to do the tests in a grocery store to make it as realistic as possible, even though that will add more difficulty to recruiting test users.

And the following is a video I made using some clips from the usability testing.


The test users loved the high fidelity mockup, complimenting how real it looks like. However, both of them suggested that I should add more links for future mockups in order to make it even more realistic. One test user suggested that using this application in grocery might still be distracting even though all the user need to do is to click on the items.

Thinking about that comment from the test user, reflecting on this project, I think Ugrocery have the potential of incorporating with some latest technologies such as eyetracking, or augmented reality, minimizing the distractions the application created.

Like what you read? Give Jiewen Luo a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.