Design Process

Click here to skip and view final design

Research

Competitive Analysis

I looked at two existing weather apps and observed some strengths and weaknesses of their designs.

Strengths:

• Include options to expand to more detailed weather forecast

• Icons are legible and identifiable (also accompanied by text)

• Actions are consistent when going from one page to the next

Weaknesses:

• Lack of visual hierarchy

• There is no view option for more than two locations at once

• Use of color is inconsistent along different pages

Interviews

I interviewed 5 frequent business travelers to get their thoughts and insights regarding their experiences traveling to different locations and tracking weather.

Insights:

• Severe weather change is important to be aware of in advance when planning for a trip

• Some trips require different apparel based on weather change

• “I use Google calendar to visualize my trips and I wish I could also see the forecast of these locations so I know how to plan in advance”

User Flows

Low-Fidelity Wireframes

First Iteration Prototype

User Testing

I have conducted user testing with 7 different users.

Insights:

• It was hard to understand that the colors on the calendar are associated with the upcoming forecast

• Weekly and daily forecast information pages include unnecessary details

• Users prefer adding trip location first and then adding dates on calendar after

Iterations Based on User Testing

My Trips and Calendar Pages

My initial thought was to emphasize the use of color and its association to weather in order to represent upcoming forecast on the calendar. This became problematic once I thought of severe cases, like Seattle, where weather can be inconsistent. I decided to take a different route and instead illustrate the forecasts with icons and the trips with customized colors chosen by the user.

After user testing, I also found users are also interested in seeing the local weather of the current location they are in. I added current location to the My Trips page.

Initial iteration:

Extendable Weather Information Hierarchy

Due to the lack of hierarchy I noticed on other weather apps, I made the decision to create extendable layers of information. My first iteration included a lot of information at once which made the information hard to understand. For my final iteration, I made changes so the UI looks cleaner with better visual hierarchy.

Initial iteration:

Final Design

Reflection

Since this was an individual project, I got to work on the entire design process from the beginning to finish and rely on potential users for feedback throughout the process. It was exciting to create a user interface from scratch without any design restrictions and existing branding.

During the iteration phase, I focused mostly on the information hierarchy since I noticed it was lacking in other weather apps. As a designer, it was important for me that the information displayed is clear to understand with no confusion and that navigating around the app is simple and intuitive.

In addition, I enjoyed working on the micro-interactions in order to create delightful interactions for the users. During the process, I encountered some issues working in Invision Studio for creating these interactions. Therefore, next time I will explore other tools to create screen prototypes.