01 Project Overview

About Harper & Harlow

Harper & Harlow is a premium brand focused on illuminated and non-illuminated mirrors, with an expanding product line that includes lighting solutions.

The idea for this website came as an extension of LampShopOnline, where we were already selling mirrors, but it became clear that they needed their own dedicated space. We wanted a website that could target a different audience, one that prioritizes aesthetics.

The Challenge

Create a modern and elegant brand identity that reflects premium home mirrors.
Design a fully responsive experience for both desktop and mobile users.
Ensure the website design helps differentiate our products from competitors
Maintain accessibility standards, ensuring a seamless experience for all customers.

My Role

Branding - Designed the logo, colors, and typography for a premium look.
Research - Conducted market & user research to shape the brand identity.
UX/UI Design - Created wireframes, prototypes, and UI interactions.
3D Renders - Developed high-quality product renders for marketing.

02 Research

Competitive Analysis

To get started, I looked at other high-end mirror brands and home décor e-commerce sites. I wanted to understand what makes them feel premium and how they guide users through their sites. Here’s what I focused on:

Website structure & user flows

How do competitors guide users to purchase?

Product presentation

What makes certain brands feel more premium?

Brand identity & visual language

Which colors, typography, and styles resonate with this market?

Pain points

What are common usability issues in competitor websites?

After analysing competitors, I had a much clearer direction for the design.

Represent products better by using 3D Renders
Create a more professional Branding
Create a cleaner navigation and website structure

Who We Designed For

Before starting the design, I was provided with target audience insights from the marketing team, which helped my design decisions.
‍They identified two main customer groups:

Homeowners & Renters on a Budget

People looking for affordable yet stylish mirrors to upgrade their space without spending too much.

Design Strategy

We focused on showcasing value through clear pricing, clean layouts, and lifestyle images to show quality without overwhelming.

Online Shoppers Who Compare Prices

Customers who browse multiple websites, looking for good deals and value for money.

Design Strategy

We simplified the user flow, highlight discounts, trust signals (reviews, delivery info), and made product comparison intuitive.

Brand Positioning

Based on this research, we defined Harper & Harlow’s brand personality as:

Stylish & Affordable

Affordable products that feel premium thanks to polished visuals.

Trustworthy

Visible reviews, clear delivery info, and a smooth, consistent UX.

Modern

Minimalist design, neutral tones, and clean typography.

This helped shape the visual identity and website experience, ensuring it aligned with customer expectations.

Before moving on to design, I strongly recommended conducting usability testing on competitor websites to better identify pain points and understand what works. However, due to limited time and resources, we relied on competitor research and internal feedback instead.

03 Brand Development

Naming the Brand

During a meeting with the marketing team, we wanted to find a name that felt high-end and had a British touch. After brainstorming, we decided on Harper & Harlow - it had a classic, elegant sound that fit perfectly with the brand’s premium feel.

Designing the Logo

I experimented with multiple concepts, some of them included:

Using the word "Harlow" as a reflection to symbolize mirrors (but it impacted readability).

A geometric and structured design featuring an abstract "H"

A minimalist wordmark using contrast between bold and thin weights to create a refined brand identity.

Final Logo Choices

We explored multiple logo directions and narrowed it down to these two. The top option offered strong elegance and impact with its bold handwritten style, while the bottom one leaned toward a more minimal and modern feel.

After testing both in different contexts, we chose the bottom version for its refined balance between style and readability.

Colour Palette

