Client: Chicago Volunteer Association Role: UI designer Timeframe: 4 weeks Tools: Sketch, Illustration, Photoshop, Invision
Project overview
This is a story of how we designed a micro-volunteering application. Application is intended to allow users to help their community through microtasks, giving them an empty map that they can pick a place where they want to volunteer. Each task lasts one to five minutes and by finishing tasks users build their virtual city and have a sense that they play an interesting game.
Challenge
Research shows that people are eager to volunteer and contribute to the community but lack of time and complicated processes make this experience not as attractive to them. Our challenge was to make an app that will be enough appealing, easy to use and navigate.
Process
I was part of the three-member team at Flatiron. A previous UX team provided wireframes made after the research they conducted during the first part of this project. We started to review wireframes and persona, to prepare ourselves for the next step.
Wireframes
Personas
Masha Nalovich, 20 years old college student
Masha’s motivations for volunteering is to impact her community, learn a new skill, and discovering a social experience. Her frustration is to find volunteering activities that accommodate class and work schedules.
Sarah Boulders, 29 years old Program Manager
Sarah’s motivations for volunteering are to help turn dedicated volunteers into team leaders and helping volunteers, find the right experience that matches skills, interests, and values. Her frustrations are a lack of commitment for volunteers, struggle to truck data on volunteers, and experiencing a disconnect with the community.
Competitors
We tried to empathize with the personas, and find the best visual solutions to make the app as easy as possible to use. Our next step was to conduct a competitive analysis.
Be My Eyes
- oversized photos
- bland color palette
- uninspiring UI elements
GoFundMe
- effective combination of images and illustration
- powerful use of card layout
- understandable content
Charity Miles
- inconsistent content
- the unlabeled bottom navigation bar
- poor choice of color
VFund
- inconsistent use of the font
- non-inspiring use of colors
- overcrowded dashboard page
Design Principles
Style exploration
Thinking about the three design principles that we defined before the exploration phase, I designed three mood boards and style tiles. As I was designing, new ideas started emerging and once I finished I had a fairly easy task of grouping and placing the designs on the artboard.
The inspiration for the first design came from the architectural elements. Voluntopia is meant to be built from the beginning, from the ground up. The idea was fitting architecture like a puzzle and at the end a city in which people would live with a goal of making it a better place. The colors are light, many pictures, yellow color for CTAs and simple UI elements to suggest action and involvement.
My second design represents a virtual city, which is Voluntopia. The surroundings are colored with stronger and brighter colors. The design represents the city and my moto behind it.
The idea behind the final design was to portray the design in a stronger light by using bright colors, specifically red. By doing this, a message, that the community as a whole needs to be taken care of, was sent. Black background combined with the red CTAs is a good sign that the user should pay closer attention.
High Fidelity Screens
Landing and Home Page
Category and Instruction Page
Profile and Friends PageImage
