The Warming Up: Apple Stocks App Redesign

During the first meetings we redesigned one aspect of the well known Apple Stocks App. After doing some research I decided to focus the aspect of readability.

People with astigmatism (approximately 50% of the population) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the „deformed“ lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye.

Sources

So I created a more readable Version of the Stocks App by redefining the color pattern.

Fabian_Dinklage.png

The Main Project: Windfinder App Redesign

The chosen Application wind finder is an iOS Application which visualises wind- and weather data in order to guide the current conditions for specific sports wind- and weather sports. The motivation behind choosing this application was to find ways on how to visualise dense data in a clean and structured manner without decreasing the richness of displayed data. In the first place we spend time on finding out, in which users actually use the application in form of online interviews.

We collected feedback from more than 60 People from different sport related backgrounds. The evaluation of the collected data enabled us to define the focus on the details which were most important to the users and developed clear goals of the redesign. The user research in the beginning of the project brought very valuable insights of important functionalities to the user and their overall experience.

Screen Shot 2017-03-07 at 06.15.13.png

Further Preparations

The outcome of the interviews combined with the customer journey lead us to identify further possible obstacles for the user while using the app. Further more we analysed the information architecture of the application by doing wireframes and asked ourselves whether the provided structure is still the most promising for the users needs.

wireframes.png

The Redesign

Beside obvious formal design decisions, like the aspect of readability, accessibility or contrast, the need for customisation of the displayed data appeared to be very important. With the new gained insights, I developed an animated version of the redesigned prototype to provide a authentic experience of the benefits of the redesign. The visualization of specific dimensions of data helped the user a lot to gain insights about the data without a need to study single data points.

windfinder-1.jpg

During the whole process I realised again the importance of user research and feedback to reframe yourself as a designer and develop solutions which address the user itself and learn from their experiences. The definition of clear goals in the beginning facilitates the possibility of tracking the progress within a design project check at any moment if more iterations are necessary and realistic within the given time frame.

Windfinder-2.jpg

The Animated Prototype

The final version of the redesigned windfinder app was done in framer and helped me a lot to gain experience in the field of animated prototypes I can use for future projects to provide a more realistic design.

Conclusion & Final Thoughts

It was a pleasure to visit the course of Frank & Timm this semester. I enjoyed the workshop structure of the course a lot. Spending a whole day and working together brought a good productivity flow into the group and we gained a lot of precious feedback. First on how to follow the right approach to redesign in a systematic and structured way and second from the design perspective while doing the redesign.

Overall it was a great course to refine your visual prototyping skills. Thank you very much to the lecturers Frank & Timm.