Heads up! Cutting Cakes is getting a facelift and a new name: Sweet Heavens!
As a designer, I am always striving to improve my craft. Cutting Cakes was one of the first projects I ever created as a designer. In order to showcase the knowledge and skills I’ve gained since then, I am working on redesigning the interface with more sound UX principles in mind. Below are samples of some refreshed pages, with more updates to come.
Original Homepage Design
Original “Review Order” Page Design
Original “Product Detail Page” Design
Refreshed Homepage Design
Refreshed “Review Order” Page Design
Refreshed “Product Detail Page” Design
Original Case Study: Cutting Cakes Specialty Bakery
Cutting Cakes is a hypothetical company created as a project in Google’s User Experience Certificate Program.
The Problem
Many bakeries require customers to order and pickup products over the phone and in person. Customers are frustrated by the time commitment required to order a cake through the current system as well as the frequency of errors in their orders over the phone. Customers also expressed a desire to customize orders via the company website and mobile app.
The company’s mission is to provide premium ready-made and customized cakes for a variety of occasions.
The Goal
The goal of this project is to design a website and mobile app that allows customers to order both ready-made and customized products to be picked up at a scheduled time and date, therefore reducing time spent, order fulfillment errors, and increasing the options for customization of products.
The Research
The first step of the research process was to conduct interviews. In-person interviews were chosen as a research method because I wanted to understand what users desired in terms of web functionality in a specialty bakery website. Interviews allowed me to understand users’ needs on a deeper, more practical level. This method also allowed for a high degree of flexibility for going off-script and asking follow-up questions.
From information gathered, various deliverables were created, such as empathy maps and user personas. Research ultimately revealed that users wanted a more streamlined and customizable ordering process in order to save time, reduce the chance of receiving inaccurate orders, and having ability to tailor the product to fit their needs.
Sitemap and Information Architecture
Based on current user pain points uncovered during the empathize and research phase, ideas were brainstormed to solve the problem with various deliverables, including a sitemap demonstrating organized information architecture.
Selection of paper wireframes
Low-fidelity Prototype
A low-fidelity prototype was then produced in preparation for the user testing phase.
Ideation
Paper Wireframes
Next, paper wireframes were created to determine initial designs for the main user flow.
User Testing
Usability Study
A usability was conducted where participants were presented with the low-fidelity prototype as well as a set of tasks and a system usability scale.
Parameters
Location: Los Angeles, CA
Participant Age Range: 32-65
Length: ~15 minutes
Type: In person, moderated
Refining the Design
Based on the usability study results, the following changes were implemented:
A dedicated “Select Pickup Date and Time” step was added to the ordering process to make it clearer to customers where they could enter their pickup date and time details.
Review Order Screen
On the product detail page, an icon indicating the number of items in the customer’s cart provides visual feedback confirming that an item was added to the cart. Additionally, a “Go to Cart” call to action button was added in order to streamline the overall user flow.
Selected Designs
Order Confirmation Screen
Responsive Design
Finally, a mobile website and app version of the website was developed to accommodate user needs.
Next Steps
The Cutting Cakes Specialty Bakery Company, responsive website, and mobile app are a hypothetical company and product engineered for the purposes of UX design development through Google’s UX Design Professional Certificate Program. Thus, the product did not launch.
If the product company and product were legitimately launched, next steps would include additional research in the form of surveys, interviews, and usability studies. Information from these sources would be analyzed and utilized to inform design change decisions in future iterations of the app and website. Additional contact would continuously be made with members of the product team in order to ensure proper marketing and maintenance of the product.
Takeaways
This project helped refine both my technical skills as well as improve my understanding of the design process as a whole.
Technical Skills
Gained first exposure to using Adobe XD as a design tool for wireframes, mockups, and prototypes.
Learned various basic level strategies within Adobe XD to help streamline the design process and work at a more rapid pace
Learned how to create a list of assets within Adobe XD to work at a more efficient pace.
Design Process Learnings
Gained experience in conducting a competitive audit in order to identify potential gaps to fill in the market.
Gained firsthand experience in graceful degradation designing.
Furthered knowledge of choosing appropriate color palettes and typography to enhance the usability of the product.