TRVLEASE Journal and Itinerary App by Leilani Moore

TRVLEASE A Journal and Itinerary Mobile Application

Leilani Moore-Deem M.A. Interactive Design May 05, 2017

Professor David Meyers Professor Jason Occhipinti Thesis 2017 - IXDS 6813 Lindsey Wilson College

Introduction

Table Of Contents Introduction 02

Thesis Statement

Solution

Concept Brief

Hypothesis

03 03

Requirement Specifications

Task Analysis and Schedule

Site Map and Information Architecture

Low Fidelity Wireframes

The Mobile

Humanistic Design

Branding

Emotional

Memorable

High Fidelity Prototype

Personality

Usability Testing

Emotional Engagement Design Persona Color Design

Demographic Behavior Competitive Analysis

Conclusion

References

Color and Contrast

References

Color Psychology

Conclusion

Color Theory

Medium Fidelity Wireframes

Abstract An app that can assist in documenting trips and bringing back to life, the relationships and group dynamics among its travelers, would serve as an invaluable tool in preserving memories created while traveling. Photos, videos, and blogs captured spontaneously and frozen in time, sealing group dynamics and camaraderie, not be be forgotten, is just what the TRVLEASE partner app will provide to travelers.

Design Principles

Traveling with friends, family, or with an educational group evokes companionship and a group dynamic that identifies that trip, the time spent together, and establishing relationships outside the day to day routine. After the trip is over and the traveling group returns to its every day life, this dynamic fades with time, visual memories of the time spent within the trip become a blur and relationships dissolve.

Design Solution

Research Usability

Concept Brief

Affinity Diagram

Project Overview

Thesis Statement

Exploration

Solution The TRVLEASE Journal and Itinerary mobile application offers the total package of sharing spontaneous moments while staying atop an active itinerary during travel. Travelers will be able to blog, post pictures and videos, preserving those moments that fade with time, while simultaneously sharing with fellow travelers and followers back at home. Interaction and feedback is encouraged and enjoyed while the collection of posts from each day of travel is merged into a fun collage scrapbook, sprinkling the user experience with surprise and entertainment. Staying on schedule is made easy with the built-in itinerary, keeping travelers updated on flight plans, lodging check-ins and outs, activities, restaurant reservations, and entertainment. Push notifications will be sent to travelers, reminding them to share their experiences when a new plan begins, whether it be checking into their home away from home, or embarking on a snorkeling tour. Live updates will alert travelers of flight arrivals, departures, terminal and gate locations. The seamless unity of the journal and itinerary functionalities will bring ease and joy to individuals and groups traveling. Designed especially for groups, whether it be family, friends, or an educational group, the TRVLEASE Journal/Itinerary application will be an invaluable digital companion for those who wish to immortalize their travel experiences.

Research

Introduction Hypothesis

Usability

Creating an all encompassing travel application that fulfills all journal and itinerary functionalities while preserving spontaneous moments and keeping the group dynamics alive in the memories of its travelers.

“The human brain’s capacity doesn’t change from one year to the next, so the insights from studying human behavior have a very long shelf life. What was difficult for users twenty years ago continues to be difficult today.” - Jacob Nielsen

Project Overview In the initial stages of development, personas and stakeholders were created, representing main user groups. This is needed to identify major needs and expectations of user groups of the travel journal/itinerary application. Further research which included affinity diagramming and usability testing was applied in this first cycle of the iterative process. Based on the findings, evaluation and redesign of the prototype is then applied. This process is repeated until the ultimate goal of usability success is reached.

While technology is ever-changing, progressive, and global, the human mind and behavior change very slowly. Understanding how people feel and interact with technology is what user experience is all about. Intertwining humans and technology is a very challenging and intricate feat, like the organic and the inorganic, they are opposites entities. One needs to be sensitive and understanding towards the melding of the two, enhancing the inorganic to meet the organic. Steve Krug’s (2014) definition of usability is – A person of average (or even below average) ability and experience can figure out how to use the thing to accomplish something without it being more trouble than its worth. It’s really that simple. We have been trained to always make things more difficult than they really are. Slipping into a childlike fresh perspective can be empowering, but this feat is equal to breaking down a brick wall of learned behavior and expectations accumulated over a lifetime. Successful user experience, whether it be driving a car, using a TV remote, or using an app on a mobile phone, requires a clear insight and deep understanding of the human psyche and instinctiveness. Usability can be reflected in the following attributes (Steve Krug, 2014): • • • • • •

