Voluntopia

A digital rewards app designed to help busy professionals integrate volunteer work into their demanding schedules

Project Date | 2020

Platform | Mobile Web App

Design Tools | Sketch, Illustrator, InVision

My Role | UI Designer

PROJECT

BRIEF

WHAT IS Voluntopia

Voluntopia is a digital reward-based app that helps people complete small volunteer tasks using their phone. A term called micro-volunteering, these seemingly small tasks support larger volunteer projects. As the user completes micro-volunteer tasks in the real world, their virtual city in their app grows incrementally.

WHY

Volunteering is a great way for individuals to make a difference in their community, but recent studies suggest that America is currently experiencing its lowest rate of volunteerism in the last two decades.

OBJECTIVE

Build a volunteer-facing website that encourages users to get involved and evokes positive emotions towards volunteering.

​

Deliverables: hi-fidelity mockup of app, marketing website, and style guide for the future expansion of Voluntopia.

DESIGN

PROCESS

STARTING WITH THE BASICS

Brand Exploration

BRAND PRINCIPLES

TARGET USERS

25-35 year old working professionals

VISUAL COMPETITIVE ANALYSIS

After reviewing the handoff from the UX team, I conducted a visual competitive analysis to see what currently available to those interested in volunteering.

This was the first opportunity to rate the engagement factor and research how other competitors spotlighted their features and motivated their users.

Findings

❌

Display titles in complete form and create a layout that retains user's attention

 ✅

Use color to differentiate between categories of volunteering

❌
Apply logical hierarchy to guide the user through to their goal

STYLE TILE

Most game apps work with vibrant, more animated colors. Most volunteer sites keep it basic and bland. My goal as the designer was to find the bridge between the two -- professional yet engaging, fun yet polished.

​

Icons
For sleek, playful iconography, I went with line style contour graphics balanced with circles and curves. I avoided more complex icon designs as to not compete with the more developed illustrations throughout the app.

​

Each icon has a line style that's open-ended and rounded at the ends and joins.

Friendly Rectangles

The quickest way to create a charismatic, playful atmosphere is to use fully rounded buttons. These are super appropriate for game products and they add harmony and balance to the look. 

​

The deeper, rich color palette and subtle gradient fill added a hint of sophistication.

INSIGHTS

Style tiles are crucial to creating a consistent design, and consistent design is intuitive design. It contributes to usability and learnability.

​

Creating uniformity across elements helps the user predict certain actions and helps them get familiar with the product more quickly.

​

VOLUNTOPIA OR BUST 

Illustrations

One of my least anticipated parts of this project was creating the illustrations since I had never made any of my own before. I felt immense pressure knowing that the quality of these illustrations would make or break the design. After freaking out for a minute (one week), I gathered my thoughts and implemented a course of action.

​

The first thing on the list to contemplate: what were these illustrations going to say? The wireframes provided an idea of the content, but they were cold and unappealing. I knew the illustrations needed to evoke the design principles and be engaging in order to keep the user's attention -- but also not too much attention to the point that they distract users from their goal. 

Wireframe illustration

My illustration

Secondly, to keep things easy on the eyes, I limited the colors to only those in the existing color palette. Along with that, having the illustrations be as simple as possible using color blocking and uncomplicated shapes. This embodied the design principle of simplification.

​

Thirdly, I researched current illustration trends and combined a few ideas, keeping in mind my concern for balancing a polished look with a fun, gamey element.

​

Lastly, I chose to represent the virtual city as a floating utopia depicted in many cinematic pictures and novels. The idea behind this was to open up the imagination of the user in a light and fun way as they completed their volunteer tasks.

Wireframe of the virtual city

My illustration of the virtual city

INSIGHTS

Although I dreaded creating the illustrations, I ended up quite pleased with the results. It was a new, interesting part of UI that I hadn't before considered: just as design principles apply to UI elements, it applies to illustrations as well.

This experience reminded me that although something may seem scary and the possibility of failing is real, if I approach it methodically and intelligently, there is a higher chance of success.

FLESH IT OUT

Hi-fidelity Mockups

& Iterations

NAVIGATION BAR

I began my build out with the most important part of the app. I wanted to make sure the navigation bar and icons were clearly represented since it contained the primary destinations for easy and fast navigating.

Unfortunately, I wasn't initially aware that best practice for a mobile web app is to have the navigation bar at the top of the screen. After correcting the architect of the screen, it looked a bit basic and awkward and made the screen feel top-heavy. I made an iteration to lighten its look and add some styling with simplified icons, a sunken look, and a stylized swoop edge line.

Before iteration

Final mockup

COLOR DIFFERENTIATION

Voluntopia is a fairly small-sized app yet it deals with 5 very distinct categories for volunteering. As observed during the visual competitive analysis, category colors to differentiate one from the other. The wireframes didn't denote any distinguishable titles so I applied this method to my design using colors that made the most sense for each specific category. 

Additionally, once a user chose a category, they would only see that color theme through to the completion of the task, aiding user orientation within the app.

​

Task flow wireframes

Mockup drafts

Iteration​

After implementing category colors, the design started to look a bit chunky and the color quickly over-saturated the screen. I made modifications and added a slight gradient with a complimentary colors to the text blocks and refined the color bars to be more thin and sleek.

​

The result was surprisingly more effective when sized down. This enlightened me on the power and seduction of subtle design elements.

Final mockups

THE SWOOP

A big threat to my minimal design was the potential to look boring. It was important to create an interface that was still engaging. With my previous revelation of seductive design, I knew I needed something interesting to look at but sleek enough to carry throughout all the screens without being excessive.

It was evident during the design of the navigation that the seemingly subtle swoop actually had quite a presence. I went ahead and continued that design throughout all the screens to keep the design solid while adding a delicate nature to the app.

INSIGHTS

It would be a lie to say that I didn't have a few doubts about my ability to deliver a well-designed product when I started. Now on the other side of things, it's clear to see that in the moments I implemented the appropriate methods in my design process, are where I was able to define and solve design challenges with more ease and confidence.

Interactive

PROTOTYPE

LONGEVITY

Marketing Website

& Style Guide

MARKETING WEBSITE

The build-out for the marketing website went fairly fast due to quick implementation of the designs using the designs from the app. 

STYLE GUIDE

To turn my design into an applicable language and ensure the longevity of Voluntopia, I created a website style guide for future designers and developers to reference.

During this build out I was able to better understand my own choices and often went back to my mockups to refine some areas that needed dimension and positioning corrections. Creating the style guide taught me that designing as accurately as possible in the beginning stages of development creates a super-efficient process..

FINAL

THOUGHTS

LESSONS LEARNT

This project was a testament to the fact that vision trumps all other senses and is the most direct way to perception.

It helped me to consider every visual element as equal in importance no matter the level of emphasis on the screen.

The challenge that I really enjoyed and look forward to exercising going forward is creating seductive interactive design. It was a good lesson in that fact that usability of a product doesn't necessarily equate to the user wanting to use the product, there needs to be an element of desire.