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.
From our interviews and survey we found out our users are between 20–39 years old and…
- Of the 70 people we surveyed, the great majority are knowledgable in terms of nutrition and healthy eating habits.
- 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.
- Most cook at home and prefer to save money by taking food from home to their work.
- 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 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.
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.
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.
Below is a prototype created in Principle.
FROM BRIGHT COLORS TO EARTHY TONES
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:
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.