Product Blog

Back
midaxo-color.png

Embracing user experience with the new interface design - a background story by Midaxo’s chief designer

Midaxo’s cloud-based platform supports buy-side M&A teams in streamlining their end-to-end process, unblocking the flow of communication, and structuring all tasks and issues. Information in Midaxo is presented in a smart and intuitive way to help M&A professionals focus on the important work, rather than on the tools, as the comparison between traditional project management software (on the left) and Midaxo (on the right) illustrates.

Comparison between a traditional project management software (on the left) and Midaxo (on the right)

Our mission to stay on the cutting edge of usability and efficiency continues with our updated user interface.

Current interface: what's good and what should be improved

A screenshot of Midaxo Pipeline in the early 2015 version

The 2014 version of Midaxo’s user interface followed the concept of skeuomorph and featured a lot of details such as shadows, linear background, embroidery effect, and so on. The advantage of this design is that all elements look distinctively original and users can immediately tell what an object provides or does based on its appearance. For example, a movable object looks like a card, so users know that they can touch, drag and drop it, as shown below.

demo1

Midaxo's friendly and well thought through user interface has received acclaim from our customers as well as external auditors. We take that as our core value. Even when the "flat design" became the primary trend in software development, we didn’t jump right in just to get ahead of the industry. We spent a good amount of time to evaluate which values of the current design should be preserved, and which should be changed or modified in other to make our users feel like they are using an application with the latest technology.

Mission for the next interface: make it simple

Simple: it’s a small word but a huge concept. We all know that we should live a simple life, but we also know that it is not always, well, that simple. Most of our users are very busy and we don’t want Midaxo to add any more complexity to their daily routine. The platform must support the user: to give an answer when they ask, to provide information when they need it, and to ease their eyes with soft colors and an elegant design.

"Simplicity is the ultimate form of sophistication"

- Leonardo da Vinci

To achieve simplicity, we set three goals for the redesign of the user interface:

  • The software should look simple with less details and unnecessary effects.
  • The software should feel familiar so that current customers won't have to learn to use it again.
  • The software should be original and easy to recognize as Midaxo's product.

We achieved our goals by focusing on the essential elements, ensuring design consistency, and building on a calm color scheme, while keeping what works.

Focusing on the essentials. We removed all the unnecessary decoration of the old user interface. The fabric-like wallpaper was replaced with a monochrome background. The engraving effect was removed from all the buttons and text. The inner shadow was also turned off. As a result, the platform looks much cleaner and fresher. It requires little time for users to get into the core functionality, as the before and after versions of the project card illustrate.

Project card: before and after

Although the new interface simplifies the general look and feel, we deliberately avoided creating a flat design. We used realistic lighting to show seams and divide spaces, for example. All objects are considered to be in a 3D space. The z-axis defines how close an object is to the viewer. This helps to highlight the current objects and makes the interaction between users and the software smoother. The following example shows how an important button is highlighted by adding shadow to make it look higher than other items:

Floating button

Ensuring design consistency. Besides the color and decoration, we also paid attention to the consistency of the software. The new user interface aims to reduce the variance between similar elements, i.e., objects that look the same also behave the same way – and, conversely, objects that behave the same way look the same. A Midaxo user will get a more consistent and straightforward experience when using the software. The following image shows several pop-ups in the new Midaxo interface. They all look and behave in the same way.

midao-pop-ups

Calm color scheme. Midaxo's primary color is bold orange. Orange represents confidence, an optimistic spirit and a positive outlook. In the software, it is used in highlighted texts, links, headers and important buttons. On a gray background, orange really stands out. It is joyful yet subtle enough for an user's eyes.

Midaxo's color scheme

In addition to orange, we also use other basic colors to represent major features of Midaxo. Red is for issues, risks and critical call-to-action buttons (such as deleting a project). Green is for successful completion. Blue is for events and time management. Purple is for users and team management. Whenever users see a color, they may already know what it represents!

Keeping what works. Users are not always excited about "updates." In fact, sometimes they worry that a big update will change or take away everything that they love about the software. Therefore, together with improving Midaxo's user interface to match the modern standard, we also aimed to keep our existing users comfortable. We want to make them feel like they are using the same product – just a better version. Below is a comparison between the before and after versions of the cover page. All features stay in the same place, but the new layout is neater.

Cover page: before and after

Combining it all to 1+1=3. The result is a light, fresh, and stylish user interface. Scroll down for a screenshot of the Pipeline view after the update.

New UI of Midaxo

Pretty sweet, isn't it?

The new user interface works very well on tablets. Midaxo users can check their projects and tasks on the go! The experience is almost identical to using Midaxo on the desktop. We continue to work to make the mobile experience even better; stay tuned for a mobility-focused release in the fall.

ipad_athand

By improving the user interface, we want to make the interactions between our customers and the product easier, simpler and unforgettable. The software will save time for our users, so they can focus on making their deals successful. On the other hand, nothing is perfect, which is an opportunity for us to keep working and moving forward.

We appreciate your feedback. Please leave a comment here or send an email to: info@midaxo.com.

longavatar
Minh Long Ho - Chief Designer, Midaxo
I'm a self-taught graphic designer and front-end developer. I like to experiment new things and turn conceptual ideas into practical product. My job is to help making Midaxo a simple, easy-to-use, fun-to-use tool for M&A. I'm happy that my skills, passion, and knowledge can benefit other people around the world.