<p data-renderer-start-pos="151">Today, it’s no longer enough to design a website or app that works. Digital products also need to provide users with a positive and memorable experience in order to stand out from the crowd and deliver results to a company.</p>

<p data-renderer-start-pos="376">Investing in emotional design and user experience (UX) as part of a brand’s digital strategy not only improves the quality of digital interactions for consumers, but can also increase conversions. A site or app that fosters negative emotions can turn customers and clients away. It doesn’t matter how efficient a website is if the target audience doesn’t want to interact with it.</p>
<p data-renderer-start-pos="759">The grandfather of emotional design, <a href="https://www.interaction-design.org/literature/topics/emotional-design" title="https://www.interaction-design.org/literature/topics/emotional-design" data-renderer-mark="true">Don Norman</a>, explains that “everything has a personality: everything sends an emotional signal. Even where this was not the intention of the designer, the people who view the website infer personalities and experience emotions.”</p>
<p data-renderer-start-pos="1025">When designing a digital product that elicits positive emotions, all the different <a href="https://blog.codazen.com/business-branding-with-color-psychology" title="https://blog.codazen.com/business-branding-with-color-psychology" data-renderer-mark="true">aspects of it from color choice</a> and typography to <a href="https://blog.codazen.com/colorful-advertising-vs.-black-and-white" title="https://blog.codazen.com/colorful-advertising-vs.-black-and-white" data-renderer-mark="true">image selection</a> and asset placement need to add up to a harmonious whole. Creating the right emotional cues can influence a user’s decisions and affect whether they want to keep using the product.</p>
<p data-renderer-start-pos="1356">Andrew Chen, a general partner at Silicon Valley venture capital firm Andreessen Horowitz, studied data points from over 125 million mobile phones and found that the <a href="https://andrewchen.com/new-data-shows-why-losing-80-of-your-mobile-users-is-normal-and-that-the-best-apps-do-much-better/?utm_content=buffere4fa2&amp;utm_medium=twitter.com&amp;utm_source=social&amp;utm_campaign=buffer" title="https://andrewchen.com/new-data-shows-why-losing-80-of-your-mobile-users-is-normal-and-that-the-best-apps-do-much-better/?utm_content=buffere4fa2&amp;utm_medium=twitter.com&amp;utm_source=social&amp;utm_campaign=buffer" data-renderer-mark="true">average app loses 77% of its Daily Active Users</a> (DAU) in the three days after it’s installed. Within 30 days, 90% of DAUs are lost, and by the 90-day mark, less than 5% of users continue using an app.</p>
<p data-renderer-start-pos="1724">With the average app losing a majority of its userbase in a matter of days, it’s vital for companies to design digital products that are not only functional, but evoke positive emotions that make them enjoyable to use.</p>
<h2 id="UX-Design-and-the-Bottom-Line" data-renderer-start-pos="1944">UX Design and the Bottom Line</h2>
<p data-renderer-start-pos="1944">Creating the right emotional experiences is key to unlocking the full potential of digital design. Effective UX makes users feel good or excited about being on a website or app. By designing digital products with the goal of making customers look forward to using them, companies can increase sales and foster a better brand experience.</p>
<p data-renderer-start-pos="2313">Aarron Walter, former <a href="https://uxplanet.org/design-for-emotion-expert-tips-by-aarron-walter-2f847e75a962" title="https://uxplanet.org/design-for-emotion-expert-tips-by-aarron-walter-2f847e75a962" data-renderer-mark="true">VP of Design Education</a> at InVision and current Director of Product for US COVID Response, says, “What if an interface could help you complete a critical task and put a smile on your face? Well, that would be powerful indeed! That would be an experience you’d recommend to a friend.”</p>
<p data-renderer-start-pos="2619">Look at successful interfaces like the ones used by <a href="https://twitter.com/" title="https://twitter.com/" data-renderer-mark="true">Twitter</a> and <a href="https://www.facebook.com/" title="https://www.facebook.com/" data-renderer-mark="true">Facebook</a>. Their designs are uncluttered and intuitive, and users form an emotional bond with the product that makes them sign in to the services multiple times a day. That’s the power of emotional design.</p>
<p data-renderer-start-pos="2889">This isn’t something new. In the 90s, two Japanese researchers conducted a study on how <a href="https://www.toptal.com/designers/product-design/design-for-emotion-to-increase-user-engagement" title="https://www.toptal.com/designers/product-design/design-for-emotion-to-increase-user-engagement" data-renderer-mark="true">aesthetics affected “perceived usability”</a> by comparing different ATM control layouts. All the ATMs were identical in function, the only difference being that some had more attractive interfaces. The researchers found that the ones possessing these attractive interfaces were perceived as being easier to use, with subjects remarking that those ATMs actually “worked better.” The study suggests a visually pleasing experience can lead to such a high degree of customer satisfaction that users will forgive minor frustrations when encountering problems with the product.</p>
<p data-renderer-start-pos="3547">This customer satisfaction leads to greater ROI for a company. The more satisfied a user is, the more likely they’ll continue using a website or app, and the more money they’ll spend on the brand.</p>

