Wheel of Time is a weather app that uses visual information to communicate the weather forecast. It was a two-week exploration project designed during the course Rapid GUI Prototyping at CIID. This was an individual project, and I was responsible for all design stages.
The brief was to design a weather app that didn’t have any text, except for the date. To achieve this, the visuals had to portray different weather metrics, like UV index, or if it is going to rain.
Every day millions of people all over the world check weather apps on their phones to help them plan for their day. This activity usually involves looking at a screen full of tedious numbers insignificant to the average person.
With Wheel of Time, you can see what the weather is going to be like in a fun and visually engaging way. Now you can see how fast the wind is going to be by looking at how fast windmills turn instead of figuring out what a 27,5Km/h wind speed means.
I divided this project into two phases: concept and development.
Concept. In the first phase, I did a competitor analysis of weather apps and interviewed people on how they use their weather apps. During the interviews, I did short co-creation sessions to refine my early ideas. I later evaluated the different concepts I had by using criteria such as feasibility and delightfulness. Since this was a quick project in which I was learning a new tool, I had to choose a concept that I could deliver until the tight deadline.
Digital prototype. During the development phase, I proceeded to create low-fidelity digital assets to test the interactions as soon as possible. My main goal was to get the user’s feedback on the feel of the prototype early on to refine the interaction.
Paper prototype. While refining the interaction, I did a paper prototype of a wheel to see how a physical version of it would look and feel. For this activity, I was inspired by the creation process of Material Design by Google, in which they studied the properties of physical objects to make decisions about digital assets.
Feedback and iteration. Throughout the whole process, I asked users for feedback on how they felt and what they expected to happen when using the prototype. When I was satisfied with the interaction and the general feel of the app, I started polishing the graphics. The visual design process also guided some choices I made on animation and micro-interactions.
The biggest advantage of using a high-fidelity rapid prototyping tool, such as Origami, was how fast it was possible to iterate on the concept and get feedback from people. This quick iteration would not be possible if there was a back-and-forth between me, the designer, and an app developer. At the same time, low or medium-fidelity tools, such as Sketch or Figma, would not be able to create the key interaction I implemented on this app.
I built a functional high-fidelity prototype in Origami Studio. I implemented each asset separately so all elements could have their behavior designed independently, creating a unique experience.
