Go back to all product design projects

Producheck

"Check what's in store before running out the door!"

An app design for grocery shopping which was inspired by the recent COVID-19 pandemic to help users gain access to real-time inventory availability and delivery options for contactless grocery shopping.

Remember the toilet paper crisis of 2020?

When the initial explosion of the global COVID-19 pandemic happened, people throughout the US realized how they took grocery shopping and toilet paper for granted. Simple access to your local store became a mission and frankly, a large health risk.

For this design challenge, I was tasked to create a mobile app called “Covind My Groceries” to address a common pain point people had during the pandemic, which was gaining access to in-stock products. This app would let users input their grocery list and display to the user which stores have those items in stock. There were a few mandatory screens that needed to be included in the design:

In addition to the mandatory screens, we were to use our discretion and UX skills to include any features that would benefit the end user.

Brainstorming, Info Architecture, and Sketching

In order to consolidate all my ideas into one cohesive plan, I like to sketch on pen and paper.

As I started off with the mandatory inclusions of the design, I start listing out the ways the page can expand into other screens. The information architecture naturally came together and the navigation icons were selected:

Wireframing

I expanded my initial wireframe sketches with this lo-fi wireframe to create an outline of the type of information that would need to be present for a seamless experience for the end user, such as adding a delivery and in-store pick up feature.

Initial prototype

I developed the lo-fi wireframe into this high fidelity prototype. Overall, I was satisfied with the information architecture, menu, and overall UX. But the UI felt lackluster, so I researched current UX/UI trends online and redesigned my hi-fi wireframe.

Final prototype

After researching current UI trends, I saw the use of rounded corners, minimalistic navigation, and vibrant color palettes were popular themes and have a simplistic modern vibe to it. In addition, I ensured that the design is WCAG compliant by removing the transparent effect on the images and moved the text below the image at full contrast. I also increased the font sizes for better readability.

Takeaways

I can see a real need for an app like this in the real world, especially during these troubling times. It was a fun design challenge to complete because of its current relevancy and how effectively it could used in real life. I’m glad I pivoted on the design because now it feels much more user friendly, aesthetic, and accessible.

Upon completion of the new design, I tested the final prototype 2.0 on four users. It was unanimous. 100% of users said they preferred the UI of the final prototype versus the previous design. When asked if they would use an app like this, 75% of users said they would. The 25% that disagreed with the rest stated that they preferred to go in-store to shop and do not like to grocery shop on apps. One particular user stating, "I'd rather go pick the produce myself because I know what looks ripe or fresh, and don't trust whoever picks the item to order."

I can see the user's point as a possible pain point for users of the app, but given that this is a design challenge and not an actual product to develop further, it was great to learn that even though I felt like I've handled most of the pain points of grocery shopping during a pandemic, there is still much to learn and adapt to when it comes to UX Design.

Go back to all ux/ui projects