Useful: Does it do something people need done? Learnable: Can people figure out how to use it? Memorable: Do they have to relearn it each time they use it? Effective: Does it get the job done? Efficient: Does it do it with reasonable amount of time and effort? Desirable: Do people want it?

Krug’s first law of usability - “Don’t make me think!” Keeping with the adjectives, effortless and intuitive, is the goal of every user experience designer, but this is easier said, then done. One must slip into an objective and intuitive state of mind, breaking every step into a simple but satisfying journey for the user. Avoid things that make the user think. Any hesitation, whether to question or to figure something out, is distracting and interrupts the user experience, causing mental chatter and errors. Eliminating question marks is a basic but most important principle to be aware and make use of. This will bring awareness of everything that brings up questions, and helps the designer to avoid ambiguities and mental clutter.

Research The ultimate goal of a UX designer, is to make every page or screen self-evident so the user almost instinctively knows what it is and how to use it without having to think about it. When a functionality is not self-evident, then it needs to be self-explanatory, requiring only a little thinking and effortless understanding. People live in a fast paced and demanding society, over saturated with media of all types. As designers, we must remember that users simply do not have time to pore over every design element and information data that we have so carefully crafted into our page and screen designs. To effectively attract, keep, and retain the attention of users out there in our busy world, Steve Krug (2014) has listed important approaches designers need to utilize in their websites and apps. • Take advantage of conventions – Keeping things familiar for the user always makes for an easier and faster user journey. Following existing conventions that work well and that have been used many times over, requires little explanation or thought. However, if a better idea replaces a convention, it must be clear, self-explanatory, and usable. • Create effective visual hierarchies – Appearance and visual cues need to accurately portray the relationships between elements on a page or screen communicating which things are most important, are similar, or a part of another thing – all at a glance. A clear visual hierarchy preprocesses the data workload enabling an almost instantaneous understanding within the user. • Break pages up into clearly defined areas – Users need to be able to glance at a page and quickly decide which areas to focus on and which areas can be ignored. Studies have proven that users decide almost instantaneously in their initial glances which parts are important to them, rarely noticing the other parts.

Research o o

Use plenty of headlines – keep headlines thoughtful and well-written. Keep paragraphs short – avoid an overabundance of words; use only enough to communicate efficiently and effectively. o Use bulleted lists – Organize information so that it is easily attained and understood. o Highlight key terms – Bringing to light key words and phrases by the use of color, font thickness, or style makes them easier to find and digest.

Krug’s (2014) Second Law of Usability – It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice. It has long been debated the maximum number of clicks allowed in successful user journey. Excessive clicking lead to frustration and impatience. General design rules state that it should never take more than three, four, or five clicks to get to any page. What really matters are not the number of clicks, but the integrity and ease of each click. If the user has to ponder over a click which leads to uncertainty, then this is an added hiccup in their quest of keeping on the right track or what is often referred to as the “scent of information.” (Peter Pierolli and Stuart Card, “information foraging” research, Xerox PARC)

Krug’s Third Law of Usability – Get rid of half the words on each page, then get rid of half of what’s left. Omit needless words – Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. (William Strunk, Jr., and E. B. White, The Elements of Style, 1979)

• Make it obvious what’s clickable – People click their way towards what they are looking for, almost impulsively. As users interact with a page or screen, they are looking for a variety of visual cues that identify things as clickable. The effective use of shape in buttons and tabs, location, and color all enhance the visual cues of user clicking.

Most often web pages have excessive words and content that just take up space, acting as filler and fluff. This is intimidating and task-like, discouraging the user to dwell. Removing unnecessary words and keeping content to a bare minimum has the following beneficial effects.

• Eliminate distractions – Noisy pages are annoying and chaotic. Over use of visual stimulation distracts the user from their initial goal. A mish mash of type faces, bright colors, slide shows, animation, pop-ups, and ads are overwhelming as well as unsightly.

o o o

• Format text to support scanning – In our mad rush to find something quickly, we scan text like we scan for clothes in an over stocked store, looking for what stands out and grabs our attention. Putting to use the following approaches promotes scan-friendly pages.

Small talk which is content-free and the need for instructions are two groups of text that needs to be avoided. Small talk is the use of feel-good words that are more social than informative. Instructions are an unnecessary evil, and should be replaced with self-explanatory approaches. Users do not have the time nor the mindset to be bothered by both of these type of filler words.

It reduces the noise level. It makes useful content more prominent. It makes the page shorter, allowing users to glance at a page without scrolling.

Research