![AA5F1E31-4B79-47C4-BF92-3615195A5669.jpeg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/AA_5_F1_E31_4_B79_47_C4_BF_92_3615195_A5669_d1cb977439.jpeg)

<p data-renderer-start-pos="3748"><em data-renderer-mark="true">Source: </em><a href="http://shutterstock.com/" title="http://Shutterstock.com" data-renderer-mark="true"><em data-renderer-mark="true">Shutterstock.com</em></a></p>
<h2 id="The-User-Centered-Approach" data-renderer-start-pos="3774">The User-Centered Approach</h2>
<p data-renderer-start-pos="3774">By focusing on the user experience as the guiding force behind building new digital products and improving existing ones, designers can translate user feelings into product parameters.</p>
<p data-renderer-start-pos="3989">A 2020 study on website design for Turkish universities utilized the Kansei Engineering approach to identify <a href="https://www.tandfonline.com/doi/full/10.1080/23311916.2020.1770915" title="https://www.tandfonline.com/doi/full/10.1080/23311916.2020.1770915" data-renderer-mark="true">design elements that were emotionally appealing</a> to students ranging in age from 18 to 37. Kansei Engineering is the Japanese design methodology that links consumers’ emotional responses to the properties of a product or service.</p>
<p data-renderer-start-pos="4327">The students were asked to use 22 Kansei words to evaluate 9 sample websites of different Turkish universities. The results showed that an emotionally attractive university website needs to include a top menu, small header, and a logo that’s on the left side. These findings can help universities add elements to their webpages that attract more students by meeting user demands for better, emotionally-designed sites.</p>
<p data-renderer-start-pos="4748">Humor is another way to strike an emotional bond with users. Designing loading screens or error pages that illicit a laugh rather than a groan creates a positive experience out of a negative one. <a href="https://thenextweb.com/news/4-years-later-google-finally-explains-the-origins-of-its-chrome-dinosaur-game" title="https://thenextweb.com/news/4-years-later-google-finally-explains-the-origins-of-its-chrome-dinosaur-game" data-renderer-mark="true">Google Chrome does this effectively</a> with its dinosaur game. The Tyrannosaurus rex jumping over cacti keeps users engaged when they lose internet connection.</p>
<p data-renderer-start-pos="5103">A funny and helpful 404 page is another way to alleviate negative emotions when the unexpected happens. No one likes seeing a “Page Not Found” message instead of their intended webpage. But if a designer utilizes links and witty graphics on that page to help customers get back on track, it can leave those users with a positive feeling.</p>
<p data-renderer-start-pos="5442"><a href="https://www.tacobell.com/deliver" title="https://www.tacobell.com/deliver" data-renderer-mark="true">Taco Bell’s self-aware sense of humor</a> shines in its 404 page which features a dancing taco tripping and spilling all its fillings. It also includes useful information like links to Taco Bell’s homepage, menu, and locations so customers can find what they need. By designing with emotion in mind, the fast-food giant is able to turn an embarrassing website error into a great opportunity to show off its brand’s personality.</p>
<p data-renderer-start-pos="5867">Websites and apps that keep the user experience at the forefront can foster positive emotions, decrease negative ones, and create memorable brand experiences for their customers.</p>
<h2 id="Codazen-Solutions:-Form-and-Function" data-renderer-start-pos="6047">Codazen Solutions: Form and Function</h2>
<p data-renderer-start-pos="6047">Digital products that are emotionally appealing and user-friendly show customers that you care about their experience. By incorporating emotional design from the very beginning, businesses have a higher chance of not only getting users, but keeping them. This in turn leads to higher revenue streams and a better brand reputation. At Codazen, we build digital products with that in mind.</p>
<p data-renderer-start-pos="6474">According to Josh Grieve, one of our UX designers:</p>
<blockquote>
<p data-renderer-start-pos="6528">Getting to know your audience can uncover their needs and state of mind when interacting with your product. Are they relaxed, anxious, focused, or frustrated? Emotions impact our experience. When a product anticipates that, it creates a sense of empathy anyone can appreciate and remember.</p>
</blockquote>
<p data-renderer-start-pos="6820">Codazen’s designers and software engineers work closely with companies toward a personalized and creative digital strategy. We focus on the user and understand that how they feel can drastically impact the success of a site or app.</p>
<p data-renderer-start-pos="7053"><a href="https://www.codazen.com/contact/" title="https://www.codazen.com/contact/" data-renderer-mark="true">Contact us</a> to learn how we can help you leverage the power of emotional design.</p>

