Winda App — UX/UI Case Study
We’ve all been there haven’t we; you have planned a trip out with the family and you’re busy checking the weather forecast in the days preceding. Should you leave the house once the rain has passed? or head out early before it arrives? Hour by hour forecasts help decision making but they’re subject to change. When did a simple day out get so difficult to plan?
As my first project for the General Assembly UX Design Immersive Course, I was tasked with a solo project to design a rapid prototype of a mobile app, helping to solve a problem proposed by my primary user related to the weather.
During the project I have followed the design thinking methodology:
- Understanding the user needs
- Exploring possible solutions
- Materialising and Iterating
The time frame for this project was one week for phase 1, in which I focused on the discovery phase through to paper prototype. A few weeks later,
I revisited the project as part of phase 2. This consisted of working on visual design and branding.
Understanding the problem
Weather is something we have to plan around to enjoy life. It is a source of everyday conversation and complaints, and taken for granted that you cannot predict it reliably. I was interested in figuring out how I could make handling the weather less painful for users.
Since I didn’t understand precisely what problems users have in relation to the weather, I started by interviewing Sara and it became clear to me that:
Sara likes to be busy in different activities with her boyfriend but when the weather changes, she gets stressed because she needs to find other things to do.
Creating a journey and emotional map of a typical day in Sara’s life was a fantastic way to pinpoint key areas where technology could help her to solve the problem.
With a clearer idea in mind, I went into creating a storyboard of a scenario in which Sara would use the app and find a solution to her problem.
When making the user flow, I focused on creating a possible situation where Sara would use the app to discover events around her based on the weather.
Sketches — Simple features to make life easier
When I started sketching my first iterations of the app I already had a pretty clear idea of what features I should include, this made it easy to create the first wireframes and begin the testing process with Sara.
Test, test, test…
After testing on paper and getting feedback from Sara, I made a paper prototype and linked it in Marvel to test it with my other classmates.
The following version is the result of this process.
After a few weeks away from the project, my first action was to define the brand. I came up with some brand values to help me make design decisions throughout the development process and strongly shaped the final product. In this case, no particular brand guidelines were provided, so I had to act as my own client.
The app is:
I created a moodboard as visual representation of these values and this helped me to focus the tone-of-voice and identity of the brand.
It was time to create a style guide for the app. From the images above, I selected three colours that would become my brand colours:
I chose Verdana in Bold for the main body because it is a very clear and legible font. The text for the calendar list and the call to action buttons are in Helvetica, one of the most popular fonts.
However, before I could apply the styling I wanted to ensure the product was well tested so that adding in design elements would be as efficient as possible.
Hi -Fi Prototype
I left this exercise on a high fidelity level but not at a finalised stage.
If I was to continue with this project I would test its accessibility, at the moment I’m not sure if it would pass the AA standards.
Usability testing is so important. I realised that users had a different way of using the product, and what’s obvious to me isn’t necessarily obvious to the user.
Brand values focus your design decisions. Once you have a set of brand values, decisions on tone-of-voice and visuals come much more easily.
Lastly, feedback is welcomed. Thanks for reading :)