Tobias Due Munk

Interface Creator

48

8

Temper

*** UPDATE: Check out the animated prototype (video). See more about it at the bottom of this page. ***

*** UPDATE II: new poster presentation. ***

Problem

User need information to decide whether he/she should bike and if yes, what clothes to wear:

  • Wind direction
  • Precipitation and/or Humidity
  • Temperatur
  • Immediate forecast for next 30 min
  • Option for forecast for the rest of the day

User don't need:

  • Locations
  • Big fancy imagery that really doesn't replicate situation outside anyway :) might be difficult to understand

Solution

App shows how weather is in either direction depending on iDevice rotation.

Wind chill effect can include relative wind speed depending on biking direction.

Initial Sketches

Main screen     "You"/the user/"head" is centered in the app (head/person) app showing weather around you. Layout is basically a map of the weather within biking distance - default 10 km (6.2 miles) radius. The map shows hot vs. cold (color gradient background), cloud vs. sun (cloud overlay) and wet vs. dry (precipitation overlay).

Interaction     1) Orientation of device rotates weather map. 2) Drag "head" to either side to show more detail of weather in opposite direction of drag. 3) Drag "you" all way to edge to see even more detail = forecast of entire day.

Discoverability      As you might have noticed, show should the user know to drag or that "head" is the user. First of, since the map rotate immediately to user rotation of device, the user gets that the app relates to users position and orientation. The drag gestures is only for secondary features, but if the app is left unused for a certain amount of time, the "head" could animate around, showing of that some additional functionality is just a drag away. 

UI Mockup

The design uses the 11pt grid and font choices made by Sarah Mick.

Default screen        1) animating clouds indicate wind direction and speed. 2) Temperature color is including wind chill effect.

Drag "head" for detail        Dragging "head" in reveals more details in opposite direction. Other directions fade out.

Drag "head" all way to edge for forecast        Dragging head all the way to the edge and it snaps. Complete detail with forecast is shown (+4 hours). Scroll content to extend forecast.

Poster presentation

I wanted to try out a new UI presentation method - heavily inspired by Jason Teunissen + Balraj Chana

Prototyping in Quartz Composer

I wanted to try this prototyping technique. I managed to make a limited version for this project, so please watch the video (10MB). It shows what happens when the "head" is dragged around. 

It was quite fun to try and I think this could work for "quick" prototypes, especially for gestural interfaces. A little behind-the-scenes for the prototype below actually shows the entire setup for my demo.

More of my work @ developmunk.dk

Comments

Please sign in or sign up to comment.