Visual Explorations - Lumosity's Lingo

Visual Explorations - Lumosity's Lingo

Every brand has a visual language that is used to construct it’s identity. At Lingo, a visual asset manager for teams, we’re fascinated by the stories behind these visual languages. Because of this we’re interviewing some of the amazing brand’s in our community so we can share their visual voice with you! The next customer we’re profiling is Lumosity, a brain training product created by designers and scientists 

You guys have established a lovely visual language, can you walk us through how you guys developed it: 

Of course! We went through a huge rebranding effort about 4 years ago when Lumosity had outgrown it’s original branding. We had just finished defining our brand personality as being bright, friendly, expert, and inspiring and were able to translate those concepts to the tenets of our visual language. Our Creative Team was in its early stages, but brought together a range of different creators — visual designers, artists, UX designers, and copywriters — all working together to forge the new visual personality. That desire to be interdiscipline-inclusive has meant that the development of our visual language has become part of our holistic design approach. We don’t just think of our aesthetic as strictly visual, but instead a multidimensional experience that’s now made up of visual design, illustration, interaction, motion, and sound and underpinned by UX research and design.

“We don’t just think of our aesthetic as strictly visual, but instead a multidimensional experience…”

Our visual branding has really been a labor of love from everyone who’s been involved in the past few years, and one that’s certainly still evolving as our Creative Team grows and our brand matures. It starts with hiring really talented, bright, driven makers who are invigorated by collaboration and then giving them enough support to allow them to be successful both as a team and as individuals.

“ Our visual language mimics the way we approach that process of pairing designers and scientists.”

What was the inspiration?

Our inspiration comes from all over, but most of all it was derived internally from this unique blend of science and design we have at Lumosity. Our visual language mimics the way we approach that process of pairing designers and scientists.

There were a few designers who have remained beacons of inspiration though, who were focused on similar missions — Charley Harper and Ray and Charles Eames. These designers were able to use expressive minimalism to draw people into their work and expose them to concepts that might otherwise seem complicated. Harper’s work, especially in The Golden Book of Biology, is incredibly impressionistic and stylistically expressive while still remaining true to scientific accuracy. The Eames Mathematica exhibit was designed to spark visitors’ curiosity in the underlying mathematics in the world around them. They strived to develop an exhibition that would “be of interest to a bright student and not embarrass the most knowledgeable” and “spur curiosity not by aiming for simplicity but by offering hints of complexity”.

We also drew product design inspiration from Kerem Suer, who was changing the way flat design was being used in apps. His flat design was not just a stylistic decision, but also as a new way thinking about interaction. His interfaces are simple and easy to use, making complex interactions seem really simple through smart use of minimal details, meaningful color, and white space.

How would you explain Lumosity’s visual aesthetic?

We take a humancentric approach to the way we craft our visual language. Our job is to take relatively “cold” concepts and to “warm” them up into an experience that’s bright, friendly, and inspiring. So in the same way, our visual language that comes through in our colors, shapes, movements, sounds, and textures is a tension of cool and warm executions. We use “cool,” mathematical, and precise geometry in our shapes, layout, and monochromatic colors — then balance that with “warm,” organic, familiar, and humancentric elements in our illustrations, motion, audio, and copy. By boiling our imagery down into its simplest forms, we can convey the essence of the idea and still have room for stylistic expression without muddying things up.

“By boiling our imagery down into its simplest forms, we can convey the essence of the idea…”

Our app experience is focused most on expressing a bright, friendly, expert, and inspiring visual personality so we keep things as clean, straightforward, and direct as possible. Lumosity is designed to be a product that people use daily, so we felt it was important that they really enjoy using it. We chose to use friendly and invigorating colors, like teal and persimmon, as spots of intentional color within a composition primarily focused on white space. We introduce iconography and illustrations only when it makes sense and supports messaging or action. In those moments we might introduce a relatable moment or everyday scene in order to help contextualize how our product fits into the user’s life and the world around them.

The games are the most experientially rich moments, because we want the user to be entirely focused in these moments. We create that density with story, color, texture, complex motion, and sound. The organic elements that come into play when we want to create experiential depth are naturalistic and domestic. For example, the audio and background textures we use are wood, glass, metal, and natural fibers.

We love the playful nature of the illustrations on your site and app, can you tell us a little bit more about them?

Thanks so much! Since we have such a wide user base our illustrations need to be universally appealing as well — playful but not whimsical or kiddy, sincere but not saccharine, elegant without formality.

