Initial job description
“We're looking for a professional UX designer to redesign the complete interface of our web application. You must know how to untangle a complicated interface to a simple, clean and self-explaining one. Experience and references in designing modern applications are compulsory. Coding skills are not required. The implementation will be done by our developers. We are a Swiss start-up based in Zurich. You'll work closely with the founders to create the style & identity of the new UX. English skills & great communication is a must. Good knowledge of German would be an asset.”
Acquire potential clients with a modern and easy to use product
Simplicity of use
Comfortable and fault-intolerant workflow
First things first..
Initially, the company wanted to do a design revamp of their product and make minor UX improvements. However, after deeper analysis of the application, it revealed that there are fundamental flaws in the information architecture. This was the most confusing for users, so it had to be tackled as first.
I was in charge of the complete re-design of the application.
Along with the goTom founders we discussed the problems and collaborated to generate new ideas and necessary changes. I helped them to translate customer needs and behaviour into the concepts of new features. My input resulted in significant design simplification, which improved usability and facilitated users' daily workflow.
What was wrong?
Very old look and feel
Very complicated UI structure
UI lacked design affordances
Many of the UI elements did not match mental models of the users. For example, icons had wrong metaphors (“+” icon represented “to edit”), or language settings (top right) did not give the possibility to change the language of the application but the language in the campaigns
Many screens contained unnecessary and dysfunctional elements
In some screens UI elements were misplaced or broken
There were parts of the applications that were not used anymore
Some of the sections were copied under different names
Some elements were hard to find because they were in wrong sections (for example settings of the campaign in the user settings)
The application was error-prone, which could be costly or time consuming for the user (i.e. removing the user / create an empty campaign)
When the mistake was made, it was often not clear where it was located
There were no indicators of where you are at the moment (no breadcrumbs or similar)
the Toughest challenges
The crucial thing to understand was that before the user starts working on campaigns, the administrator must create users, groups, variety of campaign settings, customer settings, types of advertisements available etc. All these were scattered in different parts of the application. This was often confusing for the user. The challenge was - how to indicate that working on campaigns is not possible without this data.
Another challenging thing was to unclutter the UI and UX from complexity and leave only what is necessary at the time, while keeping things understandable
I used Lucidchart to create the new information architecture for the product. I shared the application into two parts, which we called: "administrator setup" and "working environment". This way we created a separate but consistent experience for two groups of users: administrators and people who work on campaigns. Each of those groups needs different information display and different experience for their job to be done. By creating this distinction I got rid of omission errors and guaranteed uninterrupted work flow.
Creating IA allowed me also to organize old and new features into a logical structure.
To understand the product better, I conducted a broad research about the advertisement industry. This allowed me to familiarize myself more with the work environment of potential users and the jargons they use.
The research, analysis and discussion with my client resulted in findings listed above. The list of flaws and solutions was documented by me.
THE WIREFRAME PROTOTYPE
When the new architecture was ready, I translated the information into high fidelity interactive wireframes which were tested by existing clients. The tests were conducted on goTom's side. The clients gave us lot of valuable suggestions and ideas, which were later added to the wireframes. Some of the them can be find here:
The last step was to pass the assets and design documentation to the developers.
After the final changes to the wireframes, I was ready to convert them to a more elaborate and modern interface. I used goTom's primary green color and matched it up modern shades of blue. I created all the visuals in Adobe Photoshop and Illustrator. In order to save time, I used most of the icons from Iconfinder.
What was done...
Clean UI and brand new user experience after creating the new IA
Users are provided with relevant features only, based on their role. This eliminates distraction and improves their productivity
I added an onboarding phase where the user is introduced to the features/environment and first necessary actions
I left hints for actions wherever necessary
Change of the navigation menu - it’s simpler and organized into logical categories. It also shows user’s location in the application
I got rid of the categories that were no longer in use and merged similar ones. (for instance, "Client" and "Contact Person" of this Client)
A quick overview of the details of items on the lists without the need to go any further or edit the item.
I designed the possibility to add a few items at once (for example create users in bulk) for more efficient workflow.
The interface now has clear affordances, feedback of actions and immediate error indication.
I reduced the possibility of creating costly and time consuming mistakes by: indicating errors immediately, and explain their potential consequences (for example permanently removing the user). Apart from this, I allowed an “undo” option, in case of omissions.
I designed a separate user profile settings with easy access to change personal settings like email and password.
Introduce a new way to create campaigns. I created a clear visual distinction between not-confirmed campaigns (Reservation) and confirmed (Auftrag)
Along with the founders - we created a new and clearer naming of the to-do tasks.
CRM Features added recently
Below are the features that are added recently:
The illustration shows how goTom simplifies selling digital advertisement. The illustration is based on this icon, due to a short deadline.
Total number of screens designed:
Over 100 screens!
The general user’s reception of the new design was good:
“...they felt clear about everything. Customer prefer to get feedback if they don’t like something. But if they do, they are not going to write ;). We can feel the difference mostly for the sales part. If we show the software now, the potentially new customers really like it and it looks really modern so the impression is great.”
CLIENT'S FEEDBACK AFTER THE COMPLETION OF THE PROJECT:
"Karo did an amazing job! She got really fast into our project. The Goal was to bring in a better UI/UX to our Software and we definitely reached! It was quite specific and complex, but Karo has a great understanding, which was definitely the best to get the maximum out of it. Her Inputs were great. We love her simple and clean style and our developers also liked the way she documented everything. We will definitely continue working with Karo!"
What other clients said about me... ?