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.
I was approached to execute a UI overhaul, to make their app look less stock Apple and create a beautiful and functional aesthetic that would elevate the app as they expanded to more campuses. Behold!
Wildfire had been doing quite well as an app, but was planning to expand in both territory and function. A new design was needed to accomodate new features and make it look presentable to more and more people.
My app design overhaul was focused on a few major portions of the app: the feed, the new post page, and the detail view.
From a UI and graphic design perspective, the feed was in major need of a facelift. One major concern that the client brought up with me was that the company was seeking to pivot the app's usecase. Instead of only being used for crime and safety alerts, they wanted to introduce the option to allow submitters to also put on more general PSAs and community annoucements. To this end, I lightened the look of the app significantly, bringing it from a rather unnotable grey-and-white list to a much more customized, three-dimensional look with carefully considered colors and shades.
I introduced emojis as the main iconography of the app: one emoji per post category and also as button labels. As the main usecase of this app is on college campuses, this helped keep the app tastefully youthful.
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 version 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.
I introduced the color concept, to make an interesting visual rhythm throughout the app while relaying urgency information - red for serious, yellow for warning, and green for more positive event alerts.
Another major design point for the app was 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, we had to design not only for text posts, but also posts customized with pictures.
After pinning down the aesthetic of the app from working on the feed view, the rest of the views fell quickly into place UI-wise, bar a couple of new and interesting features that the client wanted to add in.
The old Add New view had an interesting idea going on for the map in the background, and both the client and I agreed that it was worth keeping as a quick and easy way to manipulate location. I updated the floating feed to mimic how the post would look when it was published, to maintain the flow of the app as the user went through.
For this page, I introduced a discussion card that would slide out when a user selected an individual event. Here, all discussion-related comments and picutres would exist. The client and I tossed around many ideas about linking between pages, but we decided ultimately that it would be too complicated of a maneuver for the final design.
Community voting on the comments was a big thing that the client wanted, and I wrested a lot between different layouts of where exactly to place the upvote button. I eventually opted for the right-hand edge, in a place that would not conflict with the other visual elements of the user icon, the name, and the comment content itself.
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!
☞ What I Learned:
I worked with Sketch a ton for this project, and figured out how to use all the fancy tools, like slices. 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. I learned which sizes were most standard for iPhone layouts, which layout features were more easy or difficult to implement, and
☞ What I Would Do Differently Next Time:
We started this project a little later than I would have liked, so the design process for this logo looked like 5 long days of intense and constant iteration. In the end, while I am extremely satisfied with the branding work that was put out, I would have loved to create a couple more items using our branding language: nametags, cups, shirts, and posters. If we had started in a more timely manner, we would have benn able to get more of these nice-to-haves out - but it's good to know that smart prioritizing and efficient workmanship let us get high-quality necessary deliverables out right on time.
The app, with my redesign, is currently live! Get it on the Apple Store here.