Background
Timeline: 2 weeks (2021)
My role: UX/UI Designer & Researcher
Tools: Figma
For this self-driven case study, I wanted to look into quickly-viewed, contained apps that are a bit more simple than others. My main goal was to familiarize myself with app best practices and Figma’s mobile prototyping features as, at the time, most of the work I had done was web based and I wanted to expand my knowledge.
After some quick research, I settled on a weather app case study, with the final goal to create my own. I chose weather as, across all the apps I studied, there were hundreds of little apps and widgets to view what temperature it’ll be, precipitation, etc. Studying all the different design choices from app to app and site to site, it was fascinating seeing how other designers hd tackled the same question with their own solutions. I found that I would need to discover what works best when designing with a large set of data since, despite the contained nature of weather apps, they dealt with a lot of information. In total, this study was completed in about a week, including research, quick wireframes, and creating interactive Figma prototypes.
Research
There are many existing weather apps, so it was easy to find inspiration. I started with some quick user interviews, asking which apps they usually refer to and on which platform. From the small group of interviews I conducted (about 10), I learned that users prefer using their default weather app on mobile, but it varied a bit more on web, ranging from Google’s weather summary, the weather channel, and for the more meteorologist-minded: Weather underground. The ease of use from default mobile apps was the solution of what to use when the user only had their phone, but on desktop, it ranged from a quick check before going out, to planning when to best leave, how to dress, and even tangentially related topics like what the pollen count would be and air quality. With this in mind, I consolidated the info and started work on the app.
Weather Underground, the Weather Channel, Apple’s weather app, and Carrot weather were my main inspirations, although I checked out nearly every one I could get my phone to download. Each one had features other than just seeing the weather, such as air quality and pollen maps, so those were a must in my own app study.
The main information was always the current weather, location, and then a schedule of what the weather will be. This hierarchy persisted across a large variety of weather apps and websites, so it was a clear starting place. I also wanted to include as much of a nuanced breakdown as possible, keeping in mind accessibility for those who might be traveling or just going outside with various conditions that weather or air quality might effect. Saving multiple locations in addition to the user’s main one was a feature that I saw across a few apps, and one I saw as being very useful as someone with a lot of family and friends in different regions than my own. I sketched out some very quick wireframes to get a loose idea of the layout and content before diving into prototypes with Figma.
Prototypes
Using the information I found during the research stages, I decided to start off with a quick customization screen. The user would open the app and select their location. The app would ideally be able to identify the user’s location from their device, but I included the selector in case they wanted to switch or if they didn’t have location permissions turned on.
With their quick setup finished, the user would be immediately taken to their weather page. They could quickly view the temperature, precipitation, and more on a screen that visually adapts depending on both the current weather condition and time of day. If the user scrolls down a bit, they can also view the rest of the day’s weather predictions as well as dig into the details of other topics the user might be curious about such as air quality, pollen, and more. I added a section for users to view into every alternative weather condition I could find across all the other apps, for an all-in-one experience. The settings also allows users to customize their experience, as well as add new saved locations.
Despite being a very quick case study, I learned a lot about mobile best practices, and got to flex my muscles for Figma, user interviews, and research, especially on the mobile side of things. It was a fun little study.
