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.
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.