This is part 2 of my approach to redesigning The Tomorrow Lab’s website. Read part 1 here.
With both the audit of the current site completed and actionable improvements listed it was time to start creating the design.
Wireframes and sketches are an ideal exercise to start any design process as it’s quicker to work out any ideas on paper compared to jumping straight into code or a design application. I tend to keep this step relatively quick and low-fidelity unless they are a required deliverable for the client.
For this redesign both full-page and specific feature wireframes were created to help provide solutions for overall layout, responsive web design, information architecture and any custom functionality.
HTML & CSS Prototype
An effective prototype will not only convey the visual design but also communicate the different facets of web design such as the interaction design, usability, user experience and much more. As explained in Derek’s article on how modern web design work, websites are constructed from a number of different design disciplines – something that a flat design made in Photoshop doesn’t achieve.
Among the many advantages for designing high fidelity prototypes in the browser, we can perform user testing to help gain insight into how users will actually use it. Whilst the code should never be perfect, as we should be spending the majority of our time iterating the design, it will work exactly like the real thing.
Our static prototypes are all built in Sublime Text 3 using Derek’s boilerplate. The trio of Sketch, Photoshop and Illustrator were used sparingly for creating assets.
There are a number of other hugely useful applications and tools built to aid web design that I’ve used on this redesign. They are:
- Contast Ratio for testing how readable colour combinations are.
- Line-length testing bookmarklet to colorise text between 45 and 75 characters. This helps to find a comfortable line-length, or measure, at various widths to improve readability.
- Ghostlab allows for synchronised browser testing across a range of devices we have in the studio.
- Kuler for creating a colour scheme.
Typography, as it’s always been, is such an integral part of website’s success. It delivers a tone of voice for your site that combines with legibility and readability to ensure that a user’s experience is positive.
The old site used Effra for headings and Proxima Nova for body content. Both are good choices to fit in with The Tomorrow Lab’s branding however the team were soon aware of Effra’s poor rendering in Windows machines and, from experience, I’ve seen some rendering issues with Proxima Nova on Windows as well.
I concentrated on finding the perfect sans-serif as I believed this classification, instead of serif, appropriately suits TTL’s tone of voice and personality.
Our redesign utilises the Avenir Next family, we use Avenir Next Bold for headings and Avenir Next Regular for the main body content as well as some headings. As the Next family is a reworked version of the original Avenir family, to address on-screen display issues, we’re sure that the legibility is excellent at all screen sizes. Undoubtably they’re a great combination. Also the word Avenir means ‘future’ in French so that ties in nicely with The Tomorrow Lab as well!
Another key benefit of using some of the Avenir Next family is that it’s now included as standard in OS X Mountain Lion and from iOS7 onwards. From a performance point-of-view this negates the need for these users to download the fonts thus reducing page load time.
Using cues from our brand guidelines and existing marketing collateral, I created a bright and attractive colour scheme to ensure great colour combinations. This was all produced using the invaluable Kuler.
As an added feature we have personalised the colour of the hero banner on every individual case studies to their particular brand identity.
Once the prototype has reached an acceptable level to demonstrate how the website will look and work it’s time to get it in front of users.
There are a few obvious points you should bear in mind when planning and conducting user testing.
- Ensure the subject thinks out loud.
- Never ask yes/no questions, only ask open-ended questions.
- Make it clear to the user that you’re testing the site and not them.
- For iterative design Jakob Nielsen recommends doing three tests with 5 users each to discover the majority of usability problems.
- Think about recruitment of users to test. Do they fit your target market?
I created a test script with 15 tasks and questions that is indicative of a user’s activity on the The Tomorrow Lab website. I allowed each user 30 – 60 seconds to initially look through the website before beginning with the questions.
- Can you understand and articulate what The Tomorrow Lab do?
- What do you think is the purpose of the site?
- How would you go to the Digital Strategy page?
- How would you find The Tomorrow Lab’s phone number?
- How would you go to the Robinson’s Shoes case study?
- What do you think those arrows on Robinson’s Shoes case study do?
- What percentage of revenue now comes from mobile and tablet?
- Who wrote the blog post entitled How Twitter has already won the World Cup?
- Name the three web developers at The Tomorrow Lab?
- How would you go to The Tomorrow Lab’s Twitter page.
- What services are offered by the Digital Marketing team at The Tomorrow Lab?
- How easy was it to use the site?
- Was it a positive or negative experience? Why?
- PERSONAL: Any thoughts on the design?
- PERSONAL: What are your thoughts on The Tomorrow Lab as a company/brand?
User Testing method
We adopted a Rapid Iterative Testing and Evaluation (RITE) approach which encourages you to amend the prototype between tests when you notice a usability issue rather than waiting until the end of a full round of testing. This format works really well when you’re short on time and budget as you can immediately test an improvement with the next user.
Normally when a round of user testing is completed you breakdown the results before discussing improvements. But as we adopted the RITE approach the improvements from all the tests were already implemented. Now we had a prototype that had been tested by four users which provided some real insight into how users would use our new site. We witnessed some confusion around the navigation, information architecture and more that helped form what you’re looking at now.
Ideally we would have liked to have tested on more people however we were dictated by time constraints.
Performing usability testing prior to presenting to stakeholders enables you to support your design decisions better as well as providing insight into which approaches didn’t work. It also helps display the benefits of user testing and helps the stakeholders view the project from a users perspective and not their own subjective opinions.
Sometimes, however, you can’t perform user testing prior to presenting to stakeholders and that’s fine, there no right or wrong approach.
The review should be performed with the businesses objectives decided upon at the initial project planning stage. To recap the objectives of our website are:
- Who is the target market for this website?
B2B, public sector, marketing departments.
- What is the outcome we’re looking for?
Lead generation (case studies are important for these).
Providing expert information for dissemination.
Recruiting good people.
- What are we looking to say?
How we can improve their online experiences and help to improve key areas such as conversion rates, revenue, increased visits, organic traffic etc.
We are a forward-thinking and exciting company to work for.
There were very few issues with the design, that passed through user testing, from the rest of the team; in fact most issues were content-based. We started to strategically plan improvements to the website copy as well as restructuring the main services at the same time.
We introduced over 10 new pages to help explain specific services such as Conversion Rate Optimisation, Information Architecture etc. This is an example of how a feedback/objective driven website should be constructed.
Work doesn’t stop once the website is launched, there is always scope for improvement. We will continually look at the data to measure our efforts allowing us to improve. And we will utilise A/B testing to encourage higher rates of users contacting us regarding our services.
If you see any issues with this redesign, or want to know more, send me an email to firstname.lastname@example.org