Voltu UI Design

VOLTU, the new platform by mobile marketing giant glispa, aims at successful influencers and content creators on social media. With VOLTU, they are able to monetize their posts with ease. MNDN was responsible for all stages of the project, ranging from branding and concept work through the complete UI and UX design all the way to the frontend development.

The Right Mood

Briefing materials were quickly examined – a VOLTU logo was all glispa provided when approaching us with the project. In close dialogue with our client, we started by experimenting with different moods and keeping our target group in mind, opted for a clear, masculine and tidy interface. This was expanded into a complete design language, laying the foundation for the parallel development of marketing materials by glispa’s marketing team.

Motivating Onboarding Experience

To provide their users the most relevant campaigns, VOLTU needs to start off by getting to know them – for this purpose, the system goes through a series of questions during signup. Confronting the user with a long form and countless text fields would be the wrong path to take – the onboarding process needs to be friendly and captivating. We opted for introducing creative input methods like sliders and XY pads, controls fine-tuned to the information inquired. The result is a playful, step-by-step signup experience.

Campaigns That Match

After signup, VOLTU awaits the user with its most important view: the campaign selection. Under a personal greeting and mini performance overview, VOLTU suggests campaigns specifically tailored to the influencer and their followers. The best matches are clearly emphasized, enabling the user to get started running a campaign without lengthy searches.

Interface Components Campaign Grid

Clear Color Codings

VOLTU’s UI presents campaigns currently run by the user, as well as further suggested campaigns side by side. We developed a system of clear color codings, making the campaign status easily recognizable in all parts of the UI. This applies to the campaign selection entries, as well as the campaign pages themselves.

UI Colors

Interactive Style Guide

Even though we were responsible for the entire frontend development in addition to designing the interface, we left glispa well-equipped for the future by providing them with an interactive style guide. UI elements with all of their properties such as position, color, font, etc. can be individually inspected and exported to all formats if needed.

Résumé

What makes VOLTU special is the fact that it aims directly at influencers and content creators. With a captivating onboarding experience, personalized suggestions and a straightforward campaign management interface, we cater to their specific needs and expectations. We delivered a complete package ranging all the way to the frontend development, and additionally provided our client with tools to efficiently continue developing their product. VOLTU is rapidly picking up pace and is accepting registrations!

Our task was to develop a User Interface (UI) for the piano trainer application, the project’s most important counterpart. In addition, we were responsible for corporate branding and the website. Essential to completing these tasks was an extensive understanding of the product at hand. Together with Berlin based startup Skoove, we developed a project roadmap, specified exact features and agreed on the feature set of an MVP (Minimum Viable Product).

Skoove UI Design: Trainer Interface

User-Centered Design

Skoove provides educational software – understanding this fact has been very important in developing Skoove’s UI. Learning an instrument requires a student’s full attention – every distraction obstructs the learning process. We tackled this challenge with “User-Centered Design”: all decisions regarding features and interactions were made from a user’s perspective.

This approach affected all aspects of the interface, such as the navigation between courses and lessons, the indicator of personal progress, and the explanations of individual lessons.

The Feedback-Loop

Test candidates were an essential part of the developmental process. A comprehensive solution isn’t just achieved working with pen and paper – all decisions and concepts need to be tested in real-life scenarios as well. For this reason, Skoove conducted local user tests throughout the entire time, demonstrating which elements of the interface were understood immediately, and which interactions failed their purpose. These new insights were then integrated into the next iteration of the design – creating a loop that lead closer to the perfect solution with every iteration.

Trainer VS Trackpad

The operation of a piano trainer poses a special challenge, as two layers of interaction exist: the trainer’s interface on the computer screen, as well as the piano keys beneath the user’s hands. If those hands have to jump from piano to trackpad constantly, the trainer actually obstructs the user: every interaction interrupts the flow of practice, and therefore the student’s success. The result: A frustrating user experience.

Interacting through Piano Keys

