About Harper & Harlow
Harper & Harlow is a premium bathroom mirror brand launched as an extension of LampShopOnline.
Following strong mirror sales, the business launched a dedicated premium brand targeting design-conscious homeowners. My role included brand identity, UX/UI design, design systems, 3D product rendering, and developer handover.
My Role
- Brand Identity
- UX Research
- Wireframing
- UI Design
- Design System
- Interactive Prototypes
- 3D Product Renders
- Developer Handover
Competitive Analysis
I analysed three leading competitors to understand how premium brands present products, build trust, and guide customers through the buying journey.
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?
Key Takeaways
Premium Visuals
Lifestyle imagery and 3D renders increase perceived product quality
Simplified Navigation
Clear navigation helps product discovery
and reduces cognitive load
Consistent Branding
Strong branding builds trust and supports differentiation
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:
Budget-Conscious Homeowners
Homeowners looking for stylish mirrors that balance quality and affordability
Design Strategy
We focused on showcasing value through clear pricing, clean layouts and lifestyle images to show quality without overwhelming
Value-Driven Shoppers
Customers who compare multiple retailers to find the best value
Design Strategy
We simplified the user flow through clear pricing, trust signals and product comparison to make buying decisions easier
Brand Personality
Based on this research, we defined Harper & Harlow's brand personality as:
Stylish & Affordable
Premium-looking products at accessible prices
Trustworthy
Transparent information, customer reviews and a reliable experience
Modern
Minimalist design, neutral tones, and clean typography
This helped shape the visual identity and website experience, ensuring it aligned with customer expectations.
Naming the Brand
During a workshop with the marketing team, we explored names that reflected a premium bathroom brand with a British feel. Harper & Harlow was selected because it conveyed elegance, quality, and timeless design while supporting the premium positioning of the business.
Designing the Logo
I explored several visual directions to identify a logo that balanced elegance, readability and premium positioning. Each concept tested a different approach to typography and brand recognition.
Mirror Reflection
Using "Harlow" as a reflection to reinforce the mirror concept, but the effect reduced readability
Geometric Symbol
A geometric "H" symbol designed to create a distinctive brand mark, but it lacked the elegance we wanted for a premium brand.
Minimal Wordmark
Contrast between bold and light typography to create a clean, premium look, but the concept didn't feel distinctive enough.
Final Logo Choices
After narrowing the concepts to two finalists, we evaluated each option based on readability, brand personality and premium appeal.
While the top concept offered stronger readability the handwritten wordmark felt more distinctive and better reflected the elegant identity we wanted to create.Following stakeholder feedback the handwritten concept was selected as the final logo.
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.
Colour Palette
To create a modern, premium identity for Harper & Harlow, I selected a minimal palette built around clarity, contrast and a distinctive accent colour.
Pure White: Provides a clean, spacious foundation that enhances readability and reinforces the brand's minimalist aesthetic.
Charcoal Black: Creates strong contrast and communicates sophistication across typography and key interface elements.
Mulberry: A refined accent colour used to highlight key interactions while adding warmth and personality to the brand.
UI Color System
A supporting UI colour system extends the brand palette to create a clear visual hierarchy and consistent interactions across the interface.
Layout - Backgrounds, surfaces and section containers.
Structure - Borders and dividers that organise content.
Interaction - Buttons, links and hover states.
Call to Actions
I established a clear call-to-action hierarchy by defining Primary and Secondary CTAs. Primary CTAs are reserved for high-priority conversion actions, such as "Add to Basket", while Secondary CTAs support navigation and lower-priority interactions, such as exploring products or reading blog content.
Typographic Scale
The typography guidelines below were created as part of the project's design documentation, defining font sizes, weights and line heights across desktop and mobile interfaces.
UI Testing & Accessibility
Before finalising the interface, I explored multiple colour palettes and interaction states in Wix before refining the final design in Figma. The selected colour palette was then validated using APCA contrast analysis and colour vision deficiency testing to ensure key interface elements remained distinguishable, readable and accessible across different visual conditions.
Wireframes
Although the project was built on an existing Magento theme, I created wireframes for the key templates to optimise the user experience while working within the platform's constraints.
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)
- Form Fields & Inputs
- Font sizes and responsive scaling guidance
Taking on the Challenge
As the project required high-quality product visuals, I took ownership of the 3D rendering process. Drawing on my previous experience with Blender, I created realistic product renders that could be used across the website and marketing materials. Producing these assets in-house reduced the need for external outsourcing while maintaining full creative control throughout the project.
Building the Scenes
To create realistic environments, I designed five unique bathroom interiors that showcased the mirrors in different settings. These scenes provided reusable assets for product pages, banners and promotional content.
I created 48 individual mirror models, covering every product variation required for launch.
Using BlenderKit assets as a foundation, I customised materials, lighting and scene composition to create photorealistic bathroom interiors that reflected the brand's premium positioning.
Final outcome
Throughout the project, I produced over 300 final renders, including:
- Standard product images
- Lifestyle bathroom renders
- Square crops for multiple platforms
- A+ Content visuals
- Additional renders created for future mirror collections and product launches
Creating the renders in-house delivered consistent, high-quality visual assets while significantly reducing costs for the business.
The website successfully launched and established Harper & Harlow as a new premium bathroom mirror brand.
While the project continues to evolve through ongoing refinements, the launch provided a strong foundation for future improvements.
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 Figma Prototype
Final Thoughts:
This project brought together branding, UX/UI design, 3D rendering and e-commerce into a single end-to-end product experience.
Working across multiple disciplines strengthened my ability to balance user needs, business goals and technical constraints while delivering a premium online shopping experience.
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.
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.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
%201.jpg)
%201.jpg)
.jpg)
.jpg)
