Designing an e-commerce site for a new women tech-underwear brand.

A UX/UI case study

Introduction

Smoon Lingerie is a startup launched in Paris in January 2019. They offer an alternative to existing women hygienic protections by developing washable and reusable period-proof underwear.

What is a period-proof underwear?

It looks like a classic women underwear except that it is made with a patented three-layer technology to guarantee an ultimate fluid protection. It is a washable, reusable, chemicals free underwear that can replace pads, tampons or cups.

My role

I joined the company a few months ago as a UX UI Designer, right after having finished my UX UI Design Bootcamp at Ironhack in Paris. My mission at Smoon Lingerie was to offer the ideal experience to the future users by creating an e-commerce responsive website. As I have a strong background in Branding and Marketing and because the project was at its premises, I also assisted the founder in the Branding strategy as well as the Web Marketing strategy.

In this article I will share the methodology I used to design the interface of the website, the challenges we faced and the decisions we took regarding the branding and marketing strategy for launching this new brand.

I. User Experience Strategy

Even though the market in period-proof underwear is well implemented in North America it is quite emerging in Europe and especially in France. So we will see further in the study that it was a UX challenge to break down the barriers that could exist on that kind of product.

1.1. User Research

Before launching the product, it was important to better understand how women, deal with their periods and how do they choose their protection.

What insights could we gather?

We learned through our survey that when it comes to choose an hygienic protection French women prefer mainly pads and tampons with 67% and 57% respectively and 17% of them choose menstrual cups. However we also learned that they are not happy with their protections for two main reasons.

Therefore there is huge potential to launch a period-proof underwear brand in France. But there are some obstacles: as it is a new product on the market only 34% know it exists and only 7% had already buy one. The 7% who had already buy one are called the early adopters.

In the diffusion of innovation theory early adopters are after the innovators, the first to try new ideas, goods and services.

I had the opportunity to interview three of them. They are convinced by the product, and will not go back to traditional protection as they believe period-proof underwear is a better alternative for their health and the environment. They are willing to spend more money to buy this product from other countries and wish it exists in France.

However the insights I gather with non-users were quite different. They are scared about this product because they don’t know if it is efficient in terms of absorption and they don’t know how to use it and clean it.

"I have no idea how do you wash this kind of products. I would be scared of staining my other clothes." Julie, 31 yo

A major part of them said they were interested in buying one if they are convinced of its efficiency and if it is 100% clean, which means without any chemicals in it as it is the case in traditional tampons and pads.

"It would make me try if I read that this product is 100% safe for my health." Sandra, 25 yo

Also some of them would take the plunge if it has been recommended by their friends or people they could identify with.

"I think I would try if one of my friends would tell me that she is using it and that it works." Laura, 28 yo

Who is our user?

To gain rapidly market share it was strategic to target the non-users, as the users are already convinced by the product we assumed they will try a new French brand. So with the information we gathered earlier here is our Persona.

We chose to target first young woman living in cities, who are tech savvy and are used to buy their products online. Our persona use social media to interact with her friends and is willing to pay more for healthier and environmental friendly products.

What are her pain points?

She doesn't want a product that is not efficient in terms of absorption because well, this is her periods we are talking about! She thinks that period-proof underwear are uncomfortable and doesn’t know how it works as none of her friends had already tested it.

1.2. Problem Definition

Now that we have a clear understanding of who our potential user is, it was time to define what problem we need to overcome to provide the ideal experience to our users.

We know from our study that period-proof underwear has a strong business potential in France. Because we know that when it concerns their periods women want what is best in terms of efficiency. They need to feel secure with their protection but they don’t want to make compromise on their comfort. They want a product that cause no harm to their health and feel concerned about the environment and the impact of human waste on the planet. But we have observed that absorbing pants scared women for many reasons :

. They don’t know if it is efficient in terms of absorption.

. They think it is uncomfortable and don’t know how to use it (during the whole day? only at night?).

. It is difficult to find information about this kind of product since none of their friends had tried it.

So how might we provide an easy, transparent, self-explanatory platform so that women feel serene and confident to try and buy Smoon’s period-proof underwear?

The UX challenge now is to find solutions on making the best online shopping experience to meet users and business needs.

1.3. Ideation

From our study we gathered tons of information on what our potential users expect regarding hygienic protections. The challenge was to choose and prioritise the features as the company was at its very early stage and the business objective was to develop a MVP as quickly as possible. Firstly because a lot of competitors on the French market recently started to pop out and secondly to gather information on the users as soon as possible to continuously improve the website along the way. According to the AARRR Framework we wanted to release a MVP to start the Acquisition phase and begin to monitor the acquisition rate and learn from our first users.

Which features?

We determined that our potential user value transparency when it comes to choose a product. They need to know what the product is made of to be certain that what they are buying will cause no harm to their health. Also they need to have information on how to use it. We also learned that accessibility and simplicity is an important element in the buying process. Today the accessibility of traditional hygienic protections is very strong, you can find tampons, pads or cups in every grocery stores. And finally we found out that testimony of users could be an interesting section on the website.

