Creating Brella, My First iOS App
After completing my first iOS project through CUAppDev’s Developer Training course, and then making my first case study in their Intro to Digital Product Design class, I was finally ready to make my own iOS app. My friend, Austin Astorga, and I were considering building a weather application that told you what to wear based on the weather, the idea that soon blossomed into Brella – Your Personalized Weather Forecast (App Store link). But during that intro design class, Weekly UI 6 just so happened to be a weather app. Thus started the initial development of the app.
The concept for the UI came fairly quickly. The app should have a “home” view that displays the personal forecast, along with the most important temperature data (current temperature, high, low). With an upward flick, a more detailed view would provide the nitty gritty of the forecast, along with buttons like settings and location. But how exactly to organize all this data remained the big question.
Home View
In the first revision, each of the high and low temperature indicators were widened, shrunk, and moved higher and lower respectively. The change gives better focus to the numbers themselves, while providing an extra visual cue to identify the number as high or low. I also brought the lower section inward and thickened font sizes for regular and small text, to subtly group the two views together and increase legibility. Lastly, the arrow direction was flipped, because the user swipes up to see the detail view, not down. Several of these suggestions can be credited to a wonderful Apple Designer at WWDC, which Austin went to as a WWDC ’16 Scholar.
After the first revision, the design remained mostly unchanged. The background would be a color gradient based on the current temperature, and a long press invokes the share menu. However, the Detail View proved to require a few more iterations.
Detail View
I envisioned the lower Home View data transitioning with a swipe to the Detail View, becoming the top of the view. Then, miscellanous weather information like the wind and humidty would appear below, followed by the daily forecast for the next few days, borrowing from Dark Sky’s ingenious daily forecast design.
The view wasn’t terribly helpful for the day’s weather, so a basic hourly forecast was squeezed next to miscellaneous data. Centered text had to be changed because it was not easy to scan through quickly, but it took another iteration to try justifying text on both sides. Also, the groupings of each section could be spaced better with each other, especially the bottom daily forecast. I began to experiment with transparency too, leaving titles and headers opaque and data slightly more transparent. The idea to animate the background based on wind or precipitation (the faint horizontal lines) was scrapped.
Nicole Calace, one of my lecturers, suggested giving the screen more breathing room and leaving space on all four sides between each section. As you can see, this change makes a massive difference to the look of the app.
Below, the leftmost screenshot was my last Sketch design before starting development. Interestingly, I was back to centering the miscellaneous weather data, but with text crucially justified to each size. The hourly forecast was expanded to become a horizontal section with a better layout for each hour. I also added a share button, letting the location text serve as its own button.
But my design posed challenges in Xcode. How would I be able to transition data from the Home View to the Detail View? I was already using a paged UIScrollView to enable the two views, how could I reasonably fit all of this data into an 4" screen? Compromise! Well, thoughtful compromise, of course. The Home View data I was keen to include was really just redundant, as users would flick past the information, only to see it again. Removing it, along with the chevron, left a lot of breathing room and flexibilty to layout the data on any device. I also added a white transparent background to the location button, better identifying the UI as tappable.
As Austin and I beta tested the app and collected user input, I continued tweaking the design. By popular request, the hourly forecast, once a static UICollectionView that displayed the weather every 3 or 4 hours, became a swipable 12 hour overview of the day. I later added an nudge animation for new users to indicate the view was interactive. To alleviate confusion about the feels like and actual temperature preference, “Feels Like” was added to middle view and the setting was removed entirely, a wise simplification.
Settings
But what about the rest of the app!? During the inital design iteration process before coding, I didn’t give any thought either the location or settings modal view controllers. This led to on-the-fly designing and testing in the Xcode simulator, and the before and after is consequently very striking.
Add New Item
A helpful suggestion was to add a sort of auto-complete for item names, to make inputting items easier, a major concern and weakness of the app early on. I made an Options button for the keyboard, which revealed a UIPickerView with several potential items; this would change all the ensuing fields to the selected item’s values. I knew from the start that the Options button was a workaround at best, so I made a new section above the data fields with the UIPickerView just begging to be interacted with.
Then, the big revelation…color. An app with such a bold and vibrant background going to black and white in settings!? No way, said Austin. Adding the temperature gradient and making the navigation bar transparent brought a massive breath of fresh air to the view, solidifying our app’s design everywhere. Additionally, to make temperature input vastly easier (thank you again, Austin), new temperature phrases were added to the UIPickerView instead of several columns of numbers.
Main Settings View
Once again, you’ll note how the color addition is a much needed makeover to the app. A simple X was made to replace the Done button to dismiss all modal view controllers. As you’ll notice, the Preferences section has been changed quite often.
Icon Design
Figuring out both the name and icon design also took some time (I tried so many weather puns). We knew one of the best features of the app would be a notification telling you to bring an umbrella in the morning, so the name Brella came soon after. We then set out to imagine an icon involving weather and umbrellas, as well as our bold, vibrant look.
While designing weather icons for each type of weather in the app, I came up with a wind design I really liked: three lines curling back in various directions. I realized there was a ‘b’ hiding in there, and thought the rotated graphic could symbolize a ‘b’, wind, rain falling down, and even an umbrella handle. It served as a placeholder for a while, but it ultimately seemed a bit too abstract. Luckily, it works great for a launch image and a header for a Medium post.
Austin worked with the umbrella idea, using the handle as a ‘b’ and making a simple yet pleasant umbrella around it. I told him as nicely as I could that the “thing” on the top right had to go. Our go-to gradient was just not doing the job, so a brighter solid color was settled on. After trimming down the umbrella a bit and centering the graphic as best as possible, we got our final product.
Conclusion
After months of hard work, countless iterations, and constant badgering of friends and family for comments and criticism, Brella’s unique design and voice found its way throughout the app. I can not thank Nicole Calace, Andrew Aquino, Emily Morrison, and, of course, my fellow developer Austin, from helping me take this from Weekly UI 6 in Sketch to Project Icicle to TestFlight builds (and eventually the App Store!). Thanks for reading, and don’t forget to check out your personalized weather forecast!
Update, November 2016: Brella is now available!
