FLISS' Kitchen
.png)
My sister, Fliss, has always had a passion for all things food and cooking related. With a dream to share her cooking with the world, Fliss’ Kitchen was born.
The Challenge
With Covid-19 forcing many restaurants to close, my sister saw an opportunity to act fast and start delivering healthy food options to people’s doors. I was challenged with creating a food delivering feature for Fliss’ Kitchen as my first real life project since beginning my course with CareerFoundry. As part of the process I have designed two separate screen solutions, conducted A/B testing, and combined the best features from each. This has resulted in final screen designs that I am pleased to be sharing with you.
_pn.png)
User Centered Design Process
1 - Research
2 - Concept
3 - Prototype & Usability Testing
I began tackling the challenge by researching the existing food market. These included Allplants and Macro Meals, both offering meal delivery service. Additionally, I looked further a field for inspiration, including Farmdrop, an online grocery store and Graze, a snack delivery service.
With inspiration from the research phase, I did two quick sketch solutions to create a meal delivery feature. These formed the foundations for the screen designs. Two separate solutions of screen designs were created to allow for A/B testing.
The screen solutions were used to create two clickable prototypes. Both prototypes were tested to enable me to uncover which features and designs worked best. The results then led to the creation of one final product which was presented to Fliss.
_pn.png)
Research
all plants
Macro Meals
Farmdrop
Graze
Concept
User Flow
Solutions Sketches
A
B
Main differences from solution A:
The home page layout has been changed, with the main options presented at the top of the page and no CTA.
The menu layout has changed and the basket view now slides in from the left instead of from the bottom.
The payment page will be laid out differently with order details and delivery address next to each other and payment details placed below.
User Flow A
User Flow B
Prototype & Usability Testing
The Prototypes
Two clickable prototypes were created using Adobe XD. This allowed for them to be shown and tested from a mobile phone making it a realistic user experience for the participants in the usability test.
.png)
Usability Tests
Three participants took part in the usability and A/B preference testing. All sessions were moderated and completed in person.
I led the sessions by encouraging participants to share their impressions of the screens as they saw them and focused on observing their reaction.
Once they had completed the usability tests, I asked participants which screens they preferred from the two clickable prototypes.
Main Learnings & Takeaways
Landing Page - There was an all-round preference for the landing page of Solution A with participants describing the navigation as clearer. However there was confusion around the titles of the buttons at the bottom of the screen, therefore I have changed “Food Delivery” to “Takeaway”. Additionally, participants felt like the images at the top of the page looked cluttered. In response to the feedback I reduced the number of pictures and increased the space between them.
Menu - all three participants preferred the layout of the menu in Solution A as it was easier to understand how to add and remove items. However two participants did voice their liking for the bold number to appear over the picture of the meal once it had been added, allowing to see what you had picked at a glance. This was incorporated into the final screen design.
Checkout - The three participants commented that the checkout button felt more natural on the right side of the screen vs the left side. They also appreciated the indicator of how many items they had added to their basket. In line with their comments the checkout button was kept fixed at the bottom right corner.
Payment Page - There was differing views on the layout of the payment page. One participant indicated that they preferred Solution B as it presented all the required inputs on one page, eliminating the need to scroll. The other two participants preferred Solution A as they thought the increased amount of space between inputs gave the page more clarity. Therefore I choose Solution A. Participants also commented that for the edit card details, they wanted consistency with how to edit the menu at the top. Taking on board the feedback, I changed the pen icon to Edit in the payment section.
Responsive Design
.png)
Thank you
Thank you for taking the time to review my work. If you like what you say please don't hesitate to get in touch using my contact details below. You can also explore more of my work below.
.png)