Research The Mobile The first glimpse of mobile phones appeared on the horizon of the 90’s with only the privileged few carrying around these status symbols. More and more people were jumping on the cell phone band wagon since then, sending the pay phone industry to its demise. Then the smart phone arrived, little mobile operating systems that combined features of a personal computer and those of a handheld mobile. By the late 2000’s, smartphones infiltrating every household, now becoming a norm with every individual, ranging from children to seniors. It is almost impossible to imagine life without our digital companions. They are with us during every waking hour and resting along side us at night, often charging up for another day’s work. The smart phone appeals to our emotions and tantalizes our senses with its pleasing, thin, and sleek design, fully loaded with delightful interactive things that bring pleasure and entertainment to an otherwise regular day. With Apple’s great invention of scrolling, swiping, pinching to zoom in or out, the new and improved mobile won the hearts of millions of users, becoming endearing fixtures in our lives. With the smartphone came mobile applications, miniature software programs that assisted, entertained, and entranced mobile users relentlessly, rendering us useless without them or so we think we are. There are significant new usability problems that accompany the mobile with the most being the size and limited screen format. Creating a subset mobile version of a website can be a daunting task, having to scale down design and content by process of elimination. One solution is Mobile First, designing an online experience for mobile before designing it for the desktop Web. Features and content are designed for the mobile that are most important to users, then enhanced and added upon when taken to a desktop version. When designing for use on a mobile device, usability principles are basically the same, but with the addition that people are moving faster and reading even less on these small screens. Mobile designs need to be kept essential, providing what people need the most. Prioritizing is important especially since the lack of space means mobile sites become much deeper than desktop versions, having to navigate through multiple levels before reaching the desired content or features. Use of affordances is crucial, providing the user with visual cues of the roles of various buttons and shapes, editable text boxes, colors, etc. Staying consistent throughout a mobile design, enhances the predictability of interface functionality.

Delight, learnability, and memorability are the three most important usability attributes that need to be utilized mobile apps. When using an app, the experience should be delightful which includes the adjectives; fun, captivating, surprising, clever, and magical. A successful app will leave the user enthralled with its functionality and purpose, establishing an inner joy and need within the user. With each app, the user is faced with learning its functionality. Apps offer varying experiences, often needing brief tutorials and instruction screens. Making an app learnable requires objective and thoughtful training maneuvers, keeping instructions clear, quick, and easy to understand. After learning how to use an app, remembering how to use it is just as important as learning it the first time. This is an issue with some apps, requiring the user to relearn its functionality all over again. When the steps in an app’s usability are too intricate, inconsistent, and lacking predictableness, its memorability is weakened. This attribute is a big factor in whether people adopt an app for regular use or if they abandon it after only using it a couple of times, which is the fate of most apps. While smartphones get smarter and more sophisticated with time, becoming more complex and intricate in its technical usability, the human mind and behavior will remain steadfast. No matter the technological progression, a successful and seamless melding of technology and human will always remain a challenge.

Humanistic Design Emotional With the onslaught of fast and inexpensive website templates, a one size fits all approach becoming a norm, what is forgotten is the craft or the relationship that is formed with the user. Instead of staying reminiscent with the origins of the industrial revolution and its focus on machine manufacturing and industry, designers need to follow a different path, the one believing that human and showing emotion in design is essential. Emotional design uses psychology and craftsmanship to create a humanistic experience for the user, making them feel like there’s a person, not a machine, at the other end of the connection. This is why user experience designers need to understand the needs of the people they are designing for. To understand the needs of people, we need to understand what makes them tick. Abraham Maslow’s Hierarchy of Needs pyramid illustrates how needs at the base must to be met first before needs can be fulfilled on the next level and so on. Once all other needs are met, the need of self-actualization can be fulfilled, which would include the need to be creative, the need to solve problems, the need to help others, etc.

Research

Research Maslow’s pyramid of needs runs parallel with the user pyramid of needs. Understanding the needs of the user can help establish goals when designing interfaces. A website or app needs to be functional before it can be reliable, it needs to be reliable before it can be usable, and it needs to be all three before it can be pleasurable. Interface design is design for humans.

Memorable With emotional engagement, lingers lasting impressions and memory. As molecular biologist John Medina, Brain Rules, (2013) shares, “Emotionally charged events persist much longer in our memories and are recalled with greater accuracy than neutral memories. When the brain detects an emotionally charged event, the amygdala releases dopamine into the system. Because dopamine greatly aids memory and information processing, you could say the Post-It note reads Remember This!” Emotion and memory are physiologically crucial in keeping people healthy and alive. People do not repeat an experience that is negative, their memory of this experience refrains them from wanting to go there again, but the positive experience stay ingrained in the memory, prompting people to repeat this experience over and over again.

