TruePaths
Educational 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
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.
Search
There was no search bar implemented throughout the app which prolonged tasks
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
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.
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.
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
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.
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 hereColors
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.
Study Type
Unmoderated Usability Study
.svg)
Location
New York, Remote
Participants
5 Participants
Length
5-15 Minutes
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.
Finalized Mockups Screen variations
Implement inclusive colors
Use colors that do not strain users eyes by being too light or too dark.
Better contrast
Contrast on buttons from the rest of the elements to help users notice them easily.
Alt Text
Add alt text throughout the website to help accommodate to various users
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
.png)
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
.png)
.png)
.png)
.png)
.png)
.png)
%20(2).png)
