Earlier this month we shared our latest case study with Enveda Biosciences which involved a new brand identity and website for their launch. As huge advocates for responsiveness, accessibility, and a straightforward user experience, we wanted to take a deep dive into their website, to explore the UX/UI best practices we enlisted.
UX Best Practices
Distinct visual hierarchy
Throughout the website, we made sure to employ a very distinct visual hierarchy, by combining complementary sets of colors from the wider brand palette, with variations of font weights and sizes. This visually assists users in navigating the website with minimal effort and brainpower.
Primary and Secondary CTA differences
Much like with color sets, a distinct hierarchy in Calls To Action (CTAs) helps users make fewer mistakes when exploring the website. In addition to setting primary and secondary CTAs, we made sure to maintain consistency with this hierarchy, in order to allow users to develop familiarity with these actions and their results.
Micro-interactions and videos
Keeping users engaged is one of the trickier aspects of modern UX/UI design. On average a user will spend about 10-20 seconds on your website before leaving. The use of animated illustrations and video imagery on Enveda’s website helps create a means to captivate users. They also help provide a better understanding of Enveda’s offers and proposition, without including any additional unnecessary text.
Filters and added navigation
Since Enveda has quite a large team with many departments, showcasing every team member was a challenge. The best approach we enlisted to overcome this was to include additional filters to the team page, allowing visitors to navigate to the relevant department and find their desired team member quicker. This eliminates the need for endless scrolling, or changing pages, and enhances accessibility and the user’s experience.
UI Best Practices
The Enveda website provides a clear distinction between headings, subheadings, and paragraphs, uses legible type sizes which cater to all users, and enlists colors to emphasize and highlight keywords.
Default and hover on CTAs
Although this may appear as a standard principle of website design, there are numerous websites that give very little attention to these interactions. Having a clear difference between default, hover, and selected CTAs can have a big impact on your website. It gives the user control and lets them know exactly where they are. Enveda’s website does well to differentiate between the default and hovered states by changing color to white.
About Enveda Biosciences:
Enveda is harnessing the complexity of the natural world to tackle today’s biggest healthcare challenges. With the help of breakthrough advancements in knowledge graphs, machine learning, and metabolomics, Enveda is discovering the next generation of small molecules.