Maslow’s Hierarchy of Needs

Users’ Hierarchy of Needs

(Aaron Walker, Designing for Emotion, 2011) • • • •

An interface must be functional An interface much be reliable An interface must be usable An interface must bring pleasure, joy, and delight When these user needs are met in an interface, usability transcends to an extraordinary experience.

An interface that is predictable, usable, and requires almost no relearning seems ideal, but if it doesn’t evolve, then it risks losing touch with user needs. In design thinking, web and app design must be taken over the threshold into the realm of delight before it can fulfill the user’s need of pleasure, fun, joy, and delight. Emotional design does warrant risks. Designers need to be careful not to compromise functionality, reliability, and usability of the interface when designing for emotion. Just as the User’s Hierarchy of Needs reiterates, these needs to be fulfilled before pleasure, fun, joy, and delight.

Positive emotional stimuli builds engagement with users. When an interface possesses this design quality it is a powerful way to build positive memory while also forming a personal relationship with the user. Memorable interface designs need to engage the user emotionally, reflecting a human personality that can be related to. Humans want and need to connect with real people; not devices, software, or machines. When this happens, casual users become exuberant and are excited to share their positive experience to everyone around them. Creating a pleasurable experience in interface design will bring it to life, sustain it, and etch it in the memory of its users indefinitely.

Aesthetics-Usability Effect Design influences emotional engagement and usability, often overlooked as a frivolity on a functional interface. Visual perception is critical for a lasting impression and positive emotional response while also improving cognitive ability. Usability frontiersman, Donald Norman shares in his book, Emotional Design, (2004) which describes the aesthetic-usability effect. “Attractive things make people feel good, which in turn makes them think more creatively. How does that make something easier to use? Simple, by making it easier for people to find solutions to the problems they encounter.” The aesthetic-usability effect makes users happy, think more productively, and brings them back repeatedly.

Research

Research Personality Personality can be a powerful tool in interface design. People are made up of innate personalities and are either drawn or repelled to others by this mysterious force. Personalities reflect the unique qualities and perspectives of individuals while serving as a vehicle of human expression. Emotional design’s primary goal is to facilitate human-to-human interaction, creating a human like interface experience. People hold emotional attachments to others when they are able to relate to them, intrigued by their personas, sparking a feeling of exhilaration. Paralleling this, an engaging interface design needs to embody a unique personality, fostering excitement and a bond within the user. When giving a design interface an enticing personality, one must reach into the user’s library of positive memories. Aaron Walter (Designing for Emotion, 2011), gives a perfect example of successful personality application onto a product. The iconic Volkswagen Beetle embodied a child-like face with headlights in the shape of big round eyes and a hood resembling a happy and contagious smile. Memories drawing upon these positive emotions related to babies pulled in admirers for seven decades, making the Volkswagen Beetle the best selling design in automotive history. Designers of the Volkswagen Beetle successfully constructed an emotional persona, exuding a distinct personality that consumers trusted and admired.

User experience designers create personas to capture the reflection of their target users so that they can focus on their needs. User personas include demographics, interests, expertise, education, and influences of the archetypal user. Understanding user personality and motivations, shapes the design decisions that follow. The same goes for the product or interface design. A design’s personality can evolve from a structure similar to the user persona; the design persona. Design personas help identify a design’s personality and manifesting this in the interface through visual design, copy, and interactions. Components of a Design Persona (Aaron Walter, Designing for Emotion, 2011) • • • • • • •

Brand name: The name of product or service. Overview: A short overview of the products personality. Personality Image: An actual image of a person or logo that embodies the brand’s traits. Brand Traits: Five to seven traits that best describes the brand. Voice: Description of the specific aspects of the brand’s voice. Visual lexicon: An overview of colors, typography, and visual style that reflects personality. Engagement methods: Description of the emotional engagement methods used in the interface to support the design persona and create a memorable experience.

Design personas are critical when designing for emotion and personality. User experience designers will post personas in a place where the design, development, and content strategy teams will see and use them as guides throughout the project. The design persona should guide anyone that crafts a pixel, a paragraph, or a process on your website or app. – Aaron Walter, Designing for Emotion (2011) Many websites and apps use design personas very effectively, shaping personality and emotion into interfaces that humanly reach out to their audiences with overwhelming success.