Trainer and piano must therefore not exist in two “separate worlds” – they need to be combined in a single layer of interaction. Our solution: accessing certain features of the trainer through assigned piano keys. By using this approach, the user’s hands do not have to reach out to the trackpad and press Start/Stop there – they never need to leave the piano. Instead of obstructing the user, the trainer integrates seamlessly into the piano playing experience: an immediate connection between trainer and piano is established.

UI Iterations for Hotkey Assignments

Preventing errors

Controlling the trainer through the piano’s keyboard poses further challenges: How can accidental triggers of trainer features be prevented while the user is playing? User testing quickly proved that placing the Previous and Next Lesson buttons on the far left of the keyboard was the most effective solution. The interaction for starting and stopping a lesson required far more iterations though. Tested were several combinations of keys pressed simultaneously, as well as entire keyboard sections. Different keypress durations were tested in experiments as well to prevent launching features accidentally.

ERROR PREVENTION
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them.
– Jakob Nielsen, Usability Heuristics for User Interface Design

Branding & Website-Design

In addition to the piano trainer, MNDN was also responsible for the identity of the Skoove brand. Except for the logo, we developed all corporate design, including the landing page and course selection pages.

Skoove Website Landing Page Design

Résumé

This project is a great example for the fact that developing an interface does not just take place on the computer screen. Through constant exploration, iteration and intensive user testing, Skoove slowly developed its signature features and was able to mature into a user-friendly and market-ready product.

Skoove has completed a very successful beta phase. The interface was further extended by Skoove’s team, adding many new features. Skoove has now been officially released.
Try Skoove now!

Looperator Main Screen

Mondon Design was commissioned with the development of Looperator’s entire visual design: This encompasses a visual language and concept, the graphic user interface design (GUI design) as well as the user experience design (UX design). Furthermore, we created the Looperator logo, respective app icons, promotional material and also the graphics for the software installer. This gave us the opportunity of creating a consistent user experience.

UI Design that’s looking ahead

We design interfaces to be resolution independent. This means, that the interface looks its best on every device. We kept in mind the potential release of Looperator on high-resolution displays (Retina iPad, high-res monitors) right from the start. Already while outlining it in Photoshop, the GUI was completely vector-based. This bares many advantages compared to a pixel-based design, since the whole interface can be scaled easily without suffering any loss in quality. Of course, throughout the process we have to ensure each items visual “functionality” on all resolution levels. Thanks to such standards in our work techniques we are able to very quickly transfer a user interface to another platform – straightforward and uncomplicated.

The entire Looperator GUI is vector-built

Efficiency through Reduction

Our work for Looperator is characterised by its high efficiency, especially regarding the conception of the GUI elements: As simple as possible, as complex as necessary. For example, scaling a drop down menu during the development was very quickly possible, since merely a single vector object had to be manipulated. This reduction naturally compelled us to boil the elements’ design down to their essence. A welcome side-effect.

Every UI element consist of only a single vector object

The Process

The development of a user interface is an evolutionary process. For the Looperator we initially took a closer look at the software’s alpha version: Where lie it’s strengths and special features? Which situations require that we take the user a little more by the hand? Subsequently, during wireframing we optimised the workflow, suggested additional functions and saw to an intuitive handling. A clear separation of working areas, a coloured guide system and a deliberate arrangement of all controls create a lucid working environment. Speed is trumps: All effects are quickly accessible via popups. While developing, we take great care to observe and respect the user’s learned conventions of operating a software – a special challenge since after all the Looperator strikes a new path at certain points in order to speed up the workflow. It goes without saying that these solutions must work for mouse operation as well as on touch screen devices.

Effect Icons Design

The Looperator offers an exceptionally large amount of effects, whose variety should not irritate the user. From scratch, with a newly designed icon set we provide clarity and access. A consistent visual language communicates all functions to the user. Even abstract effects can be precisely identified and assigned. Moreover, a two-level labelling system makes it possible to clearly separate variations of a single effect from one another. The icon design was realised downright minimalistically, but at the same time uses strong visual signals.

