Case study: Developing a design-your-own-product website

Note: If you’d prefer, you can watch a video of the case study here.

Natural soaps are popular as little gifts and self-care treats, especially for specific skin needs, but there are very few ways for a shopper to choose exactly the ingredients they want for a truly custom soap.

My objective: Develop a place for shoppers to create their own custom body wash blend.

Because this wouldn’t be a conventional retail site, the format needed to be carefully designed so it wasn’t confusing or cluttered, but rather effortless and fun. This was a UX challenge.

When in Doubt, Go to the Library

I dug into a bit of research. It’s obvious that oily, dry, sensitive, skin types have all different needs, but increasingly, dermatologists are recommending more customized treatments, including this method.

Add to that, commercial soap is often irritating, since according to VeryWell Health, chemically, its PH level is 10, versus skin’s chemical PH level of 5.

And customers are quite ready to purchase custom soap. Deloitte University Press discovered in 2020 that customers would pay up to 20% more, and 46% would wait longer, for custom items.

Give The People What They Want

So now, the question is, what specifically should I make? Who is it for, and what would they want?

I started user research with a screener survey and then contextual interviews. I found some key insights:

In summary, the site would sell body wash with custom scents to women, account for skin discomfort, and above all, be easy to use.

Now…Who Am I Designing For?

My user research coalesced into a target user persona. Her name is Kath; she’s a 45 year-old female. She has a family, and she tries to stay on top of a lot of responsibilities.

Kath is a 45 year-old upper-middle class woman

So this is who I was targeting. And while Kath was based on 58 survey responses, 7 contextual interviews, and two empathy maps…

A lot of research!

… I discovered later that testing showed I needed to make a little shift. We’ll get back to that.

What’s Does Kath Want From the Site?

To find out the specifics of how Kath would want the site to work, I compiled an affinity map, organizing notes from all my interviews.

Some key insights from this included the need to provide a lot of information, mainly to help users choose the components of their body wash, but also to avoid a lot of text. Kath, I found, does not read paragraphs on web sites. So images, and the format of the site itself, would have to do a strong job of guiding users.

These insights shaped up into a set of user stories; everything Kath would want to do on the site, which I then prioritized by her level of need, to determine what to actually include.

All of this led me to two main approaches to keep in mind as I started sketching out the shape of the site.

First, I want this to be a positive experience for Kath. She could use some relaxing fun. How do I make that happen?

And then testers felt unprepared to chose the ingredients for their wash, not knowledgeable enough, so I need to answer a lot of questions, but also not clutter the site.

I started sketching a few different options, trying to think outside the box. After discussion with my mentor, I landed on a Choose-Your-Own-Adventure path:

CYOA path, for a fun activity, that could be laid out for the user one step at a time, for that hand-holding mentioned earlier.

Then I laid out a CYOA site map, showing all the options users could choose from: skin types, scents, exfoliants:

The most important aspect is that users could have any combinations of these items, for a truly custom product. By the end of the project, one level of customization was taken away and another was added, to fit findings from testing, but the basic format remained the same.

Keep It Super Clear and Simple

Something else important about this site is that it’s tightly focused. It only includes the customization process, the checkout process, and standard housekeeping (like About and Search).

There is no retail shop with other products or any other calls to action. This is to keep the concept of the site simple, and not distract buyers.

Also, the idea is this is a new business, so the focus will be just on custom body wash, until it’s well-established.

Guerilla Testing Shaped The Site

With the plan now laid, I drew sketches of each page, and ran guerilla testing with a set of target users.

I came out with 3 key findings.

1. The homepage would need to guide users very, very well. Although I explained the purpose of the site beforehand, subjects weren’t quite sure what to do on the home page.

2. Most subjects mentioned they would prefer to have more customization options (most notably, color and label).

3. And finally, subjects really liked the customization process to feel like it was all on one page; so they could stay oriented, but they didn’t want the whole process thrown at them at once. That ended up shaping most of the site.

So, Let’s See What We’ve Got

Incorporating all of that with my original sketches, I wireframed out the site. I made sure to include my MVP user stories, along with several of the noncritical user stories.

I also wireframed a second red route for the site. Returning users can log in and immediately add their previous blends to their cart, and check out with their information already filled out. A much faster process.

Now, What Style Appeals to Kath?

It was time to develop the visual style for the site. I created a moodboard with the main identity of the brand as the Custom Soap Cottage.

Soapmaking itself is old-fashioned , and the cottage idea suggests a ‘return to simpler times. The idea is to give Kath a getaway from her responsibilities, a place to relax.

From here, I developed the style guide, basing the style in the currently trendy cottagecore aesthetic, with feminine colors and an emphasis on nature, but also in order to keep it from being overly sweet and fussy, incorporated some Edwardian steampunk pen and ink elements.

Specifically, the style guide included soft greens and pinks, black and white decorative graphics, plant imagery, many of which were soap ingredients, and old-fashioned typefaces.

Time to Build a Website

While the full prototype is available on InVision, let’s take a look at a few key pages and how they evolved throughout the user testing process.

The full prototype, with both red routes, is available here.

First, the home page.

