Desktop Copy 63@3x.png

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

iPhone X Copy.png
iPhone X.png

Look around

Context

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.

Grossed out face@2x.png
  • 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!

Cleanup.png

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.

Kianna (Primary Persona) (1).png

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.

Artboard – 2.png

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.

Artboard – 3.png

Iconic SF

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.

Artboard – 1.png

Lively Streets

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.

44%

found 'Back to nature' most engaging

“I love the warm colors and nature feel!”

13%

found 'Iconic SF' most engaging

“SF cool.”

44%

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.

Style Tile A.png

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.

Style Tile B.png

Iconic SF

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.

Style Tile C.png

Lively Streets

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

Iconic SF

Venn.png

Lively Streets

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:

Style Tile.png

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.

Desktop Copy 52@3x.png
Desktop Copy 51@3x.png
Desktop Copy 56@3x.png

The final logo was selected as the best representation of all our brand values. It emphasizes community in a fun and playful way.

Desktop Copy 63@3x.png

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.

CleanUpSF-LoadingInteraction.gif

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.

CleanUpSF-LIKEInteraction.gif

Coming together

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.

iPhone X - Silver (1).png

Image heavy cards to showcase community

iPhone X - Silver-1.png
iPhone X - Silver (3).png

State changed buttons change color and shape for maximum accessibility

iPhone X - Silver.png
iPhone X Copy 2.png

Colors checked for AA compliance

iPhone X - Silver-2.png

Illustrations made utilizing the open source kit: Open Peeps

CLICK TO view full prototype

CleanupSF.gif

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.

Cover
Cover

Clean Up SF Style guide cover

press to zoom
Brand Attributes
Brand Attributes

Our brand attributes: energetic, casual, clean, inclusive, and communal

press to zoom
End
End

Thank you!

press to zoom
Cover
Cover

Clean Up SF Style guide cover

press to zoom
1/11

Lessons Learned

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.

Meet the women who made this project possible: Anna Wu and Riddhi Khadke

Lets get in touch

  • linkedin-round-line copywhite
  • linkedin-round-line copy 2white
  • linkedin-round-linewhite
  • Behance Logo

©2020 by kendrajenel.