By Nathan Donaldson
Tags: Agile , Design , Development
You may have noticed a bit of extra colour has crept in to the Boost website recently. After just over a year of refining our content and finding out exactly what people wanted from our site, the time has come to apply the design.
It’s always difficult for a company that designs websites to create their own, but in the end the Boost site came together surprisingly easily.
These are the steps we undertook when designing the site:
As you may be aware we were approaching the new site build in the same way we like to approach all our design work, in an Agile way. We start by making a very basic, modular site. We don’t do any design up front and focus on getting all the content and functionality we want in place, along with the user experience (UX) and site structure.
The designers are heavily involved in this process, and by the time it comes to actually creating a look and feel for the site they are already fully immersed in the project and can make much more informed decisions.
We began the design process by creating a moodboard. Our two designers collaborated to gather elements so we could decide on a direction that we wanted to take. These elements included examples of typography, colours available to us from the Boost palette and a range of icons the designers liked.
The team have been very excited to further progress the site so that we now have a design that represents Boost. Michael Trilford (who has been a designer at Boost for 7 years) said “I have been waiting 6 years to redesign the Boost website, finally the time has come to go live, Bliss!”.
The enthusiasm they had for the project was obvious, they pair designed the site directly in the browser. The introduction of web fonts and icon fonts allowed them to skip the extensive Photoshop aspect of building a website. Jesse, the developer on the project, collaborated with the design team daily to ensure that their ideas became something that could work, and work across platforms.
By doing it this way, they could then be confident that every pixel was aligned correctly on the baseline grid, which in turn created a great vertical rhythm and mathematical harmony.
We also sent out an IntuitionHQ test to check that the navigation was making sense to people. We followed up our online testing by doing some in-person testing so we could observe how participants were interacting with the website and where they were having difficulties. We are compiling the results of these tests which will inform future enhancements.
Speaking of which, we plan to keep evolving the site over time. So leave a comment if you have any feedback as it is very valuable to us and will be taken on board when we are planning future sprints.
