ActionForce
Project Overview
The app and website aim to connect volunteers with individuals seeking help, emphasizing inclusivity regardless of the scale of assistance. The primary focus is on a mobile-first approach, with the intention of providing a seamless experience that progressively enhances functionality on desktop devices. The platform aims to facilitate both small and large acts of volunteering, fostering a community where people can offer their time and support.

The problem: People looking to either get into volunteering, find an easier point of entry, or volunteer on a smaller scale.
‍
The goal: Is to make is easier, more fun, and more accessible to all looking to help or post an ad needing help.
What I learned:
I’ve learned more about UX research as well as UI elements to flesh out more of a full and visually appealing website. I was pushing color theory to choose what the color scheme/theme should be for both platforms. Learning about negative spacing, search suggestions, standard features, recognizable elements in standard apps, and consistency.

This was a solo project of mine with a help from 2 different mentors to critique and push my own designs to further pixel perfect visual elements. For a further deep dive please see below on the full scale of the project.
Jump to:
User Story & ResearchPaper/Lo-Fi WireframesHi-Fi PrototypesDesktop DesignDesktop WireframesDesktop PrototypeDesktop MockupDesktop Hi-Fi Prototype
User Story
Users want an easier way to volunteer on their time. Being able to help in longer shifts or short time frames. Users are looking for a simpler process to find ways to volunteer or look for help with tasks, big or small.
‍
As a person who is looking to volunteer in my spare time, I want to be able to bring good deeds and service in my area so that I can provide value to the people who are needing help.
‍
User Research: Pain Points
1 - Being able to look for help or volunteer their time right from their phone.
‍
2 - Facing hurdles signing up, finding the right origination or people to help.
‍

Persona - Hector

Age : 40
Education : Bachelor
Hometown : El Paso, TX
Family : Divorced, no kids
Occupation : Programmer
“ If I’m able in the evenings or mornings just to see what people need help with and I can accommodate, I’d like to be able to offer my help.”

Goals - Being able to just go day by day to see what is available after work or on the weekends is what I’m searching for. Being able to see just what people need daily to help is what I’m looking for.

Frustrations - Not being able to just see what is needed day by day. Would like to be able to just pick and go with little back/forth on direction.

Hector works in tech and has flexibility to want to give his time back. He is wanting to be able to just search for postings for the day and commit 30 mins up to 2 hours of him time a couple times a week. Being able to help specific groups of individuals on his flexible schedule is the goal.

User Journey Map

Competitive Audit

Competitive Audit File
Paper Wireframes
The goal was to really push the design and utility of this app. Taking into consideration that this will be used for progressive enhancement onto other devices I wanted to make sure to bring variety to see what would be best to push forward with.
Digital Wireframes
I went with a couple of my initial paper wireframe designs and combined them in to my 1st digital wireframe.

I wanted to highlight dates, event pictures, users/avatars who are volunteering already, and descriptions.
My focus was on dates of your choosing. Wanted to highlight this at the top of the page to bring users vision focus here.
‍
The point was to highlight events with big pictures on days selected
Low Fidelity Prototype

Lo-Fi Prototype Figma
Usability Study Findings
Round 1 Findings
Wanted slightly cleaner front page with focus on events
‍
Wanted ways to have a map view and filter out types of events
‍
Looking for ways to communicate with original poster or event leader

Round 2 Findings
Looking for an overall calendar view to look into future dates
‍
Users wanted to make sure profiles could be found to rate volunteers or track their status
Users overall glad with ease of use and easy accessibility to search/post on the go.
High-Fidelity Prototype
I felt the dates were overtaking and being the focal part of the homepage. I wanted to reduce the amount of wasted space and really focus on highlighting the events home page.
‍
Also to visually reduce clutter, I pulled user avatars and elements into main event container to keep consistency between events and information. This provided a cleaner and more polished home page to view events.
‍Hi-Fi Prototype
Refining the Design for Desktop
Mockups, wireframes, lo-fi prototype
‍
High-fidelity prototype
‍
Accessibility
‍
Progressive enhancement

Paper Wireframes

Looking towards progressive enhancement for the desktop version I wanted to bring as many ideas into the fold about the home page’s format. Ultimately I went slightly more traditional which I will show on the digital wireframes. Biggest takeaway was keeping consistency from the mobile to desktop versions.
Digital wireframes
1st design choice was to be able to provide consistent information across devices.
Being able to feel the same themes and information while providing a more robust experience on desktop visually.
Low-Fidelity Prototype

Lo-Fi Figma
Usability Study: Findings
The desktop version of these usability findings were a good experience to fine tune what users would really like to see or feel is lacking on this first and second pass of iterations. Being able to get these insights really helped push my designs to feel more complete and fleshed out.

Round 1 Findings
Looking for original poster information and pages that would pertain to edit post.
Would like to see similar volunteer events or reviews by people that have volunteered for similar event.
Would like to fix map view, be able to zoom in/out or merge 2 of the events page for a cleaner look.

Round 2 Findings
Would like to see ‘tags’ for specific dates or events to for easier flow/viewing.
Users would like to see more of a carousel of events on homepage without having to scroll down.
Users are still overall glad with ease of use and easy accessibility to search/post on the go. Just looking to refine further.
‍
Hi-Fi Prototype
Hi_Fi Figma File
‍
Accessibility Considerations
1 - I’ve made sure to test that both mobile and webpage color contrast passes WCAG requirements.
‍
2 - I made sure to use headings to create structure, and provide strong color contrasts, as well as avoided using images of text.
‍
3 - Web and mobile both had accessibility in mind when navigating pages. Making sure to follow the flow without using confusing pathing if no mouse is present on desktop.

Takeaways

Impact:
Biggest takeaways from this latest usability study and project as a whole was the amount of collaboration that happened with co-workers and peers to help push what my designs could be. Being able to try and apply modern designs and layouts to bring a more realistic view to this project in mobile and desktop formats
Next Steps
1 - I’d like to go back to the mobile design and see if I could bring another iteration to push my mobile app like I did for my desktop design.
‍
2 - I would love to bring more functions to both of my formats to make it feel more realistic in the prototype.
‍
3 - I’d like to create a tablet version of this project to really cover my bases on a multitude of formats.
Powered by Webflow
FacebookTwitterInstagram