☞ Wildfire
UIUX Wireframing and Design.
Executed on paper, digitized with Sketch.
Winter 2017, Freelance.
Available on the App Store.
I was approached to work on UI/UX design for the iPhone app for Wildfire, a community alerts app in the burgeoning space of hyperlocal social networks. They were looking to broaden the usecases of their app past safety/crime, and I was able to help integrate the numerous new functions into a friendly, engaging, and college-friendly interface.
A selection of screens from the new Wildfire.

The Berkeley campus is beautiful and the academics renowned, but unfortunately, the area nearby campus is often unsafe. Especially for those walking home in the nighttime, there are significant safety hazards that affect both students and other citizens alike. Wildfire does its part to combat this by offering a location-based safety alerts app. Any user can submit an event they witnessed, and students can make sure their route is safe before walking home at night.

Wildfire had been doing quite well as an app, but was planning to expand in both territory and function. Through user research and interviews, they were finding that students across different campuses were using Wildfire in different ways, often promoting more than simply crime alerts. They wanted to foster these communities of people sharing other types of local alerts, and I could help them.

Screenshots of the old app.

☞ Aesthetics

From a UI and graphic design perspective, old app was in major need of a facelift. The starkness of the black-on-white look was unstyled in an unattractive way. A large collection of iconography was unlabeled and confusing, and margins across the board were inconsistent.

As the app was pivoting into categories other than crime and safety, a more lighthearted look was necessary. I softened the corners and introduced emoji as the main iconography of the app, lending a familiar face that is attractive to the target audience.

☞ Information Hierarchy

The client suggested to me in the original brief that he was considering cards as a method of making the events distinct from one another. I agreed: the usecase that this app has for the UX Design Pattern of cards aligns closely with Google's Material Design guidelines - discrete blocs of information with one central focus point (the text of the alert) and multiple action points (sharing, entering detail view, going to map view). Whereas the old layouts did not do a good job of making it clear where one alert ends and another begins due to uneven spacing, the redesign clearly itemizes and differentiates each post from another, and also outlines directly all the actionable areas of a post.

Through user research and interviews, we determined the appropriate styling of text for different fields of the post. We found that compared to other social networks, the identity of the poster was not as important as the content of the post; in reponse, we elevated the actual alert content in size and color contrast, and diminished the user's name in relation.

The Post Card pattern that forms the backbone of my design.

☞ Photo-Friendly

A major design point for the app was showcasing photography. The client wanted users to add photos to their events easily and have those photos be displayed as the main star of the story, but also recognized that a lot of posts would not necessarily have photos attached. Thus, I had to design not only for text posts, but also posts customized with pictures, which the Post Cards are easily capable of accomodating. I used a UX Pattern similar to how stories on Instagram and Snapchat work for posts with multiple pictures, with an autoscrolling gallery which can also be manually forwarded and backwarded.

☞ Interactivity and Engagment

The Client had several ideas on how they wanted users to interact more with the posts they saw. I expanded the discussion page for specific posts, by easing the margins to make the reading a more comfortable experience and introducing upvote badges for posts and comments alike. Due to the nature of the posts which are not necessarily positive, the wording and iconography of the upvote function had to be carefully considered. We settled on an up emoji, which was neutral enough to be applied to a large variety of different posts.

Rough drafts of feed designs

I had such an awesome time with this project! I was able to sketch, to wireframe, to Sketch, and to play. I really enjoyed working with Hriday and Jay of the Wildfire team for being such enthusiastic and design-smart clients who trusted me and my work!

Pencil on paper sketches and concepts

☞ What I Learned:

I worked with Sketch a ton for this project, and figured out how to use a bunch the fancy tools, like slices and symbols. Working on this project also gave me a lot of insight on the workflow of designing for Apple products specifically, since as an Android developer, I have an intuition for how to design for the Android ecosystem, which I didn't necessarily have for an Apple dev ecosystem. I learned which sizes were most standard for iPhone layouts, which layout features were more easy or difficult to implement, and how to best coordinated the handoff from design to developer.

The app, with my redesign, is currently live! Get it on the Apple Store here.