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

  1. How might we find a way for customers to find products quickly?

  2. How can we reduce the number of clicks to checkout?

  3. 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

  1. Find the information page about the first cleanser under the Face products category

  2. 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.

  3. 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:

  1. Add a quick checkout prompt once a user adds a product to their bag

  2. Have the shipping prompt show up 1st to clarify to users that their address is not necessarily for shipping

  3. 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’

  1. Creating a subscribe option for future events

  2. Create a way for users to connect with one another through an app

  3. Develop and add more to the website — images and products

  4. Create a “more like this” option for certain products

Previous
Previous

Treating Epocrates

Next
Next

Hike On! Mobile App