Grocery Guide UI/UX for USC's Hack For Hope Covid-19 Hackathon

The Hackathon

From April 3 to April 18, the USC Marshall School of Business hosted a remote hackathon to generate solutions for areas of life affected by Covid-19. I joined a team along with Jerry Wang, Zach Davidson, Lauren Messner, Ziyi Xu, and Aaron Wang. I was the lead designer on this project responsible for the UI/X and overall product design so I wanted to use this writeup to share the process of that design experience! The full writeup of our hackathon submission including the technical elements can be found here.

The Project - Grocery Guide

“Wear masks.” “Engage in social distancing.” “Work from home.” “Flatten the curve.” We hear these statements every day. While we understand common practices to mitigate the spread of COVID-19, we still lack proper insight as to how to safely engage in essential tasks. For example, everyone needs groceries, but in the current climate, we cannot quickly and easily pinpoint the safest place and time to shop.

We created Grocery Guide to help our friends, family, and communities make an informed decision about when and where to grocery shop, in turn promoting healthy habits within our broader communities.

The Design Process - Archetypes

I started the design process with the creation of user personas. Personally, I'm a big fan of design thinking and believe that empathy is a critical part of the design and problem solving process. If this weren't a hackathon with a limited time span, I would have conducted a full UX/Design research process, but even with the short time I wanted to do some part of the research process.

User Archetypes

We started by choosing broad strokes of user types to attempt to appeal to the needs of divergent groups to hopefully allow the product to be as accessible as possible. We had three archetypes - Unorganized College Student Learning to Live on Their Own, Productivity-Oriented Professionals, and Parents w/ Children.


Trying to figure out how users will navigate through the app in the most efficient way possible.


Sketches turned into rough wireframes and a flow map to allow the dev team to get a feeling for how the app will functionally work from a design perspective.


From there, I went at sketching out as many concepts as possible and rapidly testing out color palettes, visual aesthetics, and illustration styles to get a feel for what worked.

Because it was a grocery app in the time of Covid-19 I knew it needed to be comfortable, accessible, fresh, and expressive. It was important that the design didn't fall into the trap of feeling "sterile" and that it had visual elements that felt fruitful, alive, and human.

Running into problems

As I started moving into high fidelity mockups, something didn't sit right with me regarding the colors I chose. I knew I wanted to use these green colors and use a sharp orange to signify action and guide the user through the app, but every time I looked at the greens they felt...off.

When I lined up my color palette in a row I realized what it was. Those green colors together were the color of mold. For a grocery app.

So I fixed the color palette

Final Version

I sharpened up the color palette, created components that would be helpful in the development period, and make sure that every piece of information that was offered through this app was highly accessible, clear, easy to navigate, and visually pleasant.

Thank you for reading!

I still have much to learn about all areas of design but I am proud of this project and the speed at which we were able to bring it to a usable level. In conclusion, we won the Bronze award out of 550+ entries and the judge's choice recognition for the overall design of the project.

If you have any questions, don't hesitate to ask me at hulinandrew@gmail.com and I would be more than happy to chat!


Andrew Hulin