Mental health website

Brief

In 2014 working in partnership with full stack developer Matt Collins , we were asked to redesign and build the Depression Alliance website. The current site was outdated with a wealth of information and content that needed to brought to the surface. More people were visiting from mobile devices so the site had to be responsive and light.

Approach

With just over three weeks design effort allocated and slightly more for the build, it was important to get the most out of our time. The design processes included:

• Competitor research and best practice
• Site audit and restructure
• Style tiles
• Sitemap, page templates, wireframes and component definition
• HTML prototypes including grid, responsive reflow and a typographic scale
• Template and key page designs across viewports

Information Architecture

A full site audit was undertaken with the client and the new IA was informed by analytics, insights and best practice.

Page templates

Reusable page templates were defined, numbered and mapped against all pages on the sitemap. The templates were then prototyped in HTML and CSS to test across as many devices as possible.

Style tiles

Due to the time allocated to the project, creating style tiles during the design process not only saved time but helped conversations focus on the look and feel of the site and not the layout or content.

Wireframes

Considering not every page would be mocked up (only key pages were actually designed in Photoshop) it was necessary to produce wires of all pages so there was a reference for the client and developer.

Execution

The live site was now responsive, loaded faster and benefitted from a CMS allowing authors at the Depression Alliance to edit and upload information across the site.

It was live for two years until August 2016 when Depression Alliance merged with the mental health charity Mind .