Layout and Content—Creating a Desktop App
Right from the get-go, we were surprised to see that the whole team agreed on the optimization for mobile devices—there wouldn’t be any. We’d take care to make sure that the app didn’t fall apart on small screens and would be shown as a miniature of the desktop version, and that was about as far as we were going to go in terms of mobile phones. Our decision was supported by data from Google Analytics which showed that our users work with the app on desktop computers exclusively.
PPC specialists who carry their workaround in their pocket might receive a gift in the future—a mobile app.
But back to the desktop version. We needed to design as few layouts as possible to show all app pages. This was followed by weeks of sketching, moving items, and testing. What really helped at this stage was that we had a precisely defined app structure and hierarchy. Thanks to this, we knew which parts needed to be linked visually and which had to look like they were on a higher or lower level.
The result? Two basic layouts which could be edited modularly:
1. Left-side menu and content stretched across the rest of the screen;
2. Centered content with the option to add a left or right sidebar.
We decided to display pages using an 8-pixel grid, and still believe it’s one of the best decisions we’ve ever made. The grid makes sure that the size of all tabs, buttons, form elements or the header are a multiple of the number 8. For example, buttons are used in 3 sizes: 24, 32, and 40 pixels. By the same token, spaces between objects (horizontal and vertical) are also always a multiple of 8.
Why 8, exactly? Because multiples of this number give us the ideal variability. That means a sufficient amount of sizes, but not big enough to make the app difficult to navigate. The sizes are also easy to calculate mentally and remember.
Colors and emotions
Once we designed layouts and a complete navigation, graphics were the only thing left that was missing. The task wasn’t easy by any means. Designing a new color palette so that we’d stick by our company colors and at the same time modernize and add them to be used in the app? Forget it. The hardest thing was to refrain from making the app seem too “wild”, but also keep it modern and fresh. There have been many colorful versions, some of them pretty bold. But which was the correct one?
The answer came to us in the form of an emotional card test—a process of selecting words from a list depending on which emotions the app evokes in you. The test went something like this: first, we took a standard list of 90 words and simplified it a bit as some of them weren’t relevant to our test at all. Each member of the product, business, and marketing team chose three words they hoped would define the app in the eyes of our clients. And the result? A set of words prioritized by frequency.
Then, we presented clients with draft designs and the identical list of words. They picked those which best captured their feelings. In this way, we got information on which emotions a particular design evoked in our clients and were able to confront it with our expectations. The winning version was clearly in line with our own list of most frequent words. For that reason, it became our choice and you can now see it in the app.
Once the app’s coloring was done, we began the process of final testing. A prototype created by Axure gave us the very first look at the redesigned functional app.
Our testing scenario included the most important interface features, such as a navigation menu, settings, changes in organization and campaigns, or campaign filtering. When it came to subsequent user testing, Covid taught us that when necessary, testing can be done remotely just as well as in person.
Thanks to continuous testing, among other things, we found no significant faults in the design and the current app is 95% the tested prototype. The remaining 5% consist of subsequent improvements we figured out throughout the development.
At the finish line after a year
It’s been a few months since we launched the redesigned app, and we’ve been fine-tuning it and launching new improvements every single day. We’ve also been getting feedback and evaluating whether the redesign was successful. The feedback from our clients has been overwhelmingly positive. Users appreciate mostly that we didn’t experiment too much and didn’t try to be excessively trendy. Instead, we identified issues and removed them.
Most importantly, we got the app ready for the new developments in the campaign and data types we’re planning. Now we don’t have to worry that our clients might not be able to find or understand how to use them.