Stories Without Words

How illustration has become essential in our product design work.

23 Design
Spotlight
5 min readSep 12, 2017

--

From fintech to consumer services to education, we’re helping companies design and iterate products that their users will love. The challenge is big: to communicate complex ideas in simple ways.

We want to connect emotionally and make it easy for people to understand the unique value of the products and brands we’re designing without undermining the complexity of the business. From simple iconography that conveys the meaning of certain actions, to more elaborate drawings that communicate messages that would be too hard to do with just text we’ve been using illustrations and art to help us meet this challenge. Here are some of the projects where illustration became a crucial piece of the design.

Illustrating Speed With 99minutos

99minutos promises shipping in only 99 minutes or less. The company uses small cars, motorcycles and bikes to deliver goods in many cities around the country. For the redesigned website we decided to place their fleet of vehicles upfront as they are the most recognizable thing from the brand, and the thing that sets them apart from other well-established logistic services. Showcasing the efficiency and speed of their service.

Current 99minutos website.

We wanted to make sure that business owners understood the benefit of partnering with 99minutos to improve their services and their clients’ satisfaction. If we could do that, we would empower businesses to grow their client base and help users get the incredible experience of receiving their shipments in record time.

Shipping, tracking and delivery are the main story of 99 Minutos

Then, we decided to tell two stories using animated illustrations. First, we make your package the start of the story and follow it, from the moment it’s shipped, through tracking and finally to its delivery — straight into the customer’s hands, with a big smile on their face.

Illustrating Trust With Conekta

Conekta helps e-commerce businesses process online payments through a simple API. Connecting their business to Conekta’s backend enables them to accept any kind of payments, from credit cards and bank transfers, to cash payments through partners like OXXO and Banorte.

With Conekta, we needed to make sure that we communicated a message of safety, reliability and trust, as people and businesses entrust Conekta with very sensitive and critical data.

Given Conekta’s sophisticated message, we were facing the challenge of abstracting the most complex processes and simplifying them in simple illustrations that, together with great copy, could be understandable for every visitor.

We started sketching out some ideas but quickly realized that the complexity of the concepts we were trying to illustrate was too high to just use flat icons. We then decided to add a level of depth by choosing an isometric style for the illustrations, giving us a better way to tell the story.

Some concepts we created for the Conekta website as part of the first iteration of our collaboration.

We then could explain concepts such as encrypted transactions through more elaborate, but still simple illustrations. We also used an orange and gray color palette for all illustrations that highlighted them against the dark background and gave them a futuristic and technological look.

Illustrating The Aha-Moment With Got it!

Got it! is an app that allows high-school and college students to better understand complex topics like Algebra, Calculus, Chemistry, Physics, Geometry and Trigonometry and solve academic assignments better.

Our challenge was to communicate how Got it! can help students improve their grades and how that could impact their overall school performance. Got it! doesn’t promise to give students answers, but it will show them the way to find them.

Got it! speaks to a more grown-up audience: people around their 20’s; so we designed our illustrations to be mature, simple… not childish.

We followed the color mix of Got It!’s logo that represented the “aha- moment” and applied the same principle to our illustrations, using a palette of two main colors and a color produced by the overlay of these. We also made it claer that Got it! was a digital product by having light shine on the user’s face.

We realized that a certain level of realism had to be infused into our illustrations, so we started by taking some pictures for reference.

Illustrating The Future With Albo

Albo is a new debit card experience with no branches. Everything can be controlled via the companion iPhone app, from seeing every transaction you’ve made to contacting support. Everything in real time.

While desigining the packaging for this new card, we found ourselves having to showcase the “newness” of the experience. We wanted people to feel how this is the future of their money experience, while also trying not to intimidate the user with something so radically new.

First sketches for the packaging illustration

We thought that the best way to represent the future was by illustrating a scene in space and making the card integrate directly with the scene as a new life form that comes from the future.

Explorations for the packaging illustration. We finally decided to go with the blue one as we thought it had a more relaxed and futuristic feeling to it.

The end result has been a complete success, with users sharing their newly-received albo cards on social media leading to sharability.

Some screenshots from users sharing the excitement of receiving their new card
Final version of the illustration currently in use on albo’s packaging.

Communicating complex ideas in simple ways is one of the greatest challenges we encounter in our work, but these examples show how much it helps to add a some art to the process.

--

--

23 Design
Spotlight

Full-service Design Consultancy based in Mexico City.