Emotional Engagement Creating positive, long-lasting memories of a site or app, begins with building concrete interaction patterns that harness the power of psychology. What makes for a lasting impression in the human mind, are its reactions to moments of surprise and anticipation. Surprise, Delight, and Anticipation – Emotional response is enhanced when triggered by a moment of surprise or when a moment is anticipated, the emotional response is diluted across time. Both evoke an emotional reaction that is more intense, becoming imprinted on the user’s memory. The human brain remembers situations when they happen unexpectedly, framing that moment of surprise and bringing it to an extraordinary emotional level and feeling of delight.

Research

Research With people navigating through websites and apps in their typical hurried fashion, processing content quickly, while absorbing very little; introducing surprise into an interface can break their behavior pattern and bring their experience into hyper focus. When people are surprised, they experience a high contrast situation in which something is not as expected. This contrast stimulates brain activity along with intense emotional reaction.

Color Design Color is a design element that has powerful psychological effects on people. It attracts the attention of users and increase brand recognition, memory and participation. Color affects ways of thinking and behavior, influencing mood, feelings, and emotions. Colors, like features, follow the changes of emotions. – Pablo Picasso

TRVLEASE Design Persona

Color psychology has become a design tool in marketing. According to Kissmetrics Research;

TRVLEASE Journal and Itinerary App

•

92.6% of people say the visual dimension is the 1st influencing factor affecting their purchase decision rather than taste, smell, etc. Two out of three consumers won’t buy a large appliance unless it comes in their preferred color. Magazine readers recognize full-color ads 26% more than black and white ads.

• Reliable

Sincere

Whimsical

Fun

Goals Documenting and preserving travel memories. Keeping the group dynamic alive after traveling. A reliable itinerary planner, keeping travelers up to speed. To become indispensable to users while traveling in groups.

Color "Don't worry, be happy, TRVLEASE has this!"

Blue for trust and dependability. It is reliable. responsible, and mentally soothing. Yellow for joy, happiness, cheerfulness, and optimism. It is a confidence booster and inspiring. Orange for comfort, subtle power and energy. It is warm while providing a positive attitude and enthusiasm.

Voice Behind this whimsical yet reliable TRVLEASE app, is a friendly and earthy voice that is pleasant and soothing. While relaxing, it is also energetic and happy.

Personality

Engagement Methods Surprise, Design, and Anticipation: Users will be delighted with the journal entries, photos and videos that spontaneously preserve fun and wonderful moments while traveling together. Full of surprising captures that are otherwise lost. Users will look forward to the color pins on the map at the end of each day and the comments left on their entries by followers back at home.

Preferred Channels

Overview

There are an infinite number of possible color combinations and to decide what colors will make the the biggest impact on a site or app, can be a daunting task and decision. A designer needs a thorough knowledge of color theory and the intricacies of color combinations.

Color Theory

Traditional Ads Online & Social Media Referral Guerrilla Efforts & PR

TRVLEASE is a fun, spontaneous, yet reliable and detail oriented travel app companion. When traveling with groups of people, TRVLEASE will help capture and preserve those moments spent together, while keeping group dynamics alive long after the trip is over. It is detail oriented and punctual, keeping the itinerary updated and available to the traveling group and its followers.

•

There are three basic categories of color theory that are logical and useful: The color wheel, color harmony, and the context of how colors are used. These color theories create a logical structure for color. The Color Wheel is a twelve-step wheel consisting of primary, secondary, and tertiary colors. 1. 2.

Introvert

Extrovert

Analytical

Creative

Conservative

Liberal

Passive

Active

Primary – Red, yellow and blue. These colors are the 3 pigment colors that can not be mixed or formed by any combination of colors. All other colors are derived from these 3 hues. Secondary – Green, orange and violet. These are colors formed by mixing the primary colors. Tertiary – Yellow-orange, red-orange, red-violet, blue-violet, blue-green, yellow-green. These colors are formed by mixing primary and secondary colors. Their name reflects the combination of the two.

Research

Research The Twelve-Step Color Wheel

Analogous colors are any three colors which are side by side on the 12 step color wheel. These color schemes donâ&#x20AC;&#x2122;t stand out from one another since they are related. One color is a dominant color while the others enhance the scheme.

Analogous Scale Photo Credit: Adobe Color CC

Cool colors are on the left side in the blues and greens. Warm colors are on the right side in the yellow and reds. Color Harmony â&#x20AC;&#x201C; Harmony can be defined as a pleasing arrangements of parts, whether it be music, poetry, or color. In visual experiences, harmony is something that is pleasing to the eye. There are many theories to color harmony, with the basic formulas identified as monochromatic, analogous, and complementary. 1.

