SpineHope coordinates volunteer medical teams with local doctors to provide advanced spine surgery to children who otherwise would not receive this treatment. Since 2008, their global programs have helped more than 200 children receive corrective sp…

SpineHope coordinates volunteer medical teams with local doctors to provide advanced spine surgery to children who otherwise would not receive this treatment. Since 2008, their global programs have helped more than 200 children receive corrective spinal surgeries.


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. 

Spinehope’s Current Website

Spinehope’s Current Website

screencapture-spinehope-org-about-us-overview-2020-03-05-12_58_42.jpeg

Research Process

 
Stakeholder Interviews & Survey  Results

Stakeholder Interviews & Survey Results

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.

 
  1. Usability Testing & Insights

Our usability testing plan included navigating to the volunteer application & the surgery application on both mobile & desktop.

Application Task

  1. The application is buried under layers of navigation and the name “US Hub” does not give the user enough information

  2. Navigation is not intuitive & several landing pages lead to dead ends.

Volunteer Task

  1. Information about volunteering wasn’t clear.

  2. Current volunteer positions are buried in a PDF flyer which is difficult to open on mobile

Priorities for Redesign

Screen Shot 2020-04-14 at 1.22.03 PM.png

User persona

User persona


Journey Map

Journey Map


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. 

Spinehope’s Current Website


Research Process

 

Stakeholder Interviews & Survey Results

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.

 
  1. Usability Testing & Insights

Our usability testing plan included navigating to the volunteer application & the surgery application on both mobile & desktop.

Application Task

  1. The application is buried under layers of navigation and the name “US Hub” does not give the user enough information

  2. Navigation is not intuitive & several landing pages lead to dead ends.

Volunteer Task

  1. Information about volunteering wasn’t clear.

  2. Current volunteer positions are buried in a PDF flyer which is difficult to open on mobile

Priorities for Redesign


User persona


Journey Map

 

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.

6047808362b90a20e3663f3a_SpineHope+Site+Map+(1).png

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.

60478124ec8bd8327e30ccbb_wireframes.png

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

Collaborative Mood Board

Collaborative Mood Board


Style Tile

Style Tile

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.

6047821ccc7f786999e2d448_homescreen_ev.png

Final Style Guide

606c866619068796206244c0_Screen Shot 2021-04-06 at 11.03.04 AM.png

5. Final Redesign

Aro%2BHa_0010.jpg

This is the final design of the desktop + mobile options. Follow this link to access the prototype.

Based on the research we conducted, most users of the site come from Spanish speaking countries. In an effort to make the site accessible to all potential users, we added an option to toggle between English & Spanish.

Based on the research we conducted, most users of the site come from Spanish speaking countries. In an effort to make the site accessible to all potential users, we added an option to toggle between English & Spanish.

 

Next
Next

MatchBook