Travel Studio, top-world B2B desktop software for travel companies and tour operators, had an old look and feel and UI system. The colour palette was confused, with more than one style overlapping. I made user inteviews with BAs, employees and important clients and I noted few important problems with the Dashboard and the top bar navigation. The whole structure was boring and unresponsive, the color palette had too many shades of blues, repeating themselves, icons and fonts were inadequate. There were problems in searching information; the top bar was messed, it didn't offer a smart filter to access specific sections; logos were squeezed with the dashboard management functionality partly hidden, and the absence of a proper user area. There were problems in displaying information; dashboard widgets had issues in scrolling, with lot of space wasted, it was hard to move them around the working space and adjust their size. The general inadequacy slowed down the user flow.
Please find below a screen of the old Dashboard and navigation bar
Research and Sketches
After the first round of interviews with the system ‘as it is’ I created the main user personas and set up some goals to achieve. First of all, the reordering of the top bar and creation of a new smart navigation box to ease the search task. The Top menu was too rich with relevant links to be visualized horizontally, even in a desktop environment. After several more tests on sketches and lo-fi protos the only solution was to adopt a burger menu. The dashboard widgets needed a new design with some important goals: a richer interaction and better look and feel, more sleek and prompt commands, a standard size, an easier-to-use snapping. The dashboard management needed more emphasis and an easier access.
Please find below the first sketches for the top bar and the widgets. After several back and forth with users I was finally able to create the right architecture for the new product.
New colors, fonts, new UI
All users emphasized the need of a new and fresher look and feel and color palette, with new UI features and icons. The font system was old as well; I created new design sheets and tested them on interactive prototypes.
Please find below the basic of the UI redesign with new palette of colours, fonts, examples of icons and other UI components.
I used the above new visual system to prototype the new top bar, the dashboard widgets and their UI features. I've done the work using Sketch App and Axure and iterated it several times.
Please find below some details of the designs and interactive prototypes.
After several reiterations and few back and forth with the Dev team, the final Dashboard found a better, frictionless, and sleek experience.
Please find below some details of the final product designs and... comments.
“ Amazing. ” Abercrombie & Kent
“ This is a game changer! ” Open Destinations Marketing Department