Problem:
Company's site was disorganized with a sprawling navigation.
Task:
Develop an improve information architecture and design a a more user friendly navigation, while considering multiple user persona's needs.
The Process
Learn
Gather information to discover the users needs, wants, and pain points via research & interviews.
Competitor Research:
Rethink is one of many therapy based platforms. Understanding how our competitors approach their product was imperative for this project*. I also looked at non therapy based platforms to really dig into what the optimal navigation system would look like.
*for company policy purposes I cannot include these images and feedback
Interviews:
The company has 3 tiers that they categorize their users in. It was important for me to interview multiple user from each tier. It was equally important to interview different roles within each company to understand how each user moves through the products on a day to day basis.
Define
Extract from research & data to find solutions for the user’s wants, needs, and pain points.
Personas:
I developed personas from our user's various roles in their own companies. Each persona interacts with the product in a unique way. These personas were also reflective of the different tiers of user.
User Journey:
Next I created user journeys to allow me to better understand the product as a whole. This practice displayed the daily interaction with the product as well as where there were specific pain points where we could intervene with innovation.
RBT
BCBA
ADMIN
OWNER
Ideate & Design
Collaborate with product managers to put broad concepts into tangible designs.
Information Architecture:
Before I began creating mockups, it was necessary to improve the information architecture. The previous structure was put together haphazardly, so I had to go through and recategorize everything putting each section into the proper bucket and in some cases eliminating or adding entirely new sections so that there would be overall better organization and a more cohesive experience.
In the image below we can see the old navigation and information architecture, a lot of things were thrown into random categories and they needed to be sorted through.
Below we have the updated information architecture, I had to consult with various product managers to insure that things were being placed in logical buckets.
Wireframes:
Once the IA was established, I could begin created wireframes. These wireframes focused solely on the navigation. Placement, size, and usability were all taken into consideration.
home page // first iteration
client page // first iteration
Test & Iterate
This early iteration was tested on a small group of clients and feedback was collected. Once I had sifted through the feedback it was time to go back to the drawing board to design and test multiple iterations.
home page // second iteration
A considerable amount of A/B testing was done within the company and with our users to see which designs were preferred. Accessibility was taken into account regarding color and icon design. It was of great importance that the icons were clear and distinguishable from one another.
The new navigation includes a vertical primary navigation bar and then a secondary and tertiary navigation that run horizontally along the top.
client page // second iteration
Original Product & Navigation
I have chosen to include this so you can see the complete overhaul that was done to the site. The below images show how the website looked when I was hired and the final product displays all the changes that have been made since/ are currently in production.
Final Product
Breadcrumbs were included in the final product for added ease of navigation.
Reflection:
Rebuilding the information architecture and redesigning the entire navigation and website were among the first projects I received when I started at this job. I was, and currently still am the only UX/UI designer in the behavioral health department. As mentioned earlier I was able to work with the PMs to better understand the product, but the organization and designs were entirely mine. I am incredibly proud of the work I was able to produce and love that my designs are able to bring ease and efficiency to therapists all across the country.
