Fast Food is a responsive web app designed to be used primarily on a mobile device in the kitchen and at the grocery store.
To provide quick and easy recipes that leave users feeling inspired while utilizing a multiple recipe based shopping list to minimize shopping time and cost to simplify the entire user experience of cooking more at home.
To afford the user the ability to “batch” a grocery list based on recipes that they would like to use, and to keep them informed of the “efficiency” of the shopping list they have compiled.
Below is the design process I used to create this project, broken up into these 4 major milestones below.
low fidelity prototype
mid fidelity prototype
logo & Icon design
high fidelity mock up
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
After interviewing people I identified as potential users of the product, I probed for insights into behaviors, desires, goals & pain points. These interviews illuminated just how different the grocery shopping experience can be from person to person. Some wanted to maximize their shopping trip by getting supplies for over a week. While others preferred to shop every day to prevent items from expiring. I wanted to be sure and design a ui that accommodated users on either side of this spectrum.
This is some of what my potential users had to say.
Timing is everything! Everything comes out at the same time, piping hot!
I go to the grocery store every day. If you buy anything ahead of time it goes bad.
I think we're all cooking more from home these days!
logo & Icon design
high fidelity mock up
Based on interviews, research, and competitive analysis, a path forward was forged. Focused on positioning this responsive app uniquely in a sea of similar apps with key feature requirements tailored to our user personas.
I later revised this last requirement to show an average meal cost for a selected time frame. I thought this change better suited users no matter the size of their shopping list
I have 3 kids. I want to customize the size of my recipes to suit my family serving size. Once I've found the recipes I want for my weekly shopping list, compiling those recipes into my weekly shopping list makes shopping a breeze!
With my mvp or "minimum viable product" and key features in mind it was time to start putting together a user flow that allowed diverse users to accomplish those key features. It was a challenge to keep this user flow small. The tendency is to try to give your users everything they could possibly desire. This can really increase the scope of the project quickly. I find it best to focus on a few key features to start with and make sure the app accomplishes those features well, knowing that in later iterations you can add features that enrich the users experience as the app grows and matures.
I really enjoy this stage of a project. It's when our users optimal journey begins to come into focus. This is a great time to put pen to paper and sketch out rough variations of wireframes.This step is so valuable because it affords you the opportunity to iterate rapidly identifying potential issues and brainstorming solutions before you invest your time into wireframing your product digitally. This step really allowed me to refine the patterns and elements I was using, which, in some cases changed significantly in this very process.
With some rough prototypes in hand, I was excited about testing my flows on potential users to inform my solutions before moving on to my high fidelity mock ups. So, I put together a usability test with 3 objectives for my test users.
This step really shaped how I went about informing the user of how much money they were spending per meal aka their "efficiency". I ended up using a plot graph charting the average price per meal over variable timelines. It's also where I settled on the serving size pattern that would be intuitive for diverse users.
Is selecting recipes and adding them to your shopping cart clear.
Is the flow of customizing the serving size easy to follow.
Is the flow of picking your recipes and compiling your shopping list intuitive.
Based on my research and interaction with users it was clear that there is a desire for clean and simple foods. I chose to reflect those values after experimenting with a few different moodboards.
Upon distilling my moodboard and user personas I created a logo that balanced value and speed. Two of the recurring themes in my interactions with potential users.
A proper hand off is always critical to ensure the product has the guard rails it needs to stay on brand as it's developed, grows, and modifies. A style guide is a great jumping off point for developers and other contributors.
Designing breakpoints for common screen sizes is necessary for web apps to ensure a quality user experience no matter what device they use the product on.
At the end of this process I built out a prototype that addressed my key requirements. I came out with a deeper appreciation for the design thinking process. It was also a reminder of the value of user interviews and testing. No matter how smart you are, looking at a potential users experience will ALWAYS inform another way of approaching your app and shed light on how to refine flows to accommodate a want or need that you wouldn't have been aware of until the product has already been developed.
Currently looking for full time work opportunities, locally and remote. Got a freelance project? let's talk about it!