Voluntopia

A digital rewards app designed to help busy professionals integrate volunteer work into their schedules.
Project Date | February 2020
Platform | Mobile Web App
My Role | UI Designer
Design Tools | Sketch, Illustrator, InVision, Pen & Paper
Deliverables Mobile Web App Mockups, Prototype, Marketing Website, Style Guide

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

As the visual designer, my objective was to build a volunteer-facing website that evokes positive emotions towards volunteering and encourages users to get involved.

Deliverables: hi-fidelity mockup of app, marketing website, and style guide for consistency and alignment.

GOALS

In order for me to organize my path forward, I first had to map out clear goals to guide me along:

 

Project Goals: Incentive structure to inspire users
 

Visual Goals: UI elements to engage users
 

User Goals: Clear navigation path for users to find, review and complete micro-volunteering tasks

CONSTRAINTS

...and it wouldn't be #goals if there aren't any struggles along the way. I knew upon receiving the UX handoff that I had a few obstacles to navigate:

Complex illustrations: creating an entire city
 

Barebone wireframes: called for high level of creativity

Mobile Web App: best practices differs than mobile apps

DESIGN

PROCESS

STARTING WITH THE BASICS

Brand Exploration

The first order of business was to review the research presented in the UX deliverables and explore existing volunteer products in the market.

BRAND PRINCIPLES
Simplify
Cut through the noise, curate the experience
Retain
Keep users engaged and coming back for more
Catalyze
Spark an interest
TARGET USERS
The app’s goal is to give anyone who wants to make a difference in the world quick and fun ways to do so. The product should be accessible to a variety of audience types but specifically target young, busy professionals of the ages 20-35, who have the lowest rates of volunteerism and need extra motivation to get involved.
VISUAL COMPETITIVE ANALYSIS

Before diving into the design of the interface elements, I wanted to research how other competitors as well as other digital rewards apps spotlighted their features and visually motivated their users. This was my first opportunity to rate the engagement factor and use of color. 

Findings from this analysis revealed the common color palettes of this market as well as game products. Many competitors used the same pastel color palette with more business-like layouts and shapes, while gamified products utilized a much brighter palette and friendly, rounder elements.

I could now confirm the important visual factors that contributed to their overall user flow, look and feel. 

DESIGN INCEPTION WORKSHEET
To inspire some first ideas for design, I made a design inception worksheet to figure out the direction of the visual language, using the target user as the core influencer.
CRAFTING THE VISION: MOODBOARD
After establishing the visual language, I created a few moodboards and performed a Visual Design Preference Test on anonymous users in the target age range. 80% of testers chose concept #2 which has a sophisticated yet youthful vibe. It combines curves with lines and embodies a pleasant, weightless feeling.
BALANCED UI ELEMENTS

As I found in the visual competitive analysis, most game apps work with vibrant, more animated interface elements. Most volunteer sites keep it basic and bland. My challenge as the visual designer was to find the bridge between the two -- professional yet engaging, fun yet polished.

Color

I wanted the color palette to reflect the values of the company and it's users. After experimenting with a few different shades, I chose to use a deep purple for the primary color. Noted in the VCA, the purple in Duolingo stands out the most in the line up for it's unique qualities. It is a very imaginative color. Unlike the lighter purple, the deepness of this shade adds a bit more maturity.

#26226B

#7C78C7

Purple color psychology:

  • combines the calm stability of blue and the fierce energy of red

  • fulfillment, vitality, creativity, devotion, peace, magic

Too much purple could create an irritable and arrogant feeling so I subdued the purple by adding shades and tints, and introduced a complementary, more vibrant secondary color -- orange.

#F86D3D

#FFE7DF

Orange color psychology:

  • combines the energy of red with the happiness of yellow

  • joy, creativity, wellness, vibrant, stimulating, compassion

Icons
For sleek yet playful iconography, I went with line style contour graphics balanced with circles and lines. 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.

Typeface

To keep the look modern and clean I used 2 sans serif fonts. My first pairing was Montserrat & Open Sans. I used Open Sans for the body copy because of its more narrow properties that could accommodate more text. Montserrat was stylistic enough to serve as the header copy. However, after further contemplation, I felt that these 2 fonts had slightly too much contrast. Open Sans appeared too narrow and didn't match the characteristics of the more flexible, breathable Montserrat.

First iteration:

Montserrat is a special font that can also work well as body copy. Instead of finding a new body copy, I subbed in Montserrat and looked for a new header font. I came across Raleway which has bubbly yet subtle detail -- enough to implement a header yet not too showy or distracting.

Final iteration:

I settled on this new pairing for its playful, breathable quality. Both typefaces are elegant and versatile but most importantly maintain readability and usability.

Style Tile: Final Look & Feel

To keep all these elements in check and ensure brand alignment, I created a style tile. A consistent design is an intuitive design. It contributes to usability and learnability. This gave me a chance to make any last adjustments before moving onto the mockups. (Note: Logo came last. See logo design in section: Illustration.)

INSIGHTS

Creating uniformity across elements will help the user predict certain actions and help 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:

1. Assess wireframes

2. Research current illustration trends

3. Sketch with mindfulness to brand principles

4. Digitize drafts

1. Assess wireframes. 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. 

2. Research trends. I studied current illustration trends to observe the qualities that made them engaging and current. I was able to use this information as inspiration in combining a few characteristics, keeping in mind my concern for balancing a polished look with a fun, gamey element.

3. Sketch. The challenge here was to illustrate all 5 category buildings and the city as a whole. I began with writing out the traits for each volunteer category and built each building accordingly.

4. Digitize & Iterate. To keep everything easy on the eyes, I chose to have the illustrations be as simple as possible using color blocking and uncomplicated shapes. This embodied the design principle of simplification and brought the illustrations in cohesion with the UI elements.

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.

After a few iterations that included the addition of gradients and livelier hues, I was able to create final illustrations that were simple yet engaging.

Final Illustration Design

Logo

With the illustrations established, it was now time to design a logo that reflected the same design principles to keep everything consistent. I used the same elements in the illustrations with the shape of the floating utopia to come up with an original idea.

 

Additionally, I pulled from the patterns I observed in the competitor analysis (symmetry and simple shapes) and avoid patterns that were currently already over-saturating the market (hand symbols).

Logo sketches

Logo selections digitized

Final logo design

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. Also -- leaning on what is already out there and currently working in the market, and mimicking that.

SOME ITERATIONS LATER...

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, assigning colors to each category works 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

THSWOOP

A big threat to my minimal design was the potential to look boring. It was important to create an interface that was still engaging, after all, the goal is gamification. 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 mobile web app designs. I implemented the same design to prepare potential users with the look and feel, contributing to the learnability of the product.

STYLE GUIDE

To turn my design into an applicable language and ensure the longevity of Voluntopia, I created a style guide website 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.

MENU

CONTACT

JASMIN ALCONCHER

© 2020 / All rights reserved