Roles and Responsibilities
Roles: Project Leader, UX Designer
Responsibilities:
User Research, Internal testing and User Testings
UI/UX Design, Application Prototyping and Iterations
Delegating tasks to members of the team
Upholding the project's vision and motive
Overview
EmiCakes is a bakery known for its specialty in durian and eggless cakes. In addition to its social media presence, their website serves as a platform for users to explore and discover the full range of their available products.
Individual Research
We began by independently exploring the website and documenting any issues or observations encountered throughout the experience. These were captured using an empathy map to better understand the user's thinking, feelings, and pain points.
I evaluated the website from the perspective of a user purchasing a chocolate cake for a friend’s birthday. Throughout the evaluation, I recorded my thought process and actions to identify any usability gaps and opportunities for improvement.
To further understand the common practices of featuring cake products in websites, a competitive analysis was conducted across comparable bakery websites such as Lady M, Polar Puffs, Cat & the Fiddle, and Baker’s Brew to observe how cake brands organise and categorise their products.
Problem Statement
While Emicakes' website showcases a huge variety of pastries and delightful products catering to their consumers, we realised the website is not as user-friendly and does not provide enough intuitive functions to the users frequenting the site itself.
Some of the main problems are as follows:
Challenging navigation and limited filtering options, which increase the effort required for users to search for and compare products.
Inconsistencies across page sections, disrupting the flow of experience for users.
Unclear functions and messaging, leading to confusion and increased cognitive load.
Goal
Revamp the navigation dropdown to clearly present each product categories, improving discoverability and ease of browsing.
Reorganise the landing and product pages to establish a clearer hierarchy and a more consistent user flow.
Enhance key sections with additional details and functions to guide users and reduce uncertainty during decision-making.
User Persona
We developed two user personas with distinct goals to guide the redesign process.
The primary persona represents a frequent Emicakes visitor, while the secondary persona reflects a first-time user browsing the Emicakes products on their website.
This provides us with a focused view on the needs of both returning and new visitors throughout the redesign. In addition, given current online shopping trends, youths and working adults are more likely to browse and purchase products digitally. As such, we identified these groups as the primary target audience for this project.
User Journey
After developing the user personas, we created a user journey map for Sara, the project’s secondary persona. The objective of this was to better understand the thought processes, behaviours, and decision-making patterns of first-time users when navigating the website.
By mapping Sara’s journey, we can identify potential pain points, struggles, and sources of frustration encountered. These opens up opportunities to improve clarity, usability, and overall user flow for first-time users.
User Task Flow
Low Fidelity Prototype
In the first iteration, we prioritised redesigning key areas of the website, including the landing page, navigation bar, product listing page, and product information pop-ups. This is crucial as they are critical touchpoints affecting discoverability and decision-making.
A filter pop-up was also introduced to improve product browsing efficiency, allowing us to evaluate its effectiveness during subsequent user testings and refinement.
User Feedback - Moderated User Testing
For each prototype, we conducted moderated usability testing sessions to gather qualitative feedback from participants and identify areas for improvement. Participants were asked to explore the prototype and complete key tasks while sharing their thoughts and reactions.
Following each session, participants are required to complete a post-test survey to capture any additional feedback which may validate our findings and provide iterative refinements to the subsequent prototypes.
Mid Fidelity Prototype
After receiving the feedbacks from our user testers, we identified key areas for improvement and produced a second iteration.
As we transitioned toward a more interactive experience, we created a mid-fidelity digital prototype based on the improved iteration, enabling us to further evaluate usability and interaction flow in subsequent user testing.
After conducting the second round of user testing, we implemented additional refinements to address remaining pain points and improve overall usability. These changes were validated through a third iteration of user testing before finalising the design.
