UI/UX Case Study: BeautyMakers - Shop

Mockup_BeautyMakers – Shop

BeautyMakers is currently a web directory of "Made in Canada" beauty brands. As a multi-sided platform, it has been difficult monetizing the 'producer' side without sufficient value being derived from the 'consumer' side. A proven B2C revenue model will lend itself to market validation and also provide for a stronger case to monetize the seller side.

This case study is part 2 of the BeautyMakers series. Some of the content will be repeated here due to the overlapping nature of business and product design. The full case study for part 1 will be available shortly.

The Challenge

  • Implement the UI and UX for the newly proposed business model prototype (i.e. fake checkout) for BeautyMakers:
beauty-box-green

Beauty box with $160 value for $130. Select from four themes.

+

membership-card-green

Save 10% when you shop at our vendor partners

Research

I wouldn't say that I did user research but rather I followed a customer development process as a way to test my hypothesis for a new business model. Since there's an overlap with UX, I'll repost it and I think the whole experience is amusing to read.

Preparation

For the one-on-one interviews, I read the book Lean Customer Development: Building Products Your Customers Will Buy by Cindy Alvarez and I found it very helpful. I even recommended it to one of my interviewees afterwards.

Interviews

Finding subjects was hard! Even trying to bribe people with free full-size beauty samples, it took me from July - November 2019 to secure 16 in-person interviews. Time is a currency. Through trial and error, things started to pick up in September. Here's how I got to the point of saturation:

Multiple Failed Attempts at Organizing Focus Groups on Meetup/Eventbrite

There were a few sign ups but only one person showed up so we ended up having a one-on-one discussion about what she considered to be "indie beauty".


1

Mailchimp Landing Page + Facebook Ad

The Mailchimp landing page was initially created to capture new subscribers. Promoted through a Facebook ad with a conversion objective, and geo-targetting Toronto and Vancouver, I had managed to win over two subscribers. I thought that I might have better luck in getting an active subscriber to talk to me. I was right. 


1

Facebook Lead Ads

Since this type of advertising allows for frictionless user sign ups, I did get a lot of leads this way. I geo-targetted Toronto and captured 73 sign ups. At first glance it seemed as if my CAC was quite low but when I followed up with the leads via email, only 3 responded. In effect the leads were low quality, which made my CAC quite high.


3

Referral

After interviewing one of the Facebook leads, I asked her whether she knew anyone who would be interested in chatting with me. She said that she would email her network, and one expressed interest to me.


1

Networking Event

There was an icebreaker where everyone stood around in a circle, introduced themselves and articulated their "Ask and Give". Here was mine:

  • Ask: "If you're interested in this space, come talk to me...."
  • Give: "And I will give you free full-size beauty samples."


1

Slack Group: DesignX Canada

I posted on the #_help-and-requests channel since it was free and I was getting tired of pumping money into Facebook ads with virtually no ROI. This worked better than I thought because I got the most interviews out of this. I wish I had screenshotted what I wrote but the post is gone. And yes, all the interviewees were designers, including one UX researcher. Talk about pressure!


6

Business Incubator

I was accepted into an 8-week incubator and interviewed two of my peers.

2

RED Academy

I interviewed one of my friends from RED Academy. She was the last person that I interviewed and I had already reached saturation at that point, so I didn't learn anything new.

1

Synthesis of Interview Responses

  • Price, quality and packaging are important factors
  • Interested in finding natural beauty products for a reasonable price and that are effective in combatting skincare issues such as acne, dry skin or hyperpigmentation
  • Worry that when a brand becomes too big, quality is sacrificed to meet demand
  • Don't like brands that are too pushy, and prefer to buy from brands that are authentic, deliver superb customer service and have shared core values
  • Product discovery and purchasing decisions largely driven by word-of-mouth from friends, bloggers/YouTubers/influencers and online reviews
  • Like to get samples before making a financial commitment
  • Try to avoid shopping at Sephora's in-store because the experience is stressful and prefer to shop peacefully at the retailer online
  • Value convenience and like how Sephora stores are ubiquitously available if they need to make a return
  • Impartial to local beauty brands and are more concerned that the product will work
  • Use social media, with Instagram being the go-to platform
  • Search engine of choice is Google
  • Can't unanimously give me a consistent answer as to how they define "indie beauty"

