top of page
Rise Recovery
Redesign of website focusing on the recovery of youth and their families affected by drugs and alcohol.
Overview:
Rise Recovery is a nonprofit based in San Antonio, Texas that provides recovery services to both youth and their families. Through contact with a stakeholder, we found that their main concern was organization and lack of traffic. The project is focused on improving information architecture in order for users to easily find the information they need to go through with their journey.
Team Members
Persephone Shah, Anthony Bernardelli, Charley Hoffman, and Javier Fernandez
My Role
UX/UI Designer
Problem:
We have observed that R&R’s navigation is unclear, it’s crowded with text-heavy content, and it doesn’t say how it helps visitors reach their goals, which can cause confusion when searching for information.
Solution:
We believe improving the information architecture and highlighting Rise Recovery’s services in a website redesign will solve this problem.
Tools
Figma, Miro, Invision, Visual Code Studio, GitHub, Bootstrap, HTML, CSS
The Process
1
2
3
4
5
Empathise
Define
Ideation
Design
Test
Empathise
Research
When conducting the research, we managed to get a hold of the stakeholder and spoke with them about the current state of the website. What we drew from the interview was focusing on information architecture, and showing clients resources/services provided when they interact with the website. I conducted a competitor’s analysis on direct competitors as well and indirect. The main takeaway was how most of the competitors focused on a call to action.
Competitor Analysis
Riverwalk Ranch
Balanced Counseling
SA Recovery Center
Vertava
Define
I decided with my group on conducting a storyboard and a User Journey Map to get a better idea on understanding how a user would behave and interact with the current design of rise recovery. Through the storyboard and the User Journey Map, I focused on how the persona would guide through the current design of the website, drawing how they could have issues and where opportunities come.
User Journey
Storyboard
Ideate
Creating a diagram of what changes could be made for the redesign, we deduced that most of the information architecture was what needed the most improvement.
Wireframes
We all created sketches and low-fi wireframes and then came back together and compared and contrasted on certain aspects of how the information and how it was structured. We ended up mixing up aspects of my design along with Charley’s design. Using the structure that uses all the space while putting in enough information for the user to easily find and not get overwhelmed.
During sketch process, there were a total of four homepage sketches for layout. The image on the left (my design) focused on organization and call to action. Image on right (Charley's) cleaned up the original website.
Design
Prototype
The prototype includes a redesign of the homepage, and two pages focused over programs provided by the nonprofit. Designs have a set color scheme to prevent any distraction, and improved information organization. The navigation is organized neatly through card sorting, and call-to-action are shown on homepage in multiple places so user can locate easily.
Test
User Testing
For the user testing, I tested a young tech-savvy woman on a desktop computer. The user testing did result in the users having slight trouble with small mechanics such as the dropdown, and locating certain components which made us decide on focusing on better placement and improving mechanics. I was able to conduct short 5 second tests that gave me information on the design layout and components. There were multiple spelling errors and moments where the prototype would not pull up certain features necessary for the task.
Reflection
To sum up...
My takeaways for this project was how difficult it was to work with coding in a group setting. In terms of future development for Rise Recovery redesign, I know the website needs more testing and reiteration to fit our users satisfaction. Additionally, I would like to team up with front-end developers and communicate design for a more professional result. I do admit, that I enjoyed learning more about the coding process during my period of this project.
bottom of page