Project Banner Image
My Role →
My Role
Focus (UI/UX): Discovery, Research, and Design
Team
Me - UX & UI Designer
methods
User Interviews, Usability Testing, User Survey, Competitive Analysis, Card Sort, and Rapid Prototyping in Figma
Time Constraint
2 Weeks
Paramount Beauty

A website that sells professional grade products to customers while also supporting local salons

View Prototype →

Identifying the User & Business Goals

Discovery

Business Goals

" We want a mobile application that caters toward the Gen-z & Millennial generations. "

" Showcase something that is easier and cooler to use than apps like Cashapp & Venmo. "

" We want a solution that can be showcased to potential investors. "

" Include social media sharing as well. "
Beame wants us to create an MVP that caters toward the Gen Z & Millennial demographic that showcases the core features of the audio transfer technology.

Business Background & Goal

Paramount Beauty, the parent company, sells professional grade salon products to local salons on the east coast. They saw an opportunity to start selling their products to the customers directly while still supporting their local salon participants; they did this by providing special codes that customers will need to shop at Paramount Beauty. When customers buy products the salon will get paid a commission.

My client designed a website, Paramount Beauty Connection, but they were struggling to convert their website visitors into customers. First thing I needed to do was figure out why customers were not checking out.
Original Website

Original Website

Identifying
User Needs

To get a better understanding of the current state of the website, I asked 4 users to go on Paramount Beauty Connection's website and purchase any hair care product, up to the checkout process.

User Needs Identified:
  • Everyone failed the task because they did not realize that they needed an “activation code” from a participating salon to use the website
  • There was not enough product information; the users heavily rely on different pieces of information like reviews or the amount of people who bought the product
  • The navigation also felt really "flat". There was no categorization for the users to browse. One user said "I felt lost"
Since product information and categorization of navigations are the leading factors in converting visitors into customers, I catered my research towards creating a fluid checkout process.

User Surveys, Competitive Analysis, Open Card Sort, and Persona

Research & Synthesis

User Surveys & Interviews

‍Why or why don't Gen Z/Millennials use some of the popular payment transaction apps (i.e. Venmo, Cashapp, Google Pay, or Apple Pay)?

Through User Surveys and Interviews, we were able to identify 3 trends that stood out the most:
No items found.
Other than the 3 pain points identified, we were able to identify opportunity points that appeared in multiple interviews:
‍
  • "I mainly use payment apps when splitting a bill."
         Opportunity - Ability to receive payments from multiple people
  • 1) "I don't feel safe on some of these money apps."
    2) "I want my money directly sent to my bank account."
    3) "I use it because everyone else does, but I feel the      [application] hasn't made it clear that my data is safe."
    4) "Public transactions make me uncomfortable."
         Opportunity - Lean into Beame's security features and anonymity
Most users voiced their concerns over switching to another payment transaction app. We spoke with the stakeholders about the concerns, but they wanted us to continue with the original goal anyways; to create an MVP to show potential investors.

Since we knew that people were reluctant to switch over from other payment apps, we had to figure out a way to make Beame stand out from other apps. We had to showcase a specific use case in our MVP that only Beame could satisfy, so that investors could see the potential in the app.

Opportunities

Use Case Scenario

Imagine you own a dance studio in the bottom floor of a large building; your Wi-Fi doesn't always work. Your students don't have cash and all of them are on different Apps like Zelle, Cash App or Venmo. You want to get your students in and start the class on time.

This is where Beame has an advantage over other payment apps. Since Beame doesn't require Wi-Fi or Bluetooth, the users can still send their payments over audio.‍
User flow for sending and receiving

User Survey

With the user needs identified, it was time to do some further research on finding out what product information users want before checking out. I did a survey with 14 people who were avid beauty e-commerce site customers.
What is the first thing you look at on a "Product Detail Page"?
Why do you shop at the beauty e-commerce store you are currently buying products from? List a couple of reasons.
What are some ways these companies showcase their products that sways you to check out?
What categories do you search the most? Select all that apply (I provided a list of some categories from popular beauty e-commerce stores)
When search for products, how many rows and columns of products would you find aesthetically pleasing? (Column/Row)

Some of the Questions

What I learned

These 3 trends from the survey reaffirmed some of my assumptions from the usability test on the original website:
  • Users valued reviews, quality, and skin attributes the highest
  • The top navigation trend surprised me the most; out of the 14 users surveyed, 10 of the shopped the "All Products" category. Personally, I never use that tab, but then again, I am not the user
  • Users felt comfortable with a 3 by 4 layout for the product details page
Next Step: Now that I got a general understand of what details my user find crucial to the checkout process, I wanted to find out what other e-commerce sites were doing that contributes to their success and to find some inspiration. I used 3 of the top brands my users chose in the survey to do a competitive analysis.

Competitive Analysis

My focus was to find out what these competitors have and don't have in their navigation, product, list filter & sort, and product detail page information in comparison to each other and to my client.
Competitive Analysis Chart

Competitive Analysis Chart

What I learned

The product catalog for all 4 companies had the usual "sort by" feature for the price, name, reviews, and the ability to sort by categories. Sephora was the only one that featured ingredients immediately on the product details page; the other companies had the ingredients a click away. Since all 4 companies have a slight different in their product focus, there were only 3 similar primary navigation buttons: brands, new, and sale.

