Heuristic Evaluation
I started my research with a Heuristic Evaluation of the existing website. I used Neilson's Heuristics methodology and sorted each violation by its severity to help me solve problems quickly and efficiently.
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.
Research
Discovery Phase
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 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.
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?
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
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.
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?
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?
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
.png)
Proposed User Flow
Prioritizing Features
We then used the Moscow method to determine what features we need to focus on and prioritize when building the website.
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.
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.
%20(2).png)
Design Studio
_JPG.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.
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.
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.
Mobile and Tablet
To complete our sprint, we considered the layouts for tablet and mobile devices.
Prototype
Delivery Phase
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