Inflexion Mobile App Concept

Inflexion is a mobile app where people use shapes, color, and typography in order to convey the tone of voice that is lost in textual communication.

The challenge here was to create an experience where people could identify their emotions and then design their text messages in order to convey that lost tone, non-verbal cues and body language.

inflexion-splash-screen

Discovery

TECHNOLOGY LIMITS
Initial research uncovered that 55% of communication was done through nonverbal cues so there was an opportunity to reintroduce these nonverbal cues in a visual way in texting.

ATTITUDES TOWARD TEXING
I met with five people and they walked me through their thoughts about sending messages. They showed how they read into punctuation, emoji and other ways to decipher the tone.

EXPERT OPINION
A clinical psychologist shared that people struggle sometimes to understand their emotions. She would help clients by asking them to identify easy emotions like happy or angry and then explore the more nuanced feelings from there.

There is no good way to quickly and accurately convey and understand tone of written text.

VISUAL PSYCHOLOGY
Articles about color psychology, symbolism, typography characteristics, and how composition is used to convey meaning helped me better understand how designers, directors and other artists create emotion through visuals.

Themes and Findings

  • People who text rely heavily on punctuation, caps, and emoji to convey tone
  • Some users stress and overthink messages they receive and send
  • People often struggle to articulate how they feel and need help to recognize emotions

The app not only needed to be a design tool for everyday phone users but also help them identify their emotions to generate an appropriate visual treatment of messages.

Interactions and Content

The most important part of the app is selecting the right emotions for the message so that became the central interaction of the experience.

USER FLOW
The interactions would be pretty straightforward. Users would put in their message, select their feeling then generate the visual to send. 

Diagram of how a user would create a message in the app

LOW FIDELITY WIREFRAMES
These were quick experiments to try different versions of the interactions of selecting emotions. I created a few versions to test which was the most intuitive.

low-fidelity-wires

MEDIUM FIDELITY WIREFRAMES
A screen would first prompt simple feelings like happy, sad, angry, etc. Easier to access feelings help the user identify what they are feeling at a high level before diving deeper.

Collection of interactions for creating an inflexion message

Visual Design

The name Inflexion was chosen because it helped to convey what the app provided: inflection of one’s voice but the spelling was changed to also symbolize expression.

Logo

The logo is made up of quotation marks within a chat bubble. Below you can see the combinations of symbols that inspired the mark: "ex" shorted from 'expression,' quotation marks, and a chat bubble.

Inflexion logo with name
Inflexion logo in black
logo-grid
logo symbol combination_1

Color

Orange and blue are complementary colors that sit across from each other on the color wheel. I picked these as the primary colors because it symbolizes opposite thoughts and feelings. Contrasting emotions that are the extremes of a range. In the secondary palette, I picked colors that were of different hues and tones to further reinforce it.

Typography

Montserrat is the main font. It was designed for digital media and conveys the right amount of friendliness while also being readable on screens. The consistent thickness of the strokes also matches the logo and patterns of the brand.

App Screens

I designed the app in Photoshop and then prototyped the experience using InVision.

inflexion-home-screen
inflexion-message-screen
inflextion-pick-feeling-screen
inflextion-pick-feeling2-screen
inflexion-editor-screen
inflexion-gallery-screen

Additional Visual Components

Deliverables for this project included an app prototype, a marketing site, a brand identity, infographic and process book. I mounted a live demo to the display to capture feedback in real time as people came to view the exhibition.

Flex-Slider-Process-Book-cover
IMG_20150507_132316852
inflexion-website-mockup

Conclusion and Next Steps

After observing a few different people navigate the app in the demo, it was clear that it wasn't obvious right away what the app was for. However, after explaining what the problem was the app solved for and the experience of selecting tone to create visuals, people were excited by it. In a future iteration, I would create an onboarding experience that explained how to use and navigate the app.

More projects

Building 36 Website RedesignWebsite Redesign and UX Strategy