Emotional design for digital products can increase sales and create better brand experience.

large_481B99EF-30B9-4B2F-8369-696D8EE3EA9F.jpeg

medium_481B99EF-30B9-4B2F-8369-696D8EE3EA9F.jpeg

small_481B99EF-30B9-4B2F-8369-696D8EE3EA9F.jpeg

thumbnail_481B99EF-30B9-4B2F-8369-696D8EE3EA9F.jpeg

Emotional Design: The Digital Experience

<p data-renderer-start-pos="91">Creating brand authenticity consists of multiple factors, but choosing the right colors is at the heart of it. Studies show color is used by marketers to strategically alter brand personality, purchase intent, likability, and brand familiarity.</p>

<p data-renderer-start-pos="338">With so many social changes, brand authenticity has never been more important. <a href="https://sproutsocial.com/glossary/brand-authenticity/" title="https://sproutsocial.com/glossary/brand-authenticity/" data-renderer-mark="true">SproutSocial</a>, a social media management platform, reports that “younger generations say that brand authenticity is second to only discounts when determining which businesses to buy from.” How a company shapes perceptions to the public can really determine wether it sinks in these volatile markets.</p>
<p data-renderer-start-pos="717">That’s why the impact of color in forming brand perceptions cannot be ignored. From mom-and-pop shops to multi-national corporations, <a href="https://blog.codazen.com/business-branding-with-color-psychology" title="https://blog.codazen.com/business-branding-with-color-psychology" data-renderer-mark="true">color is at the heart of brand story</a>.</p>
<p data-renderer-start-pos="891">The color scheme assembled by designers plays a key role across your various marketing assets - from <a href="https://www.wix.com/" title="https://www.wix.com/" data-renderer-mark="true">building a website</a> and the design of a logo to a site’s colors and much more. Employing brand colors consistently and across all platforms can result in a unified look and feel to your company, making them memorable and recognizable.</p>
<h2 id="Colors-That-Work" data-renderer-start-pos="1227">Colors That Work</h2>
<p data-renderer-start-pos="1227">A <a href="https://www.tandfonline.com/doi/abs/10.1080/17543266.2013.877987" title="https://www.tandfonline.com/doi/abs/10.1080/17543266.2013.877987" data-renderer-mark="true">study</a> from the University of Missouri-Columbia revealed that blue logos invoked feelings of confidence, success, and reliability; green logos invoked perceptions of environmental friendliness, toughness, durability, masculinity, and sustainability; purple logos invoked femininity, glamor, and charm; pink logos gave the perception of youth, imagination, and fashion; yellow logos invoked perceptions of fun and modernity; and red logos brought feelings of expertise and self-assurance.</p>
<p data-renderer-start-pos="1735">Colors speak to us in ways we’re not even aware of.</p>
<p data-renderer-start-pos="1789">Picking the right colors for a site depends on how the website serves a user and how they want the user to feel during the process. If a brand wants to convey security and trust, the dominating color can be blue like AT&amp;T, Facebook, and American Express. Target, Virgin Atlantic, and Nintendo use red to express excitement. In the digital space, color can help contribute to a brand’s personality, set up a relationship with customers, and build authenticity.</p>
<p data-renderer-start-pos="2251">These global organizations have established brand authenticity in their digital spaces (and some of the biggest companies, like Coca Cola, had established brand authenticity long before the Digital Era). <a href="https://www.forbes.com/sites/nikkibaird/2018/08/03/brand-authenticity-is-it-really-that-complicated/?sh=793bab73481e" title="https://www.forbes.com/sites/nikkibaird/2018/08/03/brand-authenticity-is-it-really-that-complicated/?sh=793bab73481e" data-renderer-mark="true">Brand authenticity is carried in culture</a>. It comes through company values, the CEO, a company’s history, and what a company does internally and externally. But in modern times, brand authenticity is built in the digital space through a delicate dance of UI and colors.</p>
<p data-renderer-start-pos="2726">Brand authenticity requires colors that work in the digital and non-digital spaces. The digital space is our first stop with purchases, planning vacations, and browsing all kinds of products and services. The pandemic only reinforced the need to connect customers to brands online and the way to do it is by paying strong attention to the story that colors and brand authenticity tell.</p>
<h2 id="Simplicity-Helps-Authenticity" data-renderer-start-pos="3114">Simplicity Helps Authenticity</h2>

