First UX Project: Redesigning an iOS Weather App

toy in rain coat standing in front of a rainy window

The Discovery

I have a dog, which means I take lots of walks, so I use the AccuWeather app on my iPhone to see if I should prepare to get wet, have a heat stroke, throw on layers, shovel snow, or enjoy a nice walk.

In the 10.5.3 version of AccuWeather, I could quickly see the temperature and precipitation, but it took me a few months to discover it has a weather radar. This discovery was a happy accident. Sometimes my thumb has a mind of its own and swipes in directions I don’t intend, and when my thumb swiped to the right one day, I discovered the radar map. Then, I realized that the icon in the top right-hand corner is a folded map. Because this icon is unfamiliar, I had simply disregarded it.

AccuWeather version 10.5 home screen with arrow pointing at radar icon

Missing Signifiers, Confusing Designs, and Inconsistencies—Oh My!

This led to me to think about how to redesign AccuWeather’s home screen, which, of course, led to even more aspects I wanted to change. Here are the some of the design problems I discovered:

  • There are no signifiers for horizontal swiping for the radar and add location screens.
  • There is no signifier to indicate that the text “Check MinuteCast” is hypertext that takes you to the minute-by-minute precipitation screen.
  • The home screen contains two icons at the top: folder map and a plus sign. The folded map icon is unfamiliar, so users may not realize it references a map.
  • There is an inconsistency between the radar and add location screens: The radar screen is full screen and contains an arrow to signify that the user can scroll to the right to return to the main screen. The add location screen, however, is layered on top of the main screen.
  • The MinuteCast screen has two buttons that look similar, which causes confusion: The menu button next (which is an orange circle with three white dots) is placed beside the toggle display button (which is a white circle with three orange lines/dots).

After jotting down my own frustrations, I also conducted a small-scale usability test to see what others (a.k.a. my partner) found irritating about the app. This test revealed one more confusing design:

  • The home screen contains a button with three dots in the lower right-hand corner, which operates as a menu feature, displaying the various options the user has (e.g., settings, map, report a condition). Dots often indicate the number of slides in a carousal layout, and typically, menu buttons contain a circle with three lines, not three dots. Also, this menu button is hidden in the bottom corner, so the user is not drawn to click on it.

Sketching, Researching, and Planning Phase

Taking these inconsistencies, I put pencil to paper and started sketching some ideas I had to redesign the home screen. First, I wanted to move the high and low forecast for the day inside the circle icon that contains the current temperature information. That way users have all the information they need in the same area, and they won’t have to search for it, move their eyes much, or even have to think (borrowing Steve Krug’s phrasing).

For the “Check MinuteCast” text, I decided to add an icon to further indicate that users can click on the text to get the minute-by-minute precipitation forecast. I toyed around with various icon symbols to use, including a rain cloud or the raindrop symbol currently used on the MinuteCast screen. Ultimately, I decided that I didn’t want to have an image that had the same problem as the text—no one knows you can click it—so I opted for a white circle with an arrow. It’s a classic design that leave little room for error.

sketches of possible redesigns for AccuWeather app

I also made some conceptual model sketches for radar map icons (e.g., globe, radar, location), and I played around with the idea of moving the menu button (the circle with three dots) to the bottom center of the main screen or replacing the top two icons (map and plus sign) with a menu button only. Eventually, I decided to only include a menu button (a circle with three horizontal lines). I figure being able to swipe and click the menu button to access the radar and add location was more than enough.

sketches of possible redesigns for AccuWeather app

To Horizontal Scroll or Not to Horizontal Scroll

I also researched design ideas for horizontal scrolling, and I quickly discovered that people either love or hate it.

People on Team Sideswipe (i.e., lovers of swiping horizontally) thought that maps are a great reason to use horizontal swiping in mobiles.

