Strengthening community by cleaning up San Francisco!
Team: 3 designers (2 UX, 1 UI)
Deliverables: Style tile, logo, microinteractions, mockups, prototype, style guide
Project Goal: Construct an exciting brand for a community based volunteer app.
My Roles: UI designer, Interaction Designer
Tools: Paper + Pencil, Zoom, Slack, Open Peeps, Adobe Xd, Animate, Figma, Usability Hub, Jira
San Francisco’s dirty streets have been compared to some of the dirtiest slums in the world.
Through our research we found, is there a need to improve the cleanliness of SF streets, and a feeling of mutual responsibility and desire for the community to take part in cleaning initiatives.
87% of long term SF residents are unsatisfied with the cleanliness of the sidewalks.
The top 3 sidewalk issues residents state are: fecal matter on the street, needles/syringes, lack of pavement maintenance.
“More people need to take personal initiative to help clean the sidewalks.”
-Long term SF resident
My Project Goal
Construct a brand for a community based volunteer app to make cleaning up SF more fun!
We're In this together
Understanding our users
To create excitement and increase user engagement, I first needed to understand who our users are, and what motivates them. I frequently referred back to the primary persona provided by the UX team to make design decisions from Kianna’s point of view.
Persona I was given by my UX team
Kianna has lived in San Francisco for many years, she enjoys her city and its community but has felt more unsafe as she has seen the city change and become dirtier. I want to create a brand that makes Kianna feel safe again as part of a community working to make her city a better place for all.
Take pride in your city
Exploring brand direction
HOW CAN WE BUILD CITY PRIDE
Moodboards are a quick and effective way to portray a theme and serve as a great reference when building out the brand. I chose to make moodboards to explore the 3 divergent themes on a conceptual level before committing to building out more complex UI elements.
Back to Nature
I drew inspiration from the California poppy and other native wildlife. Colors are neutral/muted oranges, reds and greens to give a naturalistic feel. Typography has a handwritten feel and the tone of voice is grateful and positive. Overall the feeling is gentle and eco friendly.
I drew inspiration from the SF Giants. Saturated red-orange, yellow and blacks are used. Blocky-bold text with a matter of fact tone of voice. Images of classic SF landmarks and flat-saturated illustrations are used. Overall the feeling is classic San Francisco.
I looked to street murals for inspiration. A darker background was used to make the colors pop. Macro and single-subject imagery is used to draw focus and increase the feeling of minimalism. Bold purples, oranges and teals are used. Overall this board has a bold, energetic and modern feeling.
I conducted a visual preference test to gain insight to which theme users found most engaging and why.
found 'Back to nature' most engaging
“I love the warm colors and nature feel!”
found 'Iconic SF' most engaging
found 'Lively streets' most engaging
“Bright colors and fun images.”
Results revealed a tie for 2 themes, indicating the iconic SF theme was the least engaging.
To break the tie, I further defined the themes and created style tiles. Style tiles give a better representation of how a theme will be communicated through UI elements.
Back to Nature
Organic shapes, with the exception of the button to feel anchoring amongst the other shapes. The muted colors embody the general colors of the native California landscape. Icons are realistic yet flat, illustrations are realistic, delicate and are primarily plants.
Historic and timeless sans serif font. Realistic icons to parallel real SF and have that timeless quality. Straight edges on images and most shapes throughout including buttons to represent strength. Casual and stylized illustrations to contrast.
Cartoonish, rounded shapes, rounded icons and pill shaped buttons. I contrasted the roundness with sharper edges for imagery and illustrations - I felt that this gave it more of a comic-book look and steers away from a ‘cutesy’ vibe. Orange reserved for the CTA with teal emphasis for header and link-text.
At this stage I wanted to learn more about how these themes were being translated, so I created a test of visual appeal where users choose 3-5 words to describe each theme. I included 50% positive words and 50% negative.
Using a cut off of 40%, the results showing word associations for the style tiles are shown below:
Back to Nature
Results confirmed the 'Iconic SF' design had the least positive associations. 'Back to nature', and 'Lively streets' themes both had many positive associations with quite a bit of overlap. Results from both visual tests indicated a hybrid theme may be most appealing.
I combined the two themes for the final style tile:
Clear sans serif typography
Muted orange, bright green and red
Rounded, cartoon icons
Rounded shapes and corners on cards
Sharper edges for images and illustrations
Final style tile
Brand epitome: the logo
HOW DO WE SHOW COMMUNITY
With a theme defined, I moved on to crafting a logo that defined our brand. It needed to communicate our brand values: community, fun, energetic, and camaraderie.
I began with sketching as many ideas as I could.
From these I was able to select a few to polish up digitally.
The final logo was selected as the best representation of all our brand values. It emphasizes community in a fun and playful way.
This logo references the trend of friend groups taking a picture of their feet in a circle. It brings feelings of friendship and sense of belonging. A red sewer grate at the center sets the context – let's clean up San Francisco together!
Let's make cleaning fun!
HOW DO WE MAKE CLEANING FUN
My primary goal as the sole UI designer for this project, was to communicate energy and excitement visually. One great way to invoke excitement in users is through microinteractions. I knew I wanted to create some fun interactions for users throughout the app.
I thought through how users would use the app and kept my eye out for opportunities to increase engagement. The first opportunity to really engage the user and eliminate a common frustration, is the loading screen when an account is created.
This was the perfect opportunity to be a little playful with our logo. By creating an account, the user is joining our community; I created a simple animation showing the 3 pairs of feet from the logo stepping into frame to indicate progress while engaging the user.
Another great place to add delight through microinteractions is in button state changes. A quick animation to communicate the progress and change in state while small, can go a long way to create a product users truly like (pun intended). I created a simple, yet fun microinteraction for our like button.
Building our community
The UX team conducted usability testing on mid-fidelity wireframes and made iterations before handing them off to me to create mockups. I applied our brand through colors, typography, iconography, illustrations, and implementing my microinteractions.
Image heavy cards to showcase community
State changed buttons change color and shape for maximum accessibility
Colors checked for AA compliance
Illustrations made utilizing the open source kit: Open Peeps
CLICK TO view full prototype
Maintaining our community
To maintain and scale our brand, I wanted to create documentation of the solid foundation we built through this project. I included all our brand colors, typography choices, iconography and various UI elements. In the future this document will serve as a reference when expanding the brand.
Clean Up SF Style guide cover
Our brand attributes: energetic, casual, clean, inclusive, and communal
Clean Up SF Style guide cover
Test and test again
Getting user input is essential to good design. Data informed choices allow us designers to create better, specialized experiences. If you don’t get the information you needed to proceed think about why that could be and test again. Both my moodboard and style tile tests have valuable input, and it wasn’t until they were both completed that I could make an educated decision for our brand direction.
Communication is Key
At the start of this project, I was heavily involved with my UX team in research. I am so thankful to have been informed and on the same page with my UX team from the start. Design decisions were made easier simply because I understood our user base and problem space well. We continued to keep up with each other through various stages of the project making an overall more cohesive design.