Role
Designer
Deliverables
Production-ready screens
Timeline
Sept 2021  (2 weeks)
Project file
View Design File
Simplysweet logo

Simplysweet

Redesigning the checkout process
Overview
SimplySweet is a concept restaurant that focuses on delivering the best food made with quality ingredients. To serve their local neighborhood, they need their website to handle food orders directly from customers.

This project was initially directed by the Coursera UX/UI course; however, I revisited the final designs during my three month 1:1 mentorship program. During my project revisit, I focused primarily on improving the visual design of the checkout flow.
introduction
This project was a redesign of my initial design for Simplysweet's web app. My focus for this project was to improve user engagement and accessibility while improving the overall visual design.
Competitive analysis for Noom, Lifesum, and Centr
A few screens of my initial web app design for Simplysweet
research
design analysis
Starting with a review of the existing design, I thought about how it could be improved to encourage users to build trust. I was able to discover the following:
CLUTTERED LAYOUT
Having too many elements on one page competed for the user's attention and complicate the buyer's journey.
UNALIGNED ELEMENTS
There is no grid system layout, and text is often centered which compromises readability.
Inconvenient navigation
Navigation is complicated with unclear section breaks and headings.
accessibility
Some text sizes do not meet WCAG guidelines, and will be difficult for some users to read.
directing users to social media
Links to social media are placed at the bottom of the footer section, making it easy to miss.
color selection
The red orange gradient and gray do not meet WCAG contrast standards, and the text with a gradient is hard to read.
define
design objectives
This analysis helped me identify three main areas to focus on during my redesign:
solution strategy
redesign
My mentor encouraged me to thoroughly investigate each potential improvement before moving on, and helped me strengthen my design by asking questions from the perspective of a Product Manager, Lead Designer, and Engineer. 
This process helped me to gain a better understanding of the fundamentals of building a product, such as establishing a library of components, building flexible and scalable solutions, and being creative while maintaining scalability and consistency. Additionally, it helped me maintain focus on the three areas redesign: structure, accessibility, and product.
View Design File
Structure
To provide hierarchy and structure to the new design, a four-point grid system and components were introduced.
Using components that had predictable margins, columns, and padding improved readability and helped clarify relationships between sections.
A harmonious spacing system was used across each container to applied to ensure visual consistency
Base component
Components are reusable and used to create consistent designs
Base responsive component
Component with grayed out elements hidden
Component can adapt to a smaller size and maintain consistency
Component with grayed out elements hidden
Components used in a container
ACCESSIBILITY
Font sizes and color selections were reconsidered to meet the WCAG guidelines
To accommodate all users, color gradients have been removed and text sizes have been revised to comply with WCAG standards.
Previous Design
Design Analysis
The contrast ratio for the gradient against the white is 2.03:1 and 4.35:1.
The contrast ratio for the gray against the white is 1.73:1.
The previous design lacked an established Design System, which resulted in the use of too many similar fonts and font selections that were not compliant with WCAG standards.
Previous Design
Revised Design
PRODUCT
The order confirmation page of a product is a good place to showcase elements that can help drive growth - something Simplysweet is striving to achieve.
Through its new design, Simplysweet can strengthen its relationship with its customers by encouraging them to engage with the brand on social media and share the delight through referrals.
Previous Designs
The previous design included opportunities for users to create an account and connect with Simplysweet through social media, but these elements were not placed with high visibility.
Revised Design
The illustration sets the tone for the page and is an effective way to jumpstart the celebration of a user's journey to experience delight at completing a task.
The feed and card UI patterns encourage content discovery by reusing low-interaction-cost scrolling to replace hidden content in the footer.
The referral program enables users to share the delight as well as save on their next order. Referral bonuses increase gross merchandise value, making this a win-win for both Simplysweet and its users.
solution
final designs
The final screens addressed each of the three areas of improvement: structure, accessibility, and product. Designing with a four-point grid system gave it flexibility and created a sense of balance and alignment it previously lacked. Furthermore, by adhering to WCAG guidelines for color and text sizes, Simplysweet will be able to reach a larger audience who may struggle with poor visibility. Lastly, by improving access to Customer Support and encouraging reengagement through social sharing and referrals, Simplysweet can increase gross merchandise value. This strategy provides a win-win situation for everyone as it delights users and simultaneously drives adoption of new features and products.
Cart
Improved structure with 4-pt grid and reusable components
Summary
Breakdown of cost with larger text to emphasize total
Delivery
Revised text sizes and colors to comply with WCAG standards
Gratuity
Illustration jumpstart the user's journey to experience delight
Payment
Color indicates which elements are interactive and importance
Track order
Button color reinforce brand colors at the completion of every stage
Referral program
Increase gross merchandise value, making this a win-win
retrospective
During the redesign of this project, I was able to learn and put into practice important technical skills such as creating a design system, accessibility, and becoming more aware of spacial relationships between elements.
Through the course of this project, I was also able to work and learn closely with my mentor who would ask me questions in that would be asked by Lead Designers, Product Managers, and Engineers to help me build a design that I could confidently defend. This exercise was especially helpful because it taught me a lot about what make a design not usable and therefore not shippable.