Designing Volunteer connect
As I was selected to join the community seat programme at Brainstation for their UX Design course, I was required to create a highly usable and functional design solution for a digital experience.
A Volunteer app connecting volunteers and organisations.
As I was selected to join the community seat programme at Brainstation for their UX Design course, I was required to create a highly usable and functional design solution for a digital experience.
Problem statement
The chosen project idea is about connecting volunteers with opportunities to volunteer in their city.
Many individuals wish to volunteer but face barriers such as difficulty finding suitable opportunities, lack of transparency about what an organisation needs, and unclear application processes. Organisations, on the other hand, struggle to attract qualified and reliable volunteers. Volunteer Connect aims to simplify and streamline this process by creating a mutual connection space.
The chosen project idea is about connecting volunteers with opportunities to volunteer in their city.
Many individuals wish to volunteer but face barriers such as difficulty finding suitable opportunities, lack of transparency about what an organisation needs, and unclear application processes. Organisations, on the other hand, struggle to attract qualified and reliable volunteers. Volunteer Connect aims to simplify and streamline this process by creating a mutual connection space.
The chosen project idea is about connecting volunteers with opportunities to volunteer in their city.
Many individuals wish to volunteer but face barriers such as difficulty finding suitable opportunities, lack of transparency about what an organisation needs, and unclear application processes. Organisations, on the other hand, struggle to attract qualified and reliable volunteers. Volunteer Connect aims to simplify and streamline this process by creating a mutual connection space.
Value proposition
The solution to the problem is unique based on how volunteers can find their match. Unlike other volunteer platforms they will have to
1. Complete a quiz to match opportunities to interests, skills, and availability.
2. Volunteer listings will need organisation info, role description, time, and skills needed
3. “Skill Match” notification showing alignment between volunteer’s profile and role. Quite like what linkedinpremium presents when applying to a role
Organisers can find their match by
1. Having built in background checks
2. Can filter applicants by relevance skills
3. Listings will need organisation info, role description, time, and skills needed which also benefits the organisers
5W + H
This allowed to understand what are the knowledge gaps we need to fill to arrive at our objective.
● How might we help: Creating a platform that connects volunteers with organisations
● Who: Volunteers looking for meaningful opportunities and organisations looking for qualified volunteers
● What: A digital platform that connects volunteers with organisations
● Where: Within the volunteers local area
● Why: Volunteers struggle to find trustworthy and up to date opportunities
This allowed to understand what are the knowledge gaps we need to fill to arrive at our objective.
● How might we help: Creating a platform that connects volunteers with organisations
● Who: Volunteers looking for meaningful opportunities and organisations looking for qualified volunteers
● What: A digital platform that connects volunteers with organisations
● Where: Within the volunteers local area
● Why: Volunteers struggle to find trustworthy and up to date opportunities
After speaking with the founder, he provided a list of features he wanted:
• See total net sales: to determine profitability
• See number of spaces left: to manage ad spend effectively especially closer to the date of the conference
• See latest orders: to quickly amend/refund/export receipts; ability to search by ticket buyers name or order number
Literature review
Conducting secondary research allowed me to provide guidance and answers to the 5Ws + 1H. It also reaffirmed to me that there's validity in terms of what I am trying to find out with this case study.
• Problems in sustaining a ready supply of volunteers have surfaced and accelerated over the past decade (Brudney and Meijs 2009)
• Volunteers often seek meaningful engagement where their contributions align with their skills, values, and availability (Clary et al., 1998)
• User reviews and organisational ratings on platforms can foster trust and transparency, addressing concerns volunteers often have when selecting opportunities (Musick & Wilson, 2008).
Websites:
Brudney, J. L., & Meijs, L. C. P. M. (2009). It ain’t natural: Toward a new (natural) resource conceptualization for volunteer management. Nonprofit and Voluntary Sector Quarterly, 38(4), 564–581.
Clary, E. G., Snyder, M., & Stukas, A. A. (1998). Volunteers’ motivations: Findings from a national survey. Nonprofit and Voluntary Sector Quarterly, 27(4), 485–505.
Musick, M. A., & Wilson, J. (2008). Volunteers: A social profile. Indiana University Press.
Penner, L. A. (2002). Dispositional and structural determinants of volunteerism. Journal of Personality and Social Psychology, 82(1), 118–131.
Conducting secondary research allowed me to provide guidance and answers to the 5Ws + 1H. It also reaffirmed to me that there's validity in terms of what I am trying to find out with this case study.
• Problems in sustaining a ready supply of volunteers have surfaced and accelerated over the past decade (Brudney and Meijs 2009)
• Volunteers often seek meaningful engagement where their contributions align with their skills, values, and availability (Clary et al., 1998)
• User reviews and organisational ratings on platforms can foster trust and transparency, addressing concerns volunteers often have when selecting opportunities (Musick & Wilson, 2008).
Websites:
Brudney, J. L., & Meijs, L. C. P. M. (2009). It ain’t natural: Toward a new (natural) resource conceptualization for volunteer management. Nonprofit and Voluntary Sector Quarterly, 38(4), 564–581.
Clary, E. G., Snyder, M., & Stukas, A. A. (1998). Volunteers’ motivations: Findings from a national survey. Nonprofit and Voluntary Sector Quarterly, 27(4), 485–505.
Musick, M. A., & Wilson, J. (2008). Volunteers: A social profile. Indiana University Press.
Penner, L. A. (2002). Dispositional and structural determinants of volunteerism. Journal of Personality and Social Psychology, 82(1), 118–131.
Conducting secondary research allowed me to provide guidance and answers to the 5Ws + 1H. It also reaffirmed to me that there's validity in terms of what I am trying to find out with this case study.
• Problems in sustaining a ready supply of volunteers have surfaced and accelerated over the past decade (Brudney and Meijs 2009)
• Volunteers often seek meaningful engagement where their contributions align with their skills, values, and availability (Clary et al., 1998)
• User reviews and organisational ratings on platforms can foster trust and transparency, addressing concerns volunteers often have when selecting opportunities (Musick & Wilson, 2008).
Websites:
Brudney, J. L., & Meijs, L. C. P. M. (2009). It ain’t natural: Toward a new (natural) resource conceptualization for volunteer management. Nonprofit and Voluntary Sector Quarterly, 38(4), 564–581.
Clary, E. G., Snyder, M., & Stukas, A. A. (1998). Volunteers’ motivations: Findings from a national survey. Nonprofit and Voluntary Sector Quarterly, 27(4), 485–505.
Musick, M. A., & Wilson, J. (2008). Volunteers: A social profile. Indiana University Press.
Penner, L. A. (2002). Dispositional and structural determinants of volunteerism. Journal of Personality and Social Psychology, 82(1), 118–131.
Identify Hypothesis
I believe that volunteers want opportunities that their interests and flexibility fit around their schedule. We will know this to be true when we see our participants reiterate this as a problem they face.
I believe that volunteers want opportunities that their interests and flexibility fit around their schedule. We will know this to be true when we see our participants reiterate this as a problem they face.
Interview Script
I had conducted interviews with 3 participants all varying in age (27-60) and volunteer experience. They also ranged from various professions and all had their own unique time constraints. The participants were Arth (27), Vaishali (53) and Sarju (60).
These were the questions that the participants were asked:
“Can you tell me a bit about yourself and your involvement with community volunteering?”
“How often do you volunteer or work with volunteers?”
“When you think about volunteering, what motivates you the most?”
“How do you usually find volunteer opportunities today?”
“Can you walk me through the last time you volunteered? How did you find that opportunity?”
“What do you look for when deciding if an opportunity is right for you?”
“What’s challenging or frustrating about finding volunteer opportunities?”
“Have you ever not applied for an opportunity because something felt unclear or uncertain? If yes, what was missing?”
“What matters most to you when committing to volunteer — time, location, cause, role details, skills required?”
“Have you ever used an app or website to find volunteering opportunities? What was your experience like?”
I had conducted interviews with 3 participants all varying in age (27-60) and volunteer experience. They also ranged from various professions and all had their own unique time constraints. The participants were Arth (27), Vaishali (53) and Sarju (60).
These were the questions that the participants were asked:
“Can you tell me a bit about yourself and your involvement with community volunteering?”
“How often do you volunteer or work with volunteers?”
“When you think about volunteering, what motivates you the most?”
“How do you usually find volunteer opportunities today?”
“Can you walk me through the last time you volunteered? How did you find that opportunity?”
“What do you look for when deciding if an opportunity is right for you?”
“What’s challenging or frustrating about finding volunteer opportunities?”
“Have you ever not applied for an opportunity because something felt unclear or uncertain? If yes, what was missing?”
“What matters most to you when committing to volunteer — time, location, cause, role details, skills required?”
“Have you ever used an app or website to find volunteering opportunities? What was your experience like?”
Affinity Map
Affinity mapping really helped organise the different interviews to understand the similar patterns, insights, and user needs to make sure "Volunteer connect" can be as useful as possible. These were the 3 key themes that they all had in common based on their interviews.
Motivation & Values
Insights:
●Arth: Wants to contribute to something meaningful; connect with the local community.
●Sarju: Motivated by helping and giving back; seeks sense of purpose, especially approaching retirement; likes social interaction.
●Vaishali: Enjoys working with children; motivated by the cause itself; values making a positive impact.
Theme: Volunteers are driven by purpose, impact, and alignment with personal values or interests.
Location & Accessibility
Insights:
●Arth: Prefers local opportunities; doesn’t want to travel far.
●Sarju: Location is important to minimise travel and maintain local community impact.
●Vaishali: prefers safe, accessible locations (schools).
Theme: Volunteers prefer convenient, local opportunities that minimise travel friction.
Trust & Legitimacy
Insights:
●Arth: Skeptical of unclear postings; legitimacy is questioned if details are missing.
●Sarju: Hesitant if commitment or role isn’t clear.
●Vaishali: Needs roles that are safe and approachable, indicating trust in the organization is important.
Theme: Trust in the organization and role clarity is crucial for volunteers to commit.
Affinity mapping really helped organise the different interviews to understand the similar patterns, insights, and user needs to make sure "Volunteer connect" can be as useful as possible. These were the 3 key themes that they all had in common based on their interviews.
Motivation & Values
Insights:
●Arth: Wants to contribute to something meaningful; connect with the local community.
●Sarju: Motivated by helping and giving back; seeks sense of purpose, especially approaching retirement; likes social interaction.
●Vaishali: Enjoys working with children; motivated by the cause itself; values making a positive impact.
Theme: Volunteers are driven by purpose, impact, and alignment with personal values or interests.
Location & Accessibility
Insights:
●Arth: Prefers local opportunities; doesn’t want to travel far.
●Sarju: Location is important to minimise travel and maintain local community impact.
●Vaishali: prefers safe, accessible locations (schools).
Theme: Volunteers prefer convenient, local opportunities that minimise travel friction.
Trust & Legitimacy
Insights:
●Arth: Skeptical of unclear postings; legitimacy is questioned if details are missing.
●Sarju: Hesitant if commitment or role isn’t clear.
●Vaishali: Needs roles that are safe and approachable, indicating trust in the organization is important.
Theme: Trust in the organization and role clarity is crucial for volunteers to commit.
Key Insights
What we can take from these interviews is that
•Across all interviews, participants are driven by a desire to contribute meaningfully to their community.
•Volunteers currently rely on social media, friends, newspapers, or niche websites, making it inconsistent and time consuming to find roles.
•Volunteers hesitate or skip opportunities when time, tasks, location, or commitment details are unclear.
•Busy schedules, particularly for working professionals, limit how often volunteers can commit.
•Volunteers prefer local opportunities to reduce travel barriers and maintain community connection.
•Volunteers care about the trust and safety of an events and place it at high priority
What we can take from these interviews is that
•Across all interviews, participants are driven by a desire to contribute meaningfully to their community.
•Volunteers currently rely on social media, friends, newspapers, or niche websites, making it inconsistent and time consuming to find roles.
•Volunteers hesitate or skip opportunities when time, tasks, location, or commitment details are unclear.
•Busy schedules, particularly for working professionals, limit how often volunteers can commit.
•Volunteers prefer local opportunities to reduce travel barriers and maintain community connection.
•Volunteers care about the trust and safety of an events and place it at high priority
User personas
These 2 user personas showcase 2 potential users and 2 key user types.
These 2 user personas showcase 2 potential users and 2 key user types.
These 2 user personas showcase 2 potential users and 2 key user types.
Competition Analysis
Through looking at what other volunteer organisations are doing and what we may or may not need to include.
Catchafire.org
Strengths:
•What exactly is needed is stated so the job description is very clear
•very clear about how long it will take and offer both long and short projects
•their nonprofits are “vetted & trained” as per the volunteer facing side, giving a layer of trust.
•they let you know the dollar amount of the impact your work will make can choose a particular field
Weaknesses:
•Because many projects are virtual, the platform may not fully serve nonprofits or volunteers who prefer or need in-person, local help.
•filtering for local events are not possible
•many roles are high skill causing Some volunteers report low match rates
•with many experienced professionals competing, it may be harder for some volunteers to find the right match.
Through looking at what other volunteer organisations are doing and what we may or may not need to include.
Catchafire.org
Strengths:
•What exactly is needed is stated so the job description is very clear
•very clear about how long it will take and offer both long and short projects
•their nonprofits are “vetted & trained” as per the volunteer facing side, giving a layer of trust.
•they let you know the dollar amount of the impact your work will make can choose a particular field
Weaknesses:
•Because many projects are virtual, the platform may not fully serve nonprofits or volunteers who prefer or need in-person, local help.
•filtering for local events are not possible
•many roles are high skill causing Some volunteers report low match rates
•with many experienced professionals competing, it may be harder for some volunteers to find the right match.
Voluntary action harrow
This is an organisation that one of our participants have used before and an organisation familiar to me based on its close proximity to where I stay.
Strengths:
•Serving local charities within a specific community
•They help organisations create volunteer policies, recruit, train, and retain volunteers — which can improve the quality of opportunities.
•Theres local legitimacy and community trust.
Weaknesses:
•Their operations are very local (Harrow), which is great for community focus but limits scale compared to national or global volunteering platforms.
•May not offer as many varied or high-skill “pro bono” style roles for professionals (they are more aligned to local community volunteering).
•Their success depends strongly on local engagement
Voluntary action harrow
This is an organisation that one of our participants have used before and an organisation familiar to me based on its close proximity to where I stay.
Strengths:
•Serving local charities within a specific community
•They help organisations create volunteer policies, recruit, train, and retain volunteers — which can improve the quality of opportunities.
•Theres local legitimacy and community trust.
Weaknesses:
•Their operations are very local (Harrow), which is great for community focus but limits scale compared to national or global volunteering platforms.
•May not offer as many varied or high-skill “pro bono” style roles for professionals (they are more aligned to local community volunteering).
•Their success depends strongly on local engagement
Voluntary action harrow
Strengths:
•Serving local charities within a specific community
•They help organisations create volunteer policies, recruit, train, and retain volunteers — which can improve the quality of opportunities.
•Theres local legitimacy and community trust.
Weaknesses:
•Their operations are very local (Harrow), which is great for community focus but limits scale compared to national or global volunteering platforms.
•May not offer as many varied or high-skill “pro bono” style roles for professionals (they are more aligned to local community volunteering).
•Their success depends strongly on local engagement
Card sorting
In order to see what our 3 participants mental models look like and to see how intuitive our information architecture really is we conducted card sorting. So the 3 participants organised content into groups that make sense to them.
The first step involved taking a look at the excel provided to me. The excel presented order dates, Buyers names; emails and locations, the ticket type (live or remote), how much they paid and whether there was an additional tax on the purchase. Using this information I was able to begin designing the dashboard with the intention of showcasing this info.
Voluntary action harrow
Strengths:
•Serving local charities within a specific community
•They help organisations create volunteer policies, recruit, train, and retain volunteers — which can improve the quality of opportunities.
•Theres local legitimacy and community trust.
Weaknesses:
•Their operations are very local (Harrow), which is great for community focus but limits scale compared to national or global volunteering platforms.
•May not offer as many varied or high-skill “pro bono” style roles for professionals (they are more aligned to local community volunteering).
•Their success depends strongly on local engagement
Sitemap
Sitemap
Using all the information gathered, the sitemap of the app was created. The homepage placed at the top because it represents the main entry point and the highest level in the site’s information hierarchy.
In order to see what our 3 participants mental models look like and to see how intuitive our information architecture really is we conducted card sorting. So the 3 participants organised content into groups that make sense to them.
The dashboard was designed to meet the six requirements as mentioned earlier, therefore each feature created had each requirement in mind. Below listed are the features included.
• Key Metrics: Placed at the top for instant visibility. Includes total net sales with break-even and goal targets, plus spaces left to manage ad spend and urgency.
• Buyer Distribution Map: A world map visualisation highlights customer locations (e.g., London 90%, USA 5%), which as mentioned earlier helps marketing teams decide where to focus advertising efforts.
• Latest Orders Table: Displays recent transactions with buyer info, ticket type (color-coded), and quick action buttons for Edit, Refund, and Receipts. Designed for admins to resolve issues without switching systems.
• Weekly Sales Snapshot: Shows a summary like “3 live tickets and 2 remote tickets this week, this provides a short term trend overview without overwhelming the user. I also colour coded the tickets with the intention of an increase in recognition.
• Traffic & Filtering: You can also filter by ticket type, location, and custom date ranges. These will allow contextual comparisons, e.g., how US sales changed after a campaign.
These solutions all cover the 6 requirements listed by the owner, and as can be seen in the prototype below by clicking on the menu icon, as mentioned earlier further information in regards to traffic, finances and orders can be viewed there. Pop ups providing further info on where to go to for further info is also included as can also be seen in the prototype.
Using all the information gathered, the sitemap of the app was created. The homepage is placed at the top because it represents the main entry point and the highest level in the site’s information hierarchy.
For this UX design course, the 8 week timeline required a focused scope, so we designed two core task flows: one for volunteers applying for a role and one for organisations listing a role. These flows were prioritised to address the most critical user journeys within the project timeframe.
The dashboard was designed to meet the six requirements as mentioned earlier, therefore each feature created had each requirement in mind. Below listed are the features included.
• Key Metrics: Placed at the top for instant visibility. Includes total net sales with break-even and goal targets, plus spaces left to manage ad spend and urgency.
• Buyer Distribution Map: A world map visualisation highlights customer locations (e.g., London 90%, USA 5%), which as mentioned earlier helps marketing teams decide where to focus advertising efforts.
• Latest Orders Table: Displays recent transactions with buyer info, ticket type (color-coded), and quick action buttons for Edit, Refund, and Receipts. Designed for admins to resolve issues without switching systems.
• Weekly Sales Snapshot: Shows a summary like “3 live tickets and 2 remote tickets this week, this provides a short term trend overview without overwhelming the user. I also colour coded the tickets with the intention of an increase in recognition.
• Traffic & Filtering: You can also filter by ticket type, location, and custom date ranges. These will allow contextual comparisons, e.g., how US sales changed after a campaign.
These solutions all cover the 6 requirements listed by the owner, and as can be seen in the prototype below by clicking on the menu icon, as mentioned earlier further information in regards to traffic, finances and orders can be viewed there. Pop ups providing further info on where to go to for further info is also included as can also be seen in the prototype.
Task flow 1
Task flow 1
The first flow is the path the volunteer would take in terms of finding a role of their choice that they feel they would be a good fit for.
The dashboard was designed to meet the six requirements as mentioned earlier, therefore each feature created had each requirement in mind. Below listed are the features included.
• Key Metrics: Placed at the top for instant visibility. Includes total net sales with break-even and goal targets, plus spaces left to manage ad spend and urgency.
• Buyer Distribution Map: A world map visualisation highlights customer locations (e.g., London 90%, USA 5%), which as mentioned earlier helps marketing teams decide where to focus advertising efforts.
• Latest Orders Table: Displays recent transactions with buyer info, ticket type (color-coded), and quick action buttons for Edit, Refund, and Receipts. Designed for admins to resolve issues without switching systems.
• Weekly Sales Snapshot: Shows a summary like “3 live tickets and 2 remote tickets this week, this provides a short term trend overview without overwhelming the user. I also colour coded the tickets with the intention of an increase in recognition.
• Traffic & Filtering: You can also filter by ticket type, location, and custom date ranges. These will allow contextual comparisons, e.g., how US sales changed after a campaign.
These solutions all cover the 6 requirements listed by the owner, and as can be seen in the prototype below by clicking on the menu icon, as mentioned earlier further information in regards to traffic, finances and orders can be viewed there. Pop ups providing further info on where to go to for further info is also included as can also be seen in the prototype.
Task flow 2
Task flow 2
This flow is the path the organisation would take in terms of creating a role volunteers could apply to.
The dashboard was designed to meet the six requirements as mentioned earlier, therefore each feature created had each requirement in mind. Below listed are the features included.
• Key Metrics: Placed at the top for instant visibility. Includes total net sales with break-even and goal targets, plus spaces left to manage ad spend and urgency.
• Buyer Distribution Map: A world map visualisation highlights customer locations (e.g., London 90%, USA 5%), which as mentioned earlier helps marketing teams decide where to focus advertising efforts.
• Latest Orders Table: Displays recent transactions with buyer info, ticket type (color-coded), and quick action buttons for Edit, Refund, and Receipts. Designed for admins to resolve issues without switching systems.
• Weekly Sales Snapshot: Shows a summary like “3 live tickets and 2 remote tickets this week, this provides a short term trend overview without overwhelming the user. I also colour coded the tickets with the intention of an increase in recognition.
• Traffic & Filtering: You can also filter by ticket type, location, and custom date ranges. These will allow contextual comparisons, e.g., how US sales changed after a campaign.
These solutions all cover the 6 requirements listed by the owner, and as can be seen in the prototype below by clicking on the menu icon, as mentioned earlier further information in regards to traffic, finances and orders can be viewed there. Pop ups providing further info on where to go to for further info is also included as can also be seen in the prototype.
Volunteer flow sketches
Volunteer flow sketches
Upon create these flows, I created low fidelity sketches to showcase roughly what I thought this would all look like. This is a sketch of what the volunteer flow would look like.
The dashboard was designed to meet the six requirements as mentioned earlier, therefore each feature created had each requirement in mind. Below listed are the features included.
• Key Metrics: Placed at the top for instant visibility. Includes total net sales with break-even and goal targets, plus spaces left to manage ad spend and urgency.
• Buyer Distribution Map: A world map visualisation highlights customer locations (e.g., London 90%, USA 5%), which as mentioned earlier helps marketing teams decide where to focus advertising efforts.
• Latest Orders Table: Displays recent transactions with buyer info, ticket type (color-coded), and quick action buttons for Edit, Refund, and Receipts. Designed for admins to resolve issues without switching systems.
• Weekly Sales Snapshot: Shows a summary like “3 live tickets and 2 remote tickets this week, this provides a short term trend overview without overwhelming the user. I also colour coded the tickets with the intention of an increase in recognition.
• Traffic & Filtering: You can also filter by ticket type, location, and custom date ranges. These will allow contextual comparisons, e.g., how US sales changed after a campaign.
These solutions all cover the 6 requirements listed by the owner, and as can be seen in the prototype below by clicking on the menu icon, as mentioned earlier further information in regards to traffic, finances and orders can be viewed there. Pop ups providing further info on where to go to for further info is also included as can also be seen in the prototype.
Organisation flow sketches
Organisation flow sketches
This is a sketch of what the organisation flow would look like.
The dashboard was designed to meet the six requirements as mentioned earlier, therefore each feature created had each requirement in mind. Below listed are the features included.
• Key Metrics: Placed at the top for instant visibility. Includes total net sales with break-even and goal targets, plus spaces left to manage ad spend and urgency.
• Buyer Distribution Map: A world map visualisation highlights customer locations (e.g., London 90%, USA 5%), which as mentioned earlier helps marketing teams decide where to focus advertising efforts.
• Latest Orders Table: Displays recent transactions with buyer info, ticket type (color-coded), and quick action buttons for Edit, Refund, and Receipts. Designed for admins to resolve issues without switching systems.
• Weekly Sales Snapshot: Shows a summary like “3 live tickets and 2 remote tickets this week, this provides a short term trend overview without overwhelming the user. I also colour coded the tickets with the intention of an increase in recognition.
• Traffic & Filtering: You can also filter by ticket type, location, and custom date ranges. These will allow contextual comparisons, e.g., how US sales changed after a campaign.
These solutions all cover the 6 requirements listed by the owner, and as can be seen in the prototype below by clicking on the menu icon, as mentioned earlier further information in regards to traffic, finances and orders can be viewed there. Pop ups providing further info on where to go to for further info is also included as can also be seen in the prototype.
Changes made from Sketches to Wireframing
From sketch to wireframing there were very little to no difference in terms of content, layout and structure. Despite the sketches being quick, by having a rough idea in terms of content layout and roughly what content I wish to include already in the sketch process, it became very easy to create these wireframes for both task flows.
Volunteer flow mid fidelity wireframes
Volunteer flow mid fidelity wireframes
The mid fidelity flow were created to validate the core user journey before moving into high fidelity design. At this stage, the focus was on structure, clarity, and usability, rather than visual polish.
This covered the volunteers journey in finding a role on Volunteer connect.
Upon create these flows, I created low fidelity sketches to showcase roughly what I thought this would all look like. This is a sketch of what the volunteer flow would look like.
The dashboard was designed to meet the six requirements as mentioned earlier, therefore each feature created had each requirement in mind. Below listed are the features included.
• Key Metrics: Placed at the top for instant visibility. Includes total net sales with break-even and goal targets, plus spaces left to manage ad spend and urgency.
• Buyer Distribution Map: A world map visualisation highlights customer locations (e.g., London 90%, USA 5%), which as mentioned earlier helps marketing teams decide where to focus advertising efforts.
• Latest Orders Table: Displays recent transactions with buyer info, ticket type (color-coded), and quick action buttons for Edit, Refund, and Receipts. Designed for admins to resolve issues without switching systems.
• Weekly Sales Snapshot: Shows a summary like “3 live tickets and 2 remote tickets this week, this provides a short term trend overview without overwhelming the user. I also colour coded the tickets with the intention of an increase in recognition.
• Traffic & Filtering: You can also filter by ticket type, location, and custom date ranges. These will allow contextual comparisons, e.g., how US sales changed after a campaign.
These solutions all cover the 6 requirements listed by the owner, and as can be seen in the prototype below by clicking on the menu icon, as mentioned earlier further information in regards to traffic, finances and orders can be viewed there. Pop ups providing further info on where to go to for further info is also included as can also be seen in the prototype.
Organisation flow mid fidelity wireframes
Organisation flow mid fidelity wireframes
This covered an Organisations journey in listing a role on Volunteer connect.
The dashboard was designed to meet the six requirements as mentioned earlier, therefore each feature created had each requirement in mind. Below listed are the features included.
• Key Metrics: Placed at the top for instant visibility. Includes total net sales with break-even and goal targets, plus spaces left to manage ad spend and urgency.
• Buyer Distribution Map: A world map visualisation highlights customer locations (e.g., London 90%, USA 5%), which as mentioned earlier helps marketing teams decide where to focus advertising efforts.
• Latest Orders Table: Displays recent transactions with buyer info, ticket type (color-coded), and quick action buttons for Edit, Refund, and Receipts. Designed for admins to resolve issues without switching systems.
• Weekly Sales Snapshot: Shows a summary like “3 live tickets and 2 remote tickets this week, this provides a short term trend overview without overwhelming the user. I also colour coded the tickets with the intention of an increase in recognition.
• Traffic & Filtering: You can also filter by ticket type, location, and custom date ranges. These will allow contextual comparisons, e.g., how US sales changed after a campaign.
These solutions all cover the 6 requirements listed by the owner, and as can be seen in the prototype below by clicking on the menu icon, as mentioned earlier further information in regards to traffic, finances and orders can be viewed there. Pop ups providing further info on where to go to for further info is also included as can also be seen in the prototype.
Usability testing for mid fidelity wireframes.
Usability testing for mid fidelity wireframes.
Usability testing was conducted on the mid fidelity wireframes to evaluate whether both volunteers and organisations could successfully complete their tasks on Volunteer Connect in a way that makes sense to users. This was the script used for the usability tests.
Usability testing was conducted on the mid fidelity wireframes to evaluate whether both volunteers and organisations could successfully complete their tasks on Volunteer Connect in a way that makes sense to users. This was the script used for the usability tests.
The dashboard was designed to meet the six requirements as mentioned earlier, therefore each feature created had each requirement in mind. Below listed are the features included.
• Key Metrics: Placed at the top for instant visibility. Includes total net sales with break-even and goal targets, plus spaces left to manage ad spend and urgency.
• Buyer Distribution Map: A world map visualisation highlights customer locations (e.g., London 90%, USA 5%), which as mentioned earlier helps marketing teams decide where to focus advertising efforts.
• Latest Orders Table: Displays recent transactions with buyer info, ticket type (color-coded), and quick action buttons for Edit, Refund, and Receipts. Designed for admins to resolve issues without switching systems.
• Weekly Sales Snapshot: Shows a summary like “3 live tickets and 2 remote tickets this week, this provides a short term trend overview without overwhelming the user. I also colour coded the tickets with the intention of an increase in recognition.
• Traffic & Filtering: You can also filter by ticket type, location, and custom date ranges. These will allow contextual comparisons, e.g., how US sales changed after a campaign.
These solutions all cover the 6 requirements listed by the owner, and as can be seen in the prototype below by clicking on the menu icon, as mentioned earlier further information in regards to traffic, finances and orders can be viewed there. Pop ups providing further info on where to go to for further info is also included as can also be seen in the prototype.
Mid Fidelity flow feedback
Mid Fidelity flow feedback
As seen in the table below, plenty of feedback was provided by all 3 participants (2 participants were ones we had not tested on earlier). This is why the process going from Mid to Hi fidelity wireframes was the process that took the longest and required the most iteration.
As seen in the table below, plenty of feedback was provided by all 3 participants (2 participants were ones we had not tested on earlier). This is why the process going from Mid to Hi fidelity wireframes was the process that took the longest and required the most iteration.
The dashboard was designed to meet the six requirements as mentioned earlier, therefore each feature created had each requirement in mind. Below listed are the features included.
• Key Metrics: Placed at the top for instant visibility. Includes total net sales with break-even and goal targets, plus spaces left to manage ad spend and urgency.
• Buyer Distribution Map: A world map visualisation highlights customer locations (e.g., London 90%, USA 5%), which as mentioned earlier helps marketing teams decide where to focus advertising efforts.
• Latest Orders Table: Displays recent transactions with buyer info, ticket type (color-coded), and quick action buttons for Edit, Refund, and Receipts. Designed for admins to resolve issues without switching systems.
• Weekly Sales Snapshot: Shows a summary like “3 live tickets and 2 remote tickets this week, this provides a short term trend overview without overwhelming the user. I also colour coded the tickets with the intention of an increase in recognition.
• Traffic & Filtering: You can also filter by ticket type, location, and custom date ranges. These will allow contextual comparisons, e.g., how US sales changed after a campaign.
These solutions all cover the 6 requirements listed by the owner, and as can be seen in the prototype below by clicking on the menu icon, as mentioned earlier further information in regards to traffic, finances and orders can be viewed there. Pop ups providing further info on where to go to for further info is also included as can also be seen in the prototype.
High Fidelity volunteer wireframes
High Fidelity volunteer wireframes
Taking into account all of the feedback given by the participants, this is what the high fidelity volunteer flow looks like.
Taking into account all of the feedback given by the participants, this is what the high fidelity volunteer flow looks like.
The dashboard was designed to meet the six requirements as mentioned earlier, therefore each feature created had each requirement in mind. Below listed are the features included.
• Key Metrics: Placed at the top for instant visibility. Includes total net sales with break-even and goal targets, plus spaces left to manage ad spend and urgency.
• Buyer Distribution Map: A world map visualisation highlights customer locations (e.g., London 90%, USA 5%), which as mentioned earlier helps marketing teams decide where to focus advertising efforts.
• Latest Orders Table: Displays recent transactions with buyer info, ticket type (color-coded), and quick action buttons for Edit, Refund, and Receipts. Designed for admins to resolve issues without switching systems.
• Weekly Sales Snapshot: Shows a summary like “3 live tickets and 2 remote tickets this week, this provides a short term trend overview without overwhelming the user. I also colour coded the tickets with the intention of an increase in recognition.
• Traffic & Filtering: You can also filter by ticket type, location, and custom date ranges. These will allow contextual comparisons, e.g., how US sales changed after a campaign.
These solutions all cover the 6 requirements listed by the owner, and as can be seen in the prototype below by clicking on the menu icon, as mentioned earlier further information in regards to traffic, finances and orders can be viewed there. Pop ups providing further info on where to go to for further info is also included as can also be seen in the prototype.
High Fidelity Organisation wireframes
High Fidelity Organisation wireframes
And this is what the high fidelity organisation flow looks like.
And this is what the high fidelity organisation flow looks like.
The dashboard was designed to meet the six requirements as mentioned earlier, therefore each feature created had each requirement in mind. Below listed are the features included.
• Key Metrics: Placed at the top for instant visibility. Includes total net sales with break-even and goal targets, plus spaces left to manage ad spend and urgency.
• Buyer Distribution Map: A world map visualisation highlights customer locations (e.g., London 90%, USA 5%), which as mentioned earlier helps marketing teams decide where to focus advertising efforts.
• Latest Orders Table: Displays recent transactions with buyer info, ticket type (color-coded), and quick action buttons for Edit, Refund, and Receipts. Designed for admins to resolve issues without switching systems.
• Weekly Sales Snapshot: Shows a summary like “3 live tickets and 2 remote tickets this week, this provides a short term trend overview without overwhelming the user. I also colour coded the tickets with the intention of an increase in recognition.
• Traffic & Filtering: You can also filter by ticket type, location, and custom date ranges. These will allow contextual comparisons, e.g., how US sales changed after a campaign.
These solutions all cover the 6 requirements listed by the owner, and as can be seen in the prototype below by clicking on the menu icon, as mentioned earlier further information in regards to traffic, finances and orders can be viewed there. Pop ups providing further info on where to go to for further info is also included as can also be seen in the prototype.
High Fidelity usability test comments
High Fidelity usability test comments
I received very little comments for improvement with these 2 flows, all 3 participants stated they found the flows very easy to use with very little difficulty. The only comment that really striked out to me was that the content for “create your first project” in the organisation flow did not line up with the "project details" screen volunteers would see when applying for a role.
Based on the sitemap I had created earlier, I also realised it may be necessary to include where the location of the opportunity would be and what other volunteers have rated a particular opportunity.
The dashboard was designed to meet the six requirements as mentioned earlier, therefore each feature created had each requirement in mind. Below listed are the features included.
• Key Metrics: Placed at the top for instant visibility. Includes total net sales with break-even and goal targets, plus spaces left to manage ad spend and urgency.
• Buyer Distribution Map: A world map visualisation highlights customer locations (e.g., London 90%, USA 5%), which as mentioned earlier helps marketing teams decide where to focus advertising efforts.
• Latest Orders Table: Displays recent transactions with buyer info, ticket type (color-coded), and quick action buttons for Edit, Refund, and Receipts. Designed for admins to resolve issues without switching systems.
• Weekly Sales Snapshot: Shows a summary like “3 live tickets and 2 remote tickets this week, this provides a short term trend overview without overwhelming the user. I also colour coded the tickets with the intention of an increase in recognition.
• Traffic & Filtering: You can also filter by ticket type, location, and custom date ranges. These will allow contextual comparisons, e.g., how US sales changed after a campaign.
These solutions all cover the 6 requirements listed by the owner, and as can be seen in the prototype below by clicking on the menu icon, as mentioned earlier further information in regards to traffic, finances and orders can be viewed there. Pop ups providing further info on where to go to for further info is also included as can also be seen in the prototype.
High Fidelity prototypes
High Fidelity prototypes
Taking into account the final feedback given, the first prototype shows the volunteer flow and the second prototype is the organisation flow.
The dashboard was designed to meet the six requirements as mentioned earlier, therefore each feature created had each requirement in mind. Below listed are the features included.
• Key Metrics: Placed at the top for instant visibility. Includes total net sales with break-even and goal targets, plus spaces left to manage ad spend and urgency.
• Buyer Distribution Map: A world map visualisation highlights customer locations (e.g., London 90%, USA 5%), which as mentioned earlier helps marketing teams decide where to focus advertising efforts.
• Latest Orders Table: Displays recent transactions with buyer info, ticket type (color-coded), and quick action buttons for Edit, Refund, and Receipts. Designed for admins to resolve issues without switching systems.
• Weekly Sales Snapshot: Shows a summary like “3 live tickets and 2 remote tickets this week, this provides a short term trend overview without overwhelming the user. I also colour coded the tickets with the intention of an increase in recognition.
• Traffic & Filtering: You can also filter by ticket type, location, and custom date ranges. These will allow contextual comparisons, e.g., how US sales changed after a campaign.
These solutions all cover the 6 requirements listed by the owner, and as can be seen in the prototype below by clicking on the menu icon, as mentioned earlier further information in regards to traffic, finances and orders can be viewed there. Pop ups providing further info on where to go to for further info is also included as can also be seen in the prototype.
Further improvements
Further improvements
This case study was then presented to members of the Brainstation community, and the feedback I recieved really let me know that this case study and the wireframes involved with it were exceptional. Overall I received a lot of praise for this as I covered everything within the design process and came up with a user centred solution. The only feedback I received was that the wireframes could have more brand identity, the inclusion of a logo could really add more brand identity in regards to "Volunteer Connect".
The dashboard was designed to meet the six requirements as mentioned earlier, therefore each feature created had each requirement in mind. Below listed are the features included.
• Key Metrics: Placed at the top for instant visibility. Includes total net sales with break-even and goal targets, plus spaces left to manage ad spend and urgency.
• Buyer Distribution Map: A world map visualisation highlights customer locations (e.g., London 90%, USA 5%), which as mentioned earlier helps marketing teams decide where to focus advertising efforts.
• Latest Orders Table: Displays recent transactions with buyer info, ticket type (color-coded), and quick action buttons for Edit, Refund, and Receipts. Designed for admins to resolve issues without switching systems.
• Weekly Sales Snapshot: Shows a summary like “3 live tickets and 2 remote tickets this week, this provides a short term trend overview without overwhelming the user. I also colour coded the tickets with the intention of an increase in recognition.
• Traffic & Filtering: You can also filter by ticket type, location, and custom date ranges. These will allow contextual comparisons, e.g., how US sales changed after a campaign.
These solutions all cover the 6 requirements listed by the owner, and as can be seen in the prototype below by clicking on the menu icon, as mentioned earlier further information in regards to traffic, finances and orders can be viewed there. Pop ups providing further info on where to go to for further info is also included as can also be seen in the prototype.