Redesigning Jibli - Lessons Learned Form Hack Design Part 1

As many programmers, I have always thought web design is a
discipline best reserved for people doing art and design.
You know, the hipster with his MacBook, his pletora of Adobe suites,
and the huge time spent learning to use them.

I come from a background of system administration and networking, always
fascinated by the obscure backend’s thing happening behind what you
see on your screen. Furthermore, I started web development for the sole purpose
of building Jib.li, as a CoFounder and CTO on this
project, and as a team which had no money to hire a full time designer.

Needless to say I boarded the UI Design ship on the wrong foot.

In this first article I am going to share my experience on how I got passionate
about creating and designing a User Interface and what I learned from all the
resources shared on HN and Hack Design lessons which helped me redesign Jib.li.

Before

After

Where to start ?

We launched the public beta of jib.li on October 2012. A few weeks later we had had
plenty of feedback and proposals for new features.

For strategic reasons, we chose to start Jib.li with no registering process and just a “Connect with Facebook” instead.

We had no money to make a “how it works” video we could show
next to the home page form, like many startups do when they launch their
product. We only had a teaser video that we made before starting this project
where you see a bunch of people (our team at that time) pitching the idea.

The home page actually looked like many location based services and the
typical workflow of a user was:

Fill in the “From” and “To” location fields

Choose what action to take: Send, Deliver

A modal shows up to let him select a date depending on which action he chose

Redirecting the user to a listings results page

The user can then click on listings or create a new one if he’s not satisified

We noticed that many people when they first reached the home page, where not able to figure out what to do next.
To assist new users we used bootstrap tooltips everywhere, even on the action buttons.

On the graphic design aspect, we were just using a slightly customized bootstrap theme

Getting inspiration

So after we decided it was time to have a fresh and better look, I saw the opportunity
to start practicing what I have been learning on HN, Hack Design and About Face 3 about
UI/UX Design. It was also a good opportunity to stop frontend programming with spaghetti jQuery dom
manipulation and start using AngularJS which devprived me of my sleep hours lately.
(frontend programming will be the subject of an other article)

I think the most difficult step when you start working on something, no matter what kind
of project, is actually to start. For me it was no exception. I was certainly looking
for visual inspiration because a User Interface for a web application is first of all something
we see before we touch and interact with.

To help me filter out the overwhelming quantity of images, photos and visuals available on the internet,
I made list of words that sum up what Jib.li was about and started combining those words in search queries
for images and photos.

I ended up with this one when looking for the words bike and bag, which seemed to summarize the ideas
of transportation, carrying and environment which jib.li is all about.

The color palette

I actually repeated the process until I get a set of colors which validate these conditions:

Have at most 3 main colors

Have dark close to black color

Have a light close to white color

This one has two main colors, a wide blue range and the yellow/gold one. Grays and white are
just desaturated and very light colors.

This should suffice to always have a color to pick from this palette instead of choosing
one from a color picker, and so basically when looking for black I just choose the darkest one and when looking for white I pick
the most close to white.

The wide range of blue colors made me choose the blue as the main color.

I was heavily inspired by this article of Ian Storm Taylor, which also made me
start using HSL (Hue, Saturation, Brightness) everywhere I wanted to get new colors from the palette.

Rapid prototyping vs flat PSD design

One thing I learned in interactive design is that a User Interface can’t possibly be represented as a flat image only.
Bret Victor made an excellent talk about the process of creation and the necessity to get immediate visual feedback.
My design process has been a mix of rapid prototyping and design exploration with chrome developers tools then representing ideas in
a PSD file as a reference for later.

Although I’m not going to talk much about frontend programming, this is the stack I prepared to quickly test ideas and move back and forth
from prototype to PSD.