Initial User Research.
Before rushing into the design studio and firing up softwares like Miro and Figma, we first interviewed people around us and handed out surveys to collect people's opinions toward the food waste situation and home grocery management app on the market.
We realized although most people thought food waste is a serious problem, they are sometimes not able to finish up everything in their fridge and have the experience of throwing large amounts of unused but expired foods or ingredients. Since none of our interviewees were using the grocery trackers/inventory manager, we wanted to find what were the problems current solutions have.
Wave the Flow.
Before touching on the screens, we started by designing a user flow map with all of the key features included. This helped us identify the logical connections between functions. During future works, whenever we encountered questions about adding/deleting feature screens, we always come back to this map to test the suitability of the new changes.
Click to enlarge image
Bring concepts into Prototypes.
Having a guild in hand when building prototypes is always good. Following the logic presented in the user flow, we could design wireframes with low fidelities. These Lo-fi prototypes gave us a direct view of the layout of the elements without losing the flexibility to make design changes.
Click to enlarge image
Usability Test.
After completing the Low-fidelity prototypes, it's time to bring our designs to users again. We printed the wireframes on cards and bring the cards to testers for mockup runs. By observing users interaction with the prototype and operating interviews after the test, we gathered precious ideas and advices.
Going to High Fidelity.
As the key features and element layouts were decided, we finally entered the stage to design the visuals of our app. We developed a UI pattern with Mint Green as the primary color and neomorphic UI style. We also named our app "Carrot" following the slogan "Care About All" and trying to encourage our users to consume all groceries in time and eliminate food waste.
The building of High-Fidelity prototype run smoothly with the referrence of the revised user flow and Lo-fi prototypes. But we were not treating the wireframe as the unbreakable golden rule when we working on the Hi-fi screens. There were several layout and connection problems that could only be noticed in the High-Fidelity environment.
We kept optimizing the layout of each screen and tested on the Lo-fi wireframes. After, I forgot howmany iterations, all screens were confirmed and bring us to our High-Fidelity prototypes.
See all high-fidelity screens in the design spec
But just having static screens is not enough. To make the prototype interactive, we, once again, take reference to the user flow. We did some interaction diagrams in the Lo-fi stage. However, the actual interaction diagram was a "little bit" more complicated than we expected:
what we imagined
what we actually have
If you are interested in more detail, you are more than welcome to check the design specification and interactive prototype provided below.
Download the design spec and interactive prototype here.
Go to the design spec►
Go to the prototype►