top of page

A Passion for 

Beatricce Fashion

Safari (Catalina) - Light.png

Website Redesign


Role: UX/UI Designer, Researcher

Tool: Figma, Shopify

Overview 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 to best reflect the company's values. This project was conducted in 3 phases, Research, Design, and Iterate.


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.



Objective I
Review documents provided by client and 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.


Identify problem areas and opportunities for improvement on Beatrice Fashion website

  • 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 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 provided by shopify. It is after reviewing the analytics that I discovered the underlying problem. 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 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


A Conversion rate is the percentage of sessions that result in orders out of the total number of sessions

Confirmed Purchases < 1%

Screen Shot 2022-04-18 at 8.30.32 PM.png
Screen Shot 2022-04-18 at 8.30.40 PM.png
Phase I

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.


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.

Beatricce Fashion Competitor Analysis.png

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.

Information Architecture.png



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


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.


Initial Sketching
Phase II

Mid Fidelity Wireframes

Landing Page.png

Landing Page

About Us 10.png

About Us page

Contact Us.png

Contact Us page

Cart Page.png

Shopping Cart page

Phase III


New beginnings.

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 a new look.

And this variation of beige color is meant to evoke a calming, serene feeling for your users.

Frame 1.png
Frame 2.png

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


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.


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.


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.

About Us After v.2.png

Contact Us Page

Contact Us After v.2.png

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.





Safari (Catalina) - Light copy.png
Safari (Catalina) - Dark.png


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 users with a better shopping experience.


Thank you! The website looks much more inviting!

Hantz Boulos
Senior Sales Manager

bottom of page