About
E-commerce website featuring artisan products
View prototype

Role

UI/ UX designer, Researcher

Timeline

5 weeks (20h/ week), November 2020

Tools

Figma, Adobe Illustrator, Adobe Photoshop

01

The plan

02

The process

03

The design

04

The findings

01 The plan

Core proposition

During the COVID-19 period, I had a thought about how the technology and culture could blend together. Post-COVID world will surely bring a significant change with the way people shop, and retail stores are facing a period of challenges. Technology could be a savior for those shops.

With his project, I attempted to connect individual retail shops/ artisans and people. If people can easily reach products of high cultural value via online, that could be a huge potential for artisans. We’re in the transition phase of buying more products online, and I wanted to represent this project as an example of how we, as designers, can help retail stores doing business under the new norm.

Goals & Objectives

  • Design from scratch the responsive website of MONO Artisan Shop.
  • Develop coherent branding that aligns with the shop’s desired clientele and customer experience. 
  • Show off aesthetic products of all different types from all over the world. 
  • Product details page should show enough information about how and by whom the product was made.
  • Allow people to filter products easily and enable effective search.

Challenges

Paying attention to UI details

This is an e-commerce website where I can just follow some established design patterns (ex. checkout process.) So with this MONO project, I decided to focus more on UI aspect instead of creating many design patterns. My priority was to keep the aesthetic UI consistency throughout the pages. To achieve this, the quality of photos and the details of UI (spacing, choice of fonts and colors) were highly important.

Keeping both and the uniqueness the convenience

The concept of MONO is to sell one-of-a-kind products. While keeping this uniqueness, the website has to be equipped with the easiness of e-commerce websites. Everyone loves the experience of convenient shopping on Amazon, and I wanted to achieve it as well as showing off the uniqueness of dealing with enchanting artisan products.

02 The process

Discovery

Research methodologies

I needed to know how competitors are doing online business while e-commerce websites are rapidly growing. Also I wanted to learn the trend of e-commerce market, along with how the CODIV-19 affected people's purchasing behaviors.

Research 1: Competitive analysis

The goal for the research was to understand the structure and functionality, the trend of e-commerce websites, and the impact of COVID-19.
  • Page structure, site map, menu items, and overall UI look and feel
  • Who are their target users, and what makes the website unique?
  • Learn the business concepts
  • How are e-commerce websites changing?
  • How did COVID-19 affect people do online shopping in general?
  • What values can users get with the website, other than purchasing products?
View competitive analysis
After the research, I had more clear visions about what I wanted to achieve in MONO:
  • The concept of b8ta that doing technology-driven business to connect people and uniques products.
  • The consistency of The Citizenly to sell the highest quality materials.
  • WorkOf websites is aesthetic and makes users feel like visiting their showroom.
  • In addition to above three, The Conran Shop website has an exquisite modern look and feel with the products by world-class designers/ artisans. 

Research 2: Market research

I did researches on "2020 E-commerce market trend" and "Purchasing Response to COVID-19".
View market research

User Interviews

To achieve better emphasis for end-users, I set up good quality 1 on 1 interviews with potential MONO users.
Participants
  • Total number: 6
  • They are from different demographic backgrounds, and all live in the US
  • They're all active online shoppers who shop online at least once a week
Coverage
The questions consisted of four areas:
  • Online shopping experience
  • Artisan products
  • E-commerce websites
  • Impact of COVID-19.
Interview findings
Amazon has the absolute and dominant power for e-commerce, and no other competitors seem to surpass the values that Amazon offers to customers.
Most interviewees care about usability, but don’t pay much attention to visual design aspect (aesthetic value is not a priority).
Easy navigation, return policy, and shipping cost seem to be the three major factors to make or break e-commerce websites.
  • People purchase all types of products online.
  • When asked about artisan products, most of the participants thought about foods, such as wine and bread. They buy those foods, but they don’t spend much for non-foods artisan products - the artisan market is small.
  • Users pay attention to details when making a purchase decision (reviews, product details, product comparison, recommendations, etc.)
  • Transparency is important - users don’t like hidden costs.
  • Not being able to access directly to the seller is a big problem. Technology such as Chatbots is a pain.
  • The impact of COVID-19 was big enough to change their shopping style. More users are now using e-commerce websites more often.

Define

Strategy blueprint

After researches and interviews, I clarified my design directions in the document. I categorized my ideas and wrote down what I'd like to achieve. I used about 20 websites as references.
View strategy blueprint

Persona development

I created two personas after the user interviews. The interviews helped me a lot to get reality-based pictures of potential MONO users. Since the website is not for everybody but for someone with aesthetic sense, I made the two personas with unique characters who take pride in being a good human.

Site map

I asked myself "What will users need at a minimum from search to checkout?" I chose 4 items as main menus (Shop, About, Account, and Basket), and added necessary pages for each menu. Doing so brought me a broad picture of how the functionalities are related. Also the site map was helpful to prioritize functionalities and measure the volume of designing.

