The new detail entry on the local.ch iOS and Android Apps

The main goal was to improve and harmonize the way the detail entries were displayed across the mobile platforms (Android, iOS and Mobile web).  As with so many other apps, the different apps for the different platforms had grown organically, and rather independently. Some information was available on one platform, on the others not. The order of appearance of the information also varied, as well as how the data was presented visually. Our aim was to create a prioritized structure that would be the same on all platforms, but still respect the platform specific guidelines.

Process

Understanding the challenge

First, we made an analysis of existing data and structures. We did this by looking at the current implementations of the detail entry, and discussions with the engineers and product managers.  A side by side comparison really shined some light on consistency issues, as well as gave a good insight to what data was available. It is easy to spot the differences in a comparison like that, but it is also very important to understand the reasoning behind it. Observing and asking tons of questions help reaching the necessary understanding for the next step.

Comparison screenshots of the different platforms (Web, iOS and Android) made before the redesign

Forming a solution

From there, I compiled a list of all the data that could be present on a detail entry. That list was then split into logical groups, which were then given priority in collaboration with the product manager and engineering teams. These were then iterated and validated with the team and stakeholders. With this structure I created a layout that would work for the platforms. The layout was shared with the team and stakeholders as a clickable prototype.

Examples were made of various entries with different constellations of products and data sets. Ie. a restaurant can have photos, description categories reviews etc. Where as a POI, such as an ATM only has a location. We did many many iterations here, because certain designs fit with certain types of entries and not with others. The end result needed to be flexible enough to cover it all. For our own sanity, and to be able to verify its feasibility, we created a prototype on the mobile website to try it out with real data.

Example of one design for different amounts of data

Testing the solution with users

We used the prototype we built to conduct user tests to see if there were any usability issues with the new approach. The user tests were planned and organized by myself and the project manager from local.ch. The results from the tests were positive, and we had a go ahead for the implementation.

Preparing for implementation

To get everything ready for implementation, we prepared designs for Android and iOS.

Implementation time

We supported the development teams on Android by implementing the layouts (XML) and exporting all the resources necessary. For iOS we created xib’s and adjusted storyboards etc.

End result

In the end, we had a set of cards for groups that we use on all the mobile platforms.

Tools

For this project I used  Sketch, Invision, Android Studio (xml), HTML & CSS, and XCode (Xib & Storyboards)