I roughly designed the four of the 12 expressions, which I now call auras, based on the visual direction from my exploration: stain backgrounds imitating the sky, hand drawn weather elements, and small stains behind them. Based on the feedback I received from classmates, other designers, and the audience, I designed two refinement versions. In both I took away the text bubble and replaced "care" with a handwritten version that complements the weather to express emotion. I will give the user the ability to choose different handwriting styles to style their text with and the ability to control whether to style a letter, word, or sentence(s) using a drag, drop, and highlight feature. In this case only one word is styled and the other two are the typeface default. Option A uses more refined handwritten weather elements and Option B uses digital pen tool lines. Which do you like better?
I played with how exactly the expressions will look. The initial weather concept was very UI looking: solid forms and flat colors. I wanted to see if there was something better. The narrated process below goes along with this visual exploration.
My sketches of the visual elements used lined work. When I digitally designed them created they looked very cold (page 1). Since I am dealing with emotion, it needs to feel more personal. I tried putting it on photos I took of the sky (pages 2 & 3) but still didn't like it. So I thought back to my handwriting ideas and traced the line work, kind sloppy since it's so small, with a pencil (pages 4 & 5) and then a marker (pages 6 & 7). Better but not quite. I then thought about watercolor and washes. I didn't have blue dye but I used some Curaçao and brushed that on paper and scanned it in just to see. I tried it with the computer version (page 8) and the marker versions (pages 9 & 10). It was a toss up between pages 8 and 9. I bought some food coloring and thicker paper and experimented with mixing the colors with water and milk. The process for the staining in on pages 11–13. I liked the texture that the milk produced (page 14). The computer illustrations on page 8 seemed too cold and the marker on page 9 seemed too thick so I tried using a pen for thinner thins and a personal feel. This resulted in my chosen visual direction on page 15.
I went back to my sketchbook to further refine my concept, brainstorm names for the app (which was very taxing), explore various visual elements, and make storyboards for each of expression within the weather concept using a visual language. At first I was thinking that my app should feel sophisticated and sexy for couple but had to remind myself of the purpose of my app: affective communication for couples using weather. Since affect is truly what I'm after, I feel my app should feel fluid, blurry, and personal like emotions. The front running names are Aura, Atmosphere, and Drift. To see the full process…
I received a total of 46 responses to the suitor survey with some helpful feedback. Here are some highlights:
- Vote: Avatar
However I find weather to be a close second. - Vote: Avatar
They might all be good ideas based on age. Avatar is the most expressive, but limited to cutesy. It is the most clear about the emotion being expressed, but not the most visually interesting for me. Weather is interesting, might be interesting to be more clear. - Vote: Avatar
I like weather too. I wanted to vote for both. - Vote: Liquid
I think avatars/emojis/icons are overused, personally. - Vote: Weather
I LOVE the avatar, but my apprehension is that I’m sure users would still lie about their
feelings. With the weather, it’s more impersonal.
My desire for this app to be experimental along with this feedback has lead me to choose weather as the winning concept despite avatar having more votes. I will infuse the weather app with the clarity of the avatar concept and the play of the basic elements of texting of the liquid concept.
I took my refined sketches and turned them into short animations. Each video shows the same message using three different expressions. I created a new page containing the four animated concepts and a survey for crowd sourcing. Even though my target audience is women in relationships who text their partners often since women reported feeling the most frustrated with text message, I want my app to be used by men and women. Therefore I am opening up this survey to men and women to get a wide reach.
As a recap, here's where each concept came from:
- Avatar: inspired by Humanizing Motion Graphics
- Liquid Message: discussion party suggestion
- Visual Texture: initially a fictitious concept of a screen that could change texture inspired by Skin Paper and then refined to a visual display of textures
- Weather: discussion party suggestion
I met with two other designers and showed them my roughly sketched ideas. I gained two valuable nuggets of information:
- People are interacting with their phones abundantly when it's dangerous to (e.g. texting while driving). Using a feature that communicates mood through interaction, requiring the user to interact with a message before reading it, could be very dangerous. This added step could not only be a annoying, but also troubling. So I will rule out how interaction can affect mood.
- Sketching out features that fully use the background made me realize that doing so will eliminate the ability to log mood and directly link them to a message. A designer pointed out I could do something along the lines of Exquisite Corpse.
This second nugget is great! Instead of using the whole background I can use the horizontal strip the same with as the message. Text messages have negative space on their opposite side and this would be great for me to use. I can view the active space of messages as a bar where text and moods are displayed. I feel this may even encourage people to type more (going back to my insight on how people use less words with texts) because the more you type, the more space you have to convey mood.
I refined four of my concepts, fleshing out more moods:
- Weather / environment: The horizontal space insight makes me think about layers and strata in addition the concept of building so this could lead to things beyond weather
- Messages that transform / move like facial features and body
- Animated & interactive avatars
- A screen that is able to change its texture and change temperature (fictitious)
To see the refined sketches…
From my research and insights I got lots of ideas. I wrote them all down in a list, not judging them. and sketched out how they would work using five moods: humorous, sarcastic, flirtatious, stressed, and tired (these popped up the storytelling). I also sketched ideas for the general interface. Here is a list of all my ideas:
Solid Concepts
- weather in the background to communicated moods / feelings (e.g. sunny, rainy, windy, etc.)
- animate text bubble in ways to relate to water before the message displays text (e.g. drip, burst, shake / ripple, etc.)
- animate text shape to mimic facial features and gestures before message displays text (e.g. bubble vertically shrinks to mimic winking)
- animated avatar besides message that gestures and the user is able to interact with (e.g. wave, smile, frown, giggle, other person can rapidly swipe to tickle or stab to poke, etc.)
- different ways a user has to interact with the phone to open a message to elicit emotion (e.g. smack, shake, slowly slide with all fingers, etc.)
Unconventional
- using custom vibrations
- changing the lighting
- user control of sounds
- exploring the sound vibrations make
- scenery background for the whole app or individual messages
- using smell
- exploring handwriting analysis
- temperature of phone
Features
- usage of color
- recognition of the input of words and phrases to automatically set animation (e.g. typing "hehe" or "LOL" cues app to set message to joking)
- threads / rooms that work in a similar way to Facebook
- user can create a thread with a subject like hashtagging (e.g. happy hour)
- thread / room can be set to have a mood (e.g. happy hour would be set to a fun feeling)
- messages will be contained with a thread / room for easy finding and mood association (like returning to room that has a fun feeling makes you feel playful even though you may be coming from a stressful situation)
- alerts for when something to added to a thread / room
- ability to save texts for later / draft
Considerations
- spectrum between user customization and presets: voluntary gestures (e.g. waving, hugging, bowing) are based on culture and personal preferences versus involuntary gestures (e.g. laughing, vomiting) are universal
- exploring all the senses to investigate what works best / is innovative to inciting emotions: seeing something vs doing / touching something (interaction) vs feeling something vs hearing something vs smelling something
To see all of my sketches…
I finished the affinity map and came up with eight insights:
- We can read minds. But text messages inhibit our powers.
- Texts are like quickies. They are highly functional with little appeal or finesse.
- The background is boring. The texting app has a solid white background.
- Chat bubbles are mere decoration. Other than pointing to who said what, they are just container.
- Emojis are like patches for a problem. They are supplemental and do not adress the app itself.
- Behaviors affect our emotions. We do not communicate in vaccuum. Object are telling.
- Vibe is an emotional environment. It’s that feeling you can pick up on just walking into a room.
- How is Facebook different from texting?
To read more about these insights and see the research artifacts…
I am distilling problems and insights from the breakup letters, storytelling, and participatory design ideas by creating an affinity map. My wall is getting covered in post-it notes from all the notes I taking and once I am done I will start grouping items to get overarching ideas and new knowledge. These insights will inspire lots of ideas for my app, some of which I know will be thrown out.
I will decide on 3–5 ideas to explore and roughly sketch them. I will then refine these sketches and do paper prototyping. The user journey maps provide me with scenarios and tasks that i will use during prototyping. This kind of prototyping will quickly let me see which idea is best. After I have gained insights from that I will design various features for my app (e.g. a winking text bubble to convey flirting). I will build a testing blog to crowd source in order to see if my features affect emotion in the proper way.
Aside from the two participants who attended the discussion party, I received six responses to my email questionnaire and interviewed another participant in person. This gives me a total of nine participants! From their stories told about frustrations and miscommunications over text messages I designed user journey maps. These maps give me a birds eye visual of the various stories and I have developed empathy with my participants and their problems. See the PDF for all of the maps and the process of designing them.