UX/UI Design Project “Add a feature”— iOS Weather App | Ironhack

After intense 2 weeks in a full remote Bootcamp, we were given our first personal project. Working totally alone on a project is different because you can not share your thoughts, receive feedback at any time or get inspired by others. But it was a good practice to become more confident with all the skills and tools that I have learned so far.

Project Brief

Add a feature to the iOS Weather App that allows the user to set notifications for weather changes on specific days. Let’s say for example you plan to go for a hike on the weekend and you need to stay updated about the weather changes, so you can prepare for any weather condition.

About the app

If you are familiar with the iOS Weather app, then you probably know that there is barely any functionality. As a user, you just can see the actual weather for today, a forecast for 9 days and additional information on the actual weather when scrolling down. The user can swipe between different locations that can be saved in the settings section.

The problem with this sleek design of the interface is that I couldn’t really figure out where to place the new feature in the beginning.

Human Interfaces Guideline

Before directly jumping into creating solutions, I knew that I have to respect Apple’s Human Interface Guidelines. All iOS applications and their interactive design that come onboard with an iPhone are highly thought out digital products. You can get in-depth information on HIG at the Apple Developer website. Searching for a suitable solution that would fit into the ecosystem of iOS was really helpful at this point.

3D Touch User Interaction

To add a feature in the Weather app was not an easy job at all, to be honest. As I mentioned before there is barely any navigation in the app, simply swipe gestures to switch between cities that one can save. But I have read about 3D Touch in the Human Interface Guideline. It is an elegant way to display information or actions that people can use within iOS. Using this as a design decision was the way to go because it was something from the iOS ecosystem and would not burden the actual design of the Weather app, which was important for me.

The user can access additional functionality by applying varying levels of pressure to the touchscreen. Apps can respond by displaying a context menu or supporting Peek and Pop to show items and actions.

Lo-Fi Prototype

Here you can see my quick pen and paper prototype. I like to cut out elements, play around with them and give it to another person and hear what they think about it.

When testing this lo-fi prototype, I asked the users if they may be missing something or what they would like to see. The majority of them responded that they like the simple gesture, the peek and pop and the easy option to save a specific day. That convinced me to go straight ahead with this solution and so I decided to start creating the user flow.

Flowchart

The user flow is straight linear here as you can see. Easy and simple for the user to fulfill the expected path to set a notification for a specific day in the iOS Weather app.

Mid-Fi Prototype

Mid-Fi Prototype of the iOS Weather app with a new function to set “weather update” to receive notifications daily or 24h before the selected day. Note the little dot on the 4th screen which indicates that the day is set to a notification.

The Mid-Fi would have to be tested as well and I gave it to my classmates of the Ironhack UX/UI Design Bootcamp and talked with my colleagues about it at my agency. They also responded to me that the solution I have created feels very natural to them and that it is simple and easy to use. I spent maybe a little bit too much time on creating the screens because I wanted to be as accurate as possible, but this helped me in the end, transforming this Mid-Fi into a High Fidelity Prototype.

HiFi Prototype

The user selects a specific day to get daily updates on weather changes. After setting the day, a little orange indicator shows the user that the day is set to send notifications on the weather.

Testing

Of course, I needed to know how the new feature would perform on additional tests and therefore I used maze. It is a good way to get more insights and data with rapid, remote prototype testing. If you take a look at the data, you can see that 4,8 sec is the average time spent on screens and that 85,7% of the users completed the action, according to the expected path.

Final Thoughts

Simplicity can lead you to good design decisions. As Dieter Rams said: “Good design is as little as possible. Less, but better, because it concentrates on the essential aspects, and the products are not burdened with non-essentials.”

A solid mid-fi prototype is the foundation of a quality hi-fi prototype. Think of the mid-fi prototype as the foundation of a house, these are your cornerstones.

Testing your product at every stage is key. Even if I had only little changes to make in this project, testing is a crucial part of the whole process.

You can plan a pretty picnic, but you can’t predict the weather.

This reference from the famous Outkast “Ms. Jackson” song here means, that no matter how good a product is developed and how often it was tested, you can not be 100% sure, that the user will accept it as useful and functional in their daily life.

Thank you for your time and reading this article. Every feedback on this is more than welcome. If you have any questions about the project, feel free to contact me.