We decided to provide these four main features on the first release of the e-commerce website:

Information Architecture

To be honest this phase was not as difficult as it would have been with an e-commerce website that has a lots of different kinds of products which needed to be organised in the best way for user to access them. For this one I didn’t use card sorting to help me organise the information. Here we only have one product and two offers : single unit underwear and pack of three underwear. The only thing I needed to think about is the evolution of the company and the fact that more and more products would be displayed on the website in the future.

Sitemap

With the results of the feature prioritisation and inspiration from other competitor websites, I created a site map to define the overall structure. This was to ensure that informations needed by users were going to be placed where they would expect to find them when visiting the website.

User Flow

The user flow help me make the experience suited for the goal of our persona. The point of this was to define the intended steps the user might take to complete her goal and allow the user to access the information needed from every point of entry on the website.

Our persona first goal was to find information on how the underwear works but our user would want also an efficient checkout process, so it was important that I cover this in on one of my user flows.

1.4. Prototypes & Usability Tests

Low and mid-fid prototypes

Based on the main features and my user flow I started sketching the main screens in order to quickly explore several concepts for the website layout. I tested this with 4 participants close to the persona to validate if they meet the user and business needs. Then from the result and insights provided when testing I moved on the mid-fidelity wireframe for which I used Sketch App.

Usability tests

Once I finished all the screens, I made a prototype to do usability tests. These tests were important and I'm glad I took the time to do it as it allowed me to change some of the layout before adding the visual elements. I conducted the usability test with 5 participants and asked them to complete 2 different scenarios:

  1. "You want to find information on the product and after that you decide to buy a Smoon Lingerie underwear. Please show me how you do it."
  2. "You want to find information on how to use and clean a Smoon Lingerie underwear. Please show me how you do it".

And here are the findings I learned from the test:

. Overall users were able to easily navigate and locate information on the product and the product itself in order to buy it.

. Some of the testers found the layout of the homepage a little bit too complicated and suggest that the first image should provide a clear call to action to the shop page.

. Some testers suggest to separate two sections: How it works and Technology.

These tests and the insights I gathered helped me changing some layouts of my pages to make them clearer for the users.

II. Branding Strategy

As mentioned at the beginning of this article, I joined the company at its very early stage. The founder had done a complete market analysis, had a strong business plan and just received the first prototype of the underwear when I came in. So it was a blank page in terms of branding and marketing. And that was also a fun part of the job! Let me explain you the decision we took and what was the challenges we encountered.

2.1. Brand Personality

The market analysis and the brand positioning helped us a lot defining which personality we wanted to give to this brand. All the newly competitors on the French market have the same positioning in terms of branding. They target women from 25 to 45 years old and have a strong feminist speech that they communicate through their claim and brand attributes.

So to stand out from the crowd we decided to target women from 15 to 35 years old and have a less feminist but more tech tone. Indeed the founder told me that the idea of creating this brand came from the assessment that:

"We are over equipped in tech clothes to face every possible situations but when it concerns our periods we are not helped by innovation. Women hygienic protections hadn't known any innovation since 1930’s ! " Mathilde, founder of Smoon Lingerie.

We chose Excitement and Sophistication for Smoon Lingerie brand personality. The key words we chose to define the brand are: Dynamic, Minimalist, High-tech, Feminine, Graphic.

We will know in the future if these adjectives will qualified the personality of the brand through the branding and marketing strategy we chose. For the logo, the packaging design and all the advertising visuals and videos we worked with a brilliant couple of French designers Guillaume & Laurie. I invite you to check their amazing work.

Moodboard

To express femininity, dynamism and security, we chose vivid colors as pink, yellow and blue as the three main colors.

Logo

For the logo we opt for minimalism with sharp and clean lines. And as a allusion to the moon cycle which is related to the menstrual cycle we add a little black crescent moon on the first O.

Colors

From a color psychology perspective, blue express reliability and responsibility. This color exhibits an inner security and confidence. As the product could be scary for new users we wanted to make them feel secure when choosing Smoon as their protection. The color psychology of yellow is uplifting and illuminating, offering hope, happiness, cheerfulness and fun. And Pink is feminine and romantic, affectionate and intimate, thoughtful and caring.

Icons

For the icons we chose thin line icons to express delicateness and simplicity. Icons are a very important elements in the design of the interface of the website, because we believe that sometimes they are better than words. They are crucial to explain the technology used for the underwear.

Typo

For the typo we opted for Quaver, a thin line typo which exists in both serif and sans serif except for buttons on which we used Lato in capital letters.

2.2. Advertising

Our advertising strategy was to have a maximum impact on our target user with minimum costs. We decided to focus first on Instagram and Facebook as we know our target users use these social media. And monitor our advertising investments by using the metrics tools provided by theses platforms.

Visuals

Through all the visuals we wanted to show how safe, confortable and liberating the product is. That was the brief we gave to the photograph and the models. Here is a little overview on all the main visuals we chose for all our supports (website, social media, flyers, banners…)

Advertising Video

