Home Page Mockup.png

CHOISI

Website redesign

 

 

My Role: UX/UI Designer

Year: 2018

 

Team: myself, a project manager and another UX/UI designer 

 

PlatformWebsite

Length: 3 Weeks

 

Tools: Sketch, InVision, Photoshop, Post-Its, Google Drive, Slack, Whiteboard

 

 

Overview

Choisi is an e-commerce platform that aims to use artificial intelligence (AI) and machine learning to power personalized luxury fashion discoveries to connect users to unique independent designers around the world. 

Challenge

Potential customers are having a difficult time navigating the website to make a purchase. While fashion designers needing more exposure to continue growing their business. How might we  streamline the buying and selling process for these clients?

Goal

Business: increase customer engagement and sales conversion rate by implementing the AI chat bot.

Design: help customers discover new and unique fashion from boutique designers that they otherwise wouldn't know about.

Our Process

Discover through research

Define through synthesis

Develop through ideation

Deliver the final prototype

Research

Discovery Phase

 

The Beginning

The Beginning

We started with identifying the key problems with the existing Choisi website. I conducted a Heuristic Evaluation using Jacob Neilson's Heuristics methodology and rated each severity on the scale from 1-4, with 4 being the highest.

Heuristics Evaluation.png

Comparative and Competitive Analysis

Once we understood the issues with the current site, we conducted a C&C Analysis to see what our direct competitors - the platforms that connected designers with their customers - were doing differently. 

C&C.png

C&C Results

 

  • Most of the competitors have e-commerce features such as log-in and sign up, checkout process, suggested products.​

  • In order for Choisi to stay competitive, we must implement those features.

 

Early Usability Tests

We conducted usability tests with the participants who shop for fashion items online. The goal was to identify the main pain points of their experience using Choisi's existing site. Here's the video example of one of the tests.

 

The users' main pain points were:
 

  • confusion by the site navigation

  • an overwhelming amount of content on each page

  • they were directed to a designer's URL within just a few clicks causing them to bounce early from the Choisi's site

Interviewing Target Users

Next, we interviewed women who consume luxury goods between the ages of 26-43. I also reached out to some of the Choisi's designers to gain further understanding of their expectations of the website in order for their business to succeed.

Choisi Wordcloud.png

The resounding theme of those interviews was that luxury goods are expected to come with a certain level of quality, specifically in regards to materials and craftsmanship.

What did the users say?

Hair Model Smiling

I buy luxury products wanting something with a high level of craftsmanship, level of thought."

- Kelly C., Business Owner

The brand's story should be evident somehow.

- Fran C., Environmental Lawyer

Hair Model
Modern Young Girl

I care about the things I own, and want to be able to keep them for a long time.

- Lauren Y., Senior Product Designer

Insight

Defining Phase

 

Synthesizing Data

Once we gathered the information we needed, we created an affinity map to identify some of the users' trends.

 
IMG_8010.jpg

Trends found:
 

  • Customer experience is a priority

  • Designers want to maximize access to their target users, while users want to have access to the designers worldwide

  • Brand story and product influence directly reflect one another

  • Users want to be able to zoom in on an image to be able to inspect materials of products

 

 

 

Personas

Based on our research, we created two personas

Camille Stark (User Persona) and Cecilia Chang (Designer Persona). 

 

Our primary user Camille spends a lot of time on social media searching for independent design brands. How can we help her discover new, unique products that will help her stay ahead of the curve?

Choisi User Persona.png

Our secondary user Cecilia is an independent designer looking to grow her business and get more exposure worldwide. She loves the design process.
 
How can we help her keep her focus on creating while expanding her business to international customers?

Designer Persona.png

Restructuring User Flow

Next, we redesigned the user flow so that our user Camille has access to everything she needs to know about the products and the designers as well as be able to purchase within Choisi's ecosystem.

Existing User Flow

Existing User Flow

Current Task Flow (1).png

Proposed User Flow

Proposed Task Flow.png

Prioritizing Features

We then used the Moscow method to determine what features we need to focus on and prioritize when building the website.

Choisi MOSCOW.jpg
Ideate

Developing Phase

Navigation

After figuring out what features we needed to include in the new website, we started defining navigation.  To begin, we visited some of the competitor’s websites for inspiration.

Screen Shot 2018-12-10 at 12.25.40 PM.pn
Screen Shot 2018-12-10 at 12.23.52 PM.pn
 

Choisi's Site Map

Next, we reorganized the Choisi's site map, so that users are free to explore designers and products, and purchase all within the Choisi ecosystem.

Proposed Site Map (Choisi) (2).png

Design Studio

IMG_8820 (1).JPG

After organizing the navigation, we conducted a design studio sketching out and iterating many versions of the new home, designers and product pages until we worked out the most effective ones.

Usability Testing

Once we figured out the best versions, we proceeded to create mid-fidelity wireframes using Sketch so we could test them with the users.

Screen Shot 2018-12-10 at 4.08.14 PM.png

Test Results:

  • The usability tests revealed that users were confused about our “About” modal on the home page, which gives a short explanation about the website.

  • Although we thought the participants would most likely click on one of the two categories at the top of the home page, 80% of them ended up getting distracted by the featured designers and products further down the home page.

 

Branding and Colors

 

After making the necessary changes, we moved on to creating a moodboard.

From meeting with our client, we understood that

Choisi wants to position itself as a luxury e-commerce brand, so we wanted the website to have a clean and luxurious look with focus on the designers and the products.

 

 

Choisi Moodboard.png

We drew inspiration from clean architectural lines; blocks that emulate windows and picture frames - displays for something precious.

 

We Used Lato Light and Open Sans Regular as our typefaces, along with a crisp black, white, and grey color scheme to complete the refined, minimalist look.

High Fidelity Wireframes

Creating the high fidelity wireframes was the most challenging part of our project because we split the job between the 3 of us to build 50+ wireframes which at times made it tricky to stay consistent in Sketch. 

Screen Shot 2019-01-10 at 1.40.18 PM.png

Mobile and Tablet

To complete our sprint, we considered the layouts for tablet and mobile devices.

Choisi iPad Mockup Final.png
Choisi Iphone Mockup Final.png
Prototype

Delivery Phase

 

Interactive Prototype

Finally, we used InVision to build our clickable prototype.

Next Steps

 

  • Implement AI chatbot functionality

  • Create Mobile and Tablet responsive design

  • Add full country & currency list

  • Designer portal & application

  • Design user profile portal

  • Design “Favorites Collection” page

  • White LinkedIn Icon