E-Commerce Website Re-design for Welly
Event
Solo Passion UX Project
Inforamtion Architecture Course
Time Frame
May - November 2022
10 Weeks
Tools
Figma, Adobe CC,
Google Workspace
Deliverables
Website Design
Presentation and Pitch
Personal UX Project done over 10 weeks.
I revamped the Welly website, leveraging my expertise in UX design, interaction design, visual/UI design, information architecture, design systems, A/B testing, and wireframing, to showcase the brand's captivating essence and diverse range of engaging products, such as first aid kits and supplements.
This redesign aimed to maximize the online platform's potential for effectively presenting Welly's offerings.
Overview
Problem
The brand "Welly", a supplement and first aid brand, possesses a vibrant, family-oriented, eco-friendly, and aesthetically pleasing identity.
However, its online presence falls short of showcasing its full potential due to the absence of Interaction Design, Visual/UI Design, and Information Architecture on its website.
Solution
Focus on crafting a unique and meaningful E-commerce home and product page, setting the brand apart from other supplement companies while fostering sales growth and meeting business goals.
Through using clean and organized systems, along with customization features, users will experience enhanced navigation toward the primary call to action, resulting in increased sales and engagement. Infusing the website with character and individuality is pivotal for establishing a robust brand identity that outshines competitors.
Agenda
Discover - Site Map
Design - Home Page Design
Analyze | Develop - Product Page Design and A/B Testing
Deliver - Final Designs and Decisions
Consist stages for Experience Design and Research: Problem, Ideation, Testing, Solution, Impact and Reflection
Discover
Site Map
Research + Insights
Information Architecture
-
Current Site Map
-
Modified Site Map
Research + Insights
Research
Secondary Research
-
Conducted 1.5 weeks of research on Reddit, Facebook groups, blogs, and reviews from pharmacy chains.
-
Performed a competitive analysis of the saturated supplements and first aid industry to identify current successes and areas for improvement.
-
Explored the psychology and motivations behind choosing specific supplement and first aid brands.
Primary Research
-
Spent 1.5 weeks gathering data from college students, parents, and children.
-
Listened to firsthand experiences from our target audiences to tailor the final product to their needs.
-
Conducted 65 surveys and 18 user interviews.
User Research
82%
Leaves the website without purchasing anything because...
23%
15%
6%
15%
41%
Too many options
Don't see the benefits
Feel like I can find cheaper options
Not reliable
Not for me
Competitive Analysis
.jpeg)
-
Mission awareness eco-friendly supplements and first aid sell more and grab more attention from buyers.
-
68% of people get an allergic reaction from bandage materials.
-
Many supplement companies use icons and symbols to represent the health benefits.
-
Welly is one of the most successful first-aid companies in the bandage industry.
-
First-Aid companies are very culturally aware and family-oriented.
Insights
Things to focus while making modifications
-
Minimize information overload of too many products.
-
Highlight the allergy-free, safe bandage material, and eco-friendly advantages that Welly offers.
-
Welly has so many great products. Need to categorize more efficiently for easier navigation for users.
-
Simplify the details and prioritize showcasing product graphics on the website so customers/users can easily scan and navigate the website more efficiently.
-
UX writing and product explanations so customers could land on our webpage more easily through the search engine.
-
Use a fun and lively UI layout to accentuate the brand identity while considering Accessibility Guidelines and Inclusive Design.
Research + Insights
Information Architecture
Current Site Map - Scanning
Current Site Map
_edited.png)
Notes of Things to Modify
Modified Site Map
Design
Homepage
UX Writing
Current Homepage
Modified Homepage (Desktop+Mobile) - Wireframe and Final
-
Homepage Wireframe
-
New Mobile UI
UX Writing
-
Prioritize improving visibility to help potential customers easily find and land on our webpage through search engines.
-
Simplify and use easily understandable pharmaceutical terms for smoother navigation.
Current Homepage
Scanning and Problems
-
Information overload.
-
Unnecessary slides disrupt the flow of "exploring" the website.
-
The language for product explanations is not clear.
-
Reduce the number of unclear graphics and icons to ensure they are more relevant and easily associated with the products.
-
The website lacks clear guidance on where to purchase the products.
-
There's a deficiency in highlighting key selling points and trust- building aspects.
Solution moving forward - Wireframing
Following the completion of site mapping, thorough research, and the identification of necessary modifications, I initiate the process of re-designing the home page by creating wireframes.
Wireframing allows me to get all my rough ideas out on paper.
My key to designing is to follow the rules and then break them.
Wireframing lets me explore the best options for my design systems.
Modified Homepage(Desktop + Mobile) Wireframe & Final
Homepage Wireframe
_edited.png)
Section 1:
Home Hero &
Navigation
Section 2:
The Services
Section 3:
The Details
Section 4:
The Purchase
Section 5:
The Social
Section 6:
The Footer
Develop - Part 1
Product page
Current Product Page
Research
Modified Product Page Wireframe A & B
-
Understand the Patterns And Needs
-
Opportunity Areas From Insights
Modified Product Page A & B + New Mobile UI
Current Page Page
That's it
That's all you get from the original Website.
Research
Understand the Patterns and Needs
65 Surveys and 18 Interviews
were impressed by the extensive array of Welly products and eager to give them a try.
76%
-
64% of individuals exhibit long-term trust and loyalty to a single supplement brand.
-
38% of people demonstrate brand loyalty in first aid or supplements based on recommendations from family and close peers.
-
56% of consumers prioritize purchasing safe materials for themselves and their families.
-
87% of individuals express a preference for observing the shape, color, and size of products, including bandages and supplements.
-
81% of respondents indicate a desire to customize their supplement bundle kits.
Research
Opportunity Areas from Insights
-
Seizing the opportunity to make a positive initial impression and establish long-term trust with customers is crucial.
-
Introducing customizable bundle options, enabling users to explore various Welly products, demonstrates the brand's confidence and extensive product range.
-
Emphasizing the use of mild, safe, yet impactful materials in Welly products is essential.
-
Providing a glimpse inside Welly products is crucial for assisting customers in making easier and safer choices.
Modified Product Page Wireframe A & B
Modified Product Page Wireframe A
Modified Product Page Wireframe B
Product Details
Welly is a medical/wellness brand.
Considered what users would want to see.
Both
Product View
User preference centered around viewing the product's anatomy, appearance, and its contents.
Side B
Personalization
Users desire the ability to personalize their own bundles with items of their choice, and given Welly's diverse product range, offering this option for users to curate their own bundles would enhance their experience.
Side B
You May Also Like
Promote and recommend users to discover additional products from the Welly's offerings.
Both
Promote Good
According to research, users are attracted to buying products from a company that is safe, and kids/environmentally friendly.
Both
Customization Button
Users will be provided with the choice to either order the pre-designed bundle or personalize their own bundle.
Side B
Modified Product Page A & B
Develop - Part 1
AB Test
Why AB Testing | Goal
AB Test with Designers
Result
Why AB Testing | Goal
Why AB Testing?
When developing designs for the product page, I conducted A/B testing to get insights on the UI design.
A/B testing allowed me to understand the hierarchy of my UI and solidify features.
I got great feedback and suggestions that I was able to implement.
AB Test with Designers
AB Test with 11 UX Designers 2 Advertising Designers
.jpeg)
Result
Results of Product page A
-
No one preferred A compared to B.
-
Simplicity is great and concise.
-
Customers could find and purchase related products easily on the webpage and could learn about the company and product details more efficiently.
-
Easy navigation
-
Straight to the point and not busy.
Results of Product page B
-
Love the customizable option given.
-
Wish to see more pages that explain how the customization works.
-
Love how they could have the option to buy the original option and buy a customizable option without the price changing.
-
Very helpful to know the inside of the products and materials.
-
Incredibly perceptive and approachable UX that delved into customer needs and identified areas where Welly could improve.
-
Very helpful due to clear descriptions, images, and categories.
-
Great imagery and explanations.
Deliver
Final Designs and Decisions
User Testings With Potential Users
Final Designs for Product Page
Impact
Reflections and Takeaways
User Testings With Potential Users
6 Students, 3 children under 14 years old, and 4 Professors
-
Fonts are too small.
-
Need more spacing and more accessible readability.
-
Need more specifics on how customization works.
-
Layouts and graphics are creative and fun.
-
The usage of colors is not distracting and is enjoyable.
-
User-friendly Sitemap, navigations, and layouts.
Final Designs for Product Page
Impact
UX Analytics /Metrics (HEART)
-
Deliver a series of user-centered metrics to measure the user experience impact on a large scale.
-
Establish a distinctive link between UX and revenue-driven metrics, providing tangible results.
Impact
Outcome
-
The revamped site navigation and homepage were successful in testing.
Over 80% of individuals in testing understood all the products offered by Welly. -
The success extended to the customization features on the new product page, with people drawn to bundle kit options for a diverse range of Welly products.
-
96% of potential customers considered Welly a reliable and trustworthy company.
-
This perception was attributed to the clear highlighting of safe materials, eco-friendly practices, and family-oriented branding on the newly designed webpage (both homepage and product page).
-
The overwhelming array of products no longer posed a challenge due to clean and organized navigations throughout the website.
-
Well-crafted language and effective calls to action guided customers to choose the right products for their needs. 45% of individuals identified a compelling reason to choose Welly over other brands.
Reflections and Takeaways
-
I did not create a digital application (prototype) since most users were hesitant to download an app for purchasing Welly products. However, I am enthusiastic about designing a UX that seamlessly integrates with the customer journey, enabling them to fully utilize and maximize Welly products for optimal health support and guidance.
-
I would delve deeper into personalization features, encouraging users to mix and match various Welly products.
-
I aim to enhance adherence to WCAG standards for improved accessibility.
-
I am looking into diverse strategies to boost trust and accountability, such as incorporating intake suggestions for supplements.
Please reach out if you have questions!