Cross-platform Online Shop UX/UI Design

100DAS

 

Background

Introduction

100DAS has succeeded in China and was looking to expand its market to the United States. In 2016, our team launched its first website through the Shopify website template. However, it has many problems and constraints. So, in the following phases, we decide to abandon the existing template and redesign a cross-platform product that is tailored to the needs of our target customers.

Existing Website

What can be improved?

 
  • 100DAS(startup, Angle state, from 2015-2018)

  • E-commerce of affordable artworks and design products.

    100 Design and Artwork Shop(100DAS) is an online store featuring affordable artwork and design products aiming at introducing the beauty of art and design into daily life. The professional art editors select works to ensure high quality while also promoting aesthetics in everyday life. 100DAS is committed to breaking down the old pyramid in the art world by building a direct connection between the emerging artists and the public, in order to lead more people to touch and feel the charm of art and design.

  • It provides different types of layouts for mobile, tablet, and desktop with consistent visual elements. To better serve the needs of target customers, 100DAS is a unified concept behind various artworks and products showcased.

    Besides selecting affordable high-quality items by art editors, the users will also get a delighted and personalized shopping experience by an efficient filtering system and a creative collection arrangement.

Problems:
After the first website was launched, our analysis revealed the following problems.
1. it was difficult to stand out from competitors;
2. Users have trouble finding the target product;
3. Unclear brand impression;
4. Complete design did not inspire and motivate consumers to buy.

This required us to upgrade and sort out everything from the business model to the final product presentation.

First Shopify Website

 

Overview

 

Industry

E-commerce, Startup, Art & Design

Tools

Figma, Photoshop, Illustrator

Challenge

  1. Organize the enormous products;

  2. Help users to filter out the most irrelevant products in fewer clicks;

  3. Maximize customers’ buying opportunities without annoying them.

Duration

Project initiated in 2015. The design process started in summer 2016, and last for 4 months. The total hours is about 160 hours.

Goals

Team/Role

As the only designer in the team, I was involved in the whole process of product development and worked independently on all the phases of design: 100DAS Shopify web; Logo and branding materials; mobile app; responsive website.

  • Owned and shipped designs of all branding materials, social media posts, and other press materials;

    Initiated and led the entire UI / UX design process from user research to define features to final products;

    Empathized with users and understand their pain points, define user needs using problem statements, and come up with many ideas for solutions to those user problems;

    Conducted usability testing and synthesized insights. Iterated web and app functions to improve flexibility, efficiency, and business-IT alignment.

 

Goal Statement:

The product will make it simple and easy for users who have limited time and budget to buy artworks and design products by providing time-saving tools, creative arrangements, and clear layouts. It also aims to build trust and foster a strong relationship with users by making it possible for them to know and connect with the artists behind each artwork.

Problem Statement:

It is a burdensome and time-consuming experience to shop artworks, design products, and items related to aesthetic lifestyles like home décor and selecting gifts. Some factors need to be identified to understand this inconvenience. One is that users spend a lot of time browsing and get lost in the vast selection of products.

 

Design Outcome

Research

 

Research Plan

My Research Plan listed research goals, research questions, assumptions, methodologies, participants, interview guide, and timeline.

Assumptions

I hypothesized that the current art e-commerce business might have the following problems.

  • Most sites offer various options but limited ways to filter out unrelative ones. As a result, it may reduce the potential consumers’ desire to buy.

  • Buyers cannot see the artwork in person, which means they cannot ensure the quality and authenticity in some cases.

  • Why do artworks often not have fixed prices? It might be a problem for the general public.

  • Without professional knowledge, and skill, art may be hard to understand. Therefore, its value is underestimated. 


Research Goal & Methodologies

 

Secondary Research

There is a greater chance of commercial success in offering artwork and design products under $500 to young women with purchasing power as this fills the gap in the market.

Competitors Analyst

I analyzed 3 direct competitors and 2 indirect competitors. Complete competitive research can be viewed Here.

  • Market Demand and Prospect

    The public has entered the early stage of pursuing individual life quality and participating in the art and design market. China has a vast market. According to McKinsey's 2011 data report: by 2020, the annual income of 51% of China’s population will reach the range between 10 thousand and 20 thousand RMB. These people are more like to spend money than their previous generations; They are willing to pay 40% of their income. However, in the big market of art dealing, we still need to specify our target user group and price point by market segmentation.

Conclusion & Provision

Empathy Research

It is an online shopping solution with a convenient return channel in which the purpose of design is based on home decoration, gifts, and collections

