Fairtrade UK website redesign

Project overview

Fairtrade wanted to create a new website which was compatible with their mobile audience. At the same time they wanted to use the opportunity to update the design and experience of the site. A secondary objective was also to create components which could be used by Fairtrade sites in other territories with the same CMS.

Research phase

Due to a limited budget our research phase was focused on analysing previous research docuentation and a limited IA cardsort exercise to help understand the way the audience understood Fairtrade's structure.

My role as a UX consultant was to organise the card sort exercise, recruitment of test subjects, report results back to the stakeholders and work these into the upcoming design.

The research review and card sort was followed by a stakeholder workshop to help create personas for the various audience types of the Fairtrade website. We used the existing research to create basic personas then invited Fairtrade personnel, including community and product managers along with other stakeholders to participate in a personas creation exercise. This allowed us to both understand our stakeholders understanding of the audience but also engage the stakeholders inthe concept of a UCD framework.

Design and implementation

We did a full UX and visual design process, this included wireframes, HTML prototypes, low and High fidelity mockups and pattern guides.

I used our personas to create user storys and task flows and then worked to design a website which solved the usage task problems for our audience. I created wireframes and page flows to describe layout and processes for the stakeholder and worked closely with my visual design colleague to design a useful and valuable site. I also created HTML prototypes to demonstrate interactions and designs. I also worked closely with the third party development company to prepare the site for development.

Results

Throughout the design and build process we kept close communications open with our client Fairtrade, and they were very happy with our progress and our designs. The new website also received positive feedback from users, and initial numbers were positive.

Tools used

• Pencil sketches
• Cardsorting
• Workshops
• Omnigraffle
• HTML prototyping