Anatomy of a Homepage
We tend to think of design as an art, yet the way the human eye scans and interprets an image is based in hard and social sciences. When clients shop for a design partner, they often look to the portfolio for examples that catch their eye – the human eye and brain will typically interpret beauty fairly consistently.
However, what often goes unnoticed in these quick evaluations is the communicative aspects of a design to its target audiences. This is where we excel. Our research-informed approach to design is what makes our work unique. Through in-depth stakeholder and customer interviews, we’re able to develop visual and textual styles that push our clients’ customers to recognize quality – and when they recognize quality in design and communication, they recognize quality in our clients.
Take a look below at how research informed the design for this energy-trading software platform’s website redesign. Roll over the graphic plus signs below to learn more:
A hero image is the lead photo on your website and communicates quickly what you’re about. We interviewed energy traders to learn why they chose our client’s platform. Everyone we talked to loved the data visualizations. We knew we had to feature these quickly, but we also knew that traders looked at data all day and could use a break, so we developed a visual vocabulary where we showed data visualizations alongside the sources that drove them – in this case, a turbine farm and various reads of climate data.
These four tiles are what we call wormholes – they’re quick promotions that support wayfinding to relevant content. We use wormholes on most sites, but they differ based on the unique goals we learn from each client – sometimes they are based on product categories, and sometimes user roles. In this case, our client had four distinct user audiences. These promo tiles make it easy for a visitor to self-identify and get to relevant content quickly, reducing clicks and fostering deeper engagement.
The primary call to action for this website was to get visitors to request a demo. It demanded prime homepage real estate. Our design is laid out to capture visitors with messaging and imagery in the hero images, show a breadth of solutions in the wormholes, then have visitors primed to share their personal info to request a demo. In doing so, we helped the client resist the urge to have this call to action at the very top of the homepage before first impressions had been made.
Company leadership credited employees for the success of the company. Customers we interviewed noted the industry leadership and guidance from the employees. Where many companies fear featuring employees, we pitched the idea of putting them front and center. We used this employee recognition to guide further development of the site, having product managers share their industry thoughts and highlight product features on internal pages throughout the site.
As we thought through nomenclature (or naming conventions) for the testimonials feature, we tried to stay away from the routine and expected labels. Everyone we interviewed as we developed the strategy for this website confessed to geeking out on data, so we embraced that and geeked out with them, titling the section “our customers love data too.” This unexpected nomenclature shows our client’s creativity and personality at once.
Our client is in desirable Boulder, Colorado and was in growth mode. Featuring jobs on the homepage was an essential business goal. We made sure to include imagery of the Boulder foothills to help make working there even more appealing!
You’ve come a long way baby! If you forgot the navigation at the top and made it to the bottom of the page without diving into any wormholes, here’s the navigation again. Continue exploring!