A Passion for
Beatricce Fashion
%20-%20Light.png)
Website Redesign
Contract
Role: UX/UI Designer, Researcher
Tool: Figma, Shopify
Overview
Beatricce.com is an online fashion store that sells products exclusively for women. They focus on providing affordable, high quality clothing, accessories, beauty products, and everyday jewelry.
As a freelance UX/UI Designer, I conducted research to redesign their Shopify website in a way that is better suited for their company.The purpose of this project was to Redesign Beatricce.com to best reflect the company's values. This project was conducted in 3 phases, Research, Design, and Iterate.
Challenge
The Manager at Beatricce Fashion, was unhappy with the look of his website and wanted to increase the amount of traffic to their website. I was challenged to redesign their website to enhance the user experience.
Research
Objective I
Review documents provided by client and Beatricce.com website analytics
Objective II
Conduct Research and Create UX Deliverables to illustrate Research Findings
Objective III
Synthesize Data into useful insights for Phase II
The Purpose of doing research was to gather enough background information that would:
-
Ensure I'm solving the right problem,
-
Validate or invalidate my assumptions,
-
Provide context and insight into the Why and How of the problem,
-
and Determine how users think and behave.
Goal
Identify problem areas and opportunities for improvement on Beatrice Fashion website
Research
-
Data collection,
-
Secondary Research,
-
Exploratory Research,
-
and Analysis.
UX Deliverables
-
Competitor analysis,
-
Site map.
Step 1: Collect Data
I gathered all the background information I could find as well as conducted an exploratory meeting with the client to clearly define their goal for Beatricce.com. I spent most of this step Identifying competitors. I also created what I call an "At first glance" list where I jotted down visible opportunities for improvement while getting my first impression of the site.
Step 2: Conduct Research
I conducted Secondary Research and reviewed the analytics for Beatrice.com provided by shopify. It is after reviewing the analytics that I discovered the underlying problem.
Beatricce.com had a Low Conversion Rate problem. The website was receiving a good amount of traffic, the problem was that users were leaving the website before adding a product to cart or making a purchase.
Pictured to the right are the analytics for Beatricce.com from their previous quarter which also happened to be their first quarter open for business. No purchases are being made. To figure out why, I created proto personas, as one of my UX Deliverables, to empathize with potential users and Identify their pain points as they navigate through Beatricce.com.
Conversion
Rate
A Conversion rate is the percentage of sessions that result in orders out of the total number of sessions
Confirmed Purchases < 1%
Competitor Analysis
Conducting this analysis was one way of identifying elements to incorporate into the website as well as give insight on how to provide a user experience unique enough for customers to pick Beatricce Fashion over another company.
Strengths
Simple Layout.
Easy to navigate.
Clear product images.
Guest checkout.
Areas for improvement
-
Accessibility
-
Personalization
-
ie; about us page
-
-
Communication
-
ie; contact page, about us page
-
-
No interactive visual cues
-
Call to action button to grab users’ attention.
Competitors
Click on Image to see the full Competitive Analysis Deliverable
Site Map
-
First, I identified unnecessary pages in which products were unavailable and removed them. These were pages in which no inventory was present yet space was dedicated for them.
-
Secondly, I rearranged the available pages into relevant categories where users would expect to find them, illustrated by the yellow arrows.
-
Lastly, I added additional categories to the navigation bar, such as an 'About Us' tab to give the users' easy access to learn more about the business.
Recommendations
Accessibility
Increase Contrast between elements. Increasing the contrast between text and background color will make it easier for users to look at the page
Sufficient Font size. Adequate font size and simple language will allow the user to easily digest the information
Communication
Transparency. Being transparent with users by sharing your personal journey to creating your business and a bit of background info about the company, its purpose, and those in charge will show users that there is a person behind the machine and help them feel like they have a personal connection to your business.
More Descriptive. Being more descriptive about products and providing all the information the user needs can help foster trust and give them the opportunity to make informed decisions.
Call to action button. Adding captivating CTAs on the landing page and wherever they are needed can grab the users attention and help guide them exactly where they need to go.
Design
Initial Sketching
Mid Fidelity Wireframes
Landing Page
About Us page
Contact Us page
Shopping Cart page
Iterate
Renewal.
New beginnings.
Growth.
I went for a more neutral vibe for the color palette.
In this case, the shades of green represent:
-
Change
-
Transformation
-
Abundance
which seemed fitting considering I was giving Beatricce.com a new look.
And this variation of beige color is meant to evoke a calming, serene feeling for your users.
Roboto
The used typeface was Roboto, perfect for online documentation. I decided on Roboto because of its accessibility and how easy it is to read on screen monitors.
Final Designs
Landing Page
Header
With the header, I simplified it to 2 lines. The logo & icons on the top and navigation bar on the bottom.
The shopping cart is now a shopping bag and instead of the word “log in”, users can click on the account icon.
Search bar icon is on the left and the logo moved to the center.
The message section containing discounts or shipping info has its own line at the very top of the page.
Hero
Description
A brief welcome message is available to explain purpose of company.
Call to action Button
More visible and captivating CTA’s are present throughout the page; looks more like a button as opposed to a link.
Content
The carousel was replaced with one image banner including a call to action (CTA) button to guide users to shop for products.
Images are now shown in one row as opposed to two.
The subscribe option is separated from the footer.
The subscription is given its own section to attract more focus from users.
Payment options have been removed from the footer to increase simplicity and get rid of some clutter.
Only Relevant and functioning social media icons are visible.
About Us Page
Changes made for the About Us page apart from components, such as the header and footer, include a CTA button that leads to the Contact Us page.
I also recommend to the client that adding more information and Beatricce fashion this page would create that more personal touch and contribute to the personal shopping experience for their users.
Contact Us Page
Apart from the obvious changes in color and changes i’ve already mentioned with the header and footer, the specific changes I made to the contact page include:
-
A brief personal message to encourage users to write to the company,
-
A CTA button to send the message located on the lefthand side,
-
A Slightly different organization with the contact form, with 3 rows instead of 4,
-
and An image banner with a CTA to encourage users to continue shopping after sending a message.
Minimal.
Calm.
Serene
shopping
experience.
%20-%20Light%20copy.png)
%20-%20Dark.png)
Conclusion
Each phase of this project proved crucial to the overall outcome. During the research phase, I was able to identify underlying issues. During the design phase, I discovered what layout and function worked best for potential users and the shopify platform. and uring the iteration phase, I created a style guide and produced Final designs.
Visual changes that were made to increase the users' experience included:
-
Better Contrast,
-
Uniform colors,
-
Captivating call to action buttons,
-
and Link Social media Icons
I was able to Increases contrast with the new color palette and by using sufficient font size. The call to action buttons, especially on the landing page, were used to grab the users attention and help guide them exactly where they need to go.
I believe that the changes I’ve made give the website a more welcoming and trusting feeling, providing Beatricce.com users with a better shopping experience.