FLISS' Kitchen

_Images for Website (6).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.

DESIGN PORTFOLIO HARRIET ATHERTON (7).pn

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.  

DESIGN PORTFOLIO HARRIET ATHERTON (8).pn
custom – 35.png

Research

all plants

Screenshot 2021-01-08 at 09.22.23.png

Macro Meals

Screenshot 2021-01-08 at 09.22.31.png

Farmdrop

Screenshot 2021-01-08 at 09.22.44.png

Graze

Screenshot 2021-01-07 at 20.48.44.png
custom – 35.png

Concept

User Flow

Screenshot 2021-01-08 at 09.53.17.png

Solutions Sketches

A

WhatsApp Image 2020-08-21 at 16.40.18.jp

B

WhatsApp Image 2020-08-21 at 16.40.17.jp

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

Screenshot 2021-01-08 at 09.23.04.png
Screenshot 2021-01-08 at 09.23.08.png
Screenshot 2021-01-08 at 09.23.12.png

User Flow B

Screenshot 2021-01-08 at 09.23.15.png
custom – 35.png

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.

Untitled design (26).png
Screenshot 2020-08-28 at 09.23.18.png

Usability Tests

IMG_4250.JPG

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.

iPhone X-XS-11 Pro – 21.png

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.

iPhone X-XS-11 Pro – 61.png

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. 

iPhone X-XS-11 Pro – 61.png

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.

iPhone X-XS-11 Pro – 22.png
custom – 35.png

Responsive Design

Arrow 1.png
Responsive Design Img.png
8.png
6.png
Web 1280 – 5.jpg
Arrow 4.png
Arrow 2.png
Web 1280 – 6.jpg
Arrow 4.png
Web 1280 – 8.jpg
9.png
Untitled design (59).png
Web 1280 – 9.png

Thank you.

Thank you for taking the time to review my work. If you like what you see, please don't hesitate to get in touch to collaborate. My contact details are available below.