3 participants who are closed to our provisional persona are selected. I interview them about their shopping experience of artworks in the past with several open-ended questions.

  • Empathize with users;

    Understand their needs;

    Find out the pain points of users;

    Inspire new design directions.

  • I used google forms to create screeners for recruiting participants. Based on the interviews, we would like to collect more data to understand what we need to include and what we need to avoid. We conducted with 20 young professionals with comparatively strong purchasing power, and came up with the following findings:

    Home décor is the biggest reason to purchase an artwork besides art investment.

    80% of participants would not buy artwork above $1000 online; 60% would not buy artwork above $500 online.

    In the process of finding a product, most participants said they will lose their patience after browsing 100 items or more.

  • Time-consuming experience

    Validated. 2/3 participants think they have been provided more options than they need. It is frustrating when they spend enormous time but find out no ideal product.

    Hinders of the online art trade

    N/A. Not enough participants expressed that they are hesitant to shop online. However, one participant mentioned he prefers to shop online.

    No clear sense of pricing

    Validated. 3/3 participants said high prices would keep them away.

    Knowledge barriers

    Validated. 2/3 participants share their thoughts that they only buy things they can understand, or interest them.

All the notes are summarized and organized by miro and can be viewed here.

We compiled the entire research process into a research report, and extract insights to guide subsequent design.

What did my participants say?

Insights

If the price is not exceptionally high, even if you can not see the actual product, as long as there is a convenient return channel, online shopping does not affect the public's purchase of art.

The target customer is the working class who love design and art.
They recognize the value of art and design and buy art and design products for different reasons. The most common reasons are home decoration, gifts, and collections.

Findings & Recommendation

Empathy Map

 

Persona

 

Jane is an interior designer who needs an intuitive website and app to buy home decorations efficiently for her clients because she has a constrained schedule and limited budget.

User Story

 

Ideation

Goal Statement

POV: Time-consuming experience
HMW: How might we design a product that helps the users to find, highlight, or buy items efficiently?

POV: No clear sense of pricing
HMW: How might we build up trust with customers on pricing, laminate their concerns and insecurity?

POV: Hinders of the online art trade
HMW: How might we ensure users that shopping on 100DAS is trustworthy?

POV: Knowledge barriers
HMW: How might we make the shopping experience fun, easy, and engaging?

Best Practice

Before diving into wireframing, I researched the current standards for online shopping. Then, I thought about the pros, cons, and areas for innovation for each design pattern and what would make sense based on user research.

  • It is called “Social proof”. it can be a powerful thing to have a “Favourites” or “Top Items” section. Another idea is if you had a “Customers Also Bought…”. Another way is to include a reviews feature, or allow people to filter by “most popular products”.

  • It is called “Social proof”. it can be a powerful thing to have a “Favourites” or “Top Items” section. Another idea is if you had a “Customers Also Bought…”. Another way is to include a reviews feature, or allow people to filter by “most popular products”.

  • Having too many options will kill your conversions. It is useful is with filters and sorting. Reducing the number of items in one page to a measured and managed number of possible options would infinitely improve the customer journey.

 

Challenge & Solution

How can users filter out the most irrelevant products in fewer clicks?

 

Expanded the navigation bar to reduce the clicks.

 

How can we maximize our customers’ buying opportunities without annoying them?

 
 

Site Map

I choose a hierarchical structure to organize my content. By checking out this map, each product can be organized into different categories.

 

User Flow

 

Sketches & Wireframes

Crazy Eight Sketches

 

Mid-Fidelity Wireframes & Prototype

Usability Test

Prepare for the Usability Testing

I wrote a user testing plan to define what and why I want to test and get prepared for the test.

  • Then conducted both remote usability testing with 5 participants and created transcripts for each participant based on my observation of their interaction with the prototype. This phase is simply a test of the interfaces of mobile devices.

Usability Testing Report

After the first round of tests, the task completion rate is 80%. all users' comments were collected and graphically mapped back onto the prototypes.

Iteration

It is a more intuitive way for users to check out by the inclusion of more payment options, drop-off inputs, and a clear indication of steps.

A pop-up window on the same page reduces the number of steps, and a text next to the collection icon eliminates possible confusion.

Design

Align visual elements across boards.

Branding Material

Design System & UI Kit

Key Pages

 

Homepage: a design that addresses the different needs of shoppers.

Collection page: lays the groundwork for the next purchase.

Account page: provides an engaging experience through connections.

Product Page: tailors a personal list through a strong filtering feature.

Check-out Page: incorporate various needs, remove barriers, and creates a process of accessibility.

 

Next Steps

Conduct follow-up usability testing;

Talk with engineer team to see technical feasibility;

Dive deeper into developing more nice-to-have features. These features would add more characteristics to the business and increase competitiveness.

 

Takeaway

Overall, this project taught me how to design across numerous media touchpoints and develop a product strategy aligned with a company's brand and concept.

At the same time, I learned about online shopping habits. Also, I studied the strategies of different e-commerce companies to understand how they cater to users' needs and create opportunities through design.

Last, when facing different needs, how should we catch the focus and find the balance to give a user-centric design that meets the business objectives of the company.

Next
Next

iDict Visual Dictionary Education App