Aurora Beauties Website

“Aurora Beauties, a UX/UI and website design project, from concept ideation to prototyping and testing.“

Project Overview

Products pages are critical in success of a brand’s website online store. To make an informed purchase, customers need to have access to product information and details, images, reviews, etc. Additionally, a user-friendly and well-designed checkout process is crucial, to ensure that customers can complete their purchase effortlessly.

Project Details

Phase 1: Research & analysis

Understanding the industry, target audience, and competitors in the cosmetics market.

Brand exploration

Brand exploration helps to reflect brand values in design.

  • Organic colors of nature, energetic
  • User friendly experience
  • Help consumers make conscious choices
  • Brand Values:
  • Cruelty Free
  • Dermatologist Tested
  • Clean
  • Sustainable packaging

User needs assessments

  • Significant shift in consumer preferences towards brands that align with values such are cleanliness, cruelty free practices, and sustainable packaging.
  • Users are increasingly attentive to product ingredients. Transparency in highlighting and listing the key ingredients is appreciated among consumers
  • Competitors within industry are incorporating these values into their design.

Persona development

I created the Persona for my project based on “Researcher” e-commerce user type. The Researcher persona represents a user archetype who approaches online shopping with a meticulous and research-driven mindset. Individuals embodying the Researcher persona are characterized by their thorough investigation of products and their commitment to making well-informed purchasing decisions.

Empathy map

Empathy map helps to understand and visualize the implicit and explicit actions and behaviours of a particular types of user.  It helps to better understand users needs and prioritize them. As I used it at the initial stages of my design process, ithelped me in developing the user’s journey map.

Journey map

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 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.

Flow Chart

I created a flow chart to visualize the process of purchasing a vitamin E moisturizer from the website. Creating a flowchart for the purchasing process is an excellent way to visualize and communicate the step-by-step journey a user takes o complete specific tasks, such as making a purchase on an e-commerce website or navigating through an app. They are used to describe both back-end processes and user task flows in UX design.

Wireframes

I designed the wireframes based on the insights gathered from my research. It was crucial for users to easily navigate through pages, especially on each product page, and to quickly access product details and ingredients. My focus was on ensuring users could effortlessly scan the page to obtain detailed information about the product's texture, ingredients, usage instructions, and reviews to make informed decisions. Prior to this, I examined competitors' websites such as Sephora, SkinFix, and The Body Shop. From this analysis, I discovered that while providing access to product details is important, it's even more critical for users to comprehend the ingredients and their functions to trust the brand and product. Additionally, I found that using icons enhances the readability of the content, so I incorporated this feature into my design.

Style Tiles

High Fidelity and Interactive Prototype

Phase 3: Testing

Interactive Prototype Testing Results

The primary objective of testing the project’s prototype in maze was to assess the usability and user experience of the prototype, focusing on the efficiency and effectiveness navigation within the design prototype.

3 key tasks blocks

  • Purchasing Vitamin E Moisturizer from Aurora Website
  • return to moisturizer collection page
  • Continue browsing the website after purchase

Findings

  • Lack of step-by-step task design
  • Expectation misalignment and confusion
  • Increased duration of testing
  • Lack of interactivity in specific elements

Data Analysis

Key findings from the maze report reveals that users were able to navigate through the prototype with relative ease, indicative of a positive user experience. However, based on the unfinished mission percentage and misclicks rate, it is revealed that a few participants encountered challenges during their navigation. Although the design could improve, an important insight that emerged during the test was regarding the test flow and questions. The requested tasks in each block should change from a complete purchase process to a step-by-step approach.  This adjustment aims  to  provide  more  detailed  analysis and assessment  of  user  interaction  with  the  prototype, ensuring  a  more comprehensive evaluation of the prototype’s usability.

Project Challenges

As a UX/UI designer, I am concerned that some information used in creating empathy map, persona, and user journey might introduce personal bias into my design. Since it was a course assignment, I could not have access to real data such as results from interviews, surveys, etc.

Solutions

  • Diverse Data Sources
  • User Interviews and Testing
  • IterativeDesign and Feedback

Conclusion

As a student undertaking this project, the journey has been a rich learning experience in navigating the intricacies of a comprehensive UX/UI project. It provided valuable insights into the application of various tools, resources, and the practical utilization of research and acquired knowledge. While this project marks a significant learning milestone,it also underscores the realization that there is an ongoing journey of growth and further learning ahead. I look forward to continuously expanding my skills and insights in the dynamic field of UX/UI design