![0645F443-EE74-4280-BE48-A8F8D31C0CD2_1_105_c.jpeg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/0645_F443_EE_74_4280_BE_48_A8_F8_D31_C0_CD_2_1_105_c_3e302e73dc.jpeg)

<p data-renderer-start-pos="3148"><em data-renderer-mark="true">Source: </em><a href="http://shutterstock.com/" title="http://Shutterstock.com" data-renderer-mark="true"><em data-renderer-mark="true">Shutterstock.com</em></a></p>
<p data-renderer-start-pos="3174">Companies that have managed strong brand authenticity have simple color palettes— often it’s between 2-3 colors. Think of Pepsi, Apple, or Amazon, and chances are you can name a primary color used in their logos and sites, respectively. Color simplicity is key in UX design strategy and it’s also key in creating brand authenticity.</p>
<p data-renderer-start-pos="3509">A triad of colors for a website’s design is enough to balance the messaging around company values with emotions from the user journey. Colors must also uphold the user experience. Seems like a lot to ask of colors but the right UX designer’s eye can achieve this formula through the site’s UI elements.</p>
<p data-renderer-start-pos="3814">Strip away unnecessary elements, add the right colors, and you can foster brand authenticity. Brand authenticity needs to be simple. Simplicity lets the users know there is nothing to hide. Users don’t need to overthink. They can trust the brand when the message is clear.</p>
<h2 id="Codazen-Solutions:-Pretty-Is-as-Pretty-Does" data-renderer-start-pos="4089">Codazen Solutions: Pretty Is as Pretty Does</h2>
<p data-renderer-start-pos="4089">When you apply colors with brand authenticity in UX design, it is very intentional. Senior UX Designer at Codazen, Josh Grieve, says, “we place chosen colors depending on the section of a page. We pay attention to what we’re trying to accomplish in each section with each UI element, for each step of the user journey.”</p>
<p data-renderer-start-pos="4456">Gestalt Theory is the theory of visual perception and how our eyes and brains interpret what we see. The Gestalt Principles are always at play as we take into account the difference between primary and secondary colors. Each part of visual design falls into: Proximity, Similarity, Continuity, Closure, Figure/Ground, and Simplicity. Our designers use Gestalt Theory when determining what colors render the most authentic experience for customers and brands.</p>
<p data-renderer-start-pos="4916">We consider what colors are more neutral or more vibrant. We also do visual quality assurance and testing for our colors to meet Web Content Accessibility Guide (WCAG) standards. After all, a site has to be easily accessible to help build authenticity.</p>
<p data-renderer-start-pos="5170">It’s not just about making a website look pretty with the right colors. It’s about having the colors work well with the website’s function.</p>
<p data-renderer-start-pos="5312"><a href="https://www.codazen.com/contact/" title="https://www.codazen.com/contact/" data-renderer-mark="true">Contact us</a> to learn more about how we can help you employ the power of color.</p>

