In December 2013 I began working for FromAtoB, a web tool for city-to-city transport comparison. They had hundreds of thousands of monthly users, but their user experience was a complete wreck. As the backend was being refreshed, we also agreed on a complete product revamp that would keep the simplicity, and make booking a trip easier.
The site scaled slowly and was ready to replace the old one after about six months. We kept building and learning over it via data analysis and A/B testing of landing pages, booking system etc. In the end, the new website improved conversion, clarity and made the app more trustworthy. Product still keeps growing and expanding to countries beyond Germany and France.
As the older version of the website had straight Twitter Bootstrap responsive breaks, it was able to visualise on smaller devices, yet the usability was compromised by certain elements that would just not work. Therefore, I advised moving to an adaptive method for the redesign, guaranteeing more control on the information and empowering the user.
This is how, following some hints on Google’s Material Design, but adapting it to our needs, I based the information card element into something much more usable and rich. Call to actions were enriched to gain extra functionality, and a subtle layer of interaction responses made the content much more usable and attractive to play around with.
FromAtoB had basically no branding guidelines or styles on iconography, colors or illustration, so it was all my job to create. Some of the pages lacked of content, which created the need for more visual stimulation, to present it better. Some concepts that were a bit more complex than what an icon could represent were then illustrated by me.
For these illustrations, I chose a flat style, and used the color palette assigned to the highlights and backgrounds of the website. The global idea was to create playful representations, and to make emphasis on the multiplicity of elements and agencies that create the website on itself.
As everything on the redesign was being made from scratch, and as I much enjoy illustrating and designing symbols, I started a -still growing- icon design process, with some basic guidelines that would allow the whole web app to have attractive, clear and simple icons, that were just from the website, and not a generic solution.
Many concepts from very simple, to more complex were drawn and perfected. Some differences in thick but rounded strokes, and a monochromatic palette made the set unique and nice to look at. Also, some negative versions of existing icons were created, in order to be used in inverted palettes, for darker backgrounds or such.