The opponents of Team Sideswipe pointed out that people know to scroll vertically but not horizontally, so designers need to provide a signifier when using horizontal scrolling. One simple method is to include an image or text box that is only partially shown (with the rest remaining off screen), which signals to the users to scroll or swipe horizontally. A good design also includes an indication of the end (e.g., a white semicircle that displays for a few seconds when users hit the end).

But adding a partially loaded image was not a good option in this case. I didn’t want to lose the simplicity of AccuWeather’s home screen (i.e., a background depicting the current weather condition, such as sun and blue skies for a sunny day, and the temperature and precipitation information) just for the sake of adding signifiers for horizontal scrolling.  Also, because the radar map constantly loads to display the latest precipitation, I thought it is best kept on it on a separate screen.

So I found a happy medium: Add arrow indicators but have them slowly fade away after a few seconds. Users will realize that they can swipe to the left and right, but the arrows won’t block the simple yet creative design.

This led to my next debate. How long should I leave the arrows? Three seconds? Five seconds? What if the user opens the app while doing something else and doesn’t look at it for 10 seconds? Debates like this illustrate the importance of usability testing, which would help me determine how useful or problematic this design is. For now, I opted to leave the arrows up for three seconds.

Sketch vs. Wireframe vs. Prototype

After sketching several ideas, I had a game plan:

  • Use arrow indicators for horizontal swiping and the “Check MinuteCast” hyperlink text
  • Remove all icons from the home screen and replace them with a recognizable menu button, which contains settings, add location, view map, MinuteCast, upload video, share, and report a condition

final sketch of the home screen and menu

I was ready to move past the sketching phase, but that is when I realized that I wasn’t clear on the difference between a sketch, wireframe, and prototype. Rather than use these terms interchangeably, I decided it was time to distinguish between them.

Sketching is when you put the pen (or pencil) to paper to figure out possible directions your design could take. With sketching, designers can try out multiple ideas; consider a range of problems and possible solutions; and communicate their design to others, including fellow team members and clients. Sketching often gets you past the endless thinking and daydreaming into the creative possibilities and realities of what you could design.

Therefore, sketching is a crucial part of UX design. As I learned from Udacity’s Intro to the Design of Everyday Things course (based on the first two chapters of Don Norman’s The Design of Everyday Things), “sketching is cheap, and engineering is expensive.”

A wireframe is a high-level sketch. It is also two dimensional and operates as a placeholder for basic information in the actual frame of a device. With a wireframe, you are redefining the concept of how your design will work within the confines of the device itself, so you have to think about placement and sizing.

According to Usability.gov,

A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics. Wireframes also help establish relationships between a website’s various templates.

Flows (i.e., sequences of wireframes) create a user interface story and really map out how the design will work. With flows, you can sketch out your design narrative and see how well the story moves from one frame to the next.

A prototype is an interactive representation of the final product. It is more detailed than the wireframe and includes graphics and text. Low-fidelity prototypes are often referred to as “clickable” wireframes. Prototypes allow users to test a fully functional working model of a final product.

Prototyping Tools: Photoshop and Marvel App

After I had a wireframe of my redesigned home screen, I was ready to make my first prototype. I researched various tools for creating prototypes, and I found a few free options, which was perfect for my first UX project. I decided to try Marvel.

Despite the confusing name—searching for tutorials resulted in lots of Iron Man, Spider-Man, and X-Men videos—Marvel was easy to work with. The only drawback is that you can only have two projects with the free plan, but until I have three impressive designs, this won’t be an issue.

To create my revised iOS weather app prototype, I took screen shots of AccuWeather’s home screen, menu, radar map, and add location. I used Photoshop to revise these images and create my sketched revisions. Then, I uploaded the revised images into Marvel, and I added transitions to make my sketch come to life.

I decided to make the color scheme more consistent and less jarring. The 10.5 version contained orange and blue icons and buttons, but in my redesign, I changed some of the orange icons and buttons to blue, making screens more consistent. I used orange as the accent color for icons and buttons that need extra pop because the blue would not be enough of a contrast against a dark or busy background (e.g., the radar screen).

