Developer diary: m2suite – one GUI for countless features

Welcome to our developer diary. Gain insights into mquadr.at’s new products as they are being developed. The question we answer today in some detail: How to include all the features of self-care and self-service software in a single interface?


This is mquadr.at’s first ever developer diary!

A Graphical User Interface for m2suite

Today we are going to share something with you about the development of the GUI of m2suite – which is an all-in-one solution that combines all self-care and self-service features for Internet services in a single package. With m2suite, you’ve got customer service covered.

While it is a new and innovative product, we have pioneered the underlying technologies almost two years ago and recently redesigned m2suite to meet our high expectations. Today m2suite is a market ready product that is going to be launched in a customised version by three ISPs – the first launch date is in a few months.

 
 

Greetings from mquadr.at’s product design team


Our team consists of developers, marketers, product designers and product managers following the careful guidance of our managing director – he is still the driving force behind our products. When we start designing products from scratch, we gather massive amounts of information (usability studies, market research, data trends reported by m2analytics) and analyse it. Then we create concept papers and concept artwork – and occasionally we have heated discussions on many topics; after all, it’s not easy with half a dozen people with different roles. For this developer diary we try ;-) to write with a single voice and give you some insight into our design process.

 

With m2suite, you’ve got customer service covered.

Evolution of a product

Let’s take a quick look at three screenshots of m2suite in chronological order.

The GUI has changed quite a bit, didn’t it?

New navigation and design

We see instantly how much the design has evolved. Although we have not deviated from some of the basic design guidelines (m2suite is still based on flexibly arranged tiles on multiple desktops for easy navigation), the GUI has changed quite a bit during the last overhaul. We have reworked the navigation area, the underlying framework to allow for easy customisation, we have standardised dimensions for tiles, icons and background images. m2suite offers multiple navigation options to provide something for every taste.

Additional customisation options

What you can’t see: we have added new animation sets, new transitions between states and an entire catalogue of easily customisable dynamic design elements. We might put together a video of all these dynamic features – soon-ish. In addition the underlying interfaces have been expanded to allow the inclusion of additional features as modules – basically like plug-ins. This way we ensure that m2suite, as a market ready product, can be adapted quickly to our customers’ design requirements.

Ready for customisation


m2suite provides quick access to countless features.

The GUI as single point of access

Let’s go into more detail. m2suite’s GUI has an important role to play: it needs to provide users with easy access to many different features and all kinds of content. Therefore, the GUI of m2suite is mainly based on the following standardised elements: screens for different topics (we also call them topic desktops) and tiles for almost every feature and every type of content. This includes: embedded video guides, automatic repair, Wi-Fi configuration, email management, mobile Internet management, FAQ, social media, support pages, modem configuration, bandwidth optimisation and more, and even more possible features.

Why tiles? They are the building blocks of flexibility

Tiles, of various sizes albeit based on certain underlying rules, are central to our design. They enable us to create a flexible user interface where every major feature is easily accessed from the home screen. As tiles are rectangular, we can use them just like building blocks and it’s easy to make them fit together. Try building or re-arranging something built from very differently shaped parts – it just won’t work too well. Tiles allow us to unlock new features in the future without changing the look of the application – we simply add or replace tiles. It’s even possible to create personalized custom screens in the suite by re-arranging the tiles to ones liking.

Our next developer diary: “Create your own m2suite”

In the next instalment of our developer diary we explain how we approached customisation and modularity with our “Create your own m2suite” project.

© 1999 - 2016 by www.mquadr.at