.png)
New Roads Counseling
Full rebrand and responsive website build to capture the natural and inviting essence of Rayne's new counseling business in Bend, OR.
“Life is not always perfect. Like a road, it has many bends, ups and down, but that’s its beauty.”
-Amit Ray
​
Role
Graphic Designer
UX Designer
UX Researcher
Tools Used
Figma
Otter.ai
Survey Planet
Optimal Workshop
Maze
Timeline
4 weeks
Solution
We crafted a responsive website tailored to meet Rayne's unique needs that went live February 2023. To complete her brand, a full branding kit that embodies warmth and inclusiveness was created. This solution ensured that her brand's tone and website is natural and inviting, as well as welcoming to all people and inclusive of all races and genders, perfectly capturing the essence of the business.
Problem
Rayne, a highly experienced high school counselor and the owner of her new business, New Roads Counseling, has a vision to provide personalized guidance and support to her clients on their journey towards healing and growth. However, she struggled to establish a strong brand identity and to create an online presence that accurately represents her unique approach.
What steps were taken to solve this problem?
By using the design process, we were able to truly understand our users and develop solutions that work for them.
![5d7e5a7b90431740cc08730d [Converted]-01.png](https://static.wixstatic.com/media/6f861d_996824499b2a409282e512a658d35629~mv2.png/v1/fill/w_202,h_200,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/5d7e5a7b90431740cc08730d%20%5BConverted%5D-01.png)
empathize
![5d7e5a7b90431740cc08730d [Converted]-02.png](https://static.wixstatic.com/media/6f861d_9be5e795af684c8eab2047499f930340~mv2.png/v1/fill/w_215,h_212,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/5d7e5a7b90431740cc08730d%20%5BConverted%5D-02.png)
define
![5d7e5a7b90431740cc08730d [Converted]-03.png](https://static.wixstatic.com/media/6f861d_8b3733adf75b4880a7e567d79b4e1f13~mv2.png/v1/fill/w_222,h_219,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/5d7e5a7b90431740cc08730d%20%5BConverted%5D-03.png)
ideate
![5d7e5a7b90431740cc08730d [Converted]-04.png](https://static.wixstatic.com/media/6f861d_a9208f3f393b4d149eb91cd8921e4c5d~mv2.png/v1/fill/w_202,h_200,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/5d7e5a7b90431740cc08730d%20%5BConverted%5D-04.png)
prototype
![5d7e5a7b90431740cc08730d [Converted]-05.png](https://static.wixstatic.com/media/6f861d_046ea9a65c4d45749c80dbc6fe1dfcf9~mv2.png/v1/fill/w_184,h_182,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/5d7e5a7b90431740cc08730d%20%5BConverted%5D-05.png)
test
01. empathize
Research Goal
Learn what users want out of an counselor's website & brand so that we can design an approachable and easy-to-use product where users can get the help that they need with their mental health.
Research Objectives
Identify Needs
Understand the needs of people who are seeking a counselor online. What do they like to find during this experience and what do they often find missing?
Catalog Experiences
Uncover the successes and frustrations users have faced while looking for a therapist online.
Analyze Competitors
Gain inspiration from other local counselors' websites. What are they doing well/ not well?
Competitive Analysis
In order to gain valuable insights and stay ahead of the competition, we conducted a thorough competitive analysis of other counseling services in the Bend area. This allowed us to identify what was working and not working in their website strategies, providing valuable information to enhance the online presence of New Roads Counseling.
User Interviews
Time to get some user insight!
In order to better understand the needs of our users..
20 participants between the ages of 26-51 were either interviewed or surveyed.
(16 survey takers, 3 interviews)
Other important deets:
* both the survey and the interview asked the same questions. the interview was done verbally and the survey was in essay question format on Survey Planet
* all participants identified as users who have searched for local counselors
Affinity Mapping
After conducting the interview and sifting thought the data, an affinity map was created to identify the patterns among our users. We organized the data in various ways, but a few topics were most insightful.
Transparency
Philosophy
Ease
click this to expand and browse!
Want to see how my brain organized the data? Check this out.
!!!
!!!
Key Takeaways
an "ah-hah!" moment:
The conversations we had with our participants were incredibly insightful. The frustrations of the users were the most telling. While all interviewees and survey takers expressed various preferences within their counselor searching journey, there was a major commonality:
​
**Nearly every user expressed frustration in this process and wanted it to be more transparent**
User Personas
After listening to the participants and using this newfound information, we developed three user personas based on insights gathered during our research.
Our Direction-Desiree, Desiree, became the main persona the project was intended for.
​
Hi Desiree!
02. define
POV & HMWs
Point of View Statement- Frames the problem in a way that keeps a focus on users, their needs, and the insights about them.
We'd like to discover ways for people to access a counselor that fits their individual trust requirements in a way that makes the search feel transparent, approachable and welcoming.
How Might We Questions- Turns the problem at hand into design opportunities.
(1) How might we make transparent counselor profiles to fit user needs?
(2) How might we make people who want to find counselors feel confident about their search to improve their mental health?
Project Goals
To further define the product, we brainstormed business, user, and tech goals within the context of our research findings.
03. ideate
"Everyone has great ideas, but great ideators write them down."
- Anonymous
Site Map
Using the information gathered from the users, our inspiration from our user personas, and the opportunity spaces that were found by the HMWs and project goals, we developed New Road's first site map. After checking with Rayne and making a few iterations, we solidified the following navigation:
Task Flows
After the site map was solicited, task flows were created for the platform's three main features.
Wireframes
Defining our task flows helped to create the initial iterations of low and mid-fid wireframes for desktop.
Brand Board & UI Components
Before creating New Roads' high-fidelity designs, we developed their brand board and UI Component Library in order to simplify the design process and create consistency across the platform.
04. prototype
Prototypes
Flow 1 of the high fidelity design allows the user to email New Roads Counseling through by using the site's contact page. In order for the flow to be successful, the user must easily navigate to the contact page, fill out the necessary forms, and hit the send button.
The second flow of the prototype allows existing clients to access the client portal directly from the site.
The third flow allows the user to learn more about Rayne and her services by sifting through various pages of the site including the About, Services, and FAQ pages.
All pages were also built out for mobile to round out this responsive website.
05. test
Usability Testing
Time for testing! After finishing the high fidelity designs, we recruited 10 relevant participants to participate in usability tests; all tested virtually with Maze.
Testing Goals:
1. Evaluate usability of each flow.
2. Gather feedback on UI and user flow.
3. Identify common pain points.
4. Observe how users are feeling when navigating the product, noting how they feel about their overall experience.
Usability Test Findings
After the usability testing was complete, we organized the data to make sense of my findings for each task flow .
click this to expand and browse!
Task #1: Contact New Roads
90% Success
9/10 users successfully completed the task fully. 1 user did not complete the task because they didn't click all the way through the contact form. We assume this was an issue with the task language rather than with the site flow.
The Unexpected
30% navigated to Services. All of these users found the “request an appointment” button on that page and successfully navigated to the contact page
The Expected
20% users clicked the contact button on navigation & 50% users clicked the “request an appointment” button on landing page.
Task #2: Find Client Portal
The Expected
90% users clicked the “client portal button on landing page
The Unexpected
10% of users navigated to the services page and then clicked on the client portal CTA.
Task #3: Browse for more info; return to home page
Qualitative over Quantitative
This task was harder to quantitatively measure because users had free range of the site. This task would have definitely benefited from a moderated test- noted!
The Unexpected
Users started on the About page. 50% went straight to the home page after browsing this page by successfully clicking the logo. Since this ended the task, this was an error of foresight on my end when creating the test.
Getting Home as Expected
90% users used the logo to navigate back to home page, 10% used ‘home’ link in the footer.
Priority Revisions
After analyzing the results of our testing and sorting through the written feedback from the users and from Rayne, a few priority revisions were obviously needed.
Iterations needed:
• 30% testers reported that type was too small on desktop. I made sure to bump the size up for better readability and accessibility.
• Add home button to mobile menu.
• Rayne’s Requested revisions, including changes to landing page language and photo, switching out topo map for street view map, and swapping a few stock photos to better represent Rayne's clientele.
Old Flow vs New Flow
mobile changes
before
Home was added to the mobile navigation menu to add redundancy. Users can now navigate back to the landing page with Home or with logo
after
click to expand and peruse all of the changes
desktop changes
Photo was updated to be more professional, and copy was edited to be more concise on the introduction section of the landing page.
Body text size was increased by 4 pixels in order to increase legibility across the site.
before
after
click to expand and peruse my full iterations
So... What's Next?
1. Hand off website to Rayne and give a 'Squarespace' 101
2. Solidify SEO keywords and strategy
3. Keep in touch! Rayne will reach out for a Resources page build in the near future
Reflection
• Over these 4 weeks, I learned A LOT. Working with a real client was an extremely beneficial learning experience. After this project with Rayne, I have learned to be a more flexible designer with even more drive to meet my client's needs.
• If I had more time, I would retest my iterations using a moderated test. While an unmoderated test helps in the realm of saving time, I feel like I lost valuable feedback without the ability to ask my users questions in real time.
• I love this process. Handing off a product to a more-than-satisfied client and having my work live in the real world made all the hard work so worth it. So looking forward to more of this.
Whew, thanks for listening!
questions? comments? constructive criticism? let me know.
wanna see the site IRL? check it here