← Back

Tronko

I designed and contributed to the development of Tronko. A iOS and Android chat app for sharing, recommending and collecting movies and tv-shows with your friends.

First contact

Right after getting my degree I moved to Berlin to join Arillo, a design and development agency. They were trying to shift their focus from corporate websites for clients to shipping their own products and ideas. Tronko was already in their pipeline and they were experimenting with technologies like Meteor and Cordova.

Value Proposition

Tronko is a chat app for sharing, recommending and collecting movies and tv-shows. You get direct recommendations from the only source you trust–your friends.

App Critique

Once I joined the studio I offered to do a review of their app. I shared with them the knowledge I gathered during over a semester of research in product design for my thesis.

The overall UI was really dense, small and fragmented. I suggested to make the interface breath by being more generous with white spaces and to increase the size of tap targets in order to make them more finger-friendly. Moreover the typography was quite small and the visual language was quite distant and cold. Considering the young target they were aiming for I suggested to make the UI more catchy and to try to gamify the UX from time to time. As a last remark the website and the app had two completely different style and this gave conflicting information to the users. They were very happy with the feedback I gave to them. And they offered me to to be in charge of the Product Design. I was the only Product Designer therefore I had the opportunity and the pleasure to wear multiple hats.

Information Architecture

We took advantage of this redesign to re-consider the information architecture of the whole app and to implement and design new features.

We were a small team and the information architecture was developed by the Front-End Developer together with my help. It was crucial to collaborate since the beginning to set coherently contents, requirements and features across all screens.

User Interface

Before diving into the actual interface I designed a series of visual explorations. During this iteration I tried to translate into visuals the initial feedback I gave to the team. In order to share the potential design language with the developers I designed an element collages.

The team appreciated the effort but they still suggested me to try with a more neutral tone. I did a second iteration where I implemented their feedback. Once we all agreed on the right visual direction I started to shape the new designs based on the defined information architecture. From a production standpoint I kept separate sketch files for different features so that the Front-End developer could get them singularly and open them when necessary. During this step I tried to keep in mind the initial thoughts that I shared with with team. My goal was to create a fresh design, a design conceived for a young audience and that was able to fully deliver and communicate the value proposition through the interface.

Having gone through the information architecture and user flow definition with developer really helped me during the design process. I tried to replicate the same flows as the one we previously defined so that the developers could understand the different states of the interface right away.

Interaction Design

For more complex interactions, when a comment beside the artboard wasn’t enough, I developed interactive prototypes with Quartz Composer and the Origami library from Facebook. Thanks to my previous experience with origami I was able to prototype and communicate with developers in a really short time span.

During this iteration I also tried to apply some of the principle that I described in an article I wrote for A List Apart about semantic animation in interface design. Unfortunately I wasn’t able to achieve that due to some technical limitation. Tronko was developed on Meteor which is a platform that allows you to wrap web languages in native applications. Based on its routing system it wasn’t possible to link separate screens in one unique space and flow making the transitions from one component to another semantic.

Marketing

While developing the user interface I also did some explorations for a new marketing website. The basic idea was to really use the contents and the recommendations from the app as an entry point. I tried to show the real benefits of using Tronko with the very same elements and components of the interface.

Unfortunately we never managed to develop this approach. By being a small team we preferred to give the priority to the app itself. And maybe, at a later point, invest into the website redesign.

Onboarding Experience

Inspired by UserOnboard I decided to critically look at the user onboarding experience of Tronko. During this teardown I realised that there were still many questions open. Thanks to this precise, yet ironic, analysis we were able to address possible obstacles that could have become a problem during the first access.

User feedback

One of the results of this review was a dedicated chat in Tronko that connects users directly with the team. In this way people could ask for help, give suggestions or report bugs. We also used the chat to welcome new users. We showed them in the chat what you can actually do with the chat. A sort of meta guide tour.

← Back