Moodboard and style tile: Textie

Creating a visual language for our app

Oscar Dumlao
Design for Behavior Change
5 min readFeb 25, 2021

--

Sample brand collateral exemplifying our design language.

Our team was excited to give our solution for texting a concrete visual expression. The Textie app is chill, composed, but friendly at the same time. It feels familiar—like a figure you trust in your life during times of stress (indeed, that is the role we’d love for our app to play in our users’ life.)

During our exploratory phase, we were most inspired by wellness apps and scenes of cool, elegant calm. Our individual moodboards reflected the range of our team’s interpretations.

Five moodboards

Mary

During our team discussion, tea was brought up as a favorite food of our brand, which gave Mary the idea to explore milk tea or boba as a central mood. She also decided threw in Pinkberry (a popular frozen yogurt brand) and Taiyaki ice cream as sweet treats giving off the same vibes. Chicago was determined as a favorite city of our brand’s, which compelled Mary to go for a cosmopolitan look best embodied by young adult fashion. Screenshots of Notion and an organized iPhone home screen were inspired by the product’s goals for creating a solution for disorganized and overwhelming inboxes. Finally, the Nintendo characters were included to add a hint of innocence, cheerfulness, and bright pastel color.

Pau

Pau’s mood board took inspiration from our team’s conversations around wellness and peace of mind when interacting with an app. In our team discussion, we said that our brand’s favorite drink and meal was tea and soup, so she included some images of characters meditating or sipping a cup of tea, as well as a more vibrant cup up tea by itself. Pau also placed emphasis on variations of green and salmon pink colors that reflected these feelings. For Pau, the green color felt comforting, while the shade of salmon pink felt like it added some light and softness. Finally, she included an app that used white space effectively as an inspiration for softness and cleanliness in our app.

Oscar

My board was focused on visual themes of roundness, softness, and coolness. Round and open user interfaces like Clubhouse and Cash App defined a potential direction for the expression of the product itself. More broadly, cool greens and teals reminiscent of a Japanese garden in the rain struck the chillness and composure that he imagined for the app. Typographically, I was interested in circular, geometric sans-serifs that felt wide and friendly. Finally, I sensed that anthropomorphic characters to give a face to your Textie might be a great way to keep people wanting to use the solution over standard messaging. In this domain, there was inspiration in the simple yet emotive illustrations of Headspace, Waze, and Duolingo.

Medha

For Medha’s color palette, she was really inspired by the comforts of soup and tea we mentioned in our brand identity brainstorm. She wanted to keep it simple, but playful. To create a sense of comfort and to play on the idea of tea, Medha chose slightly more earthy muted colors. She also didn’t want the UI to be distracting from responding to messages. She was really inspired by how headspace evokes a sense of playfulness and comfort through characters, so she included some element of this in her moodboard. Medha finally looked into children’s books and apps to get inspiration for the product.

Jen

Since our intervention aims to bring ease into people’s lives by reducing the clutter of unread messages through better habits, Jen’s moodboard focused on including elements with calm, uplifting qualities. The muted pastel color palettes convey a sense of stillness, especially with the viridian color motif in many of the images, which give a sense of feeling grounded. Round and ergonomic graphics such as those on the bottom left express the seamless nature that Jen imagined for the app. Images in the top right convey a sense of satisfaction, which is what Jen hopes our app can do for users.

Coalescing around one direction

From our individual work, we collaboratively identified common themes we enjoyed across everyone’s boards. This is where we left on before I created a style tile from our agreed understanding of the visual heart of the brand.

Freeform, collaborative exploration of type, color, and shape combinations.

Style Tile

The Textie style tile documents our logos, colors, fonts, iconography, illustrations, and buttons.

Here are some highlights of our visual identity to call out:

Logos

For our mark, we went with something like a pebble, which is just a slightly misshapen circle. It’s a slight but intentional imperfection that makes our app human, which is important to how we want people to think about the experience of texting. (Pebbles also fit well with many of the environmental metaphors we identified in our moodboards.)

Color

From forest to teal to viridian, our team loved green for its soothing, harmonious, and refreshing connotations. “Aloe” our main brand color, even tints our greys and whites. It worked well in a complementary color system, with salmon our secondary.

Typography

Display serifs with recognizable quirks and calligraphic qualities are an increasingly trendy way to imbue products normally dominated by boring sans with noticeable brand character. IvyPresto, one such typeface, suggests stability and the calming experience of analog reading. Sans serifs are used for long body text, and for that we chose Sofia Pro, a geometric font whose circular forms helped reclaim roundness as a visual feature of the platform.

Characters

Illustrations are a fun way to go above and beyond standard UI. We wanted something emotive and simple, without crossing the line too far into tackiness or gamification. For such an “alive” name as Textie, we thought it might be a good addition to the platform. Using the same pebble shape in our logo, we can create an expressive face with only 3 additional lines.

--

--

Oscar Dumlao
Design for Behavior Change
0 Followers

Oscar is a junior studying Product Design at Stanford. oscardumlao.com