Boosting Sales Through Redesign User Experience for E-Commerce Site
Enhancing user experience to drive higher conversion rates through rapid iterations and usability testing for e-commerce startup Happy n Beyond.
Client:
Happy N' Beyond is a small business owned by Canadian women and indigenous people. They sell stickers and tumblers that spread joy.
My Role:
Learn our client's needs. Analyze potential competitors. Recruit participants and conduct usability testing. Iterative prototypes based on interview feedbacks.
Case Study Overview:
As an e-commerce startup, Happy N' Beyond wants to convert more visitors who come to their website into real buyers.
We, 3 user experience designers and 2 data analysts conducted 15 usability tests and thorough analyses with potential users to better position the demand for this website. We utilized rapid iterative design to quickly and accurately improve the content strategy and visual design of the website, with the goal of attracting customers to make purchases.
Timeline:
April-May 2024 (6 Weeks)
Discipline:
UXUI Design, User Research, Client Project, E-commerce
Kickoff
Get to know our Client
Our client initially started their small business on Etsy and local community markets in Canada, however, now they are looking to expand their business and create a well-developed brand site. We worked closely with the brand owner to solve the problem:
How do we improve the UI design and content organization to increase conversion rates?
Challenges
What causes the current low conversion rate？
Plain Layout
There is no featured item promotion, and there is no focus on brand tone, leaving users with no deep impression.
Unattractive Content
All content has no personality, reads without focus, and cannot attract users’ attention.
Unclear Branding
This site is not systematically branded. No distinguishing elements compared to other competing sites.
Competitor Analysis
Learn and differentiate our site from other "Sticker sellers"
To cater to our target audience who love shopping online and buying unique stickers, we conducted research and analyzed 14 sticker brands and 12 e-commerce websites that had a high conversion rate. We aimed to learn how they built up their brands and attracted customers.
Links for more details:
Things to learn
01 Use of tab buttons for categories and quick search.
Example from: Redbubble
02 Minimalistic and professional visual layout and font choices.
Example from: Littleworldproject
03 A brand story that resonates with and emotionally impacts customers.
Example from: Popstick
Things to avoid
01 Massive dropdown categories.
02 Being too cute and immature.
Example from: Bigmoods
Example from: Popstick
Explore Possibilities
Meet our potential customers
We got in touch with a total of 68 potential users and did 30-mins interviews with 15 of them. In the recruiting process, we targeted young females between 18-35, who may buy stickers and tumblers for themselves or their kids in Canada and the US.
How did we recruit our interviewees?
01
Reach out to people we know who are into online shopping and sticker buying.
02
Spread recruit forms on social media like Facebook groups, Instagram stories, and X with appropriate tags.
03
In order to recruit more Canadian participants, we also reach out to Canadian social groups.
Who are our interviewees?
All participants shop online at least once a week.
Participants usually buy stickers for themselves or for friends as gifts.
3 from Canada
12 from US
Learn In Depth
Listen to the user needs
Our client does not have a fully developed website yet. Therefore, we have created a prototype for users to test its usability. We are also using an iterative design method to improve the prototype. After every 5 user tests, we collect important feedback and use it to revise the prototype for subsequent tests.
01 The website lacks the brand's own characteristics.
During the interviews, we asked respondents about their overall impression of the site, their impression of the site owner, and how the site made them feel.
60% of the respondents said that they feel that this website is very much like a startup, and they think the owner is cute and young. This is the impression we don’t want to leave on users.
Initial prototype: Homepage
Font
-
Not modern enough and looks massive.
-
Only one type of font has been used. Users suggest adding some font variety to reduce the tiredness of reading texts.
Layout
-
Too much like a template.
-
Users like the navigation bar with no drop downs.
Images and contents
-
The banner picture brings a Millennial vibe. A bit isolated from brand identity.
-
There're some accessible issues with texts on pictures.
02 Bad content and copy cause bad experience.
In our initial prototype, we did not change the copywrites provided by the customer, nor did we carefully write the added parts. This caused a lot of problems in user testing.
Contrary to our guess, users will read the text on the website very carefully. If the text is not attractive, then the only thing that can attract users is the product pictures, which will make the website lose more than half of its competitiveness.
Example 1:
The text on the banner is not clear, making users confused about the user story here. Users will think that the brand story will describe the individual community, but in fact, in the brand story, this part accounts for a very small proportion.
Initial prototype: Homepage
Example 2:
It is not common for users who are familiar with indigenous culture, so when they see these event names, they feel very confused.
Only one user, who lives in the Toronto area of Canada, pointed out that she could understand these events taking place in an indigenous neighborhood.
"Before you said the titles are communities in London, Canada, I have no idea what did they mean."(Betty)
Initial prototype: Event page
Example 3:
Too many details about the item. Although this looks like a professional online shopping website, users are very tired of such detailed descriptions. They need descriptions that get to the point.
Initial prototype: Product detail page
03 Hard to associate indigenous culture with the brand story.
Initially, we wanted to highlight the client's support for the indigenous community and the aspect that they themselves are part of this community in the brand story. However, after user testing, we found that users could not find this brand’s products to be connected to th community.
All participants said that the characteristic of originality can leave a great impression on visitors and they are willing to pay for it. However, this story has no connection with the products sold on this website and is very isolated, which also makes them feel a little confused.
"They left me the impression of embracing the indigenous culture and I would love to support them. However, I'm just confused why their products are so not related to this culture?" (Heidi)
Initial prototype: Our story page
Final Prototype
Design decisions towards a raise in user experience and conversion rate.
In the improvement of the draft prototype, we solved three problems that appeared in the early stage with new design decisions we made.
We as a group, in the end, want to highlight some design decisions we made throughout the whole process influenced by all our previous research and tests to reach our design goal:
How do we improve the UI design and content organization to increase conversion rates?
Homepage
It is very important whether the homepage can capture the visitor's attention and make them want to explore more. We've made these major improvements to this page:
-
Functional head banner with eye-capture real-product image.
-
Showing all types of products in "Best Seller". Quickly provide users information of what this brand is selling.
-
Highlight and multipule entrance for "Our Story". Use content and pictures that give a joyful and vivid vibe.
Our Story
Write a very personal story about the brand owner and fully reflect their personality through words and pictures.
When users read this page, they will feel like they have met two new friends. This will also make them more willing to buy from this brand
Events
For products with low unit prices, users are more willing to purchase them offline.
For our customers, their advantage is also the community market. Therefore, adding a well-explanatory event page with details to this website can also help customers increase offline sales.
Product Listings
Using clear and good-looking product images and adding hover animation effects can prevent users from visual fatigue when browsing listings.
Product Details
When a product has very outstanding features, such as being dishwasherable, waterproof, and made of good materials, we want to put these emphases in a conspicuous place for visitors to see it to arouse their interest in purchasing.
For more details, they are listed in categories to make it clearer and more intuitive.
Reflection
Experience working with real-world client and users.
The experience of working with 4 designers on a usability project at the same time is rare. In this project, I gained some new insights in terms of my ability to collaborate and communicate with clients.
In team:
Having more designers on board results in more innovative ideas. During our brainstorming sessions, we come up with many exciting innovations, but when it comes to making decisions, we need to evaluate the feasibility of each idea and its compatibility with our customer's products.
This evaluation process often leads to some back and forth discussions before we arrive at the final plan. Throughout this project, which lasted over a month, we progressed from being uncertain about making decisions to being able to swiftly finalize the direction. Our abilities have grown significantly as a result.
With client:
Designing products for startup customers can be challenging because the customers often don't know what they need. As designers, we need to help them identify the most important user needs. Additionally, we need to assist clients in determining the project's marketing direction. This process can be difficult and requires numerous team discussions and market surveys.
However, after much effort, we have finally identified a clear direction for the project. It is the most fulfilling feeling we have had so far in this project.
Client meeting picture.