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.


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.


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


Pen & Paper, Whiteboard & Markers, Post-Its

Final Design



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.



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


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


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.


How we got there


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


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


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.


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.


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


Ophelia Sharpe


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


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


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


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.


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.


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


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?