Overview

COVID-19 has brought immense emotional and societal changes. TRA recognizes the need to have an online presence as we adapt to a “new normal” and aims to host more online programs.

The new redesign of their current website will allow people to easily locate information about TRA and it’s programs without having difficulties finding what they want.

My Role

Lead Web Interface Designer

I was the main designer working on the redesign with a team of board members and one engineer.

As a lead designer, I conducted weekly meetings to present my findings and designs based on the previous feedback, built low and high fidelity screens and created interactive prototypes.

My goals were to:

Minimize confusion by designing for ease of use - focus on learnability, content discoverability, findability, and readability.
Increase user engagement by implementing native web interactions.
Create modern and simplistic screens while utilizing the existing brand guidelines set by the organization.

The Beginning

Understanding the problem

New and existing users of TRA’s website found the platform to be confusing and did not understand the organization’s values or how to sign up for programs. Participants using the existing website are running into various problems including poor visuals, unintuitive interactions and information overload.

Early Insights

I worked closely with TRA’s Administrative Assistant, Lilian Mann to understand TRA’s goals and vision for the redesign of their website. The biggest setback they were facing was not having enough structure to their website which has led their current users to contact their support email to ask where a particular exercise or page was found on their website.

The problems with the current website that Lilian shared were:

🧐️
Lack of distinct navigation options

💀️
Outdated Design

🌀️
Too many options

🚶️
Users have exited the platform

🤯️
Cluttered Pages

🚩️
Lack of Branding

Research

Building a persona

With everything that Lilian had shared, I created a persona who would be an ideal user on TRA’s website.

Meet Annie Reyes!

With Annie in mind, I understood that I had to build a product that was meant to be accessible and convenient. A free resource needs to be easily understood by individuals who are seeking childhood trauma related care and may already be in an overwhelmed state before landing on TRA’s homepage.

Drawing a Map

To maintain trust with users and to ensure that they could easily navigate the website I began to outline how I could simplify TRA’s current sitemap.

By organizing the current website’s content and design with an emphatic tone, users will be able to have a better understanding of the company’s programs, missions and goals.

Designing a Solution

High Fidelity Screens

Iterations of TRA’s Home Page

From the meetings I had with Lilian and the board, I was able to showcase different versions of the final designs. While Iteration 1 captured the overall tone that TRA wanted to capture for this redesign, the company wanted to promote Programs and Groups on their homepage, while incorporating more color on the screen.

Based on that feedback I started thinking about what Iteration 2 should look like. I knew TRA wanted to increase readability by decreasing the cognitive load users would experience while looking at a pageful of text, I also was aware that they wanted to utilize more of their brand colors and increase the size of their logo. After sketching out the new home page I was able to build Iteration 2.

Notable design changes are:

The Top Nav Bar
Images included in every sections
Our Impact has Icons
Newsletter Email Capture
The Bottom Nav Bar

Once the board saw the new iteration, I was met with a lot of positive comments and they immediately agreed that it would be the final design for the Home Page.

Towards the end, TRA was able to onboard their own developer that I had weekly conversations with. To ensure that the project went smoothly, we had weekly meetings to go over interactions, user flows and content management. I also exported the designs to HTML and CSS to assist the developer during the design handoff.

Project Insights and Takeaways

Stepping up and taking charge

It was TRA’s first time working with a designer so there was a lot of structure that we had to build together. As the only designer on the team, I took charge and created my own due dates based on how long a task would take, while reporting directly to the board members with any new design changes and updates.

Time zone differences

From coast to coast, it was 3 hour time zone difference! Working early encouraged me to take on habits such as setting reminders and alarms on all my devices. This helped me plan my work days while effectively communicating through Zoom Meetings and phone calls.

Getting a developer sooner

While the project had its constraints, I really wish we had a developer that started the same time I did. This way we could go over any interactions and troubleshoot flows together from the very beginning rather than towards the end of the design process.