Fat Marmalade's
Conceptual App Design
My Role
UX designer creating a food order and pick-up workflow from conception to delivery.
The Problem
Busy workers and students don’t want to wait to get their favorite sandwiches.
The Goal
Design an app that allows users to pre-order sandwiches and pick-up at a time and day of their choosing.
I was the lead UX Designer designing an app for Fat Marmalade's from concept through completion. As the sole designer, I conducted competitive analysis, created user flow, conducted interviews, wire framing, low and high fidelity prototyping, usability studies, and design iteration.
Fat Marmalade’s is a local sandwich shop located in the greater Boston area. All Fat Marmalade’s are strategically located near college campuses or within walking distance of densely populated office space. Fat Marmalade’s brands itself as fun fast food offering healthy and quick service to people on the go.
Kicking things off
Understanding the user
To best understand the users I’m designing for and their needs I conducted interviews and created empathy maps. A primary user group identified through research was busy university students who don’t have the time or resources to prepare meals for themselves.
This user group has driven the demand for a technology solution to Fat Marmalade’s nostalgic business model. They expect convenience and have little time or patience to spare.These are the overwhelming takeaways:
Time
Busy students don’t have or don’t want to spend time waiting in a sandwich shop.
Customization
Users want the ability to customize their orders.
Understanding the competition
Guest Checkout
Users don’t want to set up an account to order from an app. They want the ability to complete an order as a “guest”.
I wanted to understand how the competition handled mobile app ordering and pre-ordering and looked for opportunities for improvement. I conducted a competitive analysis of three direct and one indirect competitor. The results of which influenced design and processes.
Meet the users
I felt it was important to create a pair of personas to put a face to the users. These personas were used to inform design decisions.
Kelly Lynn
Age:
Education:
Hometown:
Family:
Occupation:
19
Student, 2nd year
Sonoma, CA
1 roommate, 1 goldfish
FT student and PT barista (15-20 hrs/wk)
“I have almost no time and no money so when I eat I need it to be fast, healthy, and cheap.”
Goals
-
To make the kind of movies I want to see.
-
To graduate on time and with little to no debt
-
To be mindful and stay in the moment
Frustrations
-
“Ordering from the app can sometimes be spotty.”
-
“Picking up is disorganized.”
-
“No customization of sandwiches.”
Kelly is a 2nd year student at Emerson College studying film, which is her lifelong passion. She is immersed in school completely and rarely has time for breaks or time off. When she’s not working hard at school, she is a barista at a local coffee shop, which is her second passion. She is a talented artist who is always helping out others with her creativity and sharp wit. She is vegan, tech heavy, and prefers to order food by app.
Ted Charter
Age:
Education:
Hometown:
Family:
Occupation:
42
BS - Accounting
Cambridge, MA
1 snake, 2 Guinea Pigs
Actuarial for regional insurance broker
“My job is demanding so I need a place I can escape to for a little fun and a quick bite to eat.”
Goals
-
To get promoted to a senior level actuarial
-
To meet up with friends who enjoy the same interests
-
To lose weight and lower my cholesterol
Frustrations
-
“When I’m on the lunch run I can’t ever seem to get the orders right.”
-
“Sometimes I’d like to eat my lunch in the sandwich shop but there’s no tables.”
-
“Could everyone input their order into my app?”
Ted is in his sixteenth year as a junior actuarial at a prominent insurance broker. He is working hard to break through to a big promotion. He loves to work, but he knows how to have a good time. He is an enthusiastic LARP’er and sci-fi enthusiast and heads up several clubs. At a recent physical exam he learned he’s got to start taking care of his health through a better diet. He doesn’t cook for himself and relies solely on take out.
Creating a framework
To better understand how I could create a better experience I designed a user flow. It helped me focus on the overall experience and less on the design details.
![User flow [template].png](https://static.wixstatic.com/media/f95999_555f8bab6ed6433cbc4420413e6860cb~mv2.png/v1/fill/w_960,h_540,al_c,q_90,enc_avif,quality_auto/%20User%20flow%20%5Btemplate%5D.png)
The Design
Wireframing on paper...
I wanted to create a series of wireframes that helped me visualize where to place all of the various elements on each screen while addressing user needs and the project goals. I got to work with pencil and paper…
...and digital
After fleshing out ideas through paper wireframing, I wanted to further refine the vision with a series of digital wireframes.
Final design
The usability study offered constructive feedback which influenced the final design and helped achieve the goal to design an app that allows users to pre-order sandwiches and pick-up at a time and day of their choosing.
1. Start
2. Selecting a pick-up location
3. Choose the day and time for pick-up
4. Menu categories
5. Choosing a sandwich
6. Customizing
7. Cart
8. Confirm pick-up details
10. Confirmation
9. Pay
Sticker sheet
Fat Marmalade's has a lighthearted identity which I worked to capture with the color palate and iconography.
Takeaways
In Summary
The app retains the Fat Marmalade’s identity while satisfying the needs of the user highlighted in the research phase. The project elevates Fat Marmalade's into the digital era without reaching too far - a fine balance.
User quote from usability testing:
“The app is intuitive--easy to use. No question about what to do. And that's what I liked. I didn't have to stop and try to figure out what was going on.”
Furture Steps
1.
Expand usability testing to a more diverse audience to seek out unaddressed pain points or accessibility concerns.
2.
Conduct further research with user group to itemize any additional areas of need.