Dark Sky Redesign

UI / UX Design
WINTER 2020
Task:

Improve the user interface and experience for an existing weather app. Highlight opportunities to enhance the app within a competitive market.

My Response:

A redesign that focuses on easily interpretable data, customized notifications, and clear visual language and hierarchy.

Context:

_ 3 weeks
_ Individual Project
_ Interface Design Class

Original Interface

To begin the redesign process I downloaded Dark Sky and performed a heuristic analysis on the current interface.

Usability Heuristic Analysis

After performing a 10 step heuristic review of Dark Sky's current interface, I decided to focus on three areas that showed the most room for improvement.

RECOGNITION RATHER THAN RECALL

Standard: Minimize user's memory load.

Analysis: The many different forms of data visualization require a a high amount of cognitive effort and lack consistency across the screens.

USER CONTROL AND FREEDOM

Standard: People should be able to navigate freely, make and act upon choices, and have the option to redo and undo actions.

Analysis: Toggle bars allow for quick changes in state but further user freedom could be implemented. Users do not have control over what data is shown, the hierarchy, or how it applies to the information they want to know.

AESTHETIC AND MINIMALISTIC DESIGN

Standard: Only show what is absolutely necessary to communicate information clearly.

Analysis: Each screen has large amounts of information competing with one another. Visual hierarchy is present, but not immediately recognizable. Notification settings are mostly text based which add to screen clutter and cognitive load.

Competitor Analysis

Next, I reviewed other weather apps in order to achieve two important tasks for my redesign:

1. Identify opportunities for Dark Sky to thrive in a competitive market.
2. Understand the overarching user goals across weather apps in general.

Hello Weather

Hello Weather utilized a more minimalistic design with a clear color palette. Their use of icons provided immediate recognition of weather forecast, although my understanding was slightly muddled by the nearby colors. Similar to Dark Sky, the visual hierarchy could be improved as well as the reduction of unnecessary information.

Wunderground

Wunderground focused on hyper local weather data, but their charts and graphs were not immediately interpretable. There was no clear color palette and a lot of information felt lost in the background.

User Goals and Task Flows

Next, I brainstormed overarching user goals and outlined potential directions for my redesign through two design proposals.

Critique

During class critique I gained valuable insight on the direction of both proposals.

Proposal 1: Customized Notifications

My peers were excited about the idea for tailoring weather notifications to their specific needs. They acknowledged that this feature would be a good improvement without straying too far from the original purpose of Dark Sky.

Proposal 2: Hyperlocal Interaction

My peers felt this idea would be extremely useful in situations involving extreme or unsafe weather. The liked the idea of the social interaction, but expressed concern over what would happen when "nothing interesting was happening with the weather".

Refinement

I moved forward with Proposal 1: Customized Notifications because it aligned with the current goals of Dark Sky users while simultaneously showing potential for an improved and bespoke experience.

Visual Ideation

Next, I began ideating various styles and routes for the customized notification feature. I maintained the original app's dark theme interface, while exploring new color palettes to create a more energetic atmosphere and to invite user interaction.

It was important to consider the best possible way for users to change their "comfort zone". The slide bars needed to be conducive to touch interaction and allow for fine tuning of numbers (eg. changing 55 degrees to 57 degrees).

Click to view full size

Final Design (Currently in Progress)

My redesign of Dark Sky focuses on providing clear weather data with minimal distraction. The original interface felt complicated. My redesign retains the quality of information, yet simplifies it for quick interpretation.

I added the "Comfort Zone" feature to allow users to self reflect on what weather conditions they are prepared for and to enable notifications when weather is predicted outside of their specified zone. Users can also choose which weather data is relevant to their needs.


SELF AND WORLD ANALYSIS

Visual Guidelines


I carried Dark Sky's orignial dark theme and blue accent forward through my redesign. I changed the hue of blue to contrast more vibrantly with the black background. I also used a white stroke for weather icons to allow for easy recognition and less distraction.

PROBLEMATIC

Nonhuman beings may not be readily noticeable, but their contributions to each other and our world are vast. They may be unseen, unheard, or unmoving to the human eye, but they are creating and sustaining symbiotic relationships within a plurality of species. And yet, we don’t often acknowledge these nonhumans when we think about collaborative problem solving, design and resilience within the world.

This project is still in progress!
Stay tuned for an animated demo.

Echo

Interaction Design
FALL 2019
Task:
Create a working prototype of a piece of furniture that senses and responds to human interaction and present a product video.
Response:
The Echo bench plays a previously recorded message when someone sits down and offers an opportunity to record a new message to be played for the next person.
My Contributions:
Ideation, physical computing research, basic Arduino coding and wiring, construction and aesthetics, illustrations, After Effects video editing, and writing.
Team:
_ Verli Chen
_ Kevin Oh
Context:
_ 8 weeks
_ Team Project
_ Physical Computing Class
FINDING AND DEFINING THE SITUATION
We were first tasked to explore situations and spaces that could provide an intriguing opportunity for a responsive piece of furniture.

