Luhan — Portfolio

After the website was launched, we successfully onboarded over 20 artists to the platform, and received 50+ applications. These creators have actively utilized the platform to build and foster their communities and host a variety of events.

Project Overview

What is the project

Our e-commerce platform serves as a unified hub where fans can easily discover and purchase branded merchandise, as well as explore and register for upcoming events by their favorite independent artists.

By centralizing these elements, we aim to simplify access and enhance the fan experience, fostering a deeper connection between fans and artists through streamlined interaction and engagement.

The Problem

Limited Visibility and Access for Fans

Fans of independent artists often struggle to find a centralized location where they can access all content, merchandise, and event information related to their favorite creators.

Complex Merchandise and Event Management for Artists

Independent artists frequently face challenges managing the logistics of merchandise sales and event planning, especially when they lack the resources of larger entities.

Project Goal

How might we create a centralized e-commerce platform that simplifies fan access to merchandise and events, enhancing the interaction between fans and independent artists?

The Solution

Streamlined E-commerce for Improved Fan and Event Engagement

Guided by user insights, we've created a simplified e-commerce platform that centralizes artist merchandise and events, offering streamlined navigation, intuitive pages, a seamless checkout, and a cohesive design to boost engagement and foster closer fan-artist connections.

Timeline

I started the project with two other product designers in May 2022, and for about 5 months, I took the ownership of the design system and collaborated with the team to enhance the navigation efficiency and aesthetic coherence of the website.

Initial Ideation

Design Goal

A clearer, user-friendly navigation system that mirrors familiar browsing patterns.

Engaging with fans and independent artists to understand their needs during the purchasing of merch and events provided valuable insights.
Here are the key takeaways:

🧭 Streamlined Navigation

Minimizes clicks and intuitively guides them to their goals.

🔍 Detailed Information

Detailed, accessible content is crucial, especially in areas like artist bios, merchandise materials, and event descriptions.

⚙️ Seamless Interaction

A fluid experience that seamlessly connects different stages of their interaction, from initial login to final confirmation.

Information Architecture

Based on these insights, we crafted an information architecture detailing what users need at each step of the events and merchandise purchasing process.

Purchase Merch

Purchase Events

Navigation Design

Testing & Iterations

How do you prefer to navigate our website for events and merchandise?

We tested two navigation designs: one unified landing page and another with separate pages for events and products. User feedback favored the segmented layout, noting it matched their browsing habits and made navigation simpler.

Option 1

unified landing page

Option 2

separate pages for events and products

Testing Insights

How do users prefer to navigate our site for events and products?

Familiar Layout

Testers liked the segmented navigation as it resembles other well-known e-commerce and event sites they use.

Quick Access

Users appreciated the separate sections for events and products, which sped up finding what they're interested in.

Reduced Complexity

The clear division between products and events simplified navigation, enhancing usability and the overall site experience.

Familiar Layout

Testers liked the segmented navigation as it resembles other well-known e-commerce and event sites they use.

Quick Access

Users appreciated the separate sections for events and products, which sped up finding what they're interested in.

Reduced Complexity

The clear division between products and events simplified navigation, enhancing usability and the overall site experience.

Website Navigation

Intuitive Navigation Shortcuts - Effortless Access and Intuitive Shortcuts

Challenge

Users need quick and easy access to their favorite sections without being overwhelmed by complex site layouts, which can hinder their shopping and browsing experience.

Approach

To enhance user accessibility, we implemented a dual-panel side menu system. The primary panel acts as a shortcut list, prominently displaying tabs such as "Trending," "Upcoming," and "By Artists" in the hero section for quick access. This allows users to navigate directly to their areas of interest with minimal effort. Additionally, the side panel serves a dual purpose by also housing the main menu, enabling seamless switching between event and merchandise pages.

Event Page

Merch Page

Checkout Process

Optimized Checkout Design - Streamlined for Desktop and Mobile

Challenge

Users often experience confusion and frustration during the checkout process due to unclear progress indicators and cluttered information input areas, which can lead to abandoned carts and decreased conversions.

Approach

We redesigned the checkout experience for clarity across devices. The desktop version features a three-section layout: progress and steps overview, a central scrollable input area, and a real-time pricing calculator on the left. For mobile, a slide-out tray presents cumulative costs, streamlining the view to show essential information only, enhancing usability.

Desktop

Review Cart

Shipping Address

Payment Method

Order Confirmation

Mobile

Review Cart

Order Summary

Payment Method

Order Comfirmation

Responsiveness

Responsive Design Optimization - Seamless Transition

Challenge

Users switching between desktop and mobile devices often face inconsistencies in layout and functionality, which can disrupt the shopping experience and lead to user dissatisfaction.

Approach

Key features like navigation bars, product grids, and checkout processes are optimized for touch interactions on mobile, and cursor-based interactions on desktop, ensuring that all users, regardless of device, experience a consistent and intuitive interface.

Light and Dark Mode

Adaptive Display Modes - Enhancing Accessibility with Light and Dark Options

We integrated light and dark modes to accommodate diverse user preferences. Users can choose their preferred setting to enhance visibility and reduce eye strain under various lighting conditions.

Mobile

Desktop

Design System

Component Variants

We have developed different component size variants to cater to specific needs.

Large cards are prominently featured on the homepage to grab users' attention, whereas medium and small cards are employed on the shop all page to facilitate quick and efficient browsing.

Large Card

Medium Card

Small Card

Large cards are prominently featured on the homepage to grab users' attention, whereas medium and small cards are employed on the shop all page to facilitate quick and efficient browsing.