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.
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.
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.
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.
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.
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.
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.