Before making the advertising movie we wrote a storyboard. It was quite a difficult thing to do because we had so much things we wanted that movie to express. The lesson we learned from that exercise is that if you tell too much messages you ended up confusing the audience and not telling anything at all. So we narrow down to the most important messages and use them on all our advertising supports. Here is the written story we wrote before making the movie with the agency:

Please meet Anna! When it comes to her well-being she makes no compromise. She wants : efficiency, comfort and freedom. And what about her periods? Well there is no way she changes her habits! She’s found the perfect solution: Smoon Lingerie. Smoon is a washable period-proof underwear. It absorbs fluids immediately and drain them through the absorbing lining. It guarantees no humidity, no smell and no leak! Thanks to its seamless technology, this underwear is invisible under clothes. So whether she feels sporty, lazy or crazy, Smoon is here to give her the freedom to do so without any compromise!

Here is now what it looks like on video:

III. Growth Marketing Strategy

While I was doing the user research analysis I realised that Marketing and UX are completely interlaced. For me it was a concrete example on how the UX study drives the whole business strategy of any company. Not only it serves to build a great Experience for our users but it also provides all the information necessary to build a powerful Marketing strategy.

Here is an example: we learned from the user research that women need an efficient protection but feel concerned about their health, and wish to have access to hygienic products that would be better on these two aspects. Well, this insight became the basis of our marketing strategy. The claim of the brand has been made from it: "The protection without compromise", the advertising video put the emphasis on this insight, as well as all advertising banners and basically every communication tools.

3.1. Validate our user target and adapt the content

Once we had ideas about the content and first visuals elements, it was time (and it was already late) to get out there and begin to collect feedbacks to start our growth marketing strategy. Growth marketing is in simple words when you focus on growing an audience as fast as possible in an environment of extreme uncertainty and on a limited budget.

To build this strong growth marketing strategy the first challenge we had was to define our ideal user profiles and design the perfect hooks to personalize the message.

As an example, we know from the user research that one segment of our target would click on the ad if the content is about the ecological impact compared to another segment that is more interested in comfort. Once we know which message has the strongest impact (higher % of conversion rate on the ads) we'll know which content will fit best!

The tools we use to segment our users are Google Trends, Facebook Insight and Google Analytics.

3.2. Acquire first customers, learn from them and retain them

The first challenge we faced was to acquire the first customers without having the final products yet! It was hard to know where to start. So the first thing we did was to build a landing page and start the teasing campaign through instagram and facebook accounts in order to obtain user information and have a small database for the launch.

Landing page

Then we sent an emailing campaign to inform of the launch of the website, created a content strategy on social media and built relationships with influencers within circles relevant to the business. This had a strong impact on the preorders: an influencer's post on Smoon could increased the rate of pre-orders by 90%.

Emailing campaign / Facebook page

To capitalize on the launch of the website, we opened a one month pre-order special deal. This allowed us to gain traction gain money for the next steps.

At this time things started to get real! It was exciting but scary at the same time. We were afraid of doing something wrong but we learned later that, not doing anything and wait for the perfect visual with the perfect claim and the perfect product was actually the mistake! Doing something wrong and obtaining feedbacks is actually what gives you advantage from the competitors because you get to satisfied the user earlier than them. So the big lesson we learned is that we have to test and ask for feedbacks on the products continuously. Shift the strategy and adjust the product everytime it is necessary and always re-evaluate every assumption.

IV. Results

Let's now have a look on the final screens of the website:

Homepage 1
Homepage 2
How it works page
Shop page
Product page
Checkout page

Here is the link to visit the website www.smoon-lingerie.com !

V. What’s Next ?

5.1. Keep iterate on the UX designs

This is the beginning of the development of this e-commerce website. The next steps would be to further conduct usability testing and iterate on the designs. An important feature has been highlighted in the case study and isn't available on the website at this moment. It is the "Customer Review" section. This section isn't available for the obvious reason that we were on the pre-ordering phase. Once they received their products the first thing to do will be to create this review section so that they will write their feedback on it.

Looking forward, we will expand our distribution model from website into retail shops, and develop a synergy around it.

The visual identity will have to evolve in order to offer consistency on all customers touchpoints.

5.2. Continue growth marketing strategy & maximise ROI per KPI

An important aspect of the growth marketing is the visibility on Google search, it is crucial for the business to improve the SEO.

In order to minimize wasting money, we need to measure campaign metrics and ROI. We created Facebook and Instagrams ads, we now need to evaluate ads conversion with Facebook Pixel. Many other tools are at our disposal to measure marketing decisions: Facebook Audience Insight to define our core target, Google Analytics to measure traffic through our website and conversion rate, Google Adwords to monitor paid search advertising, Hotjar to understand users behaviour on our website etc.

It is crucial now to collect and analyse all of these data to draw conclusions in order to validate or switch the product to continuously increase the product to fit the market.

Thank you! I hope you enjoyed reading it!

I’m Chloé.

My Behance, My Linkedin

Written by

Former Product Marketing Manager turned UX/UI Designer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store