I was not sure how to go about making my arrow indicators disappear after three seconds. At first, I thought I would need to make a GIF, but after reading/watching a few tutorials, I realized I could accomplish the same task by using Marvel’s timer function. Using Photoshop, I made a home screen with arrow indicators and one without. Then, I uploaded the two images and set the timer for the image with the arrow indicators for three seconds before it switched to the image without arrow indicators.

animated home screen with arrow indicators that disappear after 3 seconds

For my menu button, I decided to add a pop-up menu for two reasons. First and most important, it is a stylish, fun, and efficient design choice. The pop-up screen allows users to easily return to the home screen, which remains as a blurry visual behind the pop-up screen, by simply touching it. Second, I wanted to try out more options with the Marvel app.

To create a pop-up effect, I used the layer function. After resizing my menu image to be smaller than the home screen and adding a transparent background, I uploaded the revised image to Marvel. I added this image as a layer on the home screen and positioned it where I wanted. The layer function also allowed me to adjust the background transparency, which I opted to make 80%.

More Redesigns, More Problems

I started off wanting to simply change a few features on the home screen of the AccuWeather app, but then I realized that to make my prototype functional, all the buttons on the home screen needed to work. Having a broken link is a surefire way to frustrate users!

So I decided to create some quick sketches for the other screens. My intention was always to do a simple redesign of the home screen, not the entire app or even part of it. I just needed to take a few screen shots of the actual app and upload them to Marvel, right? Wrong!

I quickly realized that making one change has a cascading effect and may complicate other designs, so my simple project became more involved. For example, by changing the color of some buttons and icons from orange to blue, I had to think about if I needed to make this color change universally for the other screens. So I started sketching again and simplified other aspects of my prototype by removing unnecessary indicators and buttons and being consistent with what colors and icon designs I used.

By changing the menu button, I created another complication. The toggle display button on the MinuteCast screen was similar to my redesigned menu button: Both were buttons with three horizontal lines. I also realized that I had no idea that the toggle button on the MinuteCast screens changed the display from list to clock dial. In fact, icons do not enhance usability. To avoid having similar icon buttons and confusing the user, I replaced the toggle list and clock dial icons with simple text “LIST” and “DIAL.”

                            AccuWeather 10.5 Icons                                                   My Resdesigned Icons

In adding the other screens to my prototype, I discovered another inconsistency with the original design. The radar map fills the screen when users swipe right, but the add location screen only partially covers the home screen when users swipe left, and the only part of the home screen that is visible is the + sign (the add location icon—how meta!). So the add location screen was inconsistent (not filling the entire screen) and what was left of the home screen was redundant.

In my redesign, both the radar and add location displays completely filled the screen, which removed this issue of inconsistency and redundancy. I figured that if users realize they can swipe to go left and right, then they will also discover they can swipe the opposite direction to return to the previous screen.

Again, usability testing would determine if this simplified design cost any functionally or if my assumptions were incorrect. Feedback is crucial because what you think looks good on paper may not be the best approach.

Arturo again operated as my user and I had him test my prototype.

He was pleased with the changes, so I am moving in a positive direction. Of course, in the future, I will need to have a wider range of users test my prototype and take their comments into consideration in future iterations. Rinse and repeat.

Big Brother … I Mean … AccuWeather, Are You Listening?

One week later, I was checking the weather while putting on shoes for my daily walk with my dog. When I opened AccuWeather, I was surprised to see they had completely redesigned their app (version 10.6.0). At first, I checked the house for bugs. Did they really hear me? Then, I realized that I am not that important of a designer—not yet—so I took my barking dog on a walk and checked out all the changes the second I got back.

AccuWeather 10.6 redesigned home screen

The AccuWeather app design team also realized that the home screen needed work. They agreed that the map icon was confusing because they changed it to a white button with the text “RADAR,” which is less ambiguous.

