UX design, ui design, ui development

MySky

A creative development project to reimagine and personalize how users check the weather.

Role

Designer, Developer

Skills

Visual Design, User Research, Web Development

Timeline

March - April 2023 (1 month)

Tools

Figma, VSCode, Github, Procreate

introduction

Background

During my semester abroad at Seoul National University, I designed and developed an app to reimagine the way users check the weather.

As the sole designer and developer on a tight 3 week deadline, I worked in rapid iterations to evaluate what users find mundane or lacking about the current experience, and to explore how visuals work to spark joy.

The mobile app prototype represents the full design, while the live website represents the minimum viable product. I designed the app from zero to one and created custom illustrations and icons to curate a visual language.

The Problem

As an American with asthma studying abroad in Seoul, I was surprised to learn the importance of checking the air quality index daily due to higher pollution levels in East Asia. On particularly polluted days, wearing a particle filtering mask is essential, and during polluted rain, I was warned that an umbrella or hat is needed to prevent potential hair damage.

Regardless of where we live, we must consider factors like temperature, forecast, and even air quality to make outfit decisions. An initial survey revealed that, while all participants checked the weather at least once a day and mostly found the information they needed, 70% felt neutral or dissatisfied with the process.

The Mission

This task of checking the weather each morning and making an appropriate decision is the process my app aimed to simplify and personalize. Ultimately the goal of my design was to make the process of checking the weather more efficient and joyful for users.

User Research

Understanding Users’ Goals and Emotions

In a digital survey, 10 people were asked how often and why they check the weather, what metrics they look for, whether they are able to find necessary information, and their feelings about the process.

The results showed that all participants check the weather each day in order to decide what to wear and/or to plan for outdoor activities. While everyone indicated they were able to find the relevant information in their weather app of choice, 50% felt neutral about the process of checking the weather while 20% felt it could be more engaging or more reliable.

Why Do Users Feel Neutral?

After understanding users’ goals and feelings in qualitative surveys, I conducted four interviews to better understand the context in which users check the weather and why so many feel completely neutral about their app of choice:

“It’s the first app I open in the morning.”

“I just check for red flags, like rain or heat.”

“I just need to know what to wear and if it’s tennis weather.”

“I don’t really care about checking the weather, I just look at the widget on my home screen and forecast if I plan to be outside.”

“I don’t know if I would download a separate weather app. Maybe if it was a lot cuter.”

Research Takeaways

Half of users don’t feel positively or negatively about the weather app. It’s simply an efficient way to get necessary information.
Participants had varying definitions of hot and cold, and different recurring goals of checking the weather depending on their interests (eg. tennis, tanning, gardening)
The current process of checking the weather is relatively painless, especially when simplified into a visual widget.
Users mostly check the temperature and rain forecast to decide what to wear and whether they can spend time outside.
Some users were frustrated at unreliable weather predictions, which are a result of meteorologist forecasts out of our control.

With these findings in mind, I decided to focus on sparking joy through a simplified visual widget that presents a personalized verdict on the home screen, emphasizing key details and clothing recommendations that are customizable to each account.

While this visual works to deliver essential, tailored information at a glance, the app would have to make additional weather details easily accessible as well.

Design

Planning Process

1. Brainstorm

Based on research, rapidly brainstormed all kinds of features that would simplify the weather-checking process.

2. Select

Narrowed down to features that worked best, and workshopped what the home screen’s personalized verdict would look like.

3. Refine

Considered secondary user goals such as customizing ideal conditions and accessing detailed weather information.

4. Site Map

Sketching

Based on this sitemap, I created some digital sketches to visualize the app's look and structure, emphasizing a clean design with a prominent personalized weather verdict.

As I struggled to find available weather and outfit graphics to use on the home page, I decided to draw them myself to fit the niche requirements and craft a unique aesthetic.

I presented this design draft to my peers and instructors, walking through how I envisioned the users would interact with the app. I was looking for feedback on the app's navigation, visual design, and overall usability, and these were some of the key critiques I received:

Unclear Navigation

"It's not intuitive to click on the character to access the profile, or the weather icon to access details."

Feature Suggestion

"Some users may benefit from a map interface."

Color Encoding

"Why were these colors chosen, and could they be used more intentionally?"

Wireframe

I addressed most of the feedback received on my rough draft in this iteration. Navigation links were added to clarify access to the profile and weather details pages, and a map interface was created for users who prefer visual representations.

Color Encoding

I also developed a system of color encoding, to be used both in the sliding selectors on the settings page and to generate a weather-specific background gradient.

Final Evaluation

"It would be nice to allow the flexibility to modify or add locations"

"The possible customization interactions on the profile page are difficult to understand"

"How would users explore additional weather details within the app, such as weekly forecasts?"

Prototyping

Figma Prototype

This last round of feedback helped me build this final interactive prototype.

Home: The app's main screen displays the essential information of location, time, temperature, and forecast description in a single view. It offers an outfit recommendation based on today’s weather conditions, and displays dynamic gradient backgrounds that change based on current weather conditions.
Weather: For users seeking additional weather details such as humidity and wind speed, there is a dedicated screen that offers comprehensive weather information.
Settings: The settings screen allows users to customize their location and ideal weather conditions beyond the default settings.
Map: The map screen provides a visual representation of the temperature, air quality, or rainfall patterns in the user's area.

Implementation

Functionality & Assets

As the final part of this project, I had a few days to implement a simplified version of my mobile app as a website. I decided to focus on the visual outfit recommendation, as this was the core feature of my design.

Below is the API logic behind making the site functional and the corresponding illustrations I created.

Final Website

Visit website

You can view the repository for this project here.

I used the OpenWeatherMap API to access weather data for the user's current location, and GitHub for versions and deployment.

Reflection

What I Learned

This social, iterative design process allowed me to incorporate valuable feedback from my peers and mentors to refine the interface. This practiced attention to the details of design choices was a reminder that product design is not only about functionality but also about visual appeal.

Translating my design into a web page also allowed me to merge my interests in art and coding, and I especially enjoyed the puzzle of implementing the outfit recommendation feature.

Overall, this project was great practice in writing pure HTML/CSS, introduced me to new concepts such as mobile first design and web fonts, and inspired me to design for joy and playful expression.