TR Website Redesign
Transitional Resources | April 2016 - June 2016
I worked with a team of four other people to redesign a website for Transitional Resources (TR). TR is one of the smallest licensed mental health centers in Washington state's King County, offering a continuum of mental health treatment, housing, and vocational services to those who are most in need.
CONTRIBUTIONS
Card sort design and analysis
Information architecture (IA)
Competitive analysis
Copywriting
Visual design for the Donate, Services, and Volunteer pages
Usability testing
Design Problem
The Transitional Resources website did not help the organization meet its business goals. The website did not accurately represent the organization's services and did not prioritize content based on their target audience.
Original website.
Primary website issues:
Unclear navigation.
Poor layout of information.
Lack of relevant information about the organization.
Outdated branding for target audiences.
Difficult to update.
Goal: Redesign the Transitional Resources website using human-centered design principles to help the organization better meet their needs.
Process
Research methods.
There were two key things we had to understand in order to improve the website:
Identify the target audience and their needs.
Understand the organization's business goals.
Once we collected this information, we were able to target the new website to their primary audience and meet business goals by reorganizing the content and using visual design principles to make information easier to find and digest.
Our team went through the following process to complete the project:
01. RESEARCH
5 Surveys
6 Stakeholder interviews
153 Google analytics sessions
22 Card sorts
Competitive analysis
Findings collage.
02. PERSONA DEVELOPMENT
Through our research, we realized that the current version of the website was targeting prospective patients, instead of their intended audience, donors and volunteers. We created personas from our interviews and surveys to focus the design on the intended target audience.
Primary persona.
Secondary persona.
03. DESIGN
Design principles that came out of our research.
In our design process, we started by revising the website's information architecture (IA) to prioritize pages and content according to the new personas. Once we had a working version of the new IA, we began with paper sketches and consolidated our ideas into digital wireframes.
New information architecture.
The deliverables that came out of our design process include:
Information architecture
Design principles
Paper prototype
Wireframes
Paper sketches.
Wireframes used in first round of usability testing.
04. USABILITY TESTING
Usability testing summary.
We tested our proposed redesign at the wireframe level before moving onto the visual design. This allowed us to focus on testing the IA and key user tasks.
Usability testing findings.
05. HIGH-FIDELITY PROTOTYPE
As part of the redesign, our client requested that we update the look and feel of their website. Due to the time constraints of this project, we were unable to produce a new brand strategy, but we were able to make improvements by adding a secondary color (aqua) and updating the imagery. These changes allowed us to refresh the visual design, but still preserved the recognized brand image.
Key visual design changes include:
Color
Typography
Images (both hero images and secondary images)
New homepage.
New volunteer page.
New services page.
Key Challenges
The organization had limited customer data. Therefore, most of our research participants were representative of the types of people that would use the Transitional Resources website rather than actual users.