Icon Sketches

Looperator Effect Icons

Looperator Branding

The aesthetics of sound loops are founded on the principle of repetition. We found an appropriate brand image in the infinity symbol, the Looperator’s main function is key here. The loop is used in the app icon as well as in the Looperator lettering.

Looperator App Icon and Logo

Résumé

Essential in our work with Looperator was the task of providing a clear, visually consistent and resolution independent interface for the software, which enables the user to work intuitively and flexibly. Endless possibilities without being overwhelming. Exploring and experimenting or straight to the desired sound. Live use on touch screens and mouse operation in the studio – for us these contrasts too represent the charm of this project. We were able to deliver an interface to Sugar Bytes which is characterised by an incredibly fast workflow – refined down to the very last detail.

Screenshots

On the one hand, Session Keys Grand S/Y presents pianos whose features – as opposed to a futuristic synth VST – have their origin in real life. Here, on the other hand, the sound can be adjusted by manipulating a set of unique parameters in a way which would be impossible in reality. The great challenge for Session Keys Grand’s interface design lay in finding the appropriate means to control such a wide variety of sounds.

Screenshot Session Keys Grand S

Searching for the Right Visual Language

Productive and creative environments demand interfaces with a fast, intuitive and slim handling. For this purpose, it makes sense to stick to the accustomed conventions regarding the controls. A control element is supposed to have a “stimulative character”, in other words, it has to communicate its handling and effect in an honest manner: a rotary knob suggests that it can be turned. This expectation is to be answered.

In so doing, referring to familiar control concepts which are rooted in the user’s real environment as well as emulating real objects (skeuomorphism) can be helpful for a good user experience. In Session Keys Grand S/Y, for example, the milk glass panel conveys to the user that the controls are not directly part of the actual instrument. The active elements’ glow suggests a light source sitting behind them – a signal which we know from active buttons of electronic devices.

Parameters without Relation to Reality

Besides an acoustic pattern distinctive for grand pianos, the pentamorph controller allows the creation of fantastic soundscapes going far beyond the obvious. With a single controller the piano’s sound can be changed on the fly, from the characteristic sound of a Steinway to atmospheric sounds which can hardly be derived from natural reality.

Concept sketches Pentamorph Controller

Therefore, using wooden, piano lacquer-covered knobs to control a partly irreal range of sounds would mean barking up the wrong tree. Hence, we decided against referencing a real model and instead rather divided sound source and control layer from one another.

Execution and Organisation of the GUI

Flat, minimalistic controls determine the operating layer’s appearance. The color palette only needs a few graduations and can easily be distinguished from the detailed piano render images.

Layers of the Session Keys Grand S/Y User Interface

Despite this reduction, we do not strictly dismiss ornamentation and decorations, they exist, for example, on the panels in the form of separating lines. The strictly hierarchic layout is being structured through an elaborate tab-architecture, carefully placed typography and sufficient whitespace. The controls on Session Keys Grand S/Y are reduced to their essential functionality. The minimal design makes perfect use of all its advantages: Thus, within the confines of the smallest space the interface maintains a high degree of complexity and yet does not become confusing.

Concept sketches Dynamics Controls

We designed the interactive elements to be especially rich in detail and made sure that they clearly stand out. Here, the communication remains consistent: The same color shades are always being used for active as well as inactive button states. This helps guiding the user and speeds up the workflow.

Design Research Piano Icons. They are used to switch between the versions: open and closed (here active).

A Tailored Interface for the Screen

Session Keys Grand S/Y goes beyond a mere simulation. E-instruments readiness to detach the software’s interface a bit from reality enabled a custom-made UI language that is tailored for the medium of the screen. The result is an honest, organised and clear user interface.

Session Keys Grand S/Y Interface Design excerpt

Hence, we hope to have designed an instrument which functions ideally on its platform – the screen. Thanks to an interface which precisely and quickly leads the musician to his desired result.

Screenshots: