The process for branding Aura is underway! I sketched ideas for the logo and roughly designed them on the computer. Form variations were designed before adding color variations. In order to decide on a direction, I created four solid color variations of the logo and app icons that were then user tested with 50 audience members. The decided logo will allow me to further develop and brand the auras, develop the app, and test the flexibility of the logo and develop a full brand.
Using the sketches, a scenario was created with tasks for a first-time user. Additional screens were sketched in order to complete all tasks. The sketches were printed and given to four iPhone users who were closely aligned with the personas. As users progressed through the scenario with the prototype, their confusion provided insights on how to improve the app. Here's what I learned:
- The tutorial should function like a game where it tells you how to do something and the user has to complete the action in order to proceed to the next page.
- Add skip option to tutorial.
- The tutorial section should be designed to look more like the app itself.
- There is no tutorial screen about the drawer and it competes with the iPhone’s drawer of quick access tools. Drawer bar is hard to see. Get rid of pull up drawer and have options always show at the bottom.
- Tutorial should follow the flow of the menu bar.
- Instead of pressing and holding, add a clear option to the list of auras in the aura menu.
- I need to add two more screens to the tutorial about how drop and drag works throughout the app. I'll make one about applying auras and another about adding a photo.
- I need to add two tutorial pages to the draft section: one about dragging and dropping drafts to the typing area to edit them and another about how the timer feature will work.
- Put the tutorial in the drawer within an options menu so users can access the tutorial whenever desire. Options will allow users to be able to do things like change the default aura and set favorite auras.
- Make room for options menu by combining the two photo menus into one. There’s one icon for camera and another for recent photos. It’s better to just do one photo icon that leads to recent photos and there’ll be two sub icons: one for library and another that goes to the camera app.
- To prevent confusion and obstruction of the aura in the message preview area, move aura button to the drawer.
- Make room for aura menu by getting rid of mic icon since this is already on the keyboard.
- Sounds can be used as confirmation of an action like a sound playing when a draft is saved or the text conversation is muted. These sounds are rewarding.
The insights lead me to refine the app map. To see the full process…
I went through Designing for Interaction to come up with a solid process to develop the user interface and user experience of Aura. First I reminded myself of the goal of Aura, the challenges that I faced, and the features it needed to include. I then did an assessment of Messages, the current texting app on the iPhone, by taking screenshots of different functions and designing its app map. This helped me to determine what was working and what was not. Turning to Aura, I listed lots of ideas for its tagline. I created three personas and scenarios for each about how they would possibly use Aura. The scenarios were inspired from the user journey maps that I created from the discussion party. I then listed all the tasks that users needed to be able to do on Aura and designed a task flow for a sensible order that these tasks would occur in. Looking at the app map for Messages and the task flow, I designed a map app for Aura (above). This helped me to design wire frames for the essential and unique screens and functions of Aura. I took the wire frames and sketched visuals for the placeholders. To see this process…
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 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…