E-Commerce UX Reimagined

A Journey to 30% More Sales and Enhanced Engagement!

Aurora Studio Case Study Prototype Preview

Project Overview

Aurora Studio, an inspiring e-commerce website, curates products featuring artwork from 40+ global artists, committed to integrating art into people's everyday lives while supporting the creative community. With a unique profit-sharing model, Aurora nurtures artists' talents and expands their reach. Our mission is to craft an enchanting user experience, allowing seamless exploration of a diverse product range, and empowering users to connect deeply with captivating artwork that resonates with their soul.

My Role
Lead UX Designer
Key Contributions
User Research
Market Research
Concept Ideation
Wireframing
Prototyping
Visual Design
Interaction Design
Usability Testing
Project Management
Tools
Figma, OptimalSort, Notion, Miro
Team
2 UX Designer
2 UX Researcher
Duration
5 Weeks

Challenge

How can Aurora Studio enhance customer engagement and foster growth?

Aurora Studio's current website suffers from usability and communication issues, leading to high drop-off rates during browsing and hindering users from finding products with their preferred designs. The lack of seamless navigation and limited awareness of Aurora's mission to support artists and share profits also impact customer engagement. To succeed in the redesign, our focus is on building trust, enhancing user experience, and fostering growth through a fun and easy browsing experience, ultimately fostering brand loyalty in the competitive e-commerce landscape.

Key Insights

The research synthesis reveals three key crucial areas to focus on for enhancing Aurora Studio's e-commerce platform.

Key Insights#1: TrasnparencyKey Insights#2- Usability
Key Insights#3: Value Proposition

Solution

Revitalizing Aurora Studio's E-commerce through prioritizing Transparency, Usability, and Elevating Artistic Connections

Our solution, guided by key insights from the research phase, centers on a user-centric e-commerce platform. In the redesign, we aim to instill confidence in users, facilitate seamless browsing, and amplify Aurora's mission of supporting artists and sharing profits.

Below, we present the significant changes applied to the redesigned website, offering a glimpse of the final result. Subsequently, we will delve into the iterative design and testing process, showcasing how these changes evolved from sketches to low-fi, mid-fi, and finally to high-fi, delivering a user-centric experience.

New Home Page

Redesigned Home Page

1

By hovering on the icons (t-shirt, hoodie, sweatshirt) beneath artwork users are able to visualize how artwork appears on different products, reinforcing Aurora's mission and providing an engaging and user-friendly browsing experience.

New Shop Page

Redesigned Shop Page

1

Changing the 'gender' filter to 'fit' to better communicate the unisex nature of almost all products in Aurora's shop, enhancing the transparency, and aligning user's expectation of a product with reality.

2

Showcasing color options directly on the browsing page ensures users are aware of the various color choices available for each product, eliminating the need to visit the product detail page for this information.

3

Established a uniform style for product photos, featuring consistent backgrounds and styles, streamlining user navigation, reducing distractions, and enhancing the overall user experience.

New Product Detail Page. 1

Redesigned Product Detail Page#1

1

All important information and options are now conveniently placed at the top of the page, reducing the need for unnecessary scrolling and making it easier for users to see all product info at once.

New Product Detail Page. 2

Redesigned Product Detail Page#2

1

The product detail page includes a single box for all essential information, such as size chart, shipping policy, reviews, and price transparency, presented in easily discoverable tabs.

2

Immediately below the product information, the page recommends the same artwork on other available products, allowing users to explore various options without leaving the page.

New Artist Page

Redesigned Artist Page

1

Artists' social media links, website bios, and collaboration duration with Aurora are prominently displayed, allowing users to connect with artists beyond Aurora's platform and gain insights into their creative journey.

2

The artist page now offers an immersive gallery experience, showcasing artwork with the same interactive product presentation as on the homepage. Users can hover over icons to see how the artwork appears on different products, providing an engaging and seamless browsing experience.

Now that we have glimpsed the final result, let's take a brief journey through the steps that led us here.

Research

β€œI like things to be quick and smooth when shopping online. It's frustrating when they're not.”

Our research process started by evaluating the existing website using heuristics and observing 10 users as they navigated the site. We asked them to share their thoughts aloud while interacting with it. [view journey map]. These valuable insights revealed areas that required improvement in terms of efficiency, satisfaction, and ease of use.

Heuristic evaluation results

Voices of the users

Combining usability tests with user interviews, we engaged the same 10 users to explore their broader experiences with online shopping, especially regarding unique products like graphic clothes. Analyzing and categorizing their shared experiences and opinions revealed four recurring trends, expressed in "I statements" as follows. [view user persona]

User Interview Takeaways#1User Interview Takeaways#2User Interview Takeaways#3User Interview Takeaways#4

Market Landscape

During the research phase, we conducted a comprehensive feature inventory on both direct and indirect competitors.

