Breathing Life into Mimo’s Designs

Filip Greš
Jun 26, 2018 · 5 min read
Image for post
Image for post

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

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

Image for post
Image for post

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

Image for post
Image for post

Shape

Image for post
Image for post

Borders & fills

Image for post
Image for post

Corners

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

Avatars

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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!

Making Mimo

Mimo makes learning to code easy on mobile and the web.

Filip Greš

Written by

Making Mimo

Mimo makes learning to code easy on mobile and the web. Take a peek inside the minds of the engineers, designers, and teachers making it happen. https://getmimo.com/

Filip Greš

Written by

Making Mimo

Mimo makes learning to code easy on mobile and the web. Take a peek inside the minds of the engineers, designers, and teachers making it happen. https://getmimo.com/

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store