My team and I formed a user research plan to assess the usability and effectiveness of the homepage and navigation system of our non-profit website.
Were users able to navigate around the website and find information easily?
Could users inform themselves on how to make a donation with little to no ease?
Do users find the navigation menu helpful in finding pages they're interested in?
Our data consisted of a survey that gathered information from five users going on Semper-Fi's website.
With an empathy map, common patterns of people's wants and needs for donating to a nonprofit organization were able to be identified from our user interviews. This furthered us in understanding our users were and what they truly need.
Emily needs a veteran nonprofit organization that aligns with her values and to donate to that is transparent with their donation funds and truly cares to assist veterans.
During interviews, we discovered that users were looking to connect with veteran nonprofit organizations through their website and be able to donate with ease.
Therefore, we believe that users need to be informed about Semper-Fi as a cause and that we might be able to help if we redesign Semper-Fi's website and donation process.
We might do this by arranging interactive elements and adding a fundraising thermometer that shows the progress of donations in real-time. Doing this will allow our product to be an impactful donating experience for our users.
Semper Fi & America’s Fund was designed to generate donations and support veterans across the United States of America. We have established that the website isn’t meeting its purpose due to a cluttered and overwhelming user interface and incohesive design, which could negatively affect user engagement.
We believe that through iterative improvements to the hierarchy of information and enhancing the effectiveness of the user interface (UI), we can achieve an enhanced brand identity and drive increased donations.
The I Like, I Wish, What if framework allowed us to gather constructive user feedback. By identifying user pain points with the current website design, we were able to prioritize areas that needed to be addressed.
The notes were combined into two categories:
The notes from I Like, I Wish, What If were placed into a low or high scale depending on their complexity and impact. We implemented a group-dot voting in our prioritization process to develop towards features that address user needs and are high impact.
A storyboard was applied to focus on the user perspective in the early stages of design. This allowed an exploration of different design solutions with a user-centered approach, leading towards a more user-friendly website.
We drew a user flow to depict an overall scenario of how users will navigate through making a one-time donation.
A competitive analysis of four veteran nonprofit organizations were evaluated on their strengths and weaknesses. A similarity was Operation Homefront, Gary Sinise Foundation, and Semper-Fi all allowed a variety of ways to donate such as donating with stock or cryptocurrency. Some differences were Gary Sinise Foundation focused on providing smart homes and education programs for wounded veterans and Navy Marine Corps Relief Society mainly supported the Navy and Marines while covering a broader scope of needs. While each competitor showed the impact the donations had on the veterans, there was missing opportunity in technology to feature live updates on users making donations.
While we brainstormed ideas into sketches, our main focus for redesigning was the donation process and navigation bar as one the main points from user research was that the original navigation bar lacked functionality and aesthetics. Our goal was to enhance user engagement, create a visually appealing interface that aligns with the organization's identity and encourages a positive connection with the nonprofit, and effectively communicate the website's goals, mission, and impact.
The sketches were allocated into wireframes for usability testing.
A usability testing plan was implemented to identify usability problems and increase user satisfaction with the design. Participants were given a scenario and the following tasks:
Go to Donate page
Selection a donation amount of $500
Continue the donation process and make a donation
From usability tests, feedback were:
Participants wanted an alternative way of paying such as Apple Pay
Participants expressed the need to be kept up to date with Semper-Fi's activities, events, and the overall progress of donations
Participants were easily able to go through the donation flow
Iterations from feedback were brought to high-fidelity designs.
We wanted to convey positive imagery of comradery, recovery, hope, and overcoming injury/illness with a clear, organized, comfortable, and symmetrical layout. Our organization's color palette represents being trustworthy, bright, and positive and is WCAG compliant. Our typography is a mix of a modern approachable Sofia Pro, Sans Serif, complemented with a classic Caslon, Serif Font, used in many notable American publications and historic documents for styled titles and accents.
For our final design, while the original donate and call-to-action buttons were red, it was important for us to think outside of the box and come up with solution to re-design the Donate button. The nonprofit organization's mission was to support wounded veterans and while the color red exemplifies one of the patriotic colors, it rather portrays a typical, mundane approach to donating to the cause. As a result, we modified the Donate button to a golden ticket yellow and call to actions to yellow to portray a softer tone and overall design of the website.
