Triposo ~ The smart travel guide

I worked at Triposo from January 2013 to January 2015. In these 2 years I could enjoy working with an amazing team on a great product: one of the best smart travel guides for mobile devices.

DESIGNING AT 360°

Working in a startup is a formative experience, especially for designers or engineers. Being in a smaller team, working all together on the same product, you can really focus on improving all the important aspects day by day, release after release, following the whole process of the implementation.

As a designer you also have the chance to be flexible in your role (and you should), working on different aspects of design. I don't really like putting tags on designers, such as Visual, Product, Interaction, UI or UX, Graphic, Web, and so on. Not because I don't see the differences, but because I think in certain situations - and probably in the future of design anyway - these differences just don't matter in the real process where all those parts are merged. In fact, working in a small - yet on an important product - startup you are all these things. Not just these things, you also need to be confident about the platforms (web, iOS, Android), and the limitations that the engineers are going to face with implementing the design. A front-end coding skill, a set of html, css and basic javascript, will also help in building prototypes, and will give you a basic understanding of how the things work in the implementation part even if different platforms and languages.

Consistency

One of my first task was to review the app that was built between the first release on 2011 and the new release at the end of 2012. The app had a complete new design, but it kept many elements and screens of the previous releases, as well as many visual differences and inconsistencies generated during the coding implementation. We started organising the screens and defining a common visual language, creating rules and guidelines for each element of the app. The process took several weeks, and the guidelines were updated every time when necessary.

A page of the consistency document

Consideration for design

The consistency document has been very important for the look and feel of the app, and for its UX (as overall positive aspect). It's been really significant also to simplify the implementation process. Every time that engineers had to implement a new page or element the guidelines could help defining it with clear rules. A visual language is not - only - about the appearance itself, what is nice or less nice: it's a matter of what works and what doesn't work. This easier and rational communication between design and code brought also to a closer communication between designers and engineers. We could learn to work together with understanding more and more the mutual needs and limits; we could push the interface to something new for our standard, experimenting with interactions, and exploring alternative solutions. The visual consistency released and unlocked further possibilities, as well as a new kind of consideration and attention for design among the engineers.

Release codename "Fugu"

Consistency over different releases

The release codename "Fugu" was the first release with a new design after the consistency document, with the complete application of the guidelines. In the releases after Fugu the application of that consistent design could ease us from that part of work, and we could focus on new features and interactions.

Release codename "Instant coffe" - See more images on Behance
Release codename "Kiviak" - See more images on Behance

Wireframe, prototype, user-tests, implementation

I learned the front-end coding by myself during the years. I always liked playing with HTML and CSS for my personal projects, and pretty soon I found these skills also useful for my everyday job, too. I started coding the front-end of the websites I designed, instead of just providing a mockup image. A "ready-to-go-online" complete packages for static websites. I continued to play with Javascript, jQuery, a bit of PHP, and this knowledge has been very important to experiment with prototypes for mobile applications too.

In Triposo we did prototype every time we needed to test a new UI, interaction, or feature. These prototypes followed initial sketches and wireframes, and were tested within real devices and real users before implementing the modifications in the app.

Data driven

Checking the analytics about the usage of the product is a very good way to test your proposals against something concrete. Design modifications can be more effective, and support the real users base. A/B testing is another useful resource, we used this method for icons, navigations, and many other cases, with data analytics, and direct users testing.

DESIGNING FOR THE PLATFORM

Consistency means also to be consistent with the platform you develop your application to. Triposo focus on the iOS app as main release, but the same great features can be found on the Android version, and on the website as well. The consistency document took in consideration also this overall consistency across different platforms, respecting the inner guidelines of the platform too. While the branding and the visual language remain consistent across different platforms, the platform itself must be included in the design process. When the iOS7 beta was released it obviously had an important impact on the new version of the Triposo app (Fugu and following releases). I started considering the main aspects of the new environment and its aesthetic.

The same kinds of considerations took place for the other platforms such as Android and Windows Phone (just a concept), and the Apple Watch later on (just a concept).

A concept of Triposo for Windows Phone
Triposo - A page of the website

Download Triposo

Triposo for iOS
Triposo for Android
Triposo Website


See more in Triposo

Categories: Design & illustration

android app design interaction design ios product design triposo uxui visual design

Triposo

Triposo - The smart travel guide