SB Skincare
Small Business E-commerce Site Redesign
OVERVIEW
Small business e-commerce site redesign
SB Skincare is a small business that specializes in homemade body moisturizers. Given the fact that SB Skincare is an online-based commerce business, they employed me as a freelance designer to help uncover and conceptualize areas of opportunities to improve their target audiences' online shopping experience.
Role
Visual Design
UX/UI
Interaction Design
User Research
Team
Individual
Tools
Figma
Photoshop
Illustrator
Google Forms
​
Duration
4 weeks
Dec '21- Jan '22
Deliverables
10 site page mockups
Semi-interactive prototype
Style guide
PROBLEM STATEMENT
Majority of SB Skincare site visitors leave without making a purchase or adding items to their cart
First impressions are everything especially when it comes to attracting prospective customers for an e-commerce business. In order to get a glimpse of the impression the SB Skincare site was having on its' visitors, I reviewed the site analytics powered by Shopify. Uncovering the metrics revealed that in the last quarter of 2021 the site experienced a bounce rate of 78.92%. In addition to the high bounce rate the following metrics shed light on the current state of the SB Skincare site.
457
visitors (mainly on desktop)
555
sessions
2min
avg. session
duration
9
sessions
converted
1.62%
conversion rate
Since the data reflected that a majority of SB Skincare's visitors experience the store from desktop, I decided to focus my efforts on critiquing the current desktop version of the shop and creating a responsive web solution. The images below are a glimpse of how the SB Skincare site looks.
Screenshots of SB Skincare current website pages
After going through the site I made assumptions about possibilities for the high bounce rate based on these UX problems I flagged:
-
Hidden key navigation elements
-
Misleading CTAs (call-to-action)
-
Inconsistencies in visual design
-
Hidden value proposition
STAKEHOLDER & PROBLEM SPACE RESEARCH
Uncovering business goals and motivations allowed me to narrow the problem space, define the target users and then gain an understanding of their pain points
Stakeholder Interview: Business Owner
I conducted an informal interview with SB Skincare CEO with the goal of getting a better understanding of the 'Why' behind their business and brand, what they wanted to be known for, who they believed their target audience to be and what success would look like, with this site redesign. The main learnings I took away from this interview are summarized below:
Target Audience:
-
Mainly women; some men (ages 25-35)
-
Working professionals
-
African-Canadian/American
Brand Message/Value Proposition :
-
Skincare is the best form of self care
-
SB Skincare values self-love and self-care
-
SB Skincare products are natural and hand/home-made; luxurious and affordable
Site Redesign Success Metric:
-
Increased site leads and revenue
-
Quarterly conversion rate of 5% or higher
Competitive/Comparative Analysis of Problem Space
After getting a better understanding of SB Skincare and their target audience I did an in depth web search to find other e-commerce businesses that had similar problem spaces and target audiences. I settled on 2 skincare businesses (ie. Buttah and Skin Buttr) to review as direct competitors for SB Skincare and 1 global skincare & beauty company (ie. Glossier) to review as an indirect competitor (comparative analysis).
Screenshots of SB Skincare Competitor Websites
Stakeholder Moderated Usability Test + Questionnaire: Target Audience
Once I had an idea of what SB Skincare's competitors were achieving and had identified some areas of opportunity, I recruited 5 users that were representative of SB Skincare's target audience. I led the 5 users through a moderated usability test on the current SB Skincare website. In a follow-up to the usability test, I had users answer a questionnaire which addressed their online shopping behaviours, motivations as well as their opinions on the 3 chosen competitor sites.
Usability Test Goals:
-
Observe how users navigate through SB Skincare site, with the main goal of adding products to cart.
-
Gather target audience's opinion on SB Skincare brand identity/value proposition and how their site measures against competitors.
Screenshots of Usability Test Questions
Usability Test Key Insights:
1. Users struggled to find key navigation
elements
"Log in title is a bit tiny.. Maybe it could be more visible somehow.”
​
"There’s no search bar.. oh wait there is, but it’s in a weird place. It should be on the main page.”
3. Users were put off by inconsistencies and lack of thoughtfulness in the site's design
"It doesn’t look as professional, there’s no consistency with the product images/layout.”
​
"Aesthetic wise there is a lot more that could be done to make the site prettier.. i.e the 'our recipe page'.”
2. Initiation of main task (buy products) was hindered by confusing language & CTAs
"Catalogue was confusing, I was expecting to see shop or stuff that I see on other sites.”
​
"Is this a link or not? I thought clicking 'body butter' would take me to a page showing the selection of body butters."
4. Out of the 5 users tested, 60% voted neutral to the likelihood of buying skincare form SB Skincare website
"I don’t see what the value is... like will it smooth out my skin because of Shea butter?"
​
"Main issue was the website design/template is a little too basic which makes me skeptical."
Questionnaire Goals:
-
Determine how target audience perceives SB Skincare competitor sites; Determine e-commerce site features that are most important to SB Skincare target audience
-
Determine what factors influences SB Skincare target audience, when shopping for skincare online
Screenshots of Google Forms Questionnaire
Questionnaire Key Insights:
Out of the 5 users tested, 60% voted very likely to buy skincare from Skinbuttr or Glossier website
"love that the menu is laid out..I don't have to feel like I'm digging; I think that it's done well and looks professional."
​
"I like the branding, the packaging is very nice.. it's fresh.. it's clean.. there's not too much going on."
​
"The site is really pretty and very interactive!"
​
Out of the 5 users tested, 80% voted very likely to buy skincare from Buttah website
"Ouu I can see black people on the page! I love it, it's calling to me."
"Marketing with pics is really nice.. shows who the target audience is and makes it easy to make your decision about shopping with them."
​
"I love seeing the reviews, makes me want to click into the product and because its catered to people that look like me I feel like I would trust the reviews more and not question my purchase too much."
​
​
IDEATION, ITERATIONS & VALIDATIONS
Insights gathered from stakeholder and problem space research guided the generation of my designs and continued input from stakeholders guided the iterations that resulted in the final redesigned site
Prioritizing Site Features + Tweaking Information Architecture
I reviewed the questionnaire results with SB Skincare CEO and used the four quadrant approach to prioritize which features would stay or be added to the site. To tweak the IA I used information grouping in an effort to make the menu options more concise and also reduce the number of pages - thereby reducing number of choices- users have to navigate between to find the desired info. The skimmed down menu options also worked well with a horizontal menu layout, which is best practice for a website of this magnitude.
Four Quadrant Approach to Feature Prioritization
Before and After of SB Skincare Sitemap
Updating User Flow For Initiating Main Task- 'Add to Bag'
An area for opportunity identified when doing the competitive analysis was the idea of users being able to add products to their bag/cart from multiple screens, most commonly the homepage and shop page. During stakeholder research, users responded positively to this feature on competitor sites because, it allowed them some flexibility especially if they already knew what they wanted. SB Skincare's current site only has one featured product that could be added to bag from the homepage, all other products can only be added from the individual product page.
SB Skincare Site Updated User Flow for 'Add to Bag'
Low and Mid- Fidelity Wireframes + User Validation
Using the updated sitemap, 'add to bag' user flow and prioritized feature list, I fleshed out low-fi wireframes to visually communicate my design solution. After the wireframes were produced, I gathered quick user input to validate that the layout of pages and grouped information was inline with the mental model of online shoppers, before moving on to mid-fi wireframes.
Images of Low-fi and Mid-fi Wireframes for Site Redesign
Establisihing Trust Through Visual Design
The consensus gathered from SB Skincare's target audience was that the site was dull and visually inconsistent, which made users doubt the legitimacy of the brand and site. Through user research I observed a really positive reaction to competitor sites that had a cohesive and attractive visual design. Most importantly users had an overwhelmingly positive reaction to seeing people who resembled themselves reflected in the site images.
Images of New Visual Design Direction for SB Skincare Site
"Attractive things do work better- their attractiveness produces positive emotions, causing mental processes to be more creative, more tolerant of minor difficulties." - Don Norman
Hi-Fidelity Mockups + User Validation
After I had applied the visual design to the mid-fidelity wireframes and prototyped the screens, I recruited 5 new users- representative of the target audience- to test out the hi-fidelity mockup of the new SB Skincare site. Users were asked to perform the same tasks from the first usability test and the feedback received on the look and feel of the new site design was overall very positive. The main problem flagged was that users were missing the other sizing options available for the individual body butters. My approach to solve this involved adding a few visual and interaction cues to help direct users into seeing their options and making a decision.
Screenshots of hi-fidelity mockup- Iteration 1
Screenshots of hi-fidelity mockup- Iteration 2
Out of the 5 users tested, 100% voted very likely to buy skincare from the redesigned SB Skincare site.
"l’d buy it just based off of the site images .. would definitely buy a 2oz to test for sure.”
​
"I'd purchase, it looks legit. It looks refined so I know someone put effort into it and its looks like the product will do what it says it'll do."
​
"It's selling the butters but not pushing the product in your face, and there was no frustration finding what I was looking for which makes the shopping experience better.”
​
Users had a positive reaction to the visual design of the site.
"If someone recommends it to me I would definitely try it out because it’s affordable and aesthetically pleasing"
​
"The landing page is beautiful”
​
"It looks great. I love the colour scheme”
​
"It's pretty.. I really like the visuals and how the space has been used…the white background is calming and makes the products look high quality”
​
Usability Test 2 Overall Feedback:
Reflection- Next Steps + Learnings
Next steps would be the development stage, with me overseeing the implementation of the new designs on SB Skincare's Shopify domain. Once the new designs are active the store analytics would be monitored and revisited -with the CEO- in the next quarter to see the impact of the designs on the store's conversion, and decide on whether tweaks need to made.
Stakeholder Relationship Management
Working with someone's personal brand that they've built on their own from the ground up, is an intimate process which comes with strong emotions and opinions. I had to really listen to understand SB Skincare's journey and be delicate and considerate with how I presented my ideas, so as to come up with the best outcome without comprising their vision/brand.
Getting Creative with a Low Budget
Working with a low budget was daunting at first, given the grand ideas that I had. However, working as a one woman show forced me to get creative with how to bring my ideas to life using the resources I had, while picking up some new skills along the way!
Final Solution- SB Skincare Site Redesign *Clickable Prototype*
