MING Labs

Building WMF's Digital Solution CoffeeConnect

Aufgabe

WMF created their digital platform CoffeeConnect as an innovative solution to collect, analyze and process smart data on the WMF coffee machines. The machines can be connected and customers can receive information to optimize their sales and technical performance. The digital platform mainly caters to the needs of the target personas of facility managers and food chain managers in charge of monitoring the coffee machines and providing data on consumer behavior. MING Labs got on board to develop the front end of the platform.

Lösung

The platform interface was created with CSS for users to view and interact with the data on the dashboard. It should be easy to navigate to quickly solve the needs of WMF’s personas. This could be to access the information of a coffee machine directly from your smartphone, with real time data. Notifications on items and errors enable the facility manager to quickly locate the respective machine, solve the issue and update the status on the digital platform.

Ergebnis

We developed the interface for the dashboard visible on the platform, with clear buttons to navigate through the menu. WMF’s CoffeeConnect won the “Future Award 2019” in the category Technology & Equipment. The digital solution enables decision makers to design efficient and sustainable processes. MING Labs got on board to provide also the front end of the Swiss subsidiary Schaerer.

The Future of Customer Support

Aufgabe

The initial problem that GROHE was facing was the fact that their customer support centre was overloaded with requests, which resulted in long waiting times for callers. Our objective was to find a way to reduce the load on customer support and subsequently improve its service.

Lösung

By conducting interviews with GROHE’s various types of customers we were able to map the current customer experience and identify the events that triggered most queries to customer support and that had the highest business impact. Once mapped, we ideated solutions for those critical events.

Ergebnis

A new grading for customer support calls based on their level of urgency, prioritizing more urgent and business driving calls. A concept to re-structure customer support as a combination of a self-service platform which is supported by human agents, when needed. Our biggest learning from this project was that not all customer pain points are alike and solutions should focus on the ones that drive the greatest business impact.

How we turned a bottle of egg whites into a health food brand

Aufgabe

In 2014, Jan and Fabian, the founders of a yet untitled company, noted a new trend: people conscious of their diet and eating habits were eating egg whites. A lot of them. The egg white is extremely rich in protein, and, according to some studies, contains protein of the highest quality. The problem is, of course, that you couldn’t buy egg whites anywhere in Germany — so your only option was to buy eggs and throw out all the yolks. Jan and Fabian came up with the idea to sell just the egg whites, and they approached us to work together on the product launch — which included naming, packaging, branding, website, and so on; the whole thing. There were a couple of difficulties at play here. First, the egg white — a translucent liquid — doesn’t look particularly appealing, visually speaking, so we had to come up with a way of showing the product in some other way. Second, the audience wasn’t really familiar with the product, with the idea of buying just the egg whites, so we had some explaining to do before we could convince them to buy this.

Lösung

As luck would have it, we started from a blank slate, having absolutely nothing at the start — except for some egg whites to taste. Not even a name. After a couple of iterations, we settled on Pumperlgsund, a beautiful word from Bavarian German, roughly meaning "perfectly healthy”. Indeed, it’s the idea of healthy eating that the founders wanted the name and the brand to carry. The visual identity followed the same themes of health, organic bio food, so it’s all green, obviously. The generative logo imitated the egg, and the animations reflected the liquid nature of what we were dealing with, showing the physicality of the product in pixels. A lot of effort went into the packaging. The egg whites are sold in bottles, and we wanted the bottle to somehow hint at the nature of what’s inside, and also to stand out when placed on a supermarket shelf. We faced many questions when on the search for the perfect packaging: What is the perfect bottle shape? Glass or plastic? Transparent or opaque? What kind of cap should we use? We studied over 30 different bottle shapes, testing for qualities like: the ease of pouring, robustness, and whether it was possible for the bottle to visually represent the product. The pot-bellied shape of the bottle that we ended up choosing was derived from the egg, and the rough, uneven texture of the bottle material is also similar to the eggshell. The bottle turned out to be a bit transparent, making the amount of the egg white inside clearly visible

Ergebnis

Now that we had a tangible representation of the egg whites — the bottle — we could start with explaining the product. What is it, why is it good, and so on. The idea was to turn the bottle into the hero of the story, and to place it front and center, showing various parts of the bottle while simultaneously telling website visitors about the egg white. Oh, and you could order the bottle online, too. To show how egg whites could be used, we created an entire section with recipes of all kinds of meals that you can cook using egg whites. To develop this collection of recipes, we relied heavily on the UX research to better understand what exactly people are looking for. Pumperlgsund was launched, and the launch was successful. The founders got invited to a German TV show, the local version of “Shark Tank” / “Dragons’ Den”, and won €500,000, and Frank Thelen, a German serial entrepreneur and investor, immediately offered them a deal. The egg whites soon appeared on the shelves of major supermarket chains — and indeed, they looked rather good. The last time we checked, Pumperlgsund sold over 500,000 bottles, which roughly amounts to 5 million of eggs the yolks of which were not thrown away. Meanwhile, while the founders of Pumperlgsund were enjoying their fame and success, we were having a moment ourselves. Both the website and the packaging received a number of awards. Which is always a good thing.

