Client: Body Merry
My role: UI/UX Designer
Duration: 1 months
Tools: Adobe Photoshop, Adobe XD

Background
Body Merry is an e-commerce skincare company that sells products made with natural ingredients and are¬†cruelty-free.¬†Their mission is to help people with a budget to Get Happy about their skin.¬†‚Äč‚Äč‚Äč‚Äč‚Äč‚Äč‚Äč

Problems 
1) Decreasing conversion rate. 
2) Not enough traffic driven to the website
3) Body Merry does not have a physical location, so it relies solely on social media, emails, and online marketing to attract customers to the website.

Process
Research: Heuristic Analysis and Competitive Analysis
Ideation: Sketching and Wireframes
Validation: Usability Testing
Design: Low and Hi-Fidelity Prototyping 

Target Users
Women between the age of 18¬†to 35 with a budget in mind who also care about the quality of the products and how it was made.‚Äč‚Äč‚Äč‚Äč‚Äč‚Äč‚Äč

Competitive & Heuristic Analysis
After analyzing the results of competitive analysis and heuristic analysis, here are the findings:
Visual: As I look through Body Merry’s website, I found the website to be a bit lackluster. Since the target audience is young adult women, I think the website needs to be more visually engaging and attractive. The brand’s presence is weak due to the content and the overall boring black and white style.
Usability: The website is not mobile friendly (especially their bundle page). It is very hard to navigate through the website using mobile devices. Typography is a big problem. It is too small and straining to read.
Content: Content does not help the users to understand the products easily. It requires users to take longer to read. Every page lacks the necessary visual cue and CTA to help engaging the users or convert. Each page and interaction are not organized with loads of products on the same page. It’s hard for users to focus and find the item they want.
Old Websites
Design Solution 
1) Simplify the image on bundle pages and make it easy for the users to view items easily. 
2) Increase the legibility of text.
3) Add a banner that is related to the type of products on each page to give the users a clear indication of which page they are on.
4) Redesign the sitemap and layout of the website.
Wireframes
Hi-Fidelity Prototypes
Home Page
Category Page
Product Page
about Page
Back to Top