leanne bathurst

Visual Design for Responsive Website

Background
Highspot, a Seattle-based software startup, brought me onboard to redesign their corporate website. Their current website was built on Wordpress with a fluid responsive layout. Highspot wanted to give the site a visual refresh to compliment their new logo and branding, while utilizing the current platform and functionality.

Their desired approach was to develop an overall look and feel for the new site design, while implementing the new design in stages. Phase I focused on redesigning the layout for the Product section of the website.

The client provided a creative brief, which included competitive analysis and details about the target audience, which were to be considered for the design strategy. An updated brand style guide was also provided.

Process

Timeline/Schedule: In a kick-off meeting with the VP of Marketing and the Director of UX, we defined a project timeline and schedule.

Moodboards: I created several moodboards to explore different photography and illustration styles. Some of the concepts I explored were: How do we show people? How do we show the product? I also played with Highspot’s “Brand Qualities”, i.e. Discovery, Integrated, and Clean. “Discovery” might look like a kid looking through a telescope, for example.

Sketches & Wireframes: I created sketches and low-fidelity wireframes to mockup the Product Overview page and sub pages. I provided a few options to Highspot, and then narrowed down the design direction.

Typography & Color Schemes: I researched several typography combinations and color combinations that complimented the current branding. Proxima Nova (Highspot's primary typeface) is a humanist, slightly geometric sans serif typeface, so I looked at condensed, serif, and other geometric typefaces to create contrast. The original website was predominantly navy, and we knew we wanted to explore a lighter design with more white space.

Low-Fidelity Comps: I created 15-20 comps for each web page, experimenting with application of imagery, typography and color.

Interactive Prototypes: I created three InVision prototypes for the Product section of the website. Each prototype included a different combination of imagery, text styles and colors. This process allowed Highspot to evaluate the overall look/feel of the site, and see how the various page layouts flowed together.

High-Fidelity Comps: Once the team came to a final decision on the design direction, I created high-fidelity comps for each web page.

Outcome
Near the end of the design phase, I met with Highspot's developer to discuss hand-off of the final comps. He did not need redlines, but he requested I provide documentation for the styles. I put together a style guide, which included the color palette, typography, link and button styles. I handed-off the comps and style guide to the developer via Box.