top of page

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:


Busy students don’t have or don’t want to spend time waiting in a sandwich shop.


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.

persona pic1.jpg
Kelly Lynn







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.”
  • 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

  • “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.

persona pic2.jpg
Ted Charter







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.”
  • 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

  • “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

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
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

1 Fat Marmalade.png

2. Selecting a pick-up location

2 Fat Marmalade.png

3. Choose the day and time for pick-up

3 Fat Marmalade.png

4. Menu categories

4 Fat Marmalade.png

5. Choosing a sandwich

5 Fat Marmalade.png

6. Customizing

6 Fat Marmalade.png

7. Cart

7 Fat Marmalade.png

8. Confirm pick-up details

8 Fat Marmalade.png

10. Confirmation

10 Fat Marmalade.png

9. Pay

9 Fat Marmalade.png
Sticker sheet

Fat Marmalade's has a lighthearted identity which I worked to capture with the color palate and iconography. 


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

Expand usability testing to a more diverse audience to seek out unaddressed pain points or accessibility concerns.


Conduct further research with user group to itemize any additional areas of need.

bottom of page