Breathing Life into Mimo’s Designs

Filip Greš
Making Mimo
Published in
5 min readJun 26, 2018

I joined Mimo because of the team’s friendly, fun, and unique personality. This personality which was so clear to me on the inside wasn’t being communicated to people on the outside. This meant we were missing out on an opportunity to make learning to code more fun. No doubt, a crucial part of the user experience. Mimo was in need of a new style.

Finding Harmony between Illustration Style & Brand

Developing the new style started with a 20-second gut test; a process designed to identify key preferences for new designs. Our test helped us come up with four:

  • Friendly, but not Childish
  • Simple, but not Boring
  • Colorful
  • Memorable

Defining these key elements with the team gave me direction: Mimo needed to move away from flat illustrations and add a human touch.

Drawing our Way to the Finish Line

Building a set of design rules starts with the most complex illustrations on pencil and paper. It’s the fastest way to find the crucial elements that define whether an illustration appears more friendly or too childish. So that’s how I started with Mimo.

After several versions of just a couple illustrations, I moved to Adobe Illustrator. From there, I focused on shape, borders, and fills. With four illustrations in different styles, I started to explore color.

Using our key preferences, I knew to start with bright and bold colors; not saturated and boring ones. Since we were going for a friendly feel, it meant avoiding neon colors. Not to mention, neon colors can be a sore to the eye.

At this point, it was time to get feedback. I chose one color palette I felt was best so that our team could focus on the overarching style. From there it was several rounds of feedback and tweaking before finding the perfect colors and style.

Presenting the new Design

Giving people a real sense of how designs will affect the real product is essential. So after finding the right color palette and style, I went to work creating different examples of illustrations that would be found throughout the app. Then I showed them to the entire team.

Everyone has different opinions when it comes to design. So you need to explain why you do things a certain way. Sometimes that means accepting you were wrong and making changes. Other times you know something is right and have to follow your gut to push designs in the right direction.

After four months of drawing, getting feedback, and making improvements, we had the final style.

“Our new style is friendly and fun and creates a meaningful connection between Mimo and our users.”

You’ll find the new designs throughout our latest iOS update and the new Android app. An overview of them can be seen below.

Illustration Style: Adding the Human Touch

The new style makes Mimo more recognizable by using bright colors and a hand-drawn approach.

Primary colors

Shape

Borders & fills

Corners

Illustration Types

All across our app, we use four types of illustrations, including track icons. Each of them has a particular purpose and we treat each of them differently.

Scene illustrations

A scene illustration works on a larger space and allows the user to explain a track or a course with a more detail-driven approach.

Spot illustrations

Spot illustrations are used to help explain a lesson. They’re the simplest and most literal expression of a concept. They’re there to help enhance the flow by bringing the interface to life, thereby delighting the user.

Avatars

Avatars are a category in and of themselves. They can be used on their own or combined with other illustrations.

Track icons

Track icons are a part of the illustration family, but they serve a very different purpose. Icons are more literal and are intended to bring clarity to their subject. They should always be simple and easily understood.

Bonus

We have a mascot now!

Along with new illustration style, I created our new mascot, who gives our brand personality. Its mission is to entertain and engage our users and guide them through their learning process.

What now?

Check out Mimo!

Download Mimo either on Android or iOS and let me know what you think of our new design. Looking forward to hearing from you!

--

--