Background
Until recently, the United States had been at war for over 20 years. There are lots of veterans who served our country. Many of these veterans have paid a big price. Many Veterans deal with traumatic brain injuries (TBIs), Post Traumatic Stress Disorder (PTSD), Addiction, and other conditions. These veterans need help with their issues and their transition to normal life. Often these veterans are short on money, treatments, and options.
The Problem
WHAT THE CLIENT NEEDS TO CHANGE
Patriots First is a Foundation providing funding, coaching, and additional resources to veterans seeking treatment with psychedelic-assisted therapies. This form of therapy is not currently legal in the United States. Patriots First needs help raising money and awareness to pay for treatments.
Hypothesis
POINT OF VIEW TO BE PROVED OR DISPROVED
Having a responsive website with information regarding resources, research, treatment, advocacy, and testimonials will:
- Help raise funding and awareness to pay for these treatments in Mexico
- Help build an on-going database of supporters
Research Goal
WHAT WE HOPE TO ACCOMPLISH
Find out what would help attract and convince users to donate or get involved with the foundation.
Research Objectives
HOW WE WILL GET THERE
How can we make it simple for them to do so via a responsive website?
MY ROLE
- UX Researcher
- UX/UI Designer
- Branding
TOOLS USED
- Figma
- Adobe Illustrator
- Miro
DURATION
- 80 Hours
Research Plan
My Process: A research plan was developed and created. The key aspects that stand out are not just the factors that promote/inhibit online donations, but also what influences people’s attitudes towards alternative medicines and potentially ineffective/unethical treatments have on their willingness to donate.
Project Roadmap
My Process: I created a schedule of what would be produced and accomplished by date and time. This helps keep the project on task, on time, and on budget.
01
EMPATHIZE
02
DEFINE
03
IDEATE
04
PROTOTYPE
05
TEST
01
EMPATHIZE
Competitive Analysis
THE APPROACH
- Do market research on other nonprofit foundations, and organizations with similarities and analyze how they present information to customers to see if that makes an impact on decisions.
THE REASONING
- The types of information users are accustomed to seeing in the nonprofit sector may be the same
Interviews
User Interview Reasoning
THE APPROACH
- Conduct first-hand interviews with users who have donated money to causes
THE REASONING
- It will provide knowledge of the challenges and concerns users have and an understanding of their mindset, conditions, and options
SME Interview Reasoning
THE APPROACH
- Conduct SME Interviews with people who run foundations and raise funds
THE REASONING
- Understand the experience of raising funds, what donors look for, how to engage them, and how to stay in front of them
Research Findings
FINDINGS
Most had heard about a charity through friends, media, or personal (family) connections
INSIGHTS
Personal connection is a major factor, whether in honor of someone, or being asked by someone. People act as ambassadors on behalf of the Charity
DESIGN DECISION
Allow others to share information, honor someone (like a brick with a name), share media stories (links) or even pages
FINDINGS
These users believed they were helping good causes and or friends/ family
INSIGHTS
“Doing Good” should be an archetype. It has roots in religious dogma, but not always.
DESIGN DECISION
Let users see and hear those they directly helped (via short videos) so that they enhance that personal connection and see the value in doing what they do
FINDINGS
66% donated online and 62% of those donated multiple times
INSIGHTS
Donating online makes it easy for the user and the organization as it can save on operating costs and time
DESIGN DECISION
Allow a user to choose to do a one time or monthly donation
FINDINGS
Users would want to see medical studies/ learn more to show proof its not some fluky thing
INSIGHTS
Having medical data to back, peer review info to help give legitimacy would help convince them
DESIGN DECISION
Have videos, articles, journals showing the medical support on behalf to help convince users to partake and support
FINDINGS
People like being associated /part of a group/ tribe
INSIGHTS
Human nature to feel part of a community and also feel like you are contributing to its success
DESIGN DECISION
Personalize responses, personalized fundraisers, use names & stories, include acknowledgments, allow ppl to showcase their support
Personas
My Process: I created a persona “William” based on research and interviews. I see William as a “Do-Gooder” archetype. He has religious morals and values that guide his life but do not limit it.
Noteworthy: Accessibility principles will be key to remember. William’s fears are a good foundation to inform my specific responsive website needs (not being tech-savvy). He has specific emotional and motivational needs that need to be addressed and encouraged to get him to perform the main CTA (donate).
02
DEFINE
Empathy Map
My Process: I created an empathy map using a persona (William). This will be used to help understand, guide, and test how to solve the problem on a user centrist approach.
Story Board
My Process: I used post-it-notes to come up with a story of William’s journey from hearing about it, to go to the website, learning, donating, and closing the loop by telling his friends what he did and getting their social approval.
Card Sorting
My Process: All participants added value in terms of the added written elements and features they would include as part of the groupings. Some items backed information found in research (such as personalized stories (testimonials) as well as positive stories on how they are doing now (post-treatment).
Card sorting also helped me understand how phrases like Annual Reports may not give the user all the information they need to make a decision such as “Where the money goes.” Adding pie charts will help make that clearer.
03
IDEATE
Sitemap
My Process: The core problem to solve is getting the user to trust and understand the topic so that they decide to donate. Having the donate button visible at all times is key. Another key feature will be to keep the navigation simple so that the user is less likely to get lost, disengaged, or feel like there were too many clicks.
Page Sketches
My Process: I created mobile sketches of five navigation pages: Home, Program, Stories, and Donate. Information from the card sorting was used to help gain insight as to what the users were expecting to see when making decisions.
- I removed the free gift idea and gathering of address.
- I allowed the user to select a Vet or have the ability to donate in honor or in memory of someone.
- Users can choose monthly or one-time
- Users can re-edit the amount and payment type on the payment page.
User Flow
The Goal: Drive all the traffic to the donation pathway. Once in the donation process, make the steps simple and clear, with minimal distractions.
Task Flow
My Process: The goal is to make the donation process simple to encourage success.
Minimum Viable Product Limitations: If I had more time for this project, I would have liked to also address what the post-donation flow is like – which is important if trying to design for ongoing/sustained fundraising, not just one-time donations. How the first experience goes and what reward/satisfaction the donor receives will greatly influence whether they are likely to donate again.
Wireframes
My Process: I built wireframes based on my mobile sketches and then worked my way to desktop and pad. Breakpoints, frame sizes, and consistent grid sizing were identified to give the user a similar experience across multiple devices.
Brand Logo
My Process: I started off with well-known patriotic elements: the American flag, stars, and a bald eagle. I tried drawing the flag in the shape of a “1”, an eagle head in the shape of a “1” as well as the movement of stars around the logo name. I came up with a few good ideas.
The final logo uses red, white, and blue (patriotic colors), the number “1” to represent First, and a representation of a flag in the shape of a Greek-style column. This brings strength, credibility, and trust to the foundation.
The font choice embodies the confidence, strength, and order that veterans are symbolic of. The word “Foundation” is intentionally displayed in a thinner, smaller font because it is secondary to the foundation name.
Brand Colors
Rationale: With a name like Patriots First, it makes sense to use patriotic colors: red, white, and blue instead of military khaki green colors that veterans are often associated with. Users may be motivated to donate to veterans out of their sense of patriotism. In color theory, blue is associated with trust. The brand wants users to trust in the therapy treatment as well as donate their money.
Neutral grays with a blue tint were added for a clean, modern, military look.
Brand Typography
Rationale: The same clean, robust Montserrat typeface used in the logo was also chosen for the headers. It helps reinforce the brand values of strength, honor, and trust.
Roboto is a clean, easy-to-read font. It’s important to have good legibility to help make the site easier to use and accomplish tasks faster.
Mood Board
- Patriotic
- Remembering
- Honoring
- Service
- Serious
- Hopeful
- Turnaround
- Progress
- Strength
UI Kit
My Process: A UI kit was developed with components and auto layout. These become the building blocks for the site and act as a style guide. With components, I can easily make vast changes on multiple screens.
UI Design
My Process: I added the pictures, color and content into my wire frame to bring the brand look to life.
Minimum Viable Product (MVP): This product was started and completed within a certain time frame. There were several ideas including bar graphs for dollar amount raised for veterans, more details of shareable campaigns, and illustrations on PTSD that were considered but not included due to time constraints.
04
PROTOTYPE
High Fidelity Prototype
My Process: I built a high-fidelity mockup and prototype to be used for usability testing. This included mockups for three scenarios and two flows.
Figma Prototype
05
TEST
Usability Testing Plan
My Process: A Usability Test plan was created with an introduction, script, and pre-planned scenarios and follow-up questions. Participants matching the demographic were recruited for the test. It was recorded and notes were kept.
Affinity Map
My Process: I organized the notes, comments, and feedback from the usability tests into an affinity map with 4 sections: Suggestions, Success, Patterns, and Confusion/ Frustration. These notes help understand the user’s experience and where and how the design can be refined.
Noteworthy: The participant “Anne” (in Blue) appears to have given less feedback. Initially, she was very short with her answers/ feedback and was asked to elaborate more. She did eventually add further detailed feedback.
Iterations
Finding: Users skipped the choose recipient options and went straight to the next button. They did not know what to do. Also, when pointed out, the word “Veteran” was confusing of whether it went to the Foundation or a veteran.
Insight: Users didn’t know what to do and not having a default caused user errors.
Design Decision: I changed the format to radio buttons with a default so less user error. I changed the wording of two of the options thus giving the user a clear understanding as well as an additional choice to donate towards.
Iterations
Finding: The styling of the red buttons confused the user with the navigation buttons and the location of the monthly vs one-time troubled users.
Insight: The red color confused the users with the navigation buttons and didn’t appear as a step.
Design Decision: The “one time” or “monthly” button moved to a new step and the color and style of the button were changed to not be confused with the navigation button below it.
Iterations
Finding: Some users thought the gray “Edit” button was inactive. Similar to the “one time” & “monthly” issue, the credit card toggle option red color confused the users with the navigation buttons. Also, some users were unclear whether the transaction was secure.
Insight: Changing the color and wording will help cause less user errors.
Design Decision: The color of the edit button was changed to red to appear active. The payment option design and color was changed to look more like a toggle button and less similar to the navigation below. The Lock icon was moved off the button and was combined with a “secure transaction” statement.
Iterations
Finding: Users thought the gray “View Receipt” button was inactive.
Insight: Changing the color will help cause fewer user errors.
Design Decision: The color of the “View Receipt” button was changed to red to appear active.
Iterations
Finding: Users had issues with legibility and contrast.
Insight: Adding more contrast will help the user be able to read the text better and be less confusing.
Design Decision: The mobile navigation blue color was changed for better contrast. An overlay was added on top of the main hero image as well as a drop shadow, so the user can better read the copy.
Iterations
Finding: Users had a hard time reading the text below the percentage.
Insight: Changing the type size will make it easier to read and will be less confusing.
Design Decision: The font size was changed from 14 to 18 points.
Conclusion
Insights: Most mistakes can come at the user interview stage. It’s key to ask questions and get good information to set the project off on the right track.
Challenges: Trimming down all of the information gathered during research into an 80-hour deliverable project.
What I learned: It helps to have the usability test users speak out loud about what they are doing during the test.
What could I have done differently: I would like to look into whether the donation process could be shown as a popup than can be moved but not dismissed.
What next steps would you take to further improve the project: User bar graphs to help push certain campaign agendas / needs and allow the user to share more information on the “In Memory” and “In Honor” feature.
Key Takeaways: Be mindful of color and how it affects legibility, buttons, and accessibility.
What am I most proud of: The idea of keeping the overall navigation short with a sticky navigation and donation button on top.
READ MORE
Case Studies
NextGen Healthcare
A web-based EHR that includes e-prescribing, connections to labs, billing, and reporting for small practices.
getBetter
A mobile app that guides users to recovery post foot surgery
Child Life on Call
A mobile app that supports parents preparing their child for a hospital visit