large_16E972EE-8CE7-4664-A770-C319CBB19970.jpeg

medium_16E972EE-8CE7-4664-A770-C319CBB19970.jpeg

small_16E972EE-8CE7-4664-A770-C319CBB19970.jpeg

thumbnail_16E972EE-8CE7-4664-A770-C319CBB19970.jpeg

Building Brand Authenticity With Color

<p data-renderer-start-pos="178"><em data-renderer-mark="true">Southwest's current sign-in site vs. Codazen's reimagined concept. (Courtesy: Codazen.)</em></p>

<p data-renderer-start-pos="267">I travel pretty frequently. As Codazen’s Executive Creative Director, it comes with the territory. My CEO, Mike Merchant, travels even more and has A-List Preferred Member status on Southwest Airlines. On one of our trips to meet up with a client in Menlo Park, Mike leaned over and showed me the A-List Preferred WiFi connection site on his phone:</p>
<p data-renderer-start-pos="267">&nbsp;</p>

![55B14A19-E0A0-47F3-962B-14D5BD0DC230.jpeg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/55_B14_A19_E0_A0_47_F3_962_B_14_D5_BD_0_DC_230_3fab31e93d.jpeg)

<p data-renderer-start-pos="620" style="text-align: center;"><em data-renderer-mark="true">Screenshot of Southwest’s A-List Preferred WiFi sign-in site on mobile phone. (Courtesy: Codazen.)</em></p>
<p data-renderer-start-pos="720">We’re still shocked when we see companies (and even design agencies) that don’t take a “mobile-first” approach to designing their web product experiences.</p>
<p data-renderer-start-pos="877">Southwest is a well-known, successful brand. This website is experienced by top business clients every time they want to connect to the in-flight WiFi. These flyers are running global companies and have flown thousands upon thousands of miles to qualify for A-List Preferred status. As elite business travelers, they expect the customer experience (CX) to be easy, light and beautiful.</p>
<p data-renderer-start-pos="1265">A website that’s difficult to use can give off an air of low tech-savviness and unprofessionalism that taints a brand’s reputation. Competition is fierce. If these travelers aren’t getting the CX they want, they could easily go to another airline that’s geared towards executives and commuters.</p>
<p data-renderer-start-pos="1561">Over the years, we’ve seen a pattern of companies not taking mobile into consideration. This neglect can have a negative effect on the end user, especially with so many people relying on their phones to access services. When you design an experience with a “mobile-first” approach, the limited screen real estate forces you to think about what’s really important to include.</p>
<p data-renderer-start-pos="1937">We took it upon ourselves to re-design the Southwest Airlines A-List Preferred WiFi sign-in site as an example of six ways to improve the CX. These solutions apply to any website.</p>
<h4 data-renderer-start-pos="1937"><span>#1: Avoid Logging in Altogether</span></h4>
<p data-renderer-start-pos="2151">One of the best ways to make a flyer’s life easier is to enable activating free WiFi from the Southwest App. That way, customers don't need to log in on the site at all, and most of the time, they're already logged in on the app. The app currently works while onboard the plane for certain functions, so this is a natural progression of that.</p>
<p data-renderer-start-pos="2495">But if logging in is a must...</p>
<h4 data-renderer-start-pos="2495"><span>#2: Make It Responsive</span></h4>
<p data-renderer-start-pos="2551">Mike and I had trouble using the A-List Preferred WiFi site on our flight because the page wasn’t responsive. We had to pinch and zoom just to read the text and interact with the form fields. I had trouble reading the “Click to return” CTA, and wouldn’t have even noticed it if we didn’t zoom in.</p>
<p data-renderer-start-pos="2850">Because the screen is designed for a landscape, desktop view, it doesn’t take advantage of the phone’s vertical (portrait) screen.</p>
<p data-renderer-start-pos="2982">At Codazen, our Product, Creative and Technology teams work in unison to deliver “responsive” layouts that automatically adjust to different screen sizes to give users an optimum experience, whether they’re on a laptop or smartphone. The words and fields should be easy to access and interaction should feel fluid, with text and images adjusting depending on the screen size. Flyers are saved from the inconvenience of having to zoom in to get the content they’re after, which can be frustrating whether you’re on the ground or 36,000 feet in the air.</p>
<p data-renderer-start-pos="3535">Consider our redesign here:</p>

