UX/UI
Research, Branding, and Visual Design

Urban One

Design a mobile-responsive website and brand identity for Urban One — an online platform for doers and nonprofits to use their skills and passions to make the world a better place.

THE PROBLEM

Nonprofits need a way to tell their story beautifully and effectively so that they can more easily build a community around their cause. Existing platforms lack a full suite of features for nonprofits to tell their story, communicate effectively, obtain the funding they need, and engage with a passionate audience.

TEAM

Brandon Smith: Visual Design Lead
Kyna Payawal: Project Manager
Hannah Aderinto: Research Lead

TOOLS USED

Pen & Paper, Whiteboard & Markers, Post-Its

Final Design

VIDEO DEMO

LOGO

Our client, Alex, requested some logo ideas. I took some time to design three variations, and she picked this one.

Utilizing the Lato typeface in a Bold and Light font pairing, the logo’s explosive energy spreads in all directions like good deeds rippling through a community.

COLORS

BLUE SKY

This friendly, calming blue provides a sense of serenity, trust, and reliability. It says, “This is a safe place.”

SUNRISE

Non-profits are about instilling confidence, creativity, and positivity into the world, and Sunrise does just that.

LAWN

This neutral shade of green provides a sense of calm, safety, harmony, and growth. Green is also associated with money, reinforcing the need for nonprofit funding.

TYPEFACE

How we got there

RESEARCH & STRATEGY

1. Stakeholder interview
2. Comparative & Competitive Analysis
3. User Interviews
4. Feature Prioritization
5. User Personas
6. User flow

DESIGN STEPS

1. Design Studio
2. Wireframes
3. Med-Fi Prototype
4. User Testing
5. Hi-fi Mockups
6. User Testing

C&C ANALYSIS

We conducted a Comparative & Competitive Analysis of 17 different websites and apps that had features similar to what Alex wanted Urban One to offer. By comparing the features of these competitors, we were able to begin honing in on Urban One’s unique value proposition.

USER INTERVIEWS

Over the phone, we conducted 13 user interviews in two days. The feedback we received was invaluable in helping us understand the differences between people who are avid volunteers and those who rarely (or never) volunteer. Interviews also shed light on specific pain points people had with the way they interface with the nonprofits and causes they care about.

FEATURE PRIORITIZATION

We took the data from our user interviews and laid them all out on the table. From there we synthesized all the information we gathered to identity pain points and develop features to solve those pain points.

Feature Prioritization // Me at work
Feature Prioritization // Urban One
Feature Prioritization // Nonprofits
Feature Prioritization // Volunteers
Feature Prioritization

PERSONAS

Ophelia Sharpe

AVID VOLUNTEER

Ophelia feels socially and morally obligated to maintain community connections and wants to connect with other volunteers who share her interests. She’s very active with causes she cares about.

Elijah Graham

RARE VOLUNTEER

Elijah is interested in volunteering, but needs the encouragement of family and friends to actually participate. He wants to volunteer with people he knows.

Feed LA

NONPROFIT

Feed LA is a local hunger relief non-profit that needs help finding volunteers and telling its story more effectively.

USER FLOW

We used Ophelia, our Avid Volunteer persona, to guide the user flow. The flow includes her visiting the site for the first time, signing up, finding a nonprofit, donating, and joining a project.

WIREFRAMES

We held multiple design studios to sketch out each screen in the user flow. We then brought our ideas together on the whiteboard. This helped me to get started on the hi-fi mockups while Kyna and Hannah mocked up digital low-fi wireframes for user testing.

HI-FI MOCKUPS

Kyna and Hannah proceeded to conduct user testing and report back to me with their findings while I got started on the hi-fi mockups and branding. This proved an efficient way for us to test and iterate without having to make major — and potentially time consuming — changes to the hi-fi. Here are a few of the screens:

Urban One // Homepage
Urban One // Signup
Urban One // NonProfit Page
Urban One // Project Page

Results

Our client, Alex, loved the design. During our final meeting when we presented our research findings and I demonstrated the prototype, she told us we had perfectly brought her vision to life. That we understood her brand and what it was all about.

Moving forward, next steps for the site design would be to do a couple rounds of testing and iteration, as well as flesh out features that we didn’t have time to design during our limited 2.5 week sprint.

Like my work?