Redo V2
Solo Project
Duration: 2 weeks
Tools: Figma, Optimal Workshop, Zoom
Background
Why V2? V2 is a local beauty and skincare business in Michigan. This shop sells all-natural products and offers other services to its customers. They want to grow their online retail presence and have reached out to influencers to help promote their brand. However, their current website needed an upgrade, especially in order to attract their target demographic.
Process
This project began with a given persona archetype and their characteristics when buying products. I spent two weeks researching V2’s brand, redesigning their site, and adding a new feature based on my user’s needs.
DISCOVER
C&C Analysis
In order to understand the current issues with V2’s website, I used comparative analysis and competitive analysis to gauge how well V2 would be accepted among users.
Comparative Analysis
Among comparators, V2 lacked many of the features that others had. For example, Amazon took advantage of nearly all of its desktop space to draw customers in with its products.
Walmart & Target offered guest check-out and offered different sizes that had different product images too.
Competitive Analysis
The Body Shop, Ulta, and Sephora lacked in some of the local characteristics that some of these bigger brands had but offered users most of the same features that V2 did, so they did pretty well in that sense.
DEFINE
Persona
Age: 25
Education: Degree in Marketing
Occupation: Influencer
Location: Ann Arbor, MI
“My favorite companies to promote are local ones with great products and customer service to match!”
Frustrations
Unnecessary or hidden fees for products, especially those she promotes
Does not like big brands as much as she likes shopping local
Hard to attend unique events hosted by the companies she promotes
Returns 30% of her purchases because they do not work as promised
Needs & Goals
Reviewing new products for her followers before they’re released
Quality products to review for her following
Inclined to shop locally
Prioritizes good customer service
Enjoys attending promotional events hosted by brands she likes
Journey Map
Scenario: Ashley, a full-time online influencer was offered a brand deal by local company V2. She wants to buy their products online and attend their brand events in order to honestly endorse and recommend them to her followers.
Ashley is excited about a new brand opportunity, but as she’s going through the website she finds it frustrating to go through the website because of its redundancy and cognitive overload. Although V2 has some amazing artwork on its website, it is hard for this to stand out among the other visuals.
Problem Statement
Ashley is a full-time influencer who wants to be able to quickly and confidently order products from V2 and find unique V2 brand events so she can accurately and honestly review the company and its products for her followers.
HMW’s
How might we find a way for customers to find products quickly?
How can we reduce the number of clicks to checkout?
How can we include brand events for our customers?
User Flow
1st Task — Product Discovery and Checkout
The first user flow was for users to first purchase a product and go through the checkout process in this user flow, she is going to open up the website to explore the home page and then further find information about products and customize her choice and finally check out.
2nd Task — Brand Event RSVP
For the second user flow, she will be finding a brand event under the spa page and then filling out an RSVP for the event.
Site Analysis
Ashley likes making purchases in person so although she will be purchasing the product online, I added: “check in-store availability.” This way, I can align the users’ wants with the business needs to shift to online retail.
my user does not like hidden fees she would most likely prefer banners with advertising of spa and promos on the front page
removing the intricate background and using it for content so users do not have to scroll for more information
by adding the number of products on the initial product page as well as the sizes, Ashley has a clear idea of what she is buying
Site Mapping
I recruited 15 participants for a closed card sort to organize V2’s products into categories in which they would predict to find them from the primary navigation.
DESIGN
1st Wireframes & Prototype
Usability Testing: 1st Round
Goal
This study assesses first-time users’ learnability when using the V2 desktop website. I wanted to assess how new users flow through the website, from exploring the home page to finding a product, checking out, and RSVPing to a brand event hosted by the company.
Tasks
Find the information page about the first cleanser under the Face products category
Add the cleanser to your cart and proceed through the checkout process. I will be providing you with fake credentials to enter the information and payment requests.
Begin at the home page and RSVP to the brand event at the Vis-a-Vis Spa.
Test Objectives
Observe how users explore the home page and how they feel about the layout
Determine if users can understand the flow of the website and its purpose (ie., allow users to find products, use filters, book an event)
Observe how users checkout — can they understand the process
Determine if users can understand the flow of the spa pages
Metrics
Quantitative:
Time taken to complete tasks
Errors made until task completed/failed
User Errors in Completing Tasks
Minutes Taken to Complete Tasks
Qualitative:
Users’ thoughts about the app during a task and post-task completion
Users relayed it took too many clicks to get to the cart and check out and the checkout page itself took too much scrolling for information input. Also, they didn’t know what to do after the payment page. Finally, users felt inputting the address before choosing a shipping option is confusing for an in-store pick-up.
DELIVER - V2 of V2
Based on my usability testing results I knew there were 3 major changes that would make the prototype easier for my users to use:
Add a quick checkout prompt once a user adds a product to their bag
Have the shipping prompt show up 1st to clarify to users that their address is not necessarily for shipping
Switch layout of checkout with new information CTA buttons at the top with old information at the bottom
Desktop Prototype
Mobile Prototype
Next Steps
Hover to see the ‘After’
Creating a subscribe option for future events
Create a way for users to connect with one another through an app
Develop and add more to the website — images and products
Create a “more like this” option for certain products