The role of illustration in our work is to be supportive and purposeful, whether it be to clearly communicate a message, drive a behavior, or evoke an emotional reaction. Used sparingly in our product, our illustrations can feel bright and rewarding. In our marketing materials, they are bright and enticing. And used liberally in our games, they can invoke a tonality and immersive sense of place. We also love finding opportunities when we can surprise our users with little moments of delight — have you found the gnome yet? He’s a sneaky little dude and shows up in a lot of unexpected places.

 

You guys are a brain training platform, what is the visual metaphor that you guys use when talking about training throughout the Lumosity experience?

Good question — it’s been tricky. We care a great deal about our authenticity, especially in our visual touchpoints. We’ve seen the gamut in other products, from cartoon brains lifting weights or running on treadmills to totally abstracted data visualizations. We want to remain true to what we understand about brain training and present this understanding in accurate and accessible manner.

The way we choose to visually represent training is by splitting out the concept of performance data from Lumosity training progress. We’ll show your performance in the form of a data visualization, while showing your progress in the form of a visual milestone. We play a lot with circles because they represent a lot of concepts with such a simple form. Filling up a circle reinforces the concepts of progress, completion, and cycles. There is no beginning or end, but there are clear signals of progress and completion. You can see incremental progress as the circle fills up, there’s a sense of satisfaction when the circle completes, and then it all starts over again. We want our users to intuitively have a sense of progress in their training, feel the satisfaction of completing goals, and understand that daily repetition is part of a long-term commitment to their journey.

How do you guys use Lingo?

We had been waiting for a product like this to come along for years! Lingo has been a great way for our team not only to share and organize our visual assets, but also to learn technique from each other. It’s really revolutionized the way we work. Having all of our work in one shareable place with a simple and elegant interface has meant that we can find what we need easily and keep our style consistent. The simple drag and drop interface has meant that it’s super quick to add or pull assets from our kits. It’s also empowered our whole Creative Team with the autonomy to design with existing illustrations so they aren’t dependant on waiting for a visual designer or artist to create a new one. This has really been the first tool in the last 5 years that has given us the freedom to take this step, so thank you!

“Having all of our work in one shareable place with a simple and elegant interface has meant that we can find what we need easily and keep our style consistent.”

How has it been incorporated into your team’s design workflow?

Our whole Creative Team uses Lingo. At the end of every new feature or project we upload new visual assets into Lingo and do some basic organization. Usually someone else will find a use for that same asset later on and will tag some more helpful information (we kind of crowdsource tagging). Then at the beginning of a new feature anyone can use existing assets to block out an illustration in a flow, which is super helpful when we’re prototyping and creating early mocks. Finding an asset that already exists can inform the layout in a way that a standard wireframe might not be able to capture, and it allows us to communicate better with each other about what we’re trying to go for. We’ve also recently started adding entire features in addition to individual assets to keep track of the context that it was used in.

“Finding an asset that already exists can inform the layout in a way that a standard wireframe might not be able to capture, and it allows us to communicate better with each other about what we’re trying to go for.”

How do you guys see your visual language growing over the next five years?

I think as our product experience gets richer we’ll have more room to evolve our core visual language to assist in these new modes. I see us creating more depth in our visual language with more data visualizations, more expression in our illustration and motion, and more dynamic interactions. It will be exciting to explore this together with the team as we bring on even more talented folks with creative superpowers. Stay tuned!

What are your must-read design books/ blogs / podcasts and why?

We have a lot of favorites! We host bi-weekly Learning Sessions where a few sources seem to come up a lot, though. Medium hosts some great blog writers, especially Julie Zhou. Google Ventures and SmashingUX both have fresh approaches to the design process.

As for podcasts, Invisibilia has really been insightful for behavior design and Radiolab for making science relatable through engaging storytelling. Design Matters because it’s cross-disciplinary and you get a humanizing look at artists and designers. 99% Invisible because it’s storytelling about how the design of everyday objects affect culture.

Some books we’d recommend are The Laws of Simplicity by John Maeda and Elements of Typographic Style by Robert Bringhurst for their approach to the beauty of elegant simplicity in design. The Design of Everyday Things by Donald Norman has a great overview of foundational concepts in product design.

Shop Talk: Designing Lingo’s Successful Empty State

Shop Talk: Designing Lingo’s Successful Empty State

Visual Explorations – Grovo's Lingo

Visual Explorations – Grovo's Lingo