To establish a modern, premium feel for Harper & Harlow, I carefully selected three main colours:
‍
White (#FFFFFF): Represents clarity, simplicity, and sophistication, creating a clean foundation that enhances readability and contrast.

Black (#121212): A deep, modern black used for typography and key UI elements, reinforcing the brand’s premium and minimalist aesthetic.

Magenta (#AD005F): The signature accent color, chosen for its bold and energetic feel. It highlights key areas of user interaction while maintaining a high-end look:

Typography

Selecting the font was crucial in defining Harper & Harlow’s brand personality and readability across digital platforms. I selected Poppins, a modern and highly legible sans-serif font, to create a clean, approachable, and contemporary look that aligns with the brand’s elegant yet accessible identity.

04 UI Design Process

UI Color System

In addition to the core branding colors, I introduced a set of neutral greys and magentas to enhance the UI’s structure and readability.

Backgrounds & Containers: Soft greys to separate sections without harsh contrasts.
Dividers & Borders: Lighter greys for subtle separation between elements.
Hover & Active States: Darker greys for feedback when interacting with secondary CTA.
Form Fields & Inputs: Neutral greys that ensure clear text readability.
Interactive Elements: Shades of magenta are used for links, hover effects

Status Colours

To enhance clarity and provide intuitive feedback to users, I implemented a clear status colour system:
‍
I used green for success messages, red for errors, and orange for pending statuses. Each colour provides clear, intuitive feedback while keeping the interface visually consistent and easy to scan.

Call to Actions

I established the Primary and Secondary Call-to-Actions (CTAs) to create a clear interaction hierarchy. Primary CTAs are strictly related to sales actions, such as "Add to Cart", while Secondary CTAs are used for non-sales actions like exploring content or reading blogs.

Typographic Scale

To maintain consistency in hierarchy and readability, I established a typographic scale:

Testing UI elements & Iterations

Before finalizing the UI, I tested color schemes and hover interactions in Wix to see them in a functional layout before refining them in Figma.

Wireframes

Despite working with an existing Magento theme, I created detailed wireframes for each main section to better adapt the template for this type of e-commerce.

Color Accessibility

When selecting the perfect colours, I took into consideration every aspect, from the psychological impact of each colour to ensuring accessibility for people with visual impairments.

Color Blindness Testing

On the left, you'll find a table illustrating how the CTA stands out for individuals with the most common vision impairments, along with the estimated percentage of people affected by each impairment. The percentages are sourced from both colour-blindness.com and Vision Australia

Developer Handover:

After finalizing the high-fidelity designs in Figma, I created a developer handover guide to support a smooth implementation process. I wanted to make sure everything was clear and easy to follow, so we could avoid unnecessary back-and-forth during development. In the guide, I included:  

Colour and typography references
Spacing rules and layout consistency
Website behaviour details (e.g. sticky navigation that appears on scroll)
Font sizes and responsive scaling guidance

05 3D Design

Taking on the Challenge

At the beginning, we weren’t sure how to approach the 3D renders. Since I had previous experience in 3D design, I decided to take on the challenge myself. I needed a fast and efficient way to showcase the mirrors in a realistic setting.

Building the Scenes

To create realistic environments, I designed five unique bathroom interiors.

A total of 48 mirror models were created, covering all product variations needed for launch.

I set up lighting, textures, and materials to make the renders look professional and better than the competition.

Final outcome

In total, I created over 300 renders, including:

Standard product images.
Square crops for various platforms
A+ content renders (horizontal images for product page sliders).

This effort not only gave us high-quality visuals but also saved the company a significant amount of money compared to outsourcing.

06 Final Design

During implementation, we ran into some styling issues that are currently being addressed with the developers. While the website is consistently generating sales, I believe there’s still room for improvement, as design is a continuous process.

Click here to view the website

Results:

The website started generating sales from day one, with dozens of mirrors sold in the first week alone.

In the first 5 months, we sold over 1,000 mirrors, exceeding the initial target.

Final Thoughts:

This project allowed me to bring together my skills across different disciplines—branding, UX/UI design, 3D, and
e-commerce—to create a compelling shopping experience. Despite facing time constraints, I’m proud of what I accomplished and how the brand came to life.

What I Would Do Differently:

More Research:

I enjoy conducting usability testing, and in hindsight, I would have liked to observe users interacting with competitor websites during the early stages of the design. I also believe it would have been valuable to carry out usability testing later in the process to refine the experience further.

Polishing Post-Launch:

As soon as the website went live, the company shifted focus to other projects, leaving some styling issues unresolved. These visual inconsistencies, while minor, were important to me because I believe it's the details that elevate a design from good to great.

Continuous Improvement:

I see design as an ongoing process, there are still areas that would benefit from refinement and further testing.

Whats Next?

Fixing Styling Issues:

I would like to ensure that the remaining styling inconsistencies are resolved, so the site fully reflects the polished and premium aesthetic it was designed for.

Launching Marketing Strategies

I’d like to explore different marketing strategies to help increase traffic, drive conversions, and strengthen the brand’s online presence.

Leveraging Customer Content

I’d love to integrate customer reviews and real-life photos of their bathrooms featuring our mirrors to build social proof and trust.

Data-Driven Improvements

I would like to implement tools such as heatmaps and session recordings to gather data and better understand how users interact with the site—allowing for improvements based on real behavior rather than assumptions.

A/B Testing

I’m also interested in setting up A/B tests to evaluate different layouts, CTA styles, or messaging to continuously improve the user experience.

Objective

Results

Website structure & user flows

Product presentation

Brand identity & visual language

Pain points

Homeowners & Renters on a Budget

Design Strategy

Online Shoppers Who Compare Prices

Design Strategy

Stylish & Affordable

Trustworthy

Modern

The website started generating sales from day one, with dozens of mirrors sold in the first week alone.

In the first 5 months, we sold over 1,000 mirrors, exceeding the initial target.