AccuWeather also wanted users to be able to easily access the hourly and daily forecast details. (Previously, users had to scroll vertically, which did have an arrow indicator, to see this information.) Rather than using symbols, the hourly and daily forecasts are white buttons with clear text “HOURLY” AND “DAILY”—just like the radar button.

Including these three buttons at the top of the home screen is a good design change because beside viewing the current temperature, most users want quick access to hourly and daily forecasts and the radar. Thus, this change is one I would incorporate in a future iteration of my own redesign.

Similar to my redesign, AccuWeather did move the high/low temperatures to be next to the current and real-feel temperatures. They also rearranged the positioning of the real-feel temperature, placing it underneath the current temperature. This reordering is less cluttered and confusing, so I would also incorporate this change in the next iteration.

Suggestions for AccuWeather 10.7

However, not all the changes in the 10.6 version were for the better. There is still no indication that you can scroll horizontally for the radar and add location screens. Moreover, they complicated the horizontal scrolling feature in an attempt to clarify another issue: To indicate that you can check the precipitation and see more details about the current conditions, they added arrows (similar to my redesign), but the two arrows are in the same position my thumb rests for swiping horizontally. When I first tried to swipe left to see the add location screen, I accidentally clicked on one of the arrows instead.

arrows pointing to the poorly placed arrow indicators on the home screen of version 10.6

I also think adding the current conditions takes away from the simple design of the home screen, and I wonder how much users need to quickly access this information. (Yet another case for usability testing!) I assume AccuWeather’s usability testing revealed a need, but I’m curious to see if this change stays in future designs.

In exploring all the new changes, I discovered that you can personalize the current conditions. When I clicked the arrow indicator—the one that is poorly placed—I saw the full list of the current conditions, not just the top four, but I still had no idea that you could rearrange them. So how did I discover that I could personalize this list? Only by reading the What’s New in Version 10.6 section on their website. I would never have discovered this one on accident!

According to AccuWeather, users can “personalize your home screen by choosing the current details that are important to you by tapping the current details section and, in the resulting screen, reordering the list. Swipe back to the home screen to see your favorite current conditions displayed.”

As a good and curious designer, I tried to reorder my list. After several failed attempts to click/hold and move one of the conditions up, I realized that I had to click and hold on the three horizontal lines on the right-hand side of the condition. Did I mention that these lines are light gray against a white cloudy background? Not the ideal color design scheme. (I just hope it changes color for a gray rainy background!) A better design would allow users to click and hold any part of the condition to rearrange it. Then, there would be no need for a barely visible icon!

the full list of the current conditions where you can rearrange the order

I also wish you could delete or remove some of the current conditions. The top four conditions are displayed on the home screen, and try as I might, I can’t find a way to remove any of the conditions I don’t want to see. So I picked three that interested me and the fourth one on the list is sitting there on my home screen whether I like it or not.

Trust Your Design Gut

In the 10.5 version, the text “Check MinuteCast” did not have any indication that you could click on the text to see the precipitation for the next 120 minutes. When the text changed to “Rain in x minutes,” an arrow indicator appeared.

In my redesign, I made this more consistent by adding the arrow indicator for the “Check MinuteCast” text as well. In some of my sketches, I played around with the idea of also changing the text “Check MinuteCast” to “No precipitation for x minutes” because the registered phrase MinuteCast is confusing and unclear. However, because it was a registered phrase of AccuWeather, I left it alone.

Little did I know that I had stumble on to a great redesign idea because in the 10.6 version, AccuWeather changed the text to “No precip for 120 min.” I think this design change was an improvement, and I’m glad that I was already thinking along the same lines as the AccuWeather’s design team. This proves that I should always go with my design gut!

If you want to read about more of the specific version changes, such as the addition of a Mosquito Zika Risk Index, check out the What’s New in Version 10.6 section.

After seeing the changes in AccuWeather 10.6 and realizing my design faux pas of using hamburger navigation (i.e., three stacked lines typically placed in the top corner of a website or app), I made another iteration of my design, which I will discuss in a follow-up post.

Leave a Reply