Overview

The Client – Cake Bee is a dine-in cafe and an online cake shop serving the finest of cakes in four locations. They specialise in custom quality cakes and safe delivery of their products.
‍The Challenge – I had to research, plan and design the interface and paint a great experience for the customers.
‍Outcome – A usable and aesthetically appealing website that helps increase the reach of Cake Bee’s products.
‍Length of the Project – 4 weeks
‍Software used – Figma | Balsamiq | Adobe Photoshop | Adobe Illustrator

Approach

Research

Research goals ‍

• Define people's common behaviours when ordering food online.
• Determine what makes an ordering experience satisfying.
• Determine users’ frustrations when ordering baking products through an online resource.
• Understand user needs when ordering cakes through a mobile application and identify areas for improvement.

‍
‍Market Research
I conducted research to familiarize myself with Cake Bee and the cake baking industry overall. In addition, I gathered data on user demographics, regional user habits and trends.
‍
‍Competitive Analysis Research
I analysed some of the client’s competitors in the baking industry. I uncovered the strengths and weaknesses of client's direct competitors CK Bakery, Winner’s Bakery, The Old Madras Baking Club and Fresh Baked Goodness. In addition, I performed a competitive analysis on La Chocolate and Cake Walk which are indirect competitors to Cake Bee.
‍
I built the following conclusions based on the competitive analysis:‍

• Social Features: Some of the leading bakeries have a fully fleshed out social feature. It appears to be a function that is not expected by users but is appreciated when it is available.
• Exclusive Content: This seems to be a major key to attracting users. Platforms aim to show that they can deliver the newest, most unique custom cakes before competitors.
• Personalization: Personalization of products on these websites mostly include topping preferences or a price range. While some apps give the user a profile page, there is limited functionality or options for it.

Empathize

Primary Research - Interviews
In order to design a website with a great user experience, I had to first identify the needs of the target audience. To better understand the perspective of users, I interviewed people between 25 and 55 years old to find out their booking experiences and habits. I gained their insights specifically while ordering cakes from one of Cake Bee’s competitors CK Bakery or other cake offering brands. In the process, I learnt their preferences, motivations, and frustrations relating to ordering custom cakes.

User Personas
Getting a sense of the general target audience helped me think about how the business would appeal to different demographics with varying needs. Next, I used all of the qualitative data I gathered during the research process to create different user personas.

User Interviews
To get a sense of the target groups, understand how the business would appeal to different demographics with varying needs and to base design decisions depending on the disparate goals, motivations and behaviours of sections of the society, I interviewed users groups that will potentially be using the website,to gain their thoughts and preferences.
‍
Research Assumptions:

• Users are interested in knowing what types of cakes are in trend right now and what offers are tagged to it.
• User’s habits on a custom cake baking service are similar to their habits on social media platforms.
• Users prefer to see many options for customization of cakes.

After an in-depth analysis, I was able to identify several user needs:

1. Customers need a way to control the price range of cakes that is shown to them to save time.
2. Customers need to know that they will find the most current, up to date information on cake trends and flavours.

Intersection between business and user goal
I reflected on the business goals, user goals, and technical considerations to find a happy medium for all stakeholders. Once I had identified common areas, I could decide what product features were necessary for the prototype.

At this stage, I presented the user research findings and ideation results at a meeting with stakeholders involved - leadership from the business, marketing,sales, operations teams of the client. I recorded their reflections and confirmed alignment with the company’s mandate and vision. Engagement with stakeholders ensured keeping the leadership informed of design decisions. There was consensus largely among the leadership which provided motivation to proceed to the next phase of the project, information architecture.

Create

Information Architecture
I created a high-level list of site features to further define and guide the vision of the product. I conceptualized organization of information and data flow. I prioritized the features with supporting research to obtain seamless user navigation using tools like data categorization and labelling. I created a sitemap (refer Fig 4) which laid out the structure of data on the site, supplemented by navigation rules.

Interaction Design
I completed a task flow (refer Fig 5) and user flow (refer Fig 6) to imagine the ways a user might navigate through the site to achieve his/her goals. These methods allowed me to ensure that the information was organized in a way that is intuitive to the user.

