I designed hermaid’s resources platform and refreshed their brand identity in collaboration with other peers and external teams.
Tools I used for this project
Role
UI/UX designer
Timeline
Jul 2024 to Oct 2024
Live project
Visit website (opens in a new tab)Team
hermaid is a German femtech company focused on menopause, perimenopause, and related women’s health issues.
As part of my work, I redesigned their Resources page and created high-fidelity Figma screens ready for the development team. I also refreshed the brand identity with a London-based designer.
Here is how hermaid's resource page looked before, and what it lacked in terms of design:
While I worked on the hermaid project, I faced and overcame the following 4 challenges:
Building all high-fidelity frames for the Resources subsite in a short time period, to be reviewed by Head of Design and IT.
Reviewing multiple Figma files while collaborating with another designer to refresh hermaid's brand identity was demanding.
Identifying website improvements on Webflow while working in parallel on the Resources pages.
Finding the perfect balance for the investor pitch deck slides, based on the new brand identity built.
hermaid has 2 distinct audiences, so its content had to split and serve both.
The platform had to make both journeys clear and help users navigate to their desired content.
Corporate audience
Professional resources helped employers support women’s health and position the app as an employee benefit.
Pages designed
Individual audience
Lacking the vocabulary or a diagnosis, individuals needed searchable resources organized by symptom.
Pages designed
While the main website was built in Webflow, the Resources page was planned as a React subsite connected to a headless CMS tool called Ghost.
The flow began on the Webflow website. From the Resources menu, visitors enter the React subsite and land on the Corporate & HR overview.
The React subsite has its own menu and toggle for switching between audiences and content, while Ghost lets marketing update it easily.
The user flow below maps the path from the homepage to the Resources pages:
High-fidelity frames were designed for every key page and content format, then handed over to an external IT company called Thaumatic to build the subsite.
Switch the tabs below for more context:
1 Figma file with 24 frames for web and mobile was delivered to Thaumatic, with notes and detailed instructions for the building phase.
Beyond the UI/UX redesign, I collaborated with Qianqian Lin, a visual identity designer, to refresh hermaid’s brand identity.
The following brand assets were defined and set up in Canva for the marketing team to use.
Colour palette & fonts
Defined hermaid’s colour scheme, typography and spacing.
Brand guidelines
Do’s and don’ts for colour combinations, logo use, and more.
Social templates
Created Canva-ready LinkedIn social templates.
Take a look below at the brand identity and final results:
Instagram post examples with the new identity
LinkedIn event covers with the new identity
My work extended beyond the Resources pages and brand identity. Click the accordion below to explore more.
People do not search for menopause before they know their symptoms could be linked to it. They search for what they are feeling.
Heatmap results showed that users frequently clicked the static symptoms on the homepage. I suggested turning them into buttons that lead to relevant medical content.
Path from symptom to support
I also redesigned the investor pitch deck, a key asset for helping the company secure funding. I focused especially on information hierarchy, colour composition, and recurring elements.
Ultimately, I carried out a short audit and suggested improvements to the website, especially for the homepage and About page.
Check the high-fidelity frame below for the About page:
After design handoff, I stayed involved to support the development team:
The main blocker
Only the initial staging site was complete when my collaboration ended. Delays at Thaumatic left more to build.
The subsite went live after handoff and was later narrowed, so its journey and page locations differ from the map above.
Close teamwork created the highest impact on delivery, but its reach went well beyond that too.
0 Delivered web and mobile frames
Leadership and Thaumatic IT received all necessary frames, with notes explaining behaviour and the journey
hermaid showed me how important information architecture is for a resources page, especially in the medical field.
With 2 audiences and 6 content types, the hard part was mapping a clear user flow and making information easy to find.
Tight deadlines can feel stressful. The key is knowing when to stop adding features or content and focus on the essentials.
Even under tight deadlines, your work still depends on others. Clear notes and follow-up meetings help resolve what remains unclear.
hermaid is still growing as a product. Its Webflow website has changed significantly since 2024, and its content continues to evolve.
Take a look at the other projects I worked on so far.
Revamped the marketing website through Supernormal’s product evolution from an AI meeting notetaker app to an AI agents platform.
Designed a conversion-ready website with multiple CMS-powered pages for a desktop-first, bot-free AI meeting-notes product with built-in action items.
Improved the original website for a coliving space in Barcelona, created marketing content, and crafted a new Webflow site for its expansion.
