UX/UI Design Delivery, Stockists and Checkout webpages - Eleonor Collins

UX/UI Design
            Delivery, Stockists and Checkout webpages

Project
The My Muscle Chef website Delivery page, Stockists page and Checkout funnel needed a redesign
to streamline the branding, messaging and purchase process. Interactive maps, messaging and FAQs
were all redesigned with more friendly messaging and styling that was easier to understand. The
Checkout funnel was redesigned to incorporate zipPay and simplify the purchase process.

My Role
This project required me to work primarily as a self starter. I underwent initial research into competitor
websites and current web trends used across similar webpages. I rewrote all the current web
messaging on the Delivery page, Stockists page and Checkout funnel. I redesigned all the webpages
for desktop and mobile devices using Sketch and performed user testing on iOS and android devices
using Sketch Mirror and Crystal apps. Apart from completing designs from concept to completion,
I consulted with other departments within the business, such as the Customer Success team in
order to try to address some of the issues that customers were struggling with when completing a
purchase or interacting with the website.

Challenge
Working at My Muscle Chef involved collaborating with different stakeholders in the business and at
times in remote locations. There were also tight deadlines which required me to meet a significant
amount of detail and accuracy.

Results
All designs were completed on time within tight timeframes in collaboration with the Chief Technical
Officer and Design team.

The Team
CEO, Chief Technical Officer, Senior Marketing Manager, Marketing Manager, Digital Designer.

                                                                                                             My Muscle Chef homepage

Delivery Desktop

                   Mapbox styling
                   and custom pop-
                   up design

Stockists Desktop

Sign In Desktop

Create your
account and
Sign In Mobile

Password security
hint pop-up alert.

Selector drop down styling
for desktop and mobile

Member Checkout Desktop

                          Double confirmation
                          alert when selected.

Member Checkout Desktop
Continued

Member Checkout Desktop
Continued

Member Checkout Mobile

Member Checkout Mobile

                         Simple 3 Step
                         purchase

                                         Order Summary
                                         details re-organised

Member Checkout Mobile

Guest Checkout Desktop

Guest Checkout Desktop
Continued

Guest Checkout Mobile

Guest Checkout Mobile
Continued

Guest Checkout Mobile
Continued

UX/UI Design
            The Muscle Gain Diet Guide

Project
At the start of 2019, My Muscle Chef introduced a new marketing campaign to promote their Muscle
Gain Meal Plan through research provided by a Nutritionist. This was a keyword driven campaign that
would attract new customers. This web project can be viewed at https://mymusclechef.com/Muscle-
gain-diet-guide

My Role
This project required me to work diligently and quickly as I was also responsible for building the final
webpage using Webflow. I designed the UX/UI concept using Sketch. Apart from completing designs
from concept to completion, I used my HTML and CSS coding abilities to finalise the webpage.
The mobile and desktop versions were made slightly different from one another in order for best
optimisation and performance.

Challenge
My Muscle Chef involved collaborating with different stakeholders in the business and at times in
remote locations. For this project I had to learn an online system called Webflow that I’d never worked
with before. There was also a tight deadline to meet which required me to meet a significant amount
of detail and accuracy, particularly in the testing phase.

Results
All designs were completed on time within tight timeframes in collaboration with the Chief Technical       The Muscle Gain Diet Guide

Officer and Design team.

The Team
CEO, Chief Technical Officer, Senior Marketing Manager, Marketing Manager, Digital Designer.