<p data-renderer-start-pos="3535">&nbsp;</p>

![82AABD8A-344E-4D03-BEDB-0558F73BAB26.jpeg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/82_AABD_8_A_344_E_4_D03_BEDB_0558_F73_BAB_26_476a7540f6.jpeg)

<p data-renderer-start-pos="3568" style="text-align: center;"><em data-renderer-mark="true">Mobile-first, responsive concept for the A-List Preferred WiFi site on mobile phone. (Courtesy: Codazen.)</em></p>
<h4 data-renderer-start-pos="3568">#3: Take Away the Added Steps<span style="color: #1d3b2f; font-family: Poppins, sans-serif; font-size: 64px; background-color: transparent;"></span></h4>
<p data-renderer-start-pos="3706">The need to pinch and zoom just to read text and interact with form fields adds unnecessary steps. Each added action is one more opportunity to lose a user. If a website is going to ask users to give information, make it as easy as possible for them to do it. Otherwise, they’ll leave.</p>
<p data-renderer-start-pos="3993">For mobile, increasing the form field height size to a minimum of 40px helps solve this problem. Bigger fields lets customers use their fingers to tap on the field to interact with it. The simpler the process, the better the CX and the more likely the user will complete the task. For this website, less really is more.</p>
<h4 data-renderer-start-pos="3993">#4: Keep It Short and Sweet<span style="color: #1d3b2f; font-family: Poppins, sans-serif; font-size: 64px; background-color: transparent;"></span></h4>
<p data-renderer-start-pos="4343">This less-quantity, higher-quality approach is applicable to the copy as well. Reading through the site, I noticed there were a lot of words.</p>
<p data-renderer-start-pos="4487">For example, the instructions look more like a legal disclaimer. In our redesign, we eliminated excessive copy while using the space for other necessities:</p>
<p data-renderer-start-pos="4487">&nbsp;</p>

![FE426BE5-87B5-45BA-ADF5-9AD8B28A439D.png](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/FE_426_BE_5_87_B5_45_BA_ADF_5_9_AD_8_B28_A439_D_c7e73e2b36.png)

