UX / UI Product Design. Brand ID & Strategy.
UX / UI Product Design. Brand ID & Strategy.
Corporate site redesign, brand ID implementation
This iteration of the h2 wellness website was my second go as a designer at h2, and first as its Design Director. A lot happened between 2011 and 2015, both within the company and in the health & wellness space at large, as well as trends in web and software UI design. Big data was picking up steam and being rapidly applied to digital health. Skeuomorphic design was retiring and making room for flat design. I spearheaded the rebrand effort within h2. The outcome was a complete re-imagination and modernization of the company’s public face.
2011 was the beginning of my tenure at h2 wellness, and my first major assignment was the gargantuan effort in overhauling h2’s website, making the entirety of the SaaS product offering visible. The current site at the time was a lackluster exercise in Flash animation that did nothing to draw more business.
My prerogative was to show proof of concept in the SaaS platform to attract customers and investors alike. It was a quick and dirty process between myself as the sole designer, the overseas development team, and executives putting their copywriting hats on. It was quite an experience helping navigate the company through the process of essentially defining its core principles, objectives and even its product—an experience that I would repeat four years later.
Fast forward to 2015, h2 needed to not only modernize its image, but also rebuild the site on a modular platform (Wordpress). I was sunsetting the rebrand effort at this time, so the next step was to integrate it into the company’s marketing. This was also an obvious opportunity to drastically overhaul the user experience of the site, with an intent to decrease friction while maximizing the amount of information we provide to our prospects.
We simplified the navigational structure—focusing the user on the content by deliberately avoiding trendy mega menus that would have convoluted the userflow and create discordant experiences between conventional and touchscreens. We designed the copy to read like a story, and provided an unconventional jumplink at the bottom of each page allowing the users to immediately progress through the narrative.
The page composition also needed to read like a story, in digestible chunks of information. I had to frequently remind stakeholders that less content was more, especially given the breadth of service and product details they wanted to convey.
In the above sample we see the dynamic relationship of iconography, headline and descriptive copy as they each individually rise while the user scrolls. A simple touch that keeps the user engaged with the content. Experience it live.
Again, given the myriad of product features that stakeholders wanted to show, we needed a means to convey that information while keeping the user engaged.
Typically, users visiting h2’s site aren’t interested in the finer details of the product until they’re in a boardroom with executives and department heads; however, given the complexities of the product it was important to cover all use-cases. Working directly with the CEO, Marketing Director and a junior designer, we crafted and refined an entire suite of custom iconography that visually represented h2’s entire product-level portfolio. Then we chose to hide the minutiae of copy behind the icons that slide up on hover or tap, and open a modal revealing granular detail. Imagine the alternative.
It is a rare occurrence that a designer is given the opportunity to design a company’s website not once, but twice given the rate of turnover in tech startups and the tendency for small businesses to de-prioritize design and maintenance of their own sites. My six year stint at h2 gave me the opportunity to reflect on processes and outcomes from the first iteration, and apply that learning to the second. Among them, gaining insight into my own management style, cross-discipline communications within a small startup, storytelling versus just telling, and even bridging two diametrically different interface styles (skeuomorphic and flat) that each defined specific eras and trends of UI design.