TruePaths

Responsive Consultant Website

Problem

I look to fix the issue of the lack of representation for the company. A responsive website for someone’s company provides a much more authentic look than proceeding without one in. 

Collaborators
Jesus Paredes
Roles
-Lead product designer
-UX Researcher
Period
March 2023 - July 2023

Overview

Desktop home version of TruePaths website
Product

TruePaths is a website for a consultant based company in which the programs of the company are highlighted for users to gain a better understanding of the company. 

The Goal

Create a website with clear navigation, while representing the company’s brand and what they do. 

Responsibilities

Conducting interviews • site mapping • paper and digital wireframing • low and high-fidelity prototyping • conducting usability studies • accounting for accessibility • iterating on designs • determining information architecture • responsive design.

User Research

Research Summary

I used TruePaths data on and gathered insights from similar consultant firms with similar programs to develop interview questions, which were then used to conduct user interviews. Most interview participants reported feeling like there’s never a clear path that can help users see what a company is truly about. The feedback received through research made it very clear that users have a need for a website that is simple to understand and helps users know the relevant  information they need to know on the website without being distracted.  

Users Pain Points

Search

There was no search bar implemented throughout the app

Research

Not much prioritization on accessibility including no text to speech, and alt text in the website images

Usability Tests

Not allowed to go back to previous page without users fully restarting and going back to home page

Persona 1
Michelle is a educational consultant who needs a website to represent her company and showcase the programs she promotes because it will lead to growth for her company while helping more people out across NYC.
User Journey Map
Trish’s user journey map shows how easy and quick it can be to use the TruePath website to find a program she needed to join for her health. 

Starting the Design

Site Map
With the app designs completed, I began to work on designing the responsive website. I used the TruePath sitemap to guide the structure of each screen’s design to ensure a consistent navigation and provide an easygoing experience. 
Paper Wireframes
Throughout this process I was able to carefully review the designs and decide with the website being information based one, the design with multiple images at the bottom can be used as the programs and this would be the design that would make it to the next stage of digital wireframing with more reiterations.
Paper Wireframes Screen Variations
Throughout this process I was able to carefully review the designs and took account of the designs for the desktop version, and decided the design here that would make it to the next round would be the first design as it resembles the desktop version but with more space applied to it maintaining consistency for the information on both versions. 
Digital Wireframes
After iterations from the paper wireframes and choosing the best fit according to peer feedback, I designed the interface simple for a smooth user experience while displaying the programs for the website.
Digital Wireframes Size Variations
The mobile designs followed the same process from the desktop version but some more feedback led me to give an extra picture for the program page as a carousel cannot be effectively used there as it could be for the desktop version. 
Desktop
Mobile
Low-Fidelity Prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of writing descriptions and downloading the generated image
View TruePath's low-fidelity prototype here
Usability Study: Parameters
Study Type
Unmoderated Usability Study
Location
New York, Remote
Participants
5 Participants
Length
5-15 Minutes
Usability Study: Findings

Colors

Users wanted to see colors that can have them engaged with the website 

Labels

Users want the programs listed to have a label as well instead of just a picture 

Dynamic Interactions

Users want the interactions in the site to change in some form. 

Refining the Design

Mockups
Based on the insights from the usability studies, I applied design changes like adding a "History" and "Favorites" section, this was a result of hearing how users wanted a way to save their favorite images and see old ones. I also applied a feature to refresh the generated images in case users did not like the one generated for them the first time.
Before Usability Study
After Usability Study
Desktop home version of TruePaths website
Finalized mockups
Desktop home version of TruePaths website
Finalized mockups Screen Variations
High-Fidelity Prototype
The high-fidelity prototype for the mobile device variation followed the same user flow as the high-fidelity prototype for regular desktop screens.
View TruePath's mobile device high-fidelity prototype
Accessibility Considerations

Colors

Use colors that do not strain users eyes by being too light or too dark. 

Labels

Contrast on buttons from the rest of the elements to help users notice them easily. 

Dynamic Interactions

Assigned clear labels to cause no confusion for users when seeing an interaction.

Responsive Design

Responsive Designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Mobile Website
Tablet
Desktop
Desktop home version of TruePaths website
High-Fidelity Prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
View TruePath's high-fidelity prototype on desktop

Takeaways

Impact
Users shared a sense of a good user experience as they navigated through the website, they were able to find everything they were tasked to find in quick success. One user stated “this colorway really caught my attention”. Overall users used the website as intended which was a success. 
What I Learned
I learned to let things take it’s time and not rush the process, whether it is usability testing, competitive audits, or creating personas this process has taught me to take my time to gain memorable insights to improve my designs. 
Next Steps

Promotion

Promote usability testing by recruiting participants through the use of incentives

Research

Conduct more research on the success of fellow consultant sites and see what they consist of

Usability Tests

Conduct another round of usability tests to find any errors or inconsistencies

Local Time