Early versions included an explanation of the customization process, plus customer reviews, and a list of benefits.

However, testing showed this was not enough for users to easily tell what the site was for.

They needed a clear explanation, at the top, and maybe a graphic to support it. Also, testers preferred brighter colors.

This ended up being the final home page:

Next, The Blending Station

Once the user clicks to Get Started, they land in the Blending Station, where they go through a set of steps, all embedded in what appears to be a single page. Each step chooses something for their body wash: their skin type, a combination of scents, an exfoliant, and a color — or, they can skip any of these.

Lesson Learned: Testers Had No Patience for My Gimmick

At first, I was very focused on the Choose-Your-Own-Adventure approach I was following. Before users could choose the Scents for their body wash, I had them select types of scents, which would then reveal the specific scents to choose from; woodsy scents, fruity scents, etc.

I thought this would create a fun moment of adventure. Testing showed that it did not. Testers did not want this extra step with these ambiguous categories. They did not want to make this decision.

So, I took that page away, so users wouldn’t have to deal with two separate pages when choosing their scents. But I hadn’t learned my lesson. On the top of the scent page, I listed those same scent types as checkboxes. When users checked them, again, they revealed specific sets of scents.

However, testers were again not comfortable; they had to pause and figure out what to do.

This was unnecessary cognitive load, so I decided to reduce it. Rather than filters, the scent types became subheaders, just organizing the scents down the page. Less choose-your-own-adventure, but a lot easier for users.

And then, so they weren’t overwhelmed with a giant display of scents to choose from, I added the ability to Hide and Re-Show each category.

Testers I re-approached liked this change. This also allowed me to add more unique design to keep enhancing the environment for Kath to enjoy.

Recommendations Not MVP? Users Disagree

Testing also prompted another change to the Blending Station. When users specify their skin type, that information is collected so the right soap base can be used in their body wash.

However, testers also wanted clear indication of which scent, exfoliant and color options could be good or bad for their skin type. So now when a U\user specifies their skin type, they see notes as to what is especially great for their skin, or not recommended.

This had been part of my original scope, but not considered MVP. After testing, I reevaluated and decided to incorporate it.

Absolutely Key MVP? Ingredient Profiles

Essential to the Blending Station are the ingredient profiles. Because users may be unfamiliar with many of the ingredients, I created a profile for each scent, exfoliant and colorant.

To keep the site neat, these profiles are tucked away in pop-over panels, only visible on-demand.

This didn’t really change throughout testing, although more details were added about the essential oils used for the scents.

Flow Problem? Add a Feature

Another key page is the product summary page. The user’s design is fully presented.

They see exactly what they’ll get — a big deal in user interviews. Kath’s not one to waste time or money. They can also feel the satisfaction of creating their own blend. And they can go back and make changes.

But, there was concern of users getting stuck in an endless loop of adjusting, and never actually purchasing.

So, I added a feature users had asked for. The “Name Your Blend,” where a user picks a name for the soap that goes on their products’ label.

This feature works for both use cases:

• If the soap is for the user, it underscores that this is something special just for her
• If the soap is a gift, it enhances the thoughtful personalization

Importantly, the Name feature is at the bottom of the page to keep the user moving forward toward the cart. There is a “Back to Edit” button in case it’s needed, but the goal is to move the user forward.

Create An Account? Don’t Be a Bother

In testing, users did not want to have to create an account in order to check out. They were fine putting in their information for initial checkout, though, so I added an option to create an account AFTER checkout.

This way, they only needed to add a password after to save their account.

This page did not change through testing; testers liked its simplicity and that saving payment information was optional.

They also appreciated the dynamic delivery dates that show here based on the user’s chosen shipping option.

Testers Call for Static Callout

I had designed that second red route for returning users to easily re-order any of the previous blends they created, without having to go through the whole customization process — which is especially helpful if they don’t quite remember all the details.

If they click to reorder, they get a confirmation popover with a button directly to the cart.

However, testers found that if they closed this, they didn’t know how to bring it back up. The idea was they would go into their account page, but that wasn’t intuitive for them. So…

I created a static callout that would stay on the top right, near the other housekeeping options, the whole time a user was logged in. Easy access, but unobtrusive.

One More Testing Result: from Kath to Kat

If you remember, my target persona Kath, was a 45-year-old woman. That demographic came through heavily in my screener survey, and I thought they would have the right income level and skin concerns for this product.

But in testing, I found out women in their 30s were much more attracted to this product. They were more comfortable with the concept and process.

This is the new Custom Soap Cottage target user; Kath has become Kat. She has younger children, works hard, sleeps when she can, but knows the importance of self-care and tries for it. And she’s more comfortable with nontraditional websites.

I did my third and final round of testing with women in their 30s to make sure it was optimized for them; a place for fun and self-care, while still getting something done. Were this site to launch, marketing would focus on that audience.

This very valuable insight that never would have been found without user testing.

Thank you for taking a look at the Custom Soap Cottage site.

A relaxing way to meet a unique ecommerce need — a little bit of fun that wouldn’t have been possible without a whole lot of work.

It has been a very useful exercise in user experience design. If you have any questions, please feel free to comment; I would love to discuss.