Complementary colors are any two colors which are directly opposite each other on the color wheel such as red and green, yellow and violet, and green and orange. Variations of complementary colors fall in between these three main complementary color pairs.

Monochromatic are simple color schemes, as each color is taken from the same base color in variations of tints, shades, and tones. They go well together, producing a feeling of tranquility.

Monocromatic Scale Photo Credit: Adobe Color CC

Research

Research Color harmony engages the viewer and creates a balance in the visual experience. When something is not harmonious, it’s either boring or chaotic. At one extreme is a color combination so bland that it is not engaging. The human brain will reject an under-stimulating visual experience. At the other extreme, is a combination that is so overdone and chaotic, that it is repulsive. The human brain rejects what it can’t organize and understand. Logical structure and harmony is crucial in delivering visual interest and a sense of order.

Colors, in their pure form, have intrinsic differences in how light and dark they are. Refer to the High vs Low Contrast visual. (The Ultimate Guide to Using Color Psychology in Marketing, 2016) High vs Low Contrast

In summary, extreme unity in color combinations leads to under-stimulation, extreme complexity leads to over-stimulation. Harmony is a dynamic equilibrium. Finding the ideal harmony for an interface can’t be taken lightly. Depending on the interface, its audience and role, the right color combinations will result in a powerful visual user experience.

Color and Contrast Contrast in color combinations is a very important color technique used to attain a dynamic visual experience. Contrast is how one color stands apart from another. High contrast is when colors easily stand apart from each other. Low contrast is when they don’t. Properly used, it reduces eyestrain and focuses attention by clearly dividing elements on a screen.

Dark on light or light on dark is the easiest to read, however be careful not to over stimulate the user with everything in high contrast. The eye will tire and nothing will stand out. In summary, when using similar colors, while attaining the desired contrast, create a color scheme with both complementary and analogous colors.

The usability of a design is dependent on its contrast and text readability. Even though low contrast techniques are soothing and harmonious, it isn’t the best for readability. If the colors in text are of low-value contrast, the copy will be very difficult to read and under-stimulating. A designer must also keep in mind where users will be when using their apps. Outdoors or in bright places can cause screen glare. Contrast can also draw the user’s attention towards specific elements on a screen. Use of high-contrast colors for important content or key elements is crucial in bringing attention to these areas. A call-to-action button is more likely to be clicked if it strongly contrasts with its background. Colors and their level of contrast with each other can be deceiving. Even though two colors may be completely different, they may have no contrast due to the same tone qualities. To test out colors contrast, take them to an editing software and turn them into grayscale. This will be helpful in determining their contrast without the color getting in the way.

Color Psychology Color is an essential tool because it has an impact on how the user thinks and behaves. The psychology of colors and how they relate to persuasion is one of the most interesting aspects of marketing and interface design. In an interesting study called the Impact of Color in Marketing, researchers found that up to 90% judgements about products are based solely on colors. The feeling and mood created by the brand’s color plays a role in persuading the user to buy while reflecting the brands image and personality. Marketers and designers need to understand what colors mean to people. While all people do not react the same way to colors, there are a few generalities about how people respond to color. However, the psychological impact of color is still moderately subjective despite being studied and analyzed.

Research

Research Colors associations vary from culture to culture and from person to person.

Colors by Gender

• • • • • • • • •

Men and women experience and react to color differently resulting in different color preferences. Compiling the results of many studies, the Kissmetrics blog came up True Colors, Colors by Gender excellent infographic (Joe Hallock, 2003)

Red – Power, passion, appetite, love, strength, fear, survival Orange – Confidence, cheerfulness, friendliness, warmth, positivity Yellow – Youth, happiness, warmth, cheerfulness, optimism Green – Growth, life, healing, environment, peace, harmony Blue – Trust, peace, loyalty, masculinity, safety, dependability Purple – courage, loyalty, spirituality, creativity, mystery Brown – Structure, security, protection, conservatism, earth Black – Formality, luxury, sophistication, seriousness, independence White – Purity, simplicity, goodness, freshness, cleanliness, peace Color Psychology Marketing Color Association and Emotion Infographics

Image Credit: The Ultimate Guide To Using Color Psychology In Marketing

In the Color and Word Associations infographic, the color blue is one of the most preferred colors, with positive connotations. It is clearly a color that people are drawn to. Color associations may vary depending on the culture of its audience. Every culture views and understands a color differently. The context of a color affects the meaning of the color, for example, in India, red means purity, while in the U.S. it communicates passion.

Research

Research Demographic and Behavior

