Helen Harper Baby
Year of this project: 2023 Device: Desktop and mobile Tasks performed: Benchmark, branding & UI Design Tools: Figma & Indesign
This project was my first big solo challenge, where I redesigned the website for Helen Harper Baby, a brand that makes baby care products. One of the main goals was to create a new visual identity for the brand using their product photos to build a fresh, engaging look.
I’m very proud of the final result, as it matches the brand’s vision and improves the user experience.
If you wish to know a little more, scroll down for a quick step to step recap of the project process!
Step 1. Benchmarks
The first phase of this project involved conducting two key benchmarking exercises:
Regional Brand Analysis : As Helen Harper Baby is a baby care brand in Eastern Europe, it was essential to begin by analyzing websites of similar Eastern European brands. This ensured that the design would align with regional expectations and user experiences familiar to our target audience.
Inspiration from Moltex : During the project briefing, the client mentioned that they liked the user experience (UX) and overall design of the Moltex baby care website. To gather ideas, we reviewed the Moltex site closely to use it as inspiration for our design.
Step 2. Creating a new visual brand identity
As Helen Harper Baby did not have a defined visual brand identity, the team challenged me to create one from scratch, using only a few sources of inspiration: their product packaging and two promotional posters.
I tried my best to find a font that closely matched the one used in their posters and that was also available in all the languages featured on the website.
For the color palette, I focused on selecting accessible colors that aligned with the posters and packaging.
Additionally, the posters had a granular background effect, which I decided to incorporate into the website design. I also created assets that matched the style of the posters.
Step 3. Wireframes
While working on the visual brand identity, I was also working on the first versions of the wireframes.
We conducted several meetings with the client to review and approve the wireframes, making adjustments as needed throughout the process.
I also worked with the developer to make sure that everything I designed could be built within our timeline.
This back-and-forth process resulted in a stronger final product, and I am very proud of what we were able to achieve together.
Step 4. Applying the visual identity AND creating the design system
The next step was to apply the visual identity to the designs and create a design system. This system makes future adjustments easier and faster, and ensures that anyone working on the project in the future can make updates more efficiently.
Of course we still had meetings with the team to review and validate everything.
You can check out de result here: https://www.helenharperbaby.com