How we created a digital media about sustainable development in Asia

Aufgabe

ADB wanted to offer something their competition didn’t, and their bet was on becoming a more human, more approachable, less bureaucratic organization. The ADB’s president’s agenda was using new tech to run the business in a more efficient way, involving digital transformation and innovation to improve the processes overall. They acknowledged that the process of getting a loan is a very slow one, involving a lot of complicated paperwork, and that they needed to do better. The starting point for this project was McKinsey’s 100-page "Asia Development Report”, which acts as a summary of development progress in Asia. ADB realized that it’s too academic, too long, that nobody really reads it and that they need to do better. The audience that ADB needed to reach is a very special one: namely, government officials all across Asia. To reach them, ADB decided to move to storytelling: away from reports, to the actual stories behind the development, covering the projects’ impact on people’s lives, showing who the people behind various projects are. A related idea was to establish a community around sustainable development projects — solar farms, low-carb tech, and so on.

Lösung

We started with a four-week discovery sprint, conducting various workshops and interviews to better understand who the people are we're talking to, what their business objectives are, and so on. During this sprint, we created an interactive design prototype of the website that would later become Tech For Impact. The website displayed different storytelling formats, from feature articles and blog posts to video, as well as various community features. One of the objectives was not only one-directionally talking to people but also interactivity, such as events, webinars, etc. — overall, forming a community and starting a conversation about sustainable development. For testing purposes, we were introduced to government employees from Indonesia, Myanmar, Mongolia, Vietnam. We showed them the prototype and interviewed them, learning about their habits and requirements, which contributed to the overall product spec. For example, we learned that, contrary to our expectations, most of our target audience was using desktop browsers, not mobile. Then we defined the MVP, wrote user stories and moved to three-month production phase: design, back end and front end. Another team handled the production of all materials for the website: - Featured stories: particular ADB projects, videography, storytelling, figures, ROI, big pieces - Podcast: different types of people from the sustainable development community - Smaller pieces

Ergebnis

The process of discovery-driven product development with quick experimentation and regular iteration was completely new to ADB. They'd never done that before, they never talked to users, and they liked working in this new way, a lot. We got a lot of enthusiastic responses. Collaboration with media production units was something we'd never done, as we rarely find ourselves in the media business. We set up the project pipeline in such a way that while the website was under development, the content team could already produce the stories for the website.

Electric Vehicle In-Car Experience Design

How good is the air in your room? This app will tell you

Aufgabe

The air quality in most of China leaves much to be desired, so Mann+Hummel launched OurAir, an indoor air filtration system, and we did some apps for it. Mann+Hummel is a big deal: For over 100 years, it’s been producing filtration systems for air and water, primarily used in cars, and the company firmly established itself as what might be called a World Market Leader in the Automotive Industry. In the light of the quick development of electric mobility — electric cars, electric scooters, electric everything — which marks the beginning of the end of the diesel motor, M+H began to look for new applications of its filtering systems. Soon enough, they created... OurAir, an air filter system for indoor use. Simply put, it's a device that you place in the corner of your room to make the air cleaner. In countries and cities with unreasonably high levels of air pollution, this is something particularly relevant.

Lösung

OurAir was originally intended to be a consumer product, and the idea was to use an app on your phone to control it. The app would tell you whether or not you should turn on the filter, how good the air is inside, how good the air is outside, and so on. Pretty straightforward stuff. M+H decided that since they’re already very good with selling things to big companies, they could do more of that with this new product too. Workplaces need clean air as much as homes do, so why not equip an entire building with these filters then? So now we needed to figure out the logistics of having maybe several hundred filters in one building. How will they be set up? Once they’re set up, how will the building manager monitor air quality? In addition to repurposing the already existing B2C mobile apps, we designed a web app for managing this whole thing that would give an overview of the air situation in a given office. Dashboards, analytics, all good things.

Ergebnis

We did the front-end development for the project ourselves: just the mobile apps, though — the hardware engineering, the back-end, and the web app development was done by other M+H partners. Developing an IoT app is not a very common skill yet, so the development phase presented some interesting and unexpected challenges: To connect different devices, we needed to use different protocols and sometimes different connections (Bluetooth/Wi-Fi), while keeping the user experience consistent. To resolve the connectivity issues, we worked closely with the back-end and hardware teams. Since we needed to deploy the app both in and outside China, we had to use different services for users from different places: While Chinese users would sign up with a phone number and would use WeChat login and Baidu Maps, global users signed up with emails, logged in with Facebook and used Google Maps.