Users from ages 15 to 65, who are students, educators, family members and/or active in intercollegiate activies which require travel and traveling in groups. People traveling often on school related trips, sports travel, or vacations with friends or family, need a way to capture their travel moments in a spontaneous and interactive way while preserving group dynamic and memories. These are also users who need an efficient way of carrying their itinerary plans with them, accessing them at a moments notice or getting reminders of itinerary plans via notifications on the phones. Other target users include people in organized groups such as church youth trips, life coaching excursions, summer camps and collegiates traveling abroad. These individuals are general users of applications and frequent users of cell phones and tablets. They are average, non-technical users that travel in groups for educational, family, and group related purposes.

Personas Women see more light color differences and hues than men. Men simply call the color blue, blue. Women have many name variations for this same color such as teal, turquoise, sky, etc. Men withstand both colorless and bright color palettes better because they arenâ&#x20AC;&#x2122;t sensitive to the distinction of color as women seem to be. Designers need to consider the audience of the website or app that will be using the design and allow their gender to influence color choices. Color plays a dynamic role in the interface design of websites and apps. The choice of color needs to be carefully thought out and tested. Designers will not know how users will directly respond to color in their interface or layout designs without testing color combinations and placements that generate the most leads and traffic.

Research

Research Competitive Analysis Three competitor travel apps were evaluated. Bonjournal and TripCast are journal apps while the Tripit app is itinerary. All three are very successful applications, with wide usage thoughout the world. The Bonjournal and Tripit are a step up from Trip Cast, offering simplisic interface design with easy and intuitive usability.

Conclusion Bonjournal and Tripit are excellent apps with very few drawbacks. They both only offer journal or itinerary functionalities. Both apps have simplistic interface designs with exceptional usability. The TripCast appâ&#x20AC;&#x2122;s funtionalities have less desirable usability, with a detached user flow. It is confusing and seems disjointed. With the TRVLEASE journal and itinerary app, both journal and itinerary functionalities will be blended seamlessly, offering a joyful and fulfilling user experience.

Exploration

Exploration Concept Brief TRVLEASE will be a dual purpose mobile application offering journal and itinerary functionalities interacting seamlessly. Travelers will journal through blogs, pictures, and video, with profile and group feeds displaying all posts. Travelers can invite followers to share their travel experiences; followers can invite additional followers. With the itinerary functionality, the creator of the trip can assign itinerary planners. Users will be able to follow a clear and organized display of trip itineraries with push notification capabilites. An interactive map, pinning the plans once they are complete, keeps the users visually engaged on the geographical locations of each plan on the itinerary.

Task Analysis and Schedule The task analysis and schedule had slight changes due to scheduling conflicts. However, all tasks and their deadlines were met. The thesis and design document were merged into one entity since the thesis research was directly applied to the thesis application, enhancing its interface and usability.

100 %

Requirement Specifications

100 % 100 % 100 %

The application will: Offer an interactive journal with blog, photo, and video functionalities.

100 % 100 %

100 %

Enable travelers and followers to invite additional followers. 100 % 100 %

Allow users to like and comment on journal posts.

100 % 100 %

Provide a profile feed as well as a group feed.

100 %

100 % 100 %

Compile all the journal posts in a collage format, summarizing each day of travel.

100 % 100 % 100 %

Enable creator and assigned travelers to plan the tripâ&#x20AC;&#x2122;s itinerary.

100 % 100 % 100 %

Display itinerary plans clearly and attractively, with a detail screen of each plan.

100 %

Keep travelers updated with live updates on travel plans and flight details. Send push notifications to travelers when a plan is about to begin with itâ&#x20AC;&#x2122;s details. Provide an interactive geographical map, pinning the plans once they are complete. User will be able to share or print journal posts and itinerary plans.

Exploration

Exploration Affinity Diagram Brainstorming journal and itinerary functionalities and how they would be interactive and intertwined with each other, transformed a conceptual idea into a more concrete reality. This process organizes thoughts, making them more concrete and visible.

Site Map and Information Architecture The grasping and dissecting of initial concepts during the affinity diagramming process assisted in the visualization of this developmental site map and information architecture diagram which serves as the skeletal foundation of the appâ&#x20AC;&#x2122;s interface and useability.

Design Solution

Design Principles

Low Fidelity Wireframes

Platform Savvy

These first phase wireframes intricately brings the journal and itinerary conceptual functionalities into a concrete visual and organized framework of the application design interface and user flow. Screens: Add trip, invite travelers and followers, welcome, home screen, profile and group feeds.