Next Step: To get a better understanding on how to structure my navigation architecture, I did a card sort with Paramount Beauty's current navigation categores.

Open Card Sort

I took all of the categories within Paramount Beauty's website and asked 4 users to sort them in any category they thought suited the product to see how we can form a solid structure for their navigation.
Card Sort

Card Sort Results

What I learned

With this card sort I was able to break the main navigation into 3 main categories: Body Care, Hair, and Salon Tools.

Next Step: Now that I was able to complete what I could within my time constraint, it was time to bring it all together into a persona that reflects my research.

Persona

I created a persona that represents a first-time user that wants to be well informed of their products before checking out. To incorporate the "small shop" feel and to support participating salons, I wanted a way for Hannah to easily find salons around her that use the products she is interested in.
Persona

Persona

Research Insights

After the research process, I like to take a step back to summarize all of my findings and to come up with possible design solutions before continuing.
Product Detail Page
Since reviews are the driving force in the checkout process, I incorporated salon product reviews to support local salons while also giving users the ability to learn from an expert.
Product Detail Information
The product details page will include ingredients, details, about the brand, multiple images, salon and customer reviews, and how many people have purchased the product.
Navigation
The global navigation will include all products, brands, salon tools, hair, body care, and professional tutorials. There will be sub-categories, and images of products.

Wireframes, Prototypes, and Usability Tests

Design

Communication Problems

In our v1 & v2 usability tests, we had a lot of users confused by the audio transferring technology. People were also confused with the social media tags; they thought that those were the social media platforms they were sharing their transaction to (most likely due to Venmo's social media feature).

To solve both of these problems, I decided that it was crucial to include onboarding in the v3 iteration and usability test to educate the users. The onboarding would also act as an extra layer of communication and security that users found they needed in a payment transfer app.
v1, v2, v3 iterations of homepage

Was the Onboarding Successful?

So that we didn't skew our success rate of educating the user, we had to find new users that had no idea what Beame was. After finding users and conducting our final round of usability tests, we had a success rate of 85%. Our users were starting to understand what Beame is used for and how to use it. Our group was excited!

Did we achieve our goal?

Communicative Iterations
- Some users were struggling to understand what certain buttons or screens were supposed to do.
     Solution: I added supplemental text to alleviate the confusion on those screens.
‍
- Initially users were confused with the "searching for Beames" screen that had a static image of the logo; they didn't know if they were supposed to click another button to continue.
     Solution: We created a "pulsating" logo that imitated a Wi-Fi      signal searching for a connection.

- Solution: Users wanted to know if their payment went through; So we added color fade overlay in the history screen to show sent and received items when completed.
‍
‍
Simplicity Iterations
- In our v2 iteration of the homepage, we had a green/red indicator for a received or sent transaction. Users felt that was too "intrusive".
     Solution: We took it out and replaced it with an addition sign.


Security Iterations
- Solution: Since security is "built" into Beame's technology, the onboarding was used to build a sense of security to the user.

Prototype Walkthrough

Hand Off

We made it clear that users are most likely not going to switch to Beame for most use cases. Running through use cases where Beame can stand out was something we wanted to highlight to them:

Networking at Conventions: where connectivity is unreliable, but making professional connections is important and a priority.

Proximity Marketing: Any audio speaker can become a powerful marketing device, where the user is in control of receiving the information. Scenarios like coupon collecting or meeting checkpoints could be used via Beame.

Project Takeaways

Image of Endorsement

Shun Dorsey - Beame

I had the pleasure of working with Kenneth and his team on our companies mobile app UX/ UI design project and it was nothing short of awesome. Above all, I was impressed with Kenneth's attention to detail and his out-of-the-box thinking, and, of course, his awesome personality. Kenneth would be a true asset for any position requiring UX or UI design skills and it's without hesitation that I give Kenneth my highest recommendations.

Lo-Fi Prototype

With the needs of the user laid out in persona form, it was time to start creating a design that would accommodate for Hannah's needs.

Try it for yourself! *Click inside then press the "F" key to full-screen

Usability Test of Lo-Fi Prototype

The Task: Pretend that you are a first-time user that wants to purchase a hair care product. Shop as if you were shopping on one of your beauty e-commerce sites (Sephora, Ulta, etc.). When you are done with the task give me any feedback that you think could improve the experience!

Out of the 5 users, 2 people gave me feedback on the product catalog page. The user had suggested that they wished there were filter options when browsing; filters like "Best Sellers" or "New Products". Originally I only had it in the global navigation, but it made sense to add more features for users to specifically browse.

Hi-Fi Prototype

With the feedback from the lo-fi usability test, I incorporated the filter options and added images.

Try it for yourself! *Click inside then press the "F" key to full-screen

Next Steps

Sadly I was not able to do more testing with the hi-fidelity, due to the time constraint. If I had more time, I would replace the lorem ipsum copy with real descriptions, do more usability testing, and to keep improving the checkout flow.

Project Takeaways

Although this was a class project, I learned a lot about the UX Design process. I was able to identify the business needs vs the user needs and combine them into one design solution. I conducted 3 different research methods, synthesized the information gathered and incorporate everything into my design. I was extremely happy with the amount of work I had done in 10 days.

Other Projects

Other Projects Image
UX Designer
Beame

Designed an MVP that conforms to Beame's technological constraint

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.