UI Redesign as Part of the Rebranding
Heartbeat Medical company rebranding
After the rebranding of Heartbeat Medical was finalized on paper, the website was next in line, alongside other channels and materials like social media, presentation templates, one-pagers, and flyers.
The primary focus was on adhering to the established guidelines, with particular emphasis on readability and accessibility, especially concerning contrast, which had been somewhat lacking in the previous design.
This included the removal of the color red, the careful use of new colors, and optimizing the reading flow to avoid triggering unnecessary distractions that would cause the eye to dart erratically across the screen. This overstimulation had been a key factor in the site’s high bounce rate.
Challenges
Color
The first and by far most crucial challenge was to seamlessly and consistently integrate the new brand colors across the website. It was essential to ensure that the visual hierarchy of elements was maintained and reflected through the new color palette without disrupting their order or clarity.
Technical Implementation of the Changes
The site was originally developed by an agency as a WordPress template. Agencies often use opaque development methods to ensure that only they can modify and further develop the site, securing a longer-term relationship with the client.
Since we no longer work with the agency, it meant navigating through a jungle of numerous JavaScript and CSS files to implement all changes in full depth. It was also crucial to thoroughly document each change, ensuring that every step is traceable for future reference.
See the Transformation: Slide to Compare