There were also some one-off responses that I thought were interesting:

  • Prefers buying local because the supply chain is shorter and the ingredients would most likely be fresher. The products wouldn't have been sitting in the warehouse with preservatives to increase the shelf life.
  • Turned off by brands that rely on influencers to promote the products, since there's a transactional nature to it and the review might not be honest

Survey

Though I was able to reach a point of saturation with the interviews, the sample size was still too small and so I wanted to distribute a survey to verify what I learned from the interviews. I posted this on Slack and emailed my (small) network, and I was only able to collect one response. I might have posted it at the wrong time -- late at night -- and by morning it was out of sight as new posts were added. Feel free to complete the survey below or by clicking here.

User Persona

BeautyMakers – Customer Persona

Problem Statement

Young working professional women are looking to practise self-care and incorporate natural beauty products. They struggle to find products that are effective and affordably priced. The solution should incentivize our users to take a chance on local Canadian beauty brands that use high quality ingredients, while alleviating the concern of cost.

Planning

Setup

The URL was set up as a subdomain on cPanel, since the primary domain already hosts the live BeautyMakers listing directory.

Next, I purchased the WordPress theme Flatsome and uploaded it to cPanel. I chose this theme for the following reasons:

  • Excellent reviews on Envato's ThemeForest and blogs
  • Has a UX builder so there is a decent amount of customizability for the design to look unique (hence the excellent online reviews)
  • One-time cost of $59 USD for a single license

There was another WordPress theme that I was interested in -- Astra Pro -- that also had glowing reviews but one either had to pay an annual fee of $59 USD or lifetime subscription for $249 USD. Since BeautyMakers - Shop was just going to be a business model prototype, I wanted to operate as lean as possible and Flatsome seemed to be the best option. 

Competitive & Comparative Analysis

I referred to the following websites to get some initial ideas:

  • Detox Market Beauty Box
  • The Body Shop "Love Your Body" Club
  • Luxe Box

Customer Story

"As a Canadian female who prefers to shop online for clean beauty, I want to find effective products that are within my price range so that I can feel comfortable in my skin without breaking the bank."

Design

Wireframe

When I prepared the lo-fi wireframe, I had this business proposition mind:

1. VIP Membership + 2. Welcome Beauty Box

BeautyMakers lo-fi_page 1
BeautyMakers lo-fi_page 2

Lo-fi wireframe - index page

Right after mocking up the lo-fi wireframe, I immediately headed to putting the design into hi-fi on WordPress. 

Colours

There was already a style guide for the live BeautyMakers web directory. One of the interviewees loved the existing colour harmony and due to the brevity of time, I decided to keep using the same palette.

BeautyMakers 1.0 Colour Palette

User Testing

I'm so lucky to have the best design mentor! He was the first person that I did user testing on and he gave me some really eye-opening suggestions. 

  1. Show me how BeautyMakers' membership program works.
  2. How much is it to join the program?
  3. You have some questions. How would you go about in getting them answered? [User should go to FAQ]
  4. Your question hasn't been answered or you want more information. What email address do you send your query to?
  5. Subscribe to the newsletter.
  6. Show me BeautyMakers' offerings. [User should present the four different beauty box themes]
  7. Select an item and proceed to checkout.
  8. Show me all the brands that BeautyMakers' partners with.
  9. You're looking to decorate your home with candles. Locate the brand that would be able to fill that need.
  10. You want to find out more information about the brand. How would you go about in doing that? [User should click on the vendor card]

He was able to perform all the tasks without any problems but he remarked that the checkout process didn't match up with the business proposition. The way that it was presented looked like a user would be buying a beauty box instead of a membership:

V1 with annotations

He showed me how Dollar Shave Club and Harry's designed their checkout flow.

Design Decisions

Taking the points that my design mentor made, I was ready to modify the UX -- until I shared the update with my business mentor and a group peer (KD). It became a business design problem. They both felt that the beauty box was a more compelling offer. KD had experience selling memberships at a restaurant, and said that it wasn't an easy task and she never felt good about it. As a consumer who subscribed to Ipsy and was familiar with FabFit, she wanted a box of beauty products, first and foremost.