<p data-renderer-start-pos="4648" style="text-align: center;">&nbsp;</p>
<p data-renderer-start-pos="4648" style="text-align: center;"><em data-renderer-mark="true">Applied improvements in concept for the A-List Preferred WiFi site on mobile phone. (Courtesy: Codazen.)</em></p>
<p data-renderer-start-pos="4648" style="text-align: center;">&nbsp;</p>
<p data-renderer-start-pos="4754">Too much text runs the risk of users just glossing over it. It’s vital to condense the copy while still getting the message across. One way to do this is to take out repetitions. For example, the text at the top of the website says that A-List Preferred Members can use the WiFi at “no charge.” The button in the middle of the site repeats this fact with the words “Connect Free.” Taking out the repetitive lead-in would create cleaner copy while still providing the needed information.</p>
<p data-renderer-start-pos="5242">The lower the word count, the greater the importance given to the words that are there. And making it more scannable increases the probability of users actually reading the text.</p>
<h4 data-renderer-start-pos="5242">#5: Create an Immersive Experience<span style="color: #1d3b2f; font-family: Poppins, sans-serif; font-size: 64px; background-color: transparent;"></span></h4>
<p data-renderer-start-pos="5459">The website design right now is static, and static can equate to boring. When I use a website, I want it to build up excitement. I want it to entice me with an immersive experience. I want to know that I’ll be getting value by entering my information.</p>
<p data-renderer-start-pos="5712">One way to achieve this is through movement. In our mockup we replaced the motionless clouds beneath the Southwest plane with rolling clouds that gently float past the aircraft to give a subtle yet dynamic feel. The plane itself can fly into the frame to build more excitement. </p>

<p data-renderer-start-pos="6104">All these simple touches give customers a reason to want to interact with and explore the website. And as they explore, they can learn more about the airline, fostering good feelings they’ll remember once they disembark. That’s what good CX is!</p>
<h4 data-renderer-start-pos="6104">#6: Optimize, Optimize, Optimize</h4>
<p data-renderer-start-pos="6384">Load speed is one of the major factors in determining whether a customer gives up on a website or not. According to Google, 53% of mobile <a href="https://www.marketingdive.com/news/google-53-of-mobile-users-abandon-sites-that-take-over-3-seconds-to-load/426070/" title="https://www.marketingdive.com/news/google-53-of-mobile-users-abandon-sites-that-take-over-3-seconds-to-load/426070/" data-renderer-mark="true">users will leave a site</a> if it takes more than 3 seconds to load. <a href="https://www.businessinsider.com/in-flight-wifi-is-slow-and-expensive-2019-9" title="https://www.businessinsider.com/in-flight-wifi-is-slow-and-expensive-2019-9" data-renderer-mark="true">Aircraft WiFi tends to be pretty slow</a>. That means a site like Southwest Airlines A-List Preferred can take 5 to 6 seconds to load, while our optimized version would take less than 3 seconds, even with animations.</p>
<p data-renderer-start-pos="6801">In order to bridge this gap between a customer’s expectation of fast load speed and Southwest’s mobile capabilities, it’s critical to optimize the graphics on the website. Rule of thumb is the bigger the image files, the slower the load speed. The current image being used is much larger (physically) than it needs to be because it’s made to accommodate a desktop screen.</p>
<p data-renderer-start-pos="7175">Our version uses mobile-sized graphics at a higher “retina” resolution so the images look much sharper. And with our image compression techniques and utilization of a CSS gradient background instead of the full-screen sky image, these higher resolution assets actually result in a 52% smaller overall file size. This optimization is key to fast load speed and higher user retention.</p>
<h4 data-renderer-start-pos="7175">Codazen Expertise: Customer Experience</h4>
<p data-renderer-start-pos="7599">By making the A-List Preferred WiFi website faster, easier to use, and more intuitive, Southwest can provide the professionalism and tech savviness that their top customers have come to expect. A Codazen strategic redesign is low-hanging fruit for <a href="https://www.washingtonpost.com/travel/2019/10/16/southwests-plan-conquer-airline-industry-one-joke-time/" title="https://www.washingtonpost.com/travel/2019/10/16/southwests-plan-conquer-airline-industry-one-joke-time/" data-renderer-mark="true">Southwest’s signature in-flight CX</a> that serves thousands of their customers.</p>
<p data-renderer-start-pos="7926">Keeping the focus on the user at every step when creating a responsive design ensures that the website gives everyone the mobile experience they’re after, regardless of the device used.</p>
<p data-renderer-start-pos="8114">At Codazen, we see companies with a lot of similar usability and design problems on a daily basis. We love embedding with clients and presenting creative solutions. Better customer experiences build customer loyalty while heavily contributing to higher ROI.</p>
<p data-renderer-start-pos="8374"><a href="https://www.codazen.com/contact/" title="https://www.codazen.com/contact/" data-renderer-mark="true">Contact us</a> to learn more about how we can help your business.</p>
<p data-renderer-start-pos="8438">(And if you’re a Southwest exec, be ready to see more on Codazen’s A-List Preferred website remodel.)</p>