Ideate

Sketches

This was a fun part to transform big ideas into something visual. I sketched some different patterns for the core three pages.
Landing page
IDEAS
Out of many patterns I sketched, these two were the major candidates. Pattern1 is what I had in mind initially, and it includes standard information for an e-commerce website. Pattern2 is the most "product-and-seller-oriented", as it has many product listings and a link to the seller info.
Pattern 1
Pattern 2
FINAL DESIGN
Combination of Pattern 1 and 2. It has all info in Pattern 1, and I added "Artisan of the month" to emphasize artisans.
Search results page
IDEAS
It has a background photo on top for "chairs". When the user selects another sub-menu (ex. tables) the photo will be updated. Users can select a sub-menu on top, filter price, and change sorting.
FINAL DESIGN
The layout is simple, and at the same time effective to navigate and filter items. The photo on top is blending nicely with the product photos, and the main three columns are aligned just right to appeal each item.
Product details page
IDEAS
I combined all info I thought would be necessary for a product. I learned from interviews that users need details, so I added video. "Shipping & returns" and "time to ship" is very clear. For better customer support experience, Q&A should work. I emphasized the artisan by using a big space at the center with a link for the seller. Also I added a live chat at the bottom.
FINAL DEAIGN
The sketch was good enough and I didn't have to change, except that I moved the side-photos to the right and combined with a video. This was a space saver and the layout became refined.

Wireframes

Based on the ideas of above sketches, I created B&W wireframes for the main 3 pages.

03 The design

Design directions

Brand & logos

Branding was highly important for MONO project, as it deals with high-quality artisan products. I wanted to make the logo as simple as it can be. I used a black font of "Halyard Display SemiBold", which is easy to read even when small .
Keywords to represent MONO as a company:
  • "Modern and stylish"
  • "Civilization and culture"
  • "Timeless"
  • "Genuine"
  • "Dignity"
  • "Warmth"

Style tile

I used only one highlight color of gold-like yellow (#E09B3A). Because of the nature of e-commerce sites, the site will have many photos and texts, so I wanted to keep the UI very simple to avoid a clutter impression. The decision for the background color was white (#FFFFFF). This works well with the pale gray color of the product photo background.

Design, design, design

Prototype

With an aim to test usability with potential users, I built a prototype on Figma. This will allow users to experience basic functionalities. I focused on the flow of purchasing a product, and added other necessary features. With the prototype, testers can:
  • Login
  • Search product
  • See product details
  • Add a product to bag
  • Proceed with purchase
  • Confirm order
  • See user account
Check the prototype!

04 The findings

Usability testing and problems

Usability testing

Participants
  • 4 testers age 30s and 40s with different demographic background
  • All testers were actively doing online shopping on a daily basis.
Tasks
  • Read all contents in all pages
  • Search products
  • Add a product to My Bag
  • Check out to buy the product
  • Confirm the purchase
  • Login
  • View My Account
Methodology
  • All tests were online 1 on 1 by sharing tester’s screen.
  • Only minimum background information about the app was provided to users
  • Users were asked to think aloud for each process
Completion rate: 100%
Error free rate: 100% (No significant errors that prevented users from going forward)

Usability testing

I created the affinity map after user testing was complete. Because MONO functionality is very straightforward and doesn't go beyond the standard websites of retail shops, all the flaws raised in the testing were minor ones.

The problems and solutions

Here I picked some areas that users pointed out during usability testing. These are common things to consider with e-commerce websites, and there's no right or wrong answer to address these.

#1 Where to go after a purchase is complete?

"Thank you" page after an order is complete should have "Continue shopping" CTA to encourage users to shop more. Which product list should users be directed to? All products page (filtering "All - All") will be needed in this case from where users can start a new filtering.

#2 "Create an account" -
Where should it be?

It's a standard process to invite users to create an account on checkout. Some websites ask this at the beginning of checkout, and others do after the process is complete. After discussing with users, I put it in the "Thank You" page at the end of purchase. I thought that majority of users would hesitate to create an account before buying a product.

#3 "Order lookup" -
Where should it be?

Users who purchased items will need to check the status. Some websites has a separate login area for such users. I setup it next to regular login area. If we won't prioritize those users, it could be a link in the footer, which is less visible.

Takeaways

UI should be in favor of those who love aesthetic, and the contents should meet those users with sharp eyes.
What I enjoyed the most with the project was to focus on UI that attracts those users. It was a learning opportunity to create "exquisite" pages by caring not only the layout but also the details such as the quality of photos.

MONO is a unique e-commerce website that sells specific types of products. So I designed each page by envisioning target users. MONO should provide UI in favor of those who love aesthetic, and also should function as an efficient e-commerce website to reduce customers' pain points while shopping. Just like other e-commerce websites do, I followed the established design patterns, and yet I had some eye-opening opinions in the user testing that I wasn't aware of.

PREV
SF.gov
There's more!
NEXT
MINE Phase 2
Let's create something together!  Send me a message.