Maison de Beaute
Membership Sign-up
A Case Study
Summary
Maison de Beaute Shop is an online fashion and accessories boutique, now offering an exclusive membership program for users to easily sign up and join to receive rewards and other incentives.
Overview of the Project
Roles and Responsibilities:
As a UX designer, I was tasked with doing a small portion of surveying and interviewing users, conducting usability testing, but mainly focused on the complete design phase, while participating in many critique sessions along the way. I sketched out all ideas and created low-fidelity wireframes, and prototypes in Figma.
Problem:
The client has a goal to get more users to convert to members by adding a membership program to its website. This will create an opportunity for repeated shoppers to be rewarded for their loyalty. Rewards and incentives can also cause customers to spend more money, which means more revenue for the business.
Audience:
Any woman who likes to shop online for fashion, accessories, and beauty products.
1. Research
My team and I conducted a three-week design sprint. In week 1 of the design sprint, my team and I needed to find users. We needed to conduct the right research and get quick information.
Research methods used:
How Might We’s User Surveys Journey Map Empathy Map
Discovery and Research
Because our client had several things that they wanted to have solved on their website, some of them were not as high of a priority than others. The client agreed, due to their budget, that it would be a good idea to narrow it down.
-
To get to the MVP (Minimum Viable Product), we decided to conduct a “How Might We (HMW),” exercise.
Within this defining phase of our design sprint, we were able to use this type of pessimistic thinking to draw out the issues that people have with online shopping.
-
We then turned those responses into questions
-
Then grouped them together and found that:
The membership sign up was not only one of the concerns for users, but also, one of the main goals of the client, because of its potential of generating more traffic and revenue to their online store.
-
With the data received from our client, I was able to create user surveys.
-
This helped in getting a kick start on specific questions that needed to be asked, related to getting members to join.
Survey Results
Out of 10 female users:
-
40% were 25-34 years old
-
30% were 35-44 years old
Out of 10: when asked how often they shopped for clothing and accessories online:
-
40% said, “Weekly”
-
40% said, “Monthly”
-
90% out of 10 users prefer a “One Stop” shop.
Out of 10: when asked if they like to take advantage of exclusive access to new arrivals, discounts, special offers, offered through online shopping memberships:
-
70% said, “Absolutely”
What do you like best about online shopping memberships?
-
9 out of 10 all wrote responses related to receiving discounts, exclusive offers, and things related to perks / incentives.
More empathy was drawn from the user interview sessions and helped to confirm information collected from surveys and HMW session. This let me know that we were on the right track.
Findings:
Revealed “Pain Points” over all, that many users shared in common.
-
Items being out of stock
-
Wrong size, bad / awkward fit
-
Same styles on every site / no individuality
-
Poor quality clothing
-
Too pricey
-
No rewards for frequent shopping
-
Shipping too pricey / long shipping wait time
Persona:
All the research data derived from the Client Interview, HMW Session, User surveys, User Interviews, after being filtered and analyzed multiple times helped me to produce our persona. Meet Tiffany J!
Journey Map
Empathy Map
User Stories
Due to Tiffany's busy work schedule, she finds herself doing most of her shopping online. She likes to shop at many clothing stores, but actually enjoys the convenience of shopping from home which helps her avoid the crowds and traffic.
-
Likes to be first in line for the latest fashion trends, new arrivals
-
To purchase good quality and high-end, brand name fashion and accessories
-
Wants to be rewarded for shopping loyalty, get the most for her buck
-
She hates seeing the same featured items from store to store, no individuality.
-
She hates receiving poor quality and wrong sized items from online shopping
The Journey Map is a combination of the user stories and the persona that we used to help visualize the exploration of the new user as they would take a trip, step by step throughout the process.
The Empathy Map gives us more of a personal, human connection that we need, as well to help define the user experience. It is how we were able to capture what the user, “thinks and feels, hears, sees, and what they say and do.” This information comes from a lot of the responses from user interview sessions that we conducted. It captures the real experiences and pain points of our users as well as the other methods of research.
The data from the user journey map helped me to create user stories based on the user’s online shopping experience. It was then sorted and color-coded based on priority to the solution.
Tiffany / 33 years old: Software Developer
2. Process
Information Architecture
I developed User Flows to illustrate the user's path to the end goal: signing up for a membership to the website.
-
Users should be able to come to the website and easily identify where and how to become a member.
Minimum Viable Product (MVP)
-
Electronic sign up form with a submit button
-
Make form accessible from the home page and navigate to a member sign up page
Research Overview
Research used was both qualitative and quantitative.
The User Surveys and User Interviews, both allowed us to gain more insight during this define phase on our target audience, which enabled us to start towards the design process.
-
From the user surveys, we were able to filter and analyze the data based on the users’ shopping habits.
-
The surveys provided quantitative data as charts and graphs created numerical percentages that gave us something to count.
2. After receiving permission from willing participants, we went forward and conducted live interviews to gain an empathetic connection to their experience.
3. Interviews with the participants gave us a more qualitative approach as they were able to express their wants and needs.
4. All the data helped to create our Persona, Journey Map, Empathy Map, and User Stories, which will be used as our reference throughout the design process.
The User Flow shows two paths for the user
Path #1 (Through the Banner)
-
After landing on the Homepage, a banner appears with a “Discount offer to Join” > “Click” the CTA “Join” button on the banner > which navigates you to the Sign-up Page > Fill out the Sign-Up form > “Click” Submit to send the form > Receive a “Welcome” message box > “Click” the Back to Home button.
Path #2 (Through the Profile Menu)
-
After landing on the Homepage > entering the Profile Menu > “Clicking” the “Join Us” option > Navigating to the Sign-up Page > Filling out the Sign-Up form > “Clicking” Submit to send the form > Receive a “Welcome” message box > “Clicking” the Back to Home button.
Wireframe Sketches:
Storyboard:
The storyboard was actually my first introduction of my persona as she debuted in her user journey through the online onboarding process to become a member.
-
This was one of the very first steps of the ideation stage of the sprint
-
The purpose of showing this sketch of the user was to demonstrate how easy it is to navigate through the sign-up process from the homepage.
Now that the user flow is intact, it’s time to execute. I went back to sketching out the flow, but this time, I sketched very quick visuals in detail of what the interface may look like throughout the flow process.
After many draft sketches of the solution, my team and I decided that we will go with this sketch as the top choice for the interface and decided to further develop the screens.
Digital Wireframes:
I quickly got to work on the digital wireframes. It looked like they were good to go, so I presented it for feedback.
After receiving feedback:
-
I realized that if a new user landed on the homepage, they may be distracted by other things on the homepage and forget about signing up. So we agreed that maybe we should let a promo banner appear.
-
At that point, I felt that before we develop another set of digital wireframes, sketches, perhaps we could combine the concept by cutting out the sketched out frames.
I created a sketched paper prototype to test the interface of our solution.
-
Homepage
-
Homepage (w/ Promo Banner) > CTA “Enter” Button
-
Member’s page w/ Sign-Up Form (that scrolls up and down)
-
“Welcome” Message Box ”
Finally, after we agreed that the paper prototype layout was the best iteration for now, I ran with it and jumped back into Figma.
-
Several more iterations were developed.
#1 #2 #3
Usability Testing on Wireframes:
Throughout the iteration phase, some who tested the prototypes said:
On “sign-up” form:
-
Is this a button to submit the form? It has no words so I’m assuming.
On the “promo banner” (there’s an “enter” and “close” button present):
-
If I click close after filling out the form, what happens?
-
Will I not get the discount, how will I know?
There’s a “close” and “shop” button on the “Welcome” message box.
-
If I click close after it shows up, do I not get the discount?
3rd iteration Revisions: “Welcome” message box:
-
I removed the close button from the top right of the message box completely, as it was confusing.
-
I added a “Back to Home” button instead to navigate the user back to the homepage.
-
I removed the “shop” button from the bottom right side of the message box completely, as it was confusing.
In the 3rd iteration of the “Homepage” with the banner:
-
I removed the “close” button from the top right corner of the banner and added only an “X” mark for “close” instead.
-
(This way, the user can decide whether or not they want to click enter for the discount, or close the banner and pass)
This feedback definitely let me know that it was time to add in words, pictures, and other details and get ready to create the necessary screens and move into usability testing for the prototype.
Tasks Tested
In the first path:
-
A banner appears after seconds of landing on the homepage
-
User clicks “Enter” to join
-
User navigates to Membership page and fills out sign-up form
-
User clicks “Submit” button.
-
The user receives a “Welcome” message
-
A link at the top right corner will navigate the user “Back to Home,” once it is clicked on.
-
The logo also serves as a navigation / escape back to the homepage on all screens.
In the second path:
-
the user will go under the “profile” menu from the homepage > Select “Join Us” >
-
This path may be helpful for a user who arrives on the site without seeing a banner or who may have exited out the promo banner.
.jpg)
Through this path, after the user clicks “Join Us,” they will also see that they will save 30% as well.
-
They have the option to Proceed to the Sign-up page, or exit the ad, “back to Home.”
-
Once they click proceed > They will complete the same user flow process to the Membership Sign-up page, fills out the Sign-up Form, and submit it.
-
They receive the “Welcome” message and navigate back to homepage.
This path may be helpful for a user who arrives on the site without seeing a banner or who may have exited out the promo banner.
Click Test / Heat Map
-
Since users were able to sign up for a membership via promo banner, I decided to test the idea that if the banner was not available, would they know how to go to the website and find a way on their own.
-
So I performed a “Click Test”, which provided Heat Map results as well.
I provided a clip of the website’s homepage and asked a simple question:
You land on the homepage of a clothing website: Where would you go if you wanted to sign up and become a member?
Click Test / Heat Map Results
-
The Heat Map test results showed that 100% of users that took it felt that the “Profile” icon would lead them to sign-up for a membership.
-
It was 100% Successful, with 0% skips, and 0% Failures out of 9 users
-
Most users completed the task in 8.17 seconds or less.
Using the newly revised prototype, we reached out to some of our willing participants and started to conduct additional usability testing.
User Testing Results
1. When entering the sign up page, users seemed to like the “sign up using social media accounts” option.
2. All 6 users liked the interface and felt it was easy to understand and navigate / had no struggles.
3. 5 out of 6 users found the second path to sign up for membership beneath the profile menu.
-
1 struggled but found it.
-
1 found it with no issue
-
Both suggested putting “Join Us” link on the page, not under menu.
-
3. Outcome
Overall Experiences:
At first, it seemed to be as simple as designing a page, a form, and by placing an accessible link somewhere. As someone with an extensive history of graphic design and layout, I am starting to back away from that type of thinking. Thoughtfulness is key to a user-centered experience. Almost all feedback the user gives can be considered in planning a design.
What stood out to me were the comments made regarding the, “Join Us” link. The membership sign-up page seemed to be traditionally available underneath the profile menu, along with “account” and “sign in,” but should probably be out in the open as suggested by only 2 of the users. Other users’ mental models directed them to the familiar “round head and shoulders” icon. Perhaps I will consider making those changes moving forward.
Revised Prototype
View Clickable Prototype
Prototype
View Clickable Prototype
Next steps for improving the app
-
Expand on the prototype; creating a high fidelity prototype
-
Maybe design solutions for other problems the website is having
-
Next level steps needed to complete this project would be to hire a developer.
-
As it was recommended, I will consider adding the “Join Us” link outside the profile menu, within the homepage.
-
Create more iterations of the homepage displaying the new location of the “Join Us” link.
-
Consider changing the word "join us" to "membership." This way it is not as confusing to users.
-
Maybe adding the "Join Us" link (or banner) somewhere near the top of the page so that it catches the user's eye when the page loads.
Final Thoughts
I feel that the usability research that I conducted was successful in helping me to determine where further changes could be made. One of the mistakes I made was in the beginning, I created a user survey that did not ask the right questions. It started to haunt me once I started extracting the data and made attempts to move forward. Once I created a new survey, centered around a few basic questions, I received the answers I needed that moved me forward, quickly. I also got stuck on my competitive analysis. The companies I chose were similar to my client’s business, but I kept getting confused while comparing information. Because I didn’t produce what I feel was supportive enough information, I decided to leave it out as time drew near to the end of the last sprint. I will consider adding it in later as I continue to build on this project, because I feel if presented properly, it could be effective in improving the user’s online experience.