Persona development

The persona for this project was developed around the 'Researcher' e-commerce user type. This persona represents a user archetype that approaches online shopping with a highly meticulous and research-driven mindset. Individuals who embody the Researcher persona are characterized by their thorough investigation of products, driven by a commitment to making well-informed purchasing decisions

Empathy map

The empathy map is a valuable tool for understanding and visualizing both the implicit and explicit actions and behaviors of a specific user type. It plays a crucial role in uncovering user needs and prioritizing them effectively. By utilizing the empathy map early in the design process, I was able to gain deeper insights that informed the development of the user’s journey map.

Define Phase

Synthesizing Research Findings

In the Define phase, the first step was to synthesize the extensive research findings gathered during the Discover phase. This involved meticulously analyzing user behaviors, pain points, and insights from competitive analysis to identify common patterns and key user needs. By distilling this information, the core challenges that users face when navigating beauty and cosmetics websites were brought to light. This synthesis process was crucial in transforming raw data into actionable insights, which laid the foundation for the next steps in the design process.

Problem Statement

With a clear understanding of the user challenges, the next step was to develop a concise and actionable problem statement. The problem identified was that users often struggle with understanding complex ingredient information and navigating a cumbersome checkout process, leading to frustration and potential abandonment of purchases. The resulting problem statement was: "Users need a simpler and more intuitive way to understand product ingredients and complete their purchases without frustration." This statement became the guiding principle for the design phase, ensuring that all design decisions were focused on solving the most critical user issues.

Develop Phase

Journey map

The user journey map provides a detailed visualization of the entire experience users go through, from their initial awareness of the Aurora Beauties brand to the final stage of becoming loyal advocates. By mapping out each step, including the user’s thoughts, emotions, and actions, key pain points and moments of delight were identified. This process was instrumental in creating a design that not only meets functional needs but also enhances the overall user experience by addressing potential challenges and optimizing positive interactions. The result is a more intuitive and satisfying journey for users as they navigate the website.

Flow Chart

Creating a flowchart for the purchasing process is an excellent way to visualize and communicate the step-by-step journey a user takes when buying a product on the website. “Flowcharts are used to describe both back-end processes and user task flows in UX design.” Flowcharts are versatile tools that can be applied in various domains, including both back-end processes and user task flows in UX design.

Low Fidelity Wireframes

The wireframes were meticulously designed based on insights gathered from extensive research. A key priority was to ensure users could easily navigate through the site, particularly on product pages, where quick access to details and ingredients is essential. The design focused on enabling users to effortlessly scan each page, providing clear and accessible information about the product's texture, ingredients, usage instructions, and reviews to support informed decision-making. A thorough analysis of competitor websites, including Sephora, SkinFix, and The Body Shop, revealed that while easy access to product details is vital, it is even more crucial for users to understand the ingredients and their benefits to build trust in the brand and its products. Additionally, the use of icons was integrated into the design to enhance content readability, making the information more digestible and user-friendly.

Style Tile

The style guide for Aurora Beauties was crafted with the brand’s core values and target audience in mind, ensuring consistency across all design elements. The visual identity of the brand reflects a commitment to clean, cruelty-free, and sustainable beauty, with every design choice reinforcing these principles.

High Fidelity Wireframe

The high-fidelity wireframes for Aurora Beauties bring the design to life with a polished, detailed visual representation that closely mirrors the final product. These wireframes incorporate the brand’s color palette, typography, and imagery, ensuring a cohesive and aesthetically pleasing user interface. Interactive elements are fully developed, providing a realistic preview of how users will navigate the site, from browsing products to completing a purchase. The wireframes were refined through an iterative process, incorporating feedback to enhance usability and ensure a seamless shopping experience. Throughout, the design remains aligned with Aurora Beauties' commitment to clean, cruelty-free, and dermatologist-tested products.

Prototype

Interactive Prototype Testing

The primary objective of testing the project’s prototype using Maze was to evaluate the usability and user experience, with a focus on the efficiency and effectiveness of navigation within the design. The testing was structured around three key task blocks:

1. Purchasing Vitamin E Moisturizer from the Aurora Beauties website.
2. Returning to the moisturizer collection page.
3. Continuing to browse the website after completing a purchase.

Findings

The testing revealed some important insights. While users were generally able to navigate the prototype with relative ease, as indicated by positive overall user experience feedback, there were some challenges. The data analysis highlighted a few issues, such as a higher percentage of unfinished tasks and a notable misclick rate, which pointed to areas where users encountered difficulties. One significant insight was the need for a more step-by-step task design within the testing flow. The initial approach, which asked users to complete an entire purchase process at once, led to some confusion and misalignment of expectations. By breaking down tasks into smaller, more manageable steps, a more detailed analysis and assessment of user interaction could be achieved, resulting in a more comprehensive evaluation of the prototype’s usability.

Project Challenges

Throughout the project, there was a concern about the potential for personal bias in the design, particularly in the creation of empathy maps, personas, and user journeys. As this was a course assignment, access to real-world data, such as interview and survey results, was limited, which may have influenced the design decisions.

Solutions

To mitigate these challenges, a multi-faceted approach was taken, including:

• Utilizing diverse data sources to inform design decisions.
• Conducting user interviews and testing to gather more reliable insights.
• Embracing an iterative design process, where feedback was continuously integrated to refine the prototype.

Conclusion & Project Takeaways

This project has been a valuable learning experience, offering deep insights into the practical application of UX/UI design tools and methodologies. It highlighted the importance of user testing and the iterative design process in creating effective and user-friendly interfaces. While this project represents a significant milestone in the learning journey, it also serves as a reminder that the field of UX/UI design is dynamic and ever-evolving, with continuous growth and learning opportunities ahead.