The World's First Truly Smart Lamp

Aufgabe

Lukas Pilat and Robert Kopka were designing a different kind of lamp: a lamp that would make it possible to set up the light in a room just so — color, shape, direction, intensity, etc. With a regular switch, you can’t quite paint with light. You need some kind of interactive medium. Indeed, the idea was that you’d control the lamp with a phone — and it is with this idea they approached us to experiment and find a suitable, unconventional, pleasantly surprising way of doing so. Technology-wise, their idea was to use 200 LEDs in total, some at the top, some at the bottom, that would generate any light in any direction. According to our knowledge, nothing of the kind existed at the time. It was an ambitious, risky and technologically challenging endeavor: As with all innovations, it’s quite impossible to predict up front whether you’ll succeed or not. Same with design.

Lösung

When we started working, we only had that crude prototype, and incredibly incomplete knowledge of the technology and the end result. Over time, as we were refining the app, Lukas and Robert were refining the lamp, and gradually the two started magically converging and looking like a real product. We both wanted to make Something Quite Good. The app was built around two ideas. First, presets: the notion that you’d need different light setups at different times — frustratingly bright light to wake up in the morning, soft ambient light to watch TV in the evening, etc. Second, gestures: We quickly got rid of buttons and lists and otherwise all too familiar UI controls in favor of a more fluid and physical visual language. (Apps for painting and composing music were our primary references.) The centerpiece of the app was a color picker, allowing lamp owners to almost literally paint with light. With the intention of replicating the real-worldness of the lamp, the physicality of light, some particular attention was paid to making the app look life-like, as far as pixels permit. The interactions, transitions and every microdetail were first designed in motion, and then replicated in the development phase. This might be subjective, but somehow this very simple process of moving your fingers against the cold glass of the screen and seeing the “paint” move and seeing the light change at the same time is incredibly soothing, calming and satisfying.

Ergebnis

Luke Roberts debuted on Kickstarter to raise funding for the first batch of lamps. At the time, it was the most successful tech Kickstarter campaign in Europe, raising over €400k, the original goal eight times over. Of course, it probably has much more to do with the lamp than with the app, but we like to think that the app had a bit to do with this success as well.

How we helped a big telecom provider find out how their SIM cards are sold and used

Aufgabe

XL Axiata wanted to understand their distribution network — to get data, to get insights, to understand precisely what’s going on with their SIM card sales, and how to adjust their offers to better suit the needs of the customer in the real-world. Among other things, XL Axiata sells SIM cards throughout Indonesia, a wonderful country in Southeast Asia with a population of 264 million people living. What’s particularly interesting is the number of islands: between 16,056 and 17,508, depending on your sources. Apparently, counting islands is not as straightforward as one would think. You can quickly see that the combination of all geographical features — country size, terrain, etc. — instantly turns the logistics of delivering of your products into a logistical nightmare. XL Axiata operates only about 300 of its own retail stores, and relies on the network of third-party wholesalers, distributors and retailers to sell their SIM cards. The more entities involved, the more convoluted the process becomes; or, to put it simply, it’s challenging! There is next to no visibility, you don’t know who you’re actually selling to, how these SIM cards end up being used and what the most popular plans are.

Lösung

We started with a Discovery Sprint that lasted three weeks and involved plenty of work, doing workshops with the client, developing roles and personas, and supporting long field trips around some exotic places in remote areas of Indonesia. We were visiting major dealers in Jakarta and outskirts, Makassar, and Yogyakarta, interviewing the owners and/or employees of all these tiny shops — who were some of the nicest and most helpful people. Some of the places we visited are far from the cityscapes we envisage to find XL Axiata Retail Stores. Many of the outlets are tiny villages; some are just a few houses next to a road in the middle of nowhere. And these are not standalone stores, as you might imagine reading this in London or Paris or New York. Rather, it’s a family home, where most families earn their livelihood selling fresh homemade food in one corner and SIM cards in another. This kind of field research massively helps to cut the gap, the disconnect, that is always there, between the suits in corporate headquarters in air-conditioned skyscrapers — and the reality of the business; how products exist in the context of real life; in the context of the lives of real people. The people selling the SIM cards told us some interesting ideas how to automate the process — how to get around the weird complex logistics of registering a SIM card that we witnessed and make it more convenient for their customers. We brought back everything we gathered to the client's HQ in Jakarta.

Ergebnis

