Lo-Fi Prototype Development

Even though the orange-blue color palette yielded a higher preference during the user-testing of the logo development, a warm/cold blue color palette worked best when building out the app. This final color palette was applied to the lo-fi prototype, which was developed and designed further. I placed the screens and linked them using InVision up to the options section, where I'm awaiting feedback on which tutorial icon to use. I also started animating sections to get a feel for the process and to refresh myself on After Effects. The loading and last splash pages are animated, which you need to tap "Skip" to view.

To view the flat design…

---

Color Exploration and Lo-Fi Prototype

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

While developing the low-fidelity prototype, I questioned whether the chosen color palette was the most appropriate, a design by trial method. I came up with three alternatives for the logo and app icon and applied them to the first five screens of the app. Regardless, I continued with developing and designing the prototype using the original color palette. I filled in missing parts to the tutorial and refined the app's iconography. To see the app's development…

---

Wireframes and Lo-Fi Prototype Beginning

I created a wirefames to see how I app map would flow and understand how InVision works. From piecing my screen together, I quickly learned that my idea was too complex and cumbersome (see it here). I revisited my app map and made a priority of the features to tackle. Some had to go such as draft and timed messages. I was concerned this feature may lead to too many automated messages, working against the goal of making text messages more humanistic. I then designed the first few screens to experiment with color. After I refined the color, I designed more screen to round out the experience. Although there are holes in the lo-fi design, this should give me an overall structure to develop and refine. To see the app map reprioritization and lo-fi design…

---

What's on the Horizon

I took a semester long "break" from my thesis in order to learn about a comprehensive branding process and UI/UX game design. In the interim I also started a preliminary wireframe, sketched logo designs, designed logo roughs, and caught my research book up to speed (the process for these are coming soon). Now it's time to focus on completing Aura and roll out its branding, advertising, and marketing. I will need to do extensive user testing in order to successfully execute Aura. Here some some possible research methods:

Rapid Iterative Testing & Evaluation
With lots to do this semester, this research method will allow me to quickly spot and fix problems in wireframes and higher fidelity prototypes. Changes are made as soon as problems are identified during user testing and the updated prototypes serves as the new design direction.

Evaluative Research
As a balance to the very performance- and product-based testing of Rapid Iterative Testing & Evaluation, this research method focuses on preference measures. Subjective feedback including aesthetic and emotional responses is collected. This more humanistic emphasis is incredibly important for my project where I aim to make digital communication more humanistic. I especially intend to use this method when refining the auras.

Crowdsourcing
As I approach the high-fidelity stage of prototype, I intend to target a large group of people to get feedback. Using InVision allows me to share a link to a prototype and receive comments. I will send the link through an email blast and on social media.

---

Research Book: Kiss & Tell

To sum up everything that I accomplished in the past 15 weeks, I started the design of Kiss & Tell. Its missing the introduction page and first two chapters. The introduction will be about Kiss Me Through the Phone envisioned as a research organization and the aims of the book. The first chapter will discuss the problem and common cases of misunderstanding. The second chapter will discuss why the problem exists and who it affects. To see the book in progress…

---

The Looks

Looking back at my process, I have arrived at a very experimental project and visual language: getting rid of the text bubble, using handmade elements and typography, and staining. According Raymond Loewy MAYA principle (most advanced yet acceptable) “the adult public’s taste is not necessarily ready to accept the logical solutions to their requirements if the solution implies too vast a departure from what they have been conditioned into accepting as the norm.” So I have to ask myself: Have i gone too far?

My original concept for weather looked very UI, flat, and exactly what you'd expect to see (Look A: Traditional). Through experimentation I combined line art weather elements with stains and simplifying the text bubble to a stroked rounded rectangle (Look B: Contemporary). More experimentation and refinement lead me to hand drawn weather elements with stains, eliminating the text bubble entirely, and combining expressive handwriting with digital typography (Look C: Experimental). Rather than making an subjective decision, I'll let my audience decide.

---

Aura Roughs & Refinements

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?

---

The Suitors

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:

1. Avatar: inspired by Humanizing Motion Graphics
2. Liquid Message: discussion party suggestion
3. 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
4. Weather: discussion party suggestion

---

Visual System & Branding

In the past few weeks I have developed a branding system and visual language for my thesis. I came up keywords, collected pulls on Pinterest (see them here: Thesis Visual System), sketched several ideas, design computer roughs, and refined one idea. I then designed an 11'' x 17'' brand guidelines page, which I intend to create a style guide book from, and scaled that back onto an 8.5'' x 11'' one pager.

---