AboundSenses

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

BACKGROUND

Where the Story Begins

In 2022, three art lovers from Hong Kong were on a journey through China, discovering extraordinarily talented but unnoticed artisans. Driven by the unrecognized artistry of the craftsmen, they established AboundSenses, a platform crafted to globally spotlight these obscured talents.

AboundSenses strives to create an environment where art is not just observed but deeply experienced. Our team was tasked with designing the platform's visuals and functionality, ensuring that every element reflects the depth and passion of the art it represents.

Unfortunately, the company closed the project before we could finalize the design. Nonetheless, the collaborative experience with the client has allowed us to present the project as a well-thought-out concept, setting a solid foundation for future initiatives.

Overview

Our goal was to expand exposures of emerging Chinese artists with the use of technology, moving beyond the constraints of offline buying. Our solution is to simplify and enhance the online art shopping experience, reducing decision fatigue in the art selecting process.

Problem

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

Challenges

Our primary challenge is understanding initial client expectations and ambiguous business rules. We address this through workshops and communication, creating flexible solutions for unclear rules, and designing current and future versions to adapt as resources allow.

Role + Process

I researched on the market for art buying, with the main focus on oversea online purchases. During the process, I created sitemaps, user flows, design system, UI designs, iterating them based on user insights. I also tackled the challenge to minimize difficulties in customer decision-making for online purchasing that lacks real-time customer services.

Target Audience

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

Design Team

Edward Tsai, Emily T.

IN A HURRY? JUMP TO:

Research Explore Solution

Expectations and Deliverables

PROJECT SCOPE

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

Research

Defined problems, identified issues, and conducted survey, interviews and testings

Design

Designed solutions, IA, wireframes, and design system

Constraints

The website is expected to be created with a 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 aims 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?

Generating Solutions Through 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 services

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: Need Even More Breathing Space

❌ Before: Confusing layout and hierarchy

Unclear if filters only apply to the current or all categories in the tab
Hard to focus when looking at different images all at once
The images in the bubble navigation are distracting

✅ After: Clear hierarchy with breathing space

Filters and sorting should be able to filter the categories in the tab menu, so they should have a higher hierarchy
Expand white space to minimize visual clutters from varied images
Changed the bubble navigation to text menu for visual clarity and bring 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 Comparison: 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

SOLUTIONS

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

TAKEAWAYS

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

Pexels

Figma

Adobe Creative Suite