Overview Research HMW Explore Solution Takeaway

AboundSenses

Designing an effortless online art shopping experience for an early-stage startup

My Role

Product Designer (UI UX Design, Prototype)

Design Team

Edward Tsai
Emily T.

Timeline

Mar 2023 - Oct 2023

Background

Where the Story Begins

In 2022, 3 art lovers from Hong Kong founded AboundSenses after discovering talented but overlooked artists in China. The platform aimed to bring global attention to their hidden talents. Our team was tasked to design the platform’s visuals and functionality, reflecting the depth and passion of the art it represents.

Unfortunately, the project was closed. Nonetheless, the collaborative experience with the client was successful, leading to a well-thought-out concept which set a solid foundation for future initiatives.

OVERVIEW

What Is the Project About

Our goal was to promote emerging Chinese artists with technology, moving beyond offline limitations. Our solution is to simplify online art shopping to reduce decision fatigue and make art more accessible.

Problem

While e-commerce aims to make emerging Chinese art more accessible to foreigners, shopping artworks online complicates the decision-making for customers.

Challenges

Our primary challenge is understanding initial client expectations and ambiguous business policies. We address this through workshops and communication, creating flexible solutions for unclear policies with various designs to adapt as resources allow.

My Responsibility and Process

I conducted market research for art purchases, focusing on oversea online shopping. In the process, I created sitemaps, user flows, style guide and UI designs, iterating based on user insights. I also tackled the challenge to minimize decision-making for online shopping that lacks real-time customer service.

Target Audience

Art enthusiasts and collectors, outside of China, who wishes to explore and purchase artworks made by local Chinese artists.

PROJECT SCOPE

Expectations+Deliverables

Designing an e-commerce website from zero to one, starting with branding, research and UIUX design.

Branding

Established brand accent, brand message, color theme, logo

Design

Designed solutions, IA, wireframes, and design system

Constraints

The website is expected to be created with no-code platform, so we could only include basic e-commerce features.
The platform is initially not for artists to upload their own works since the stakeholders wish to be in charge of selecting the types of work.

SOLUTION OVERVIEW

A Quick Glance at the Final Designs

The designs aim to enhance the online art shopping experience by implementing minimalistic styles with clear typography and white space.

RESEARCH + ANALYSIS

How Did We Get There

Since artwork purchasing, often driven by personal and emotional factors, tends to be more complex than other products, we found that most negative experiences centered on difficulties in assessing artwork or making purchasing decisions due to certain platform features. These difficulties could be summarized as decision fatigue.

By analyze the information from the survey and interviews with an affinity map, we reached the following insights:

Key Insight

While users love learning backstories of artists and their creative process to feel a connection with the artwork, they often face visual and cognitive overload after browsing through multiple products.

HOW MIGHT WE...

…reduce decision fatigue for users when they purchase artwork online while promoting local Chinese artists?

Finding Solutions With User Journeys

DEFINE

By mapping out the user journey of a typical online art shopping, we generated potential solutions for the identified pain points.

In summary, our solutions emphasize on using clear visual layouts and intuitive filters to help users efficiently search and view key information from extensive options.

Comparative Analysis

After defining our solution approach, we performed a comparative analysis of major market players in artwork purchasing, identifying their strengths and weaknesses.

Common Pros

Minimal colors and motions
Hover effects with close-up view on image cards for product lists
Highlight credentials, artist CV, etc.

Common Cons

Limited space for stories of artist and artwork
Insufficient white space with visual clutters
Hard to compare varied artwork details
Limited access to immediate customer service

EXPLORE

Roadmap to the Final Deliverables

We explored several ideas based on our insights and analysis. After locking down the initial deliverables with stakeholders, we conducted testings to finalize some design decisions, refining the outcome.

1. Product List Page: Even More Breathing Space

❌ Before: Confusing hierarchy

Unclear if filters only apply to current or all tab categories
Hard to focus when looking at various images altogether
Tabs with image is distracting

✅ After: Clear hierarchy with breathing space

Filters and sorting apply to categories in the tab, so they need a higher hierarchy
Expanding white spaces to minimize visual clutters
Tab menu with only text shows visual clarity and brings focus on showcasing art pieces

2. Filters: User-Friendly Tooltips

❌ Before: Unclear options

Not all users are familiar with the art terms under the categories

✅ After: Helpful hints with tooltips

Included tooltips with images, providing more information to each filtering option for smoother user experience

3. Side-By-Side Compare: Sticky, Scrolling Region

❌ Before: Confusing CTAs

While the original idea was to have easier access to CTA when scrolling down the table, users got confused by multiple CTAs

✅ After: Limiting CTA with scrolling regions

To maintain optimal usability, the detailed section is changed to be scrollable within the table while the product section is fixed for easy access to CTA

Final Designs and Key Features

SOLUTION

1. Product List Page With Filters

Minimalism with white space, balancing out the potentially visual complexity of different styles of artworks
Filter opens up as an overlay, ensuring sufficient breathing space
Since art is decorative and often evokes emotions, options to filter tones, scenes, sizes and orientations are included for an easier search

2. Side-By-Side Comparison

Easy to compare, making informed purchasing decisions without the hassle of going back and forth between pages
The midpoint modal lets users edit up to three items before viewing the details, preventing cognitive overload
Introducing “Display Suggestions” to accommodate the absence of expert consultant or real-time service of the online environment

BONUS FEATURE

What if We Could Implement AI Features

While communicating with stakeholders, it was clear that this platform would initially be built with a no-code website builder, so they wanted to keep everything simple.

However, I feel that the experience is missing an opportunity to reach its full potential. I think customers should have access to real-time services and consulting for optimal shopping experience. Wishing it could be implemented in the future, I designed a smart chat where users could treat the AI as their personal art consultant, providing an innovative experience.

Watch the Experience

Elements Throughout Our Design

APPENDIX

Site Map

Design System

TAKEAWAY

What We Gained From the Experience

Although the project did not launch, we gained invaluable experience by guiding the client from an abstract idea to detailed design decisions.

In the process, we faced challenges in estimating project scope, timelines, and leading discussions, which led to some burnout and chaos.

However, this experience has taught us valuable lessons in ensuring smoother process for future projects. We are now more confident in managing project operations and communicating effectively with clients.

Resources