Non-responsive websites can ruin the customer experience. Here are 6 ways we improved on one of the nation’s most popular customer sites. 

large_F94A5BE8-4C0D-4BAE-943C-A3F4E066A864_1_105_c.jpeg

medium_F94A5BE8-4C0D-4BAE-943C-A3F4E066A864_1_105_c.jpeg

small_F94A5BE8-4C0D-4BAE-943C-A3F4E066A864_1_105_c.jpeg

thumbnail_F94A5BE8-4C0D-4BAE-943C-A3F4E066A864_1_105_c.jpeg

Hey Southwest Airlines, Show Your VIPs Some LUV!

<h3 class="p1" style="font-weight: normal;">First, what are "Heuristics"?</h3>
<p class="p1">They’re a set of principles developed by <a href="https://www.nngroup.com/people/jakob-nielsen/" rel="noopener" target="_blank">Jakob Nielsen</a> that we use as a guide while designing user interfaces. Following these 10 general rules of thumb will improve the usability of your digital product:</p>
<h3 style="font-weight: normal;">1. Visibility of System Status</h3>
<p class="p1"><span class="Apple-tab-span"> </span>The system should always inform the user about what’s going on through appropriate feedback and within a reasonable time.</p>
<h3>2. Match Between System and The Real World</h3>
<p class="p1">The system should speak the user’s language with words, phrases and concepts familiar to the user rather that system oriented terms. Follow real world conventions making information appear in a natural and logical order.</p>
<h3>3. User Control and Freedom</h3>
<p class="p1">Users often choose functions by mistake and we’ll need a clearly marked emergency exit to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.</p>
<h3>4. Consistency and Standards</h3>
<p class="p1">Users should not have to wonder whether different words, situations or actions mean the same thing. Follow platform conventions.</p>
<h3>5. Error Prevention</h3>
<p class="p1">Even better than a good error message is a careful design which prevents a problem from occurring in the first place. Either eliminate error prone conditions or check for them and present users with a confirmation option before they commit to the action.</p>
<h3>6. Recognition Rather Than Recall</h3>
<p class="p1">Minimize the user’s memory load by making objects, actions and options visible. Users should not have to remember information form one part of the dialogue to the other. Instructions for use of the system should be visible or easily retrievable whenever appropriate.</p>
<h3>7. Flexibility and Efficiency of Use</h3>
<p class="p1">Accelerators unseen by the novice user may often speed up the interaction for the expert user so the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.</p>
<h3>8. Aesthetic and Minimalist Design</h3>
<p class="p1">Dialogue should not contain information that is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and then diminishes their relative visibility.</p>
<h3>9. Help Users Recognize, Diagnose and Recover from Errors</h3>
<p class="p1">Error messages must be expressed in plain language, meaning no codes. Precisely identify the problem and constructively suggest a solution.</p>
<h3>10. Help and Documentation</h3>
<p class="p1">Even thought it’s better if the system can be used without documentation,&nbsp; it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out and not be too large.</p>
<p class="p1">In conclusion, follow these guidelines for good heuristics and you’ll have happy users!</p>

First, what are “Heuristics”? They're a set of principles developed by Jakob Nielsen that we use as a guide while designing user interfaces. Following these 10 general rules of thumb will improve the usability of your digital product:

Blog

Emotional Design: The Digital Experience

By Gwenever Pacifico / September 20, 2021

Categories

All

Marketing

Immersive Experiences

Data Science

UX

Business

Culture

Tech

Strategy

Categories

UX

By Dalia Martinez / June 18, 2021

By Danny Petrovich / September 25, 2020

By Codazen / August 07, 2019

How can we elevate your brand experience?

Irvine, CA

Salt Lake City, UT