Low-Fidelity Wireframes (Sketches)
In Balsamiq, I began the process of wire-framing with sketches of different variations of the website landing page. During this process, I thought about how the layout and content could be structured to satisfy user and business goals in a technically feasible way. The sketch I chose (refer Fig 7) served as a guide for my mid-fidelity wireframes.

Mid-Fidelity Wireframes
Guided by the sketches, I developed mid-fidelity wireframe (refer Fig 8) using Balsamiq. I created UI design patterns to outline all the design elements I wanted to incorporate into the website.

High Fidelity Wireframes
I applied the UI design and branding requirements to mid-fidelity wireframes in order to create high fidelity wireframe (visual mock-ups) using Figma. With all the visual details added, they were fully fleshed out (refer Fig 9). I continued the iterative cycle of developing,testing and updating the prototype.

In addition to branding, I defined the design patterns (user interface components) such as alert notification, header, footers, buttons, navigation and breadcrumbs. These patterns were reused throughout the website to create a consistent user experience.

The logo which was given by the client was added to the UI Kit which was a comprehensive collection of all site components and UI design patterns (refer Fig 10). This kit, designed with Adobe Photoshop,was a constantly changing document as the website and brand grew.

Test

Usability Testing
The usability test plan directed engagement with appropriate participants to attempt realistic activities, by turning user goals into task scenarios. By doing this, I gained qualitative insights into why users had trouble.

Instead of simply instructing the test users to perform the task with no explanation, I preferred to supplement the request within a short scenario that sets the stage for the action and provides a bit of context for why the user was embarking on the task. During testing, I called the tasks “activities” to avoid giving the participants a feel that they were being tested.

I asked 5 participants to test the prototype's usability. The participant pool comprised of people between the ages of 25 and 65,belonging to different professional backgrounds, varying levels of technological literacy and career stages while also accommodating those who have accessibility challenges. A few participants met me in person to complete the usability test, while others did so remotely. The participants were given four different scenarios, each with a task to complete.

Task scenarios:

• Task 1 – Go to the signature bee section and select a chocolate based cake.
• Task 2 – Select a custom picture cake from the Handcrafted Bee’s section.
• Task 3 – Create and order a custom cake from scratch.

Once the participants completed the tasks, I measured the percentage of tasks that users completed correctly (user success rate) as a way to communicate a site’s overall usability. The resulting usability metrics helped inform improvements that were warranted to certain designs and set the design direction.

The success rate of this testing was 60%.

Affinity Mapping
I created an affinity map to organize and synthesize the responses and observations I captured using testing. I uncovered insights, which I reconstructed into a list of recommendations. I organized these by priority level (high to low) as a way to determine what had to be changed immediately and what could be saved for later.

Findings:
Overall, users navigated through the website without difficulty. 100% of users referred to the tasks as either simple or easy. Confusion most often stemmed from the fact that the prototype is not fully functional. More usability tests were planned to be conducted on other site features once it’s complete.

Recommendations:

1. Add more vibrant colours and simple animations to attract young parents.
2. Add an offers page with up to date offers provided by the bakery.
3. Add a simple recipe cake section to increase flow of visitors to the website.

An iterative design is the best method to increase the quality of a user’s experience. I iterated the design and usability three times, since in some occasions, usability metrics decreased in some versions if a redesign was focused on improving other parameters. The overall usability reached 175% from the first to the last iteration, and the advancement per iteration was 31%.

After completion of testing phase, a status meeting was held with the stakeholders to showcase the results of the testing phase and discuss if any final changes were needed from the stakeholders. As there were no other changes needed, I was able to move to the next phase.

Web accessibility
Aiming for an inclusive design, I incorporated the accessibility guidelines by including high contrast ratio, not relying on colour alone; clear labelling of forms, simple headings, consistent spacing, navigation and adding language options to include English and Tamil.

Develop

Project hand-over meeting
The stakeholders were briefed about the final developments to the project and thei rconcurrence was received. I managed user experience design deliverables (UIKit) and used Figma to hand off the design to the developer team after I made all necessary improvements to the prototype. Thereafter, I collaborated with the development team as and when required, to ascertain if the developed product efficiently showcases the design elements.