Spinehope Web Redesign
My role: User Researcher, Visual Designer
Problem: The website for the nonprofit organization SpineHope has a text heavy design and lacks consistent informational structure which makes it difficult for users to find what they are looking for.
Research Process
We started by meeting with stakeholders to align on the main goals, users & requirements for our redesign.
We created a survey targeting people who have or currently volunteer at nonprofits. Almost half of the 31 people surveyed seek volunteer opportunities on the organizations website. They also rated the organizations mission and volunteer opportunities as most important information to locate.
Usability Testing & Insights
Our usability testing plan included navigating to the volunteer application & the surgery application on both mobile & desktop.
Application Task
The application is buried under layers of navigation and the name “US Hub” does not give the user enough information
Navigation is not intuitive & several landing pages lead to dead ends.
Volunteer Task
Information about volunteering wasn’t clear.
Current volunteer positions are buried in a PDF flyer which is difficult to open on mobile
Priorities for Redesign
Spinehope Web Redesign
My role: User Researcher, Visual Designer
Problem: The website for the nonprofit organization SpineHope has a text heavy design and lacks consistent informational structure which makes it difficult for users to find what they are looking for.
Research Process
We started by meeting with stakeholders to align on the main goals, users & requirements for our redesign.
We created a survey targeting people who have or currently volunteer at nonprofits. Almost half of the 31 people surveyed seek volunteer opportunities on the organizations website. They also rated the organizations mission and volunteer opportunities as most important information to locate.
Usability Testing & Insights
Our usability testing plan included navigating to the volunteer application & the surgery application on both mobile & desktop.
Application Task
The application is buried under layers of navigation and the name “US Hub” does not give the user enough information
Navigation is not intuitive & several landing pages lead to dead ends.
Volunteer Task
Information about volunteering wasn’t clear.
Current volunteer positions are buried in a PDF flyer which is difficult to open on mobile
Priorities for Redesign
2. Ideation + Brainstorming
After several card sorting exercises, we created a final site map to determine information hierarchy + navigation. Our user research helped us to establish two primary user flows for the website.
Final site map pictured below.
Wireframes
After sketching out ideas, we landed on these 3 as the lo-fi wireframes to test the most basic flow of the site. The stakeholder wanted a modern + clean design.
We usability tested the lo-fi wireframes to get a sense of the users’ needs. After testing, we gained the following insights:
Add a “Donate” CTA (call to action) button to the top navigation
Spread the top navigation out across the page.
Give users the ability to toggle between languages as many of the users would not be English speakers.
Add an “Apply” CTA button to the volunteer page
3. Redesign + Branding
High Fidelity Mockup
We started out with several sketches of the site and listened to what users had to say about the lo-fi experience to inform our final high fidelity mock up of the site.
Final Style Guide
5. Final Redesign
This is the final design of the desktop + mobile options. Follow this link to access the prototype.