Platform conventions can be manipulated intuitively and with ease. Icons, buttons, and color are consistent, predictable, and users instinctively know their functionalities.

Easy to Navigate Categories, sections, and use of hierarchical methods are used throughout the usability experience and design interface. Navigation is predictable and maximizes continuity as users journey through the apps functionalities.

Clear Interface is straightforward and direct with its information and functionalities. Language has clarity and is succinct with the applicationâ&#x20AC;&#x2122;s tasks and features. Iterative design will continue as a result of additional user-testing of the interface and its usability.

Simple Interface avoids unnecessary elements and is clear in communicating its objective and purpose. Multiple screens for each functionality is kept to a minimum. Prioritization is applied throughout the usability experience, emphasizing the main goals of functionalities.

Focus The application interface and usability is designed around a clear and singular purpose. Functionalities and features are communicated and delivered successfully.

Design Solution Low Fidelity Wireframes Screens: Itinerary, add plan, plan display, picture library, camera, and blog functionalities

Design Solution Medium Fidelity Wireframes Conceptual elements of the design interface and usability is refined and taken to the next design phase. Wireframes are kept in grayscale to keep focus on functionalities and usability. The usabilty testing will be conducted using these medium fidelity wireframes.

Design Solution Branding

Logo, Type, and Color The whimsical paper plane icon will represent TRVLEASE in both applications. Font type is Railway, 72 pt. Icon color is white. Interface colors are sea blue, yellow-orange, midnight blue.

Interface color scheme

Design Solution High Fidelity Prototype

Following the first usability testing, feedback and recommendations were considered, evaluated, and applied to redesign of the high fidelity wireframes. Below is the final prototype of the TRVLEASE Journal/Itinerary Application.

Design Solution Usability Testing

Usability testing introduces concepts and functionalities of the interface, while uncovering usability inconsistencies and issues. It is very important to identify strengths and weaknesses in the early phases before investing money and time in the development phase. The successful process of designing a strong prototype involves multiple iterative design and testing cycles.

Conclusion

References

Conclusion

References

The TRVLEASE companion app will be a dynamic addition to its predecessor. The duo will handle all the intricacies of travel organization, which includes tracking expenses and maintaining fixed budgets, journaling via blogs, images, and videos, and itinerary planning. The journal/itinerary companion app is a breath of fresh air, away from fixed numbers, fun and playful. It will preserve traveling group dynamics, and capture spontaneous moments otherwise forgotten. The itinerary functionality will help traveling groups keep up and on time. With push notifications, it will give constant travel updates on flights and itinerary plans. The app will delightfully pin finished itinerary plans on the travel map, leaving a colored trail of pins that represent each traveling day.

A Guide to Color, UX, and Conversion Rates Alvarez, Hannah. “A Guide to Color, UX, and Conversion Rates.” User Testing Blog, 2 Dec. 2014, www.usertesting.com/blog/2014/12/color-ux-conversion-rates/

These first few iterative stages of the interface design and functionality has been tremendous and progressive. The research on usability, emotional design and the psychology of color were absorbed and applied and as a result the TRVLEASE companion app has evolved to an exciting stage of the design process. Additional research and testing, followed by evaluation and redesign, will continue to push this application to an optimum level of usability and interface design, bringing TRVLEASE to an all-encompassing level of success.

The Underestimated Power of Color in Mobile App Design Babich, Nick. “The Underestimated Power of Color in Mobile App Design.” 25 Jan, 2017, www. smashingmagazine.com/2017/01/underestimated-power-color-mobile-app-design/ The Ultimate Guide to Using Color Psychology in Marketing Guest Author. “The Ultimate Guide to Using Color Psychology in Marketing.” CoSchedule, 18 April, 2016, www.coschedule.com/blog/color-psychology-marketing/#combos True Colors Hallock, Joe. “Color By Gender.” Kissmetrics, Color Assignment, 2001, www.blog.kissmetrics.com/ gender-and-color/ Don’t Make Me Think, Revisited Krug, Steve. Don’t Make Me Think, Revisited. New Riders, 2014. Brain Rules: 12 Principles for Surviving and Thriving at Work, Home, and School Medina, John. Brain Rules: 12 Principles for Surviving and Thriving at Work, Home, and School Pear Press, 2008 Emotional Design: Why We Love (or Hate) Everyday Things Norman, Don. Emotional Design: Why We Love (or Hate) Everyday Things Basic Books, 2004 Designing for Emotion Walter, Aaron. Designing for Emotion. Jeffrey Zeldman, 2011