Voluntopia

A digital rewards app designed to help busy professionals integrate volunteer work into their demanding schedules
marketingwebsite_voluntopia.png
task.png
Project Date | 2020
 
Platform Mobile Web App
Design Tools Sketch, Illustrator, InVision
 
My Role UI Designer
 
 

PROJECT

BRIEF

overview.png
What
 
Why
 
How
Objective

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

 

DESIGN

PROCESS

undraw_design_data_khdb.png

STARTING WITH THE BASICS

Brand Exploration

Brand Principles
Target Users
Visual Competitive Analysis
Style Tile
Logo
 

VCA Findings

Screenshot_20200409-181933_Chrome.jpg

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

Screenshot_20200409-181839_Chrome.jpg

 ✅

Use color to differentiate between categories of volunteering

Screenshot_20200409-184209_Chromeg.jpg


Apply logical hierarchy to guide the user through to their goal

 
STYLE TILE
undraw_modern_art_x3qc.png

Professional yet engaging, fun yet polished

Iconography & Friendly Rectangles

Icons.png
Voluntopia_StyleTile_013120 Copy.png
 

VOLUNTOPIA OR BUST 

Illustrations

undraw_art_0tat.png

Brand principles

Current trends

Cohesive

 

Wireframe illustration

My illustration

s10_Onboarding_1xxhdpi.png
 

Wireframe of the virtual city

 

My illustration of the virtual city

voluntopia.png
 
LOGO
 

FLESH IT OUT

Hi-fidelity Mockups

& Iterations

 
NAVIGATION BAR

Before iteration

Friends_Invite.png

Final mockup

invite.png
 
COLOR CATEGORIES

Task flow wireframes

Mockup drafts

HomeCity Copy.png
CivicCenter_Categories Copy.png
instructions copy.png

Final mockups

Home.png
Civic.png
Instructions.png
 
THSWOOP
activity.png
task.png
 
PROTOTYPE
 

LONG LIVE VOLUNTOPIA

Marketing Website

& Style Guide

MARKETING WEBSITE
marketingwebsite_voluntopia.png
 
STYLE GUIDE
 

FINAL

THOUGHTS

thoughts.png
 

Thank you!

undraw_having_fun_iais.png

Special thanks to:

Design Instructors Julia & Robbin,

Justin,

the WeWork staff,

...and my Emery warriors.

jasminalconcher.com

jasmin.uidesign@gmail.com

linkedin.com/in/jasmin-alconcher

.