Loading
UX Design / Web Development

FromAtoB Web App

FromAtoB

Complete product design

See live on FromAtoB.de

Adaptive Design

Custom device-dependant layout

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.

Skills used

User Experience Design
99%
SaSS Development
60%
Html & Haml
40%
Wireframing
55%
Prototyping
60%
Data-driven testing
40%

Illustration System

illustrations

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.

Custom Iconography

icons

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.

Other Pages