Laying the foundation

After a lot of strategic, foundational brand work, we went to task in a collaborative workshop with our client where we established the direction they wanted their content to take and gathered requirements for the project. Our guiding principles by which we would judge everything from this point forward were what we wanted our users to feel. "Welcome, relieved and understood" was the mantra we always pointed to whenever decisions needed to be made.

Information architecture

Once the strategic ground work was complete and requirements were set, I was ready to begin the process of creating the architecture of the site. Of course this went through much iteration, but amazingly, alignment between all the stakeholders happened pretty smoothly.

I began by mind mapping everything I heard and then prioritizing and categorizing based on all of our discussions and based on mental models that existed for our customers.

Wireframes

Once the IA was complete, I could begin framing up how the pages would be structured and laid out. Things really began to take shape at this point and the anticipation for our client grew as things became more real for them. 

Knowing the site would be responsive, I was thinking a more modular approach would be needed, so each component could work in various contexts and locations within pages. This approach also brought out a more linear flow to the page which helped with the story we were wanting to tell and the feelings we wanted our users to experience.

Design exploration

From this point, the layout and bones of the pages were pretty well established and it was time to explore some design concepts in higher fidelity.

Responsive prototyping

In order to craft how layouts responded to window size changes, and ensure everything would look great and behave well at the various breakpoints, I used Adobe Edge Reflow (now deprecated by Adobe) to build HTML prototypes and test things out. See the rough homepage sample below.

The final design work

After a number of iteration rounds, the design was refined and tightened up. Colours and photography were carefully selected with the brand attributes and experiential attributes in mind. Below are a few samples of the final design.

The UI Kit

To ensure developers, designers and clients were all speaking the same language, we documented the main rules of the system we created for the website. Below are a few sample screens from the kit.