There were some remarkable findings: for example, conflicting KPIs and broken loyalty programs. After synthesizing the research results, we came up with 15 suggestions on various initiatives for getting and revealing the hidden data. The idea that we thought the best was to focus on real-time provisioning. To assess the feasibility of this solution, we talked with some company stakeholders from logistics, marketing, law, compliance, data analytics, etc. Based on these findings, we created a risk impact analysis and a SWOT that revealed the strengths, weaknesses, threats and opportunities for XL Axiata. The obvious downside of real-time provisioning was that it would require at least one year of implementation. So the client decided to opt for an easier short-term solution, which was: to build a mobile app for the retailers and wholesalers. We built a mobile app for retailers and wholesalers to simplify ordering and provisioning SIM cards from XL Axiata. The plan was to make it easier for them to order the cards, and if this was to work, then our client would get the precious data they were after. Once again we saw that digital transformation is all about people. It’s vital to make people aware why change is needed, and carefully guide them from the old world to the new digital one. Your job as a designer is to teach them new skills and to dissolve their fears that they would become irrelevant in the new digital world.

How we adapted a global mapping platform for China

Aufgabe

Mapbox is a provider of custom online maps which can be embedded in websites and applications. Naturally, the primary audience of this kind of service is developers, as they are the ones who end up using it most extensively while building a website or an app in question — and developers need detailed, extensive, up-to-date documentation to be able to work with the external platform. What this means for Mapbox, effectively, is that they need to create and maintain a huge collection of knowledge — documentation for various programming languages and for various platforms — and have both a way of displaying it in a convenient way for the reader, as well as a good way to edit and publish stuff (a content management system, roughly speaking). A set of extra challenges on this project included: - Technical legacy of many tools and frameworks used on the original American .com site - Working with stakeholders across multiple business units and regions with conflicting priorities - Identifying a structure and visual identity that matches the needs of the Chinese audience while still conforming to the existing global brand We mapped out the project and got to work.

Lösung

At this stage, we'd done all the essential preliminary work. Such as: kickoff, user interviews, emphasizing findings, information architecture, prototyping, usability testing, visual concept. After talking with stakeholders and defining business priorities, we interviewed Chinese developers to understand their goals and needs. The next step was to map out the 500+ pages of the US website to use it as a basis for the Chinese version. Then we suggested our version of information architecture for the Chinese website. They worked really well for quickly checking the core decisions in terms of the website structure and organizing the information — before investing more efforts into the actual design. Then we built a high-fidelity interactive prototype, which we used for user testing to get some real-world validation of our hypotheses. Afterwards, we interviewed five developers to get insights from them. On the visual side, we adapted the existing brand visual language and expanded it, notably introducing a Panda mascot. The core concept for the homepage in terms of visual design was interactive scrolling: As you scroll the page, the map will move, and the website reader will learn about various features of Mapbox in context. Production design sprint: This was the project phase where we finalized the design. The key parts: reiterate prototype, visual design, motion design, development support.

Ergebnis

We reviewed the feedback we got during user testing and translated that into specific tasks. We built a system of templates that could be reused across various documentation pages. We did the motion design in Framer — basically describing all the animations with code — mostly to make it easier to hand off the animations to developers later on. Now that the design phase was over, we just had to build the whole thing. The MVP stage covered the very basics: Technical legacy of many tools and frameworks used on the original American .com site We researched what’s the best way to build the documentation system. Meanwhile, we learned a few things from the American website. The original mapbox.com was built by converting React JavaScript files and Markdown files into static web pages with Batfish, a static site generator. For the documentation and examples website section, different tools are used for each platform: - For Mapbox GL JS, the comments are extracted from the SDK code with a third-party tool called documentationjs, then processed in a React JS file and finally converted to documents web pages - For iOS, Realm is used to generate the static documentation web pages - For Mapbox API document the open-source tool Docbox is used This architecture makes it fairly simple to update the website. During production development we defined the setup of the whole project, the project structure, and we designed the automation deployment process.

Web Experience Redesign for Uniplan

Aufgabe

The design agency Uniplan wanted to relaunch their website with a new design, look and feel to communicate the new brand position in the right way. This included not only the design, but also the development and copywriting. Uniplan reached out to us due to a recommendation for website design and development. Our objective was to create a new platform that mirrored Uniplan’s nature of design, creativity and strategy.

Lösung

We got together in workshops with the team from Uniplan to define the direction we wanted to move into with the design and the copy on the website. We took time to go over all the requirements and limitations the client had for the platform. Based on our insights from the workshops, we created the first wireframes to get an initial glimpse of the structure and design of the pages. Working in several design sprints, we were able to gather feedback from Uniplan on the designs, make changes and present them back to the team. The sprint format enabled us to quickly implement the client’s feedback. Once approved, we forwarded the information to our development team who then built the website using Drupal as our CMS system.

Ergebnis

We designed a completely new web presence and Uniplan’s new website was launched with a new brand design that incorporates their new brand positioning and provides a home for all content to drive more business and create great brand experiences. The site is still live and fresh and shows that good work can last for a couple of years —even in the digital world.