Both angles worked out to be the same financially, so I didn't have a preference for one over the other. I wanted to take the direction that would resonate the most with people (i.e. that would rake in the most sales). I consulted with two entrepreneurial friends (classmates from RED Academy) and they agreed that the emphasis should be placed on the beauty box. They also gave me feedback on the UX. The original checkout design was retained and the index page evolved to look as shown below, consistent with the business proposition of 1. Beauty Box + 2. VIP Membership:

BeautyMakers – Index with annotations

BeautyMakers index page as at January 10, 2020

Limitations

1. Checkout

My design mentor wasn't wrong and I had tried to replicate the checkout process to look like FabFit/Harry's/Dollar Shave Club, but Flatsome's out-of-the-box solution didn't come with a wizard design capability, and I didn't want to pay for extra plugins to incorporate it in a prototype.

Ideal Checkout User Flow

Alternative checkout user flow: multi-step

I also considered the solution of "force selling" the membership when a user adds a beauty box to their cart. The membership would automatically itemize on the cart page and it would show a cost of $0.00. This could be achieved with WooCommerce's Force Sells plugin, but it would cost $49 USD/year and I wasn't keen on paying extra if this was just going to be a fake checkout. Since the beauty box is the focal point and the membership plays a secondary role, I decided to simply settle for the default for the time-being.

BeautyMakers – Force Sell

Alternative checkout user flow: force sell a VIP membership when a user adds a beauty box to their cart

2. Contact Form

The Contact page originally had a contact form but when I tested it, an error message would appear and no emails were delivered to my Office 365 mail. 

Error – Contact Form

I spent hours researching, thinking that there was something wrong with the CF7 plugin (already integrated with Flatsome out of the box). I think it's a PHP mail/SMTP issue and there's a mail flow problem between WordPress and Microsoft Exchange. When I try to reset the password in the admin login page, I don't even receive a password reset email. (So I better not lose or forget my login credentials!)

I spent a few days with Microsoft trying to troubleshoot the problem and it got to the point where trying to fix it was more time-consuming than it was worth, especially if this was just a prototype. Though a contact form would be ideal to have, a greater evil is if an error message shows up. If people want to get in touch, they can just send me a message through their email provider.

It could be that this is a subdomain and Exchange currently only recognizes the primary domain.

3. Section - Subscribe to Newsletter

I experienced the same problem when I used CF7's Horizontal Form to try to collect emails. 

Error – Newsletter Subscribe

The funny thing was that an error notification box would appear but when I go into Mailchimp, the new email was picked up. I decided to just embed Mailchimp's form on the website, but I disliked how the email input field and submit button showed up on two lines. I tried to make the elements inline and again spent hours researching to no avail. I gave up because it was more trouble than it was worth and the UI didn't look bad enough that it would deter people from subscribing. 

Prototype

The business model prototype is hosted at https://www.beautymakers.ca/shop. I will continuously update it based on user testing and feedback about the new business model.

Conclusion

  • Index page immediately shows how the BeautyMakers program works and how the cost to join will more than pay for itself, demonstrating value
  • Index page is integrated with Instagram to increase new followers and capture greater engagement
  • "Beauty Boxes" is placed in the top-level navigation to emphasize that BeautyMakers is selling a beauty box and they can easily explore the different themes being offered
  • The "Get the Box" CTA button is prominently displayed in the navigation bar.
  • Newsletter subscribe section is displayed on every page to encourage people to sign up to the newsletter.
  • Brands section/page showcases product images instead of logos, since users consider packaging to be important
  • Original membership card design to suggest an exclusive nature of the BeautyMakers program and to make the business look legitimate. This card doesn't physically exist and is just a mockup.

Next Steps

  • Track number of visitors (low-fidelity evidence)
  • Track number of new subscribers (mid-fidelity evidence)
  • Track number of users that reach checkout (high-fidelity evidence)
  • Reassess whether I need to buy a plugin to increase the number of users that reach checkout
  • Change the typography
  • Hire a photographer if the BeautyMakers program does move ahead
  • Eventually change the logo

Final Thoughts

I was dreading to write this case study, but I have to admit that I ended up having a lot of fun with it.

And what do you think of this colour palette? I'm really digging it for BeautyMakers 2.0!

BeautyMakers 2.0 Colour Palette

Last updated: January 10, 2020

Selected Works

BeautyMakers - ShopUI/UX Design

NestReadyUI/UX Design

Javelin SportsUI Design

FastAppsUI Design

Tours of the 6UI Design

MyINUX Design

The Little PaperUX Design