Salad Delivery: a UX/ UI Case Study

This is a case study developed as a team of 8 at the UX/ UI Ironhack Bootcamp in Madrid (March, 2017). Below is what I was personally involved with.


Lack of healthy food delivery options; Lack of time in people’s lives & many food delivery companies don’t offer a lot of room for personalizing their own salad orders.


Let’s create an online e-commerce that specifically focuses on the delivery of fresh salads along with the option of personalizing ones orders & ingredients. It will be a quick service and alternative to having to bring healthy food from home.


Listen, discover and ideate. Let’s create clear viable solutions.

Let’s begin by getting to know our users. We interviewed people at our office with questions that had to do with physical appearance, health, their eating habits and more. We also used a Typeform survey to confirm our assumptions of who our users are.

Surveys are a great way to validate your assumptions on your users

From our interviews and survey we found out our users are between 20–39 years old and…

  1. Of the 70 people we surveyed, the great majority are knowledgable in terms of nutrition and healthy eating habits.
  2. But if they had a choice they would choose a quick and easy fast food option over quality of food due to lack of time.
  3. Most cook at home and prefer to save money by taking food from home to their work.
  4. There is social pressure for younger adults to eat healthy for sex appeal while the older adults eat healthy to take care of their health.
We identified 4 different user types
We created personas to help us empathize with our users
Story Boards and User Journeys are a great way to put our product in the context of our user

We did a session of crazy 8’s to come up with new solutions also. One cool idea we all voted on was having a photo taken of your food when it was ready to be delivered. But this idea along with being able to have food reviews and social media feeds were secondary after doing a Functionality Matrix.

Silent voting during our Crazy 8’s session
Functionality Matrix helped us prioritize immediate and future additions to the webpage
This affinity Diagram helped identify key themes our Webpage must touch on.

We used the optimal workshop platform to do a closed card sorting to see if our site maps made sense to our users. Thankfully almost everything was in the correct order.

Site Map with realtimeboard and Card Sorting with optimalworkshop

Before moving on to our visual design we created a user flow to solidify our Information Architecture.


Build, Interact and Execute. Let’s materialize our ideas and solutions.

We start designing by creating low and hi-fi wireframes along with mood-boards to get inspiration from current UI patterns, colors, type etc.

Wireframes on paper

Below is a prototype created in Principle.

From the smallest micro-interactions, using Principle can help give the client an idea of what the product is capable of.
We used Telefon as a friendly Futura alternative and here are some color/ texture inspirations


BIG CHANGE: We initially chose a very bright and tropical color palette but then chose a more subdued earthy tone of greens. After creating our wireframes we just felt like the bright colors took away to much attention from the salad and food itself. This way our eyes are drawn back to the salads.

See the gradual change between the 3 versions below in Sketch:

Mobile version of the webpage


Test, measure & optimize. Let’s improve our product.

Let’s launch this webpage live and let’s fine tune the service by using methods such as heuristic evaluations, usability testing and more. Let’s make sure we have a product that is usable and delightful to use.

This project became a great launching board to begin my other two projects. A Dating App Case Study and a Music & Art in Homes Case Study.

Cheers and hope you enjoyed this case study. More to come as I continue to learn and until then, never stop exploring!

Chris Peterson