We were to choose a nonprofit and executing the user experience (UX)/user interface (UI) design process. Following the double diamond design thinking model and UI design process, to create a high-fidelity responsive web design (RWD) solution through a clickable UI prototype and use either Figma, Adobe XD or InVision
The Double Diamond Design Thinking Model
The UX/UI Design Process
My Role and Responsibilities
USER
EXPERIENCE DESIGNER
USER
INTERFACE DESIGN
Timeline
3 weeks
Year
2020
Problem
Start2Finish has a lack of information that substantiates the credibility of the organization which can lead users/volunteers to have less confidence to be involved with the organization as a volunteer.
Goal
To redesign the website in other to provide easy access to a well-structured information, with goal to create a sense of transparency.
Kum Rang Ko, Henry Wang, Divya Chakravarthy, Jeannot Bongo
CHOOSING A NONPROFIT
As a Team, we decided that each member to present 1 or 2 nonprofit organizations of there choice to the group. Start2Finish stood on top of list after the voting session and it was selected as the ideal Nonprofit organization for the project.
Ideas & Vote
PROJECT DESCRIPTION
Start2Finish is a non-profit Canadian organization that provides ongoing educational support to Canada’s at-risk children throughout their school years. Nurturing their mind, body and social health so they are empowered to succeed in life. Start2Finish works with volunteers who are interested in helping.
This project is to redesign the website of Start2finish, a non-profit organization. Over the course of a 3-week design sprint, our team aimed to make this website to be more user-friendly, keeping their needs at the forefront of the design process and making it easier for people to take any action necessary on the website. The entire process and the proposed solution would be presented to the class and the instructors.
Jeannot volunteered with them in the past in 2019 as a Sport trainer assistant. Its a cause that’s close to us.
A WORTHY CAUSE
Each year, thousands of Canadian youth drop out of high school unable to overcome the barriers to education created by poverty.
ONE THING AT A TIME
Shortage of volunteers is an issue in most communities. Shortage of people isn't. We what if we could balance it.
Competitive Analysis
As always, there's better no better way to know an organization strength and weaknesses, than establishing a comparison with its competition. We decided to do comparison on six (6) characteristics: Problem solving, Aesthetics, Homepage content, Navigation, Credibility and Volunteering (volume).
After the analysis, the result shows, organization that had a larger volume of volunteers had information that demonstrate their credibility, easy/visible way to take action to volunteer on the Homepage. Not to mention an intuitive menu.
Competitive Prioritization
Proto Persona
We created a proto persona, to help us be in the users’ feet, in order to better planned the right questions and conducted interviews to define the solution
Name: Nicholas Nivesh Age: 28 Occupation: Elementary School Teacher
Status: Single
Location : Toronto
BEHAVIOURAL DEMOGRAPHIC
Likes to follow people who are change agents and watch documentaries on Netflix on Social educational issues
Used to volunteer in his youth
Passionate of working with kids
Believes that there is strength in numbers
Believes that educating a child can change the fortune of a country
GOALS
Be a change agent in the life of youngkids
Stay updated about local community issues
Make efforts in every possible way he can
NEEDS
Volunteering is an outlet and stress buster from busy life
Ease of finding important information on Social issues related to education of young people
The satisfaction of having made an impact
Make a positive change and real impact
PAIN-POINTS AND SOLUTIONS
Difficulty finding a non-profit that really do what they say they do
Wants to know more about the background of the kids
How to use his skills to assist/help a non-profit fulfill their goal
Difficulties seeing successful result of the organization
Finding confidence in utilizing his skills to help others
Heuristics Evaluation
We needed to understand if the current website respect the well-proven general principles for human-computer interaction.
01
A- Logo is repetitive, the bottom “Start to finish” can be replaced by a slogan B- The logo is too small
Use of the Hamburger resulting to too much white space. But when the resolution is increased, the “Hamburger menu” disappears and the Menu bar appears.
2A
2B
Menu bar is too fullIt needs better categorization and prioritization.
The Hierarchy is no too visible
03
04
CTA text is too long
The “Donate” button is small and can’t be on the page with “Hamburger menu”.
9
05
The “Volunteer Now” and “ Find out How” under the “Take Action” both lead to a “This page can’t be reached”
The only way to apply for volunteer is via a portal as website doesn’t support forms
06
07
These “Call to Action” buttons could be in more invitation colour
Social links are close to the footer, thus resulting to a repetition as the footer has them too
08
User Interviews
We interviewed 6 users in order to discover what is important to a user on a nonprofit website. A Google Survey was used to provide a quantitative element to our research, and the results of 11 surveys were used. Based on findings, we further decided on the most important aspects of the redesign
72.7% of the people said transparency was the most important factor
90.9% of the people said they get important information from the website
To see vision and mission on homepage
VERONIKA
Value proposition is most important
TASMIA
Sustainable goals on the website
CATHERINE
Volunteer reviews on website
JASON
Progress on their Current projects should be showcased
HEBA
Prove credibility
NITIKA
Affinity Diagram
the data from the interviews were categorized in five (5) and synthesized to create Empathy map.
People with a goal and intent to volunteer often end up with frustration looking for information that helps them identify the right social cause they want to be associated with. The absence of information that substantiates the credibility of the organization either leads to tedious research or a lack of confidence to be involved with the organization as a volunteer.
UX Hypothesis
Based on our user insights, we believe that providing easy access to a well-structured information website will result in better trust and confidence in the organization because we have observed that individuals with an interest in volunteering are reluctant in joining a non-profit team since they find it challenging to find the core mission/values and successful outcomes on their website
SOLUTION
"How Might We" Statement
How might we redesign the website of Start2finish in such a way that the people interested in volunteering are able to easily access the relevant information, that enables them in their decision making and motivates them to take the necessary action on the website, to work with the organization.
After conducting our user interviews and survey, we discovered that nonprofits that are in need of volunteers might be losing good people due to the lack of necessary information. The majority of the users believe that an organization should clearly state its main purpose and core value on their website.
Value Proposition
Start2Finish is working to provide volunteers with easy access to well-structured information on our website allowing volunteers to be able to trust and be confident in our organization as their help is needed for a better change. We’re better because we bring confidence and reliable information to our volunteers to be encouraged and provide transparency with trust. We’re believable because we offer information for our potential volunteers with successful testimonials, photos and videos, and a portal to connect with past volunteers.
Menu Navigation (OPTION 1 -2) - BUTTONS and FOOTER
Menu Navigation (oPTION3)
This menu navigation shows the primaries and secondaries in blocks, allowing users to be able to view all menu contents at the same time. This became the ideal menu navigation for the website
CARDS
Storyboard
1 My next volunteering Project
Nicholas, an elementary school teacher, likes to volunteer for nonprofits institutes that support children's education. He wants to check out the website of Start2Finish that’s based in the community he lives in
2 Disappointment
The Social cause is exactly what he wants to be associated with, but he cant find relevant information about the organization and their volunteer form doesn't work either. Disappoint he leaves the websites.
3 Curious
Nicholas, an elementary school teacher, likes to volunteer for nonprofits institutes that support children's education. He wants to check out the website of Start2Finish that’s based in the community he lives in
4 Time to check again
After a few days Nicholas decides to check out their website once again
5 Finally
Finally... The website looks amazing, with a great redesign job. The home page has great information and the volunteering process and form is simple. Nicholas submits the form
6 Happy and Fulfilled
Nicholas is now a volunteer with Start2finish, living his dream
We used heuristic evaluation, Empathy map and User scenario, among other steps to define the solution. Which was to have the Mission and Vision, Current and future project as well as a button (that leads to the volunteer form) on the homepage. Not to forget a simplified navigation menu
The first step at this point was to create a task flow, then user flow
We started with a paper prototype on InVision Freehand
Lo-Fidelity Paper Prototype
We started with a paper prototype on InVision Freehand and a few user tests with our colleagues designer for rapid data collection.
Mid-Fidelity Wireframes
The data collected form the paper prototype user tests, provided us enough a direction to design a Mid-Fidelity prototype for more usability tests. we could've gone ahead with data from the paper prototype, but we wanted to run tests with users that were non-designer and also wanted to provided a prototype that's finished-like.
menu navigation
wireframes
After gaining good feed back on the paper prototype, we decided to design a mid-fidelity on Figma, this allowed us to define the concept a bit more.
Mid-Fidelity Prototype
Usability Tests and Findings
We conducted 5 usability tests, which provided us information such as: - Users want image (s) be clickable as well as the button - There could be an about us Card/ Button. Difficult to find just from Footer
This findings drove the iteration of the design to a more define solution
Make the image clickable as well as the button
USER 1
There could be an about us Card/ Button. Difficult to find just from Footer
USER 2
Volunteering and volunteer now could be in the same place
USER 3
Description is helpful to read when choosing where to navigate to
USER 4
Back buttons on top and bottom and they took me to different pages
USER 5
The about us in Hamburger menu should be working
USER 6
Visual Style Guide
UI STYLE TILE
NOTIFICATION MESSAGEs
SEARCH
Mobile AVATAR MESSAGE
DESKTOP AVATAR MESSAGE
MOBILE menu navigation
VOLUNTEER FORM
DESKTOP menu navigation
MOBILE footer
DESKTOP footer
MOBILE HOMEPAGE ANIMATION
DESKTOP HOMEPAGE ANIMATION
MOBILE FORM SUBMITION ANIMATION
DESKTOP FORM SUBMITION ANIMATION
High-fidelity Prototyping: Mobile
Wireframes
Mobile Frames
who we are page
volunteering
High-fidelity Prototyping: Desktop
Wireframes
Desktop Frames
High-fidelity Prototyping: Desktop
who we are page
volunteering
LEARNINGS
This project gave us the opportunity to better understand the design process and how we can redesign a website to help make a person's decision to volunteer easier. During this three-week sprint, we were able to gain experience in the whole UI design process, including user research.
The team’s dynamic was great as we all had strengths in different areas and were able to help one another. While we gained knowledge in research, we also effectively used Figma, Adobe XD, Miro and worked on how to use the collaborative tool and assist them with visual design. Together, we were able to create a final product that highlights all of our skills.
The future of this project would consist of adding more pages, activating the donate button, including more UI Micro interactions. we would also want to potentially explore making a Tablet solution for this product to add to the RWD.
