Production-ready screens
Sept 2021  (2 weeks)
Simplysweet logo


Redesigning the checkout process
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.
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
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:
Having too many elements on one page competed for the user's attention and complicate the buyer's journey.
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.
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.
design objectives
This analysis helped me identify three main areas to focus on during my redesign:
solution strategy
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.
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
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
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.
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.
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.