Competitor and Comparator Analysis

This analysis allowed us to identify essential features for a successful e-commerce platform. Additionally, we discovered the significance of Aurora Studio's unique curation and value proposition. This underscored the importance of showcasing their brand characteristics and mission in the website redesign, creating a distinctive user experience. The full research deck can be found here.

Evolving Design | Shaping Solutions with User Insights

Our design process began with creating an MSCW chart, effectively prioritizing features for the Minimum Viable Product (MVP). Building upon this foundation, we focused on the new information architecture by crafting an intuitive sitemap and well-defined user flows, all accessible through hyperlinks for further exploration.

πŸŒ€ Laying the foundation | crafting the initial low-fidelity prototype

The next phase delved into sketching, design studio facilitation, and refining the design to create low-fidelity (lo-fi) wireframes.
Below is an example of how initial ideas for the product detail page were merged together and shaped into low-fidelity wireframes.

Design Studio to Wireframing

πŸ“ŒUser testing | round 1

In the first round of usability tests, we aimed to validate the low-fidelity prototype's effectiveness in addressing key insights: transparency, usability, and value proposition. While the results showed progress, we identified areas for improvement in ensuring clear communication and enhancing the overall user experience.

πŸŒ€ Refining the vision | developing the mid-fidelity prototype

Moving forward, the next iteration focused on enhancing transparency through clear communication, as well as improving the usability through improving visibility and terminology of filters.

Low-fidelity wireframes to mid-fidelity wireframes

The page description has been added to help the users understand what the page is about.

Most clothings in the store are unisex, so we replaced the gender filter with β€˜fit’ and added a little explanation about it above the filter options.

Enhanced the visibility of categories by increasing the text size.

Users were confused about the terminology of "theme," so we changed the wording to "subject."

πŸ“ŒUser test | round 2

During the second round of usability tests, we made significant strides in improving usability and transparency by incorporating essential e-commerce features and ensuring clear communication about the products, including details about quality, size, and fit.

Identified areas for improvement: navigation, and communication of Aurora Studio's unique value proposition.

πŸŒ€ Finalizing the vision | unveiling the high-fidelity prototype

In the next round of iterations, we prioritized improving navigation from the homepage and enhancing communication about Aurora Studio's value proposition, which centers around supporting artists.

mid-fidelity prototype to high-fidelity prototype

To ensure users could easily find how Aurora Studio supports artists, we created multiple clear pathways. We included "price transparency" in the footer, the info box on product detail page, and our journey section. This approach allowed users to navigate the website and access this information seamlessly.

Before usability test and after usability test, price transparency location

πŸ“ŒUser test | round 3

In the third round of usability tests on the high-fidelity prototype, we successfully addressed the usability issues found in previous tests. Users navigated the website with greater ease and efficiency.

However, we noticed that while the art-centric product presentation on the home page provided an engaging and intuitive understanding of the brand, it required further refinement for smoother interactions. We aimed to reduce distractions and enhance the engaging aspect of the artwork showcase. By allowing users to connect with the artwork first and then explore the products featuring that artwork, we believe this unique feature will contribute significantly to the user experience once optimized.

Homepage Interaction Design Gif

Style Guide | a unified visual experience

To maintain a consistent and coherent visual identity, we defined a style guide based on the color palette provided by Aurora Studio. This ensured that every element across the website adhered to a unified design language, creating an engaging and harmonious user experience.

Style Guide- Color
Style Guide- Typography

Project Conclusion

In just five weeks, our successful website redesign focused on elevating user experience and embodying Aurora Studio's mission. Key insights drove improvements in transparency, efficiency, and value propositions, which led to 30% more sales. This marks the start of a new journey, with ongoing refinement based on user feedback, ensuring a brighter future for Aurora Studio.

Check out the final prototypes here!

Restrospective

As the co-owner and product designer, I initiated this project to better understand our users and create a user-centered approach for growth. While the complete redesign may take time, the project allowed us to make research-based changes on our current platforms. I have been improving the mobile version, applying lessons learned, and conducting ongoing testing for optimization. In hindsight, I would have considered Shopify constraints earlier and focused on creating a feasible MVP for smoother implementation. Nonetheless, the project has been invaluable in refining our platform and laying the foundation for future enhancements based on user feedback.

Key Learnings

βœ… Rapid Hypothesis Testing: Testing assumptions early for informed decisions.
‍
βœ… Embracing Constraints: Balancing ambitious ideas with practical implementation.
‍
βœ… Collaborative Ideation: Enriching solutions through diverse perspectives.

Other projects

Melodynest to inspires prototype

Prioritizing Impact in Two-Way Marketplace

Case Study
Prototype Preview

Research-driven Pivot

Case Study

Let's get in touch!

I love connecting, creating, and sharing with people.