Loading
Website Development

TOA 2015
Website

DEVELOPING AN IDEA,
AND FIXING ITS INTERACTION PROBLEMS

The organisers from Tech Open Air, a festival happening every year in Berlin, where representatives of the tech world meet to give conferences, workshops, etc; asked me to develop a WordPress theme based on a design from their visual designer.
They decided to come to me instead of just a theme developer so that I would help them adapt the design to multiple devices and fix the flow and usability of it.

The design was really interesting, but it was made screen-by-screen, and needed some tweaking on the UX aspect to make it work well.
Since the site was all about the content, I suggested we made edits on what a mobile user could do or see, and viceversa, so the core functionality of the site wasn’t affected by the amount of information.

Step 1: Developing
Comprehensive Documentation

I always like to start processes for complex products by structuring its parts, I find this always saves a lot of time fixing user path problems. This is how, even if it was just for a temporary website, I worked on user flows, user paths and wireframes of the pages that weren’t previously design, in order to ensure clarity and good navigability.

STEP 2: ADAPTING A DESIGN
TO ALL DEVICES

As the visual designer hired by TOA didn’t have enough experience with complete websites, allĀ of the designs were based on desktop versions, overriding the mobile first principle when building such a product. So in a way we had to go back and re-think some things in the way the display on small devices would affect the final version of the desktop website.
After explaining the benefits of a mobile-first approach, we agreed on some modifications to make the site responsive/adaptive in a smart way.

STEP 3: DESIGNING
INTERACTION

A big challenge for a developer when getting just still designs on illustrator or sketch is to figure out the interactions, the moving pieces, transitions and connections of these still pages.
On this matter, I acted as UI Designer for smaller details that would create a better sense of where to click, what to follow. And a nicer experience for the user. For example, the top menu, that had two animated bars in the top and bottom with a nice transition between the hover / active states creating a very nice interaction and making the user want to explore more.

Step 4: Styling new dynamic content

As the site was heavy on content, and the intention was not to overwhelm, the design was tweaked to host all the information possible into different layers.
Sub-sections, lightbox frames, and tooltips were implemented in order to improve access to information, without losing the focus on finding it on a simple, rational way.