When brainstorming situations, I asked my fellow teammates what values they'd like to express in our project. We synthesized our interests into two themes:

1. Collaborative / Shared Experience
2. Subversive Design

Next, we utilized these themes to brainstorm a variety of specific situations and focused on three spaces.

1. Modern Stairwell
2. Outdoor Walkway
3. Shared Workplace
IDEATION
1. Speak Up Stool: Placed around a table within a collaborative workplace. The stool would rise or lower depending on the audio levels recorded from the sitter.

2. Quirky Pillow: Placed within a public workplace/relaxation stairwell, the Quirky Pillow would act like a "hot potato" and wiggle and squeak depending on audio levels recorded from a group of people.

3. Messenger Bench: Placed within a public outdoor space, the messenger bench would allow people to leave an anonymous message for the next sitter to hear.
REFINEMENT
As a team, we decided to pursue the messenger bench idea within an outdoor walkway space. We believed this idea offered the most potential to utilize our design themes, challenge ourselves within the scope of our time constraints, and offer an uncommon and engaging platform for human-computer interaction.


CODING, TROUBLESHOOTING, AND BUILDING
Pulling from various open-source resources online, we compiled an effective code and adjusted variables to suit our project's needs.

When we ran into coding obstacles, such as setting the internal timing for the 10 second LED, we would isolate sections of code and inspect each line until the functions were working independently. Then, we would reintegrate the code and move forward.

We created our bench from an IKEA table and restructured it to fit our computing hardware. We used a vinyl printer for aesthetic branding and typography.
FINAL DESIGN
The Echo Bench would be placed near a public walkway so that people could sit, reflect, and leave their message in a serendipitous moment. The interaction provides an opportunity for people to reach out to the world; to express concerns and hope within the safety of anonymity. People can express themself freely; whether that be voice, song, or other forms of audio. We defined this experience as "Echo: a messenger who reflects and reverberates the introspective expressions of humanity."
MOVING FORWARD
In the coming months we plan to coordinate alongside UW faculty to install Echo in a public space on campus. We hope to gain insight on how the experience is perceived, how it can be improved, and how to navigate the potential for both positive and negative impact inherent in anonymous messaging
Echo
INTERACTION DESIGN
FALL 2019
Task
Create a working prototype of a piece of furniture that senses and responds to human interaction and present a product video.
Response
The Echo bench plays a previously recorded message when someone sits down and offers an opportunity to record a new message to be played for the next person.
Team
_ Verli Chen
_ Kevin Oh
My Contributions
Ideation, physical computing research, basic Arduino coding and wiring, construction and aesthetics, illustrations, After Effects video editing, and writing.
Context
_ 8 weeks
_ Team Project
_ Physical Computing Class
Defining the Situation
We were first tasked to explore situations and spaces that could provide an intriguing opportunity for a responsive piece of furniture.

When brainstorming situations, I asked my fellow teammates what values they'd like to express in our project. We synthesized our interests into two themes:

1. Collaborative / Shared Experience
2. Subversive Design

Next, we utilized these themes to brainstorm a variety of specific situations and focused on three spaces.

1. Modern Stairwell
2. Outdoor Walkway
3. Shared Workplace
Ideation
1. Speak Up Stool: Placed around a table within a collaborative workplace. The stool would rise or lower depending on the audio levels recorded from the sitter.

2. Quirky Pillow: Placed within a public workplace/relaxation stairwell, the Quirky Pillow would act like a "hot potato" and wiggle and squeak depending on audio levels recorded from a group of people.

3. Messenger Bench: Placed within a public outdoor space, the messenger bench would allow people to leave an anonymous message for the next sitter to hear.
Refinement
As a team, we decided to pursue the messenger bench idea within an outdoor walkway space. We believed this idea offered the most potential to utilize our design themes, challenge ourselves within the scope of our time constraints, and offer an uncommon and engaging platform for human-computer interaction.
CODING, TROUBLESHOOTING, AND BUILDING
Pulling from various open-source resources online, we compiled an effective code and adjusted variables to suit our project's needs.

When we ran into coding obstacles, such as setting the internal timing for the 10 second LED, we would isolate sections of code and inspect each line until the functions were working independently. Then, we would reintegrate the code and move forward.

We created our bench from an IKEA table and restructured it to fit our computing hardware. We used a vinyl printer for aesthetic branding and typography.
FINAL DESIGN
The Echo Bench would be placed near a public walkway so that people could sit, reflect, and leave their message in a serendipitous moment. The interaction provides an opportunity for people to reach out to the world; to express concerns and hope within the safety of anonymity. People can express themself freely; whether that be voice, song, or other forms of audio. We defined this experience as "Echo: a messenger who reflects and reverberates the introspective expressions of humanity."
MOVING FORWARD
In the coming months we plan to coordinate alongside UW faculty to install Echo in a public space on campus. We hope to gain insight on how the experience is perceived, how it can be improved, and how to navigate the potential for both positive and negative impact inherent in anonymous messaging.