As a digital design agency, we know that the average person spends 3 – 5 hours a day on their mobile device! Over 20% of people check their phones every few minutes and over 50% of users look at their phones a few times an hour. Ever advancing apps and functionality are allowing people to transition almost any aspect of their life into digital devices. Order takeout? Sign a document on the go? Even adjust your thermostat. As a digital design agency, we’ve seen the increasing need for mobile-first web design. As mobile usage spikes by the day, hour, and even minute, a seamless mobile experience has become increasingly critical.

Responsive text is a no-brainer, your website copy will need to reformat to be visible and easily readable. But, to add a layer of complication to web design, images and illustrations must also work across all types of devices. With this in mind, designing websites and illustrations often turn into a puzzle, where elements must shift from wider pages to fit skinnier pages and vice versa. Before diving into a few of the benefits of mobile-optimized websites and illustrations, it’s important to first understand the two main ways you can build your site to work for multiple devices.

Responsive Design vs. Adaptive Design

Simply put, adaptive web design relies on static layouts that detect the size of the target screen and load the appropriate layout for it. We typically recommend designing adaptive sites for six common screen widths: 320, 480, 760, 960, 1200, 1600. However, technology companies are always debuting new devices with new screen sizes. Conversely, responsive web design is a dynamic design method that adapts to whatever screen – no matter the size – an individual is using. More specifically, responsive design uses CSS queries to change screen width, height, display type, etc. to adapt to the needs of a target device. As a digital design agency, we recommend a responsive design for a more fluid user experience.

Now that you have a better understanding of the main ways to adapt your site to multiple devices, keep reading to understand a couple of benefits you may not expect of mobile-optimized websites and illustrations.

SEO Benefits

Many familiar with Google’s SEO practices know that there are three major steps to how it’s algorithm works: Crawling, Indexing, and Ranking. While all three are incredibly valuable components to understand, indexing is the most relevant for the purpose of this conversation. In short, indexing is Google’s process of storing the information and content they’ve deemed relevant for users. Since Google recognizes that most of its users are on mobile devices, they have shifted toward mobile-first indexing, which means Google ranks pages, structured data, and snippets from mobile pages of websites instead of desktop pages.

A key part of this process involves images and illustrations. In the past, many websites have blocked certain illustrations from showing on non-desktop devices. Therefore, Google can’t index these illustrations as valuable content to a user. However, as a digital design agency, we know that Google’s algorithm wants to see and categorize images and illustrations. By having a responsive web design, your website’s images can display on any device, making it easier for your website to rank in Google’s top organic search results. 

Visual Triggers

For better or for worse, a large percentage of people comprehend and perceive images faster than words. Generally speaking, people are better able to perceive visual marks and process data when transformed into images. Additionally, almost 80% of users scan any new page they encounter, whereas 16% read word-for-word. Whether users are scanning or reading word-for-word –  images, illustrations, and infographics are incredibly important. Not to be cliché, but a picture truly can be worth a thousand words.

When viewing the information above, which drew your eye first, the graph, or the block of text? This question should always be asked when formatting content on a webpage, as we know that the user’s eyes are more easily drawn to illustrations than words. However, it’s important to note that images can be overdone. Adding too many images can be counterproductive, as it can create visual overkill. An experienced digital design agency, like Bluetext, can help make sure your images are helpful, relevant, and transferable between device types.

Conclusion

Images, illustrations, and infographics all visually communicate ideas and leave cumulative impressions on visitors to your website. By using them, you can create an immersive, empathetic, and humanized sense of context for users. An immersive experience can truly set your company apart from competitors and should be available to a user regardless of the viewing device. With mobile making up almost 60% of internet traffic, mobile-optimized sites and illustrations are necessary to ensure the user experience is fluid, attractive, and usable, no matter the device a visitor is using.

Interested in working with a digital design agency to help with your mobile experience? Contact Us!

 

 

What is ADA Compliance? 

The Internet should be accessible for all, and Section 508 of the Rehabilitation Act of 1973, ensures that. Section 508 is designed to extend federal responsibilities to all individuals with disabilities, especially as the world moves towards more digitally based interactions. In 1998, the law was updated to include specific terminology over ‘electronic and information technology.’ Because the actual terms and conditions outlined in § 508 are ambiguous, the W3C created specific guidelines (Web Content Accessibility Guidelines or WCAG) to be able to run specific criterion tests on the suggested interpretation of the guidelines. Since January 2017, the current version, WCAG 2.0, has been accepted as the primary set of implementation guidelines. 

This Is A Lot of Legal Jargon, Why Should You Care?

Every company should want as much reach for your digital content as possible, even if your target audience is not visually impaired or disabled. Not to mention, you could get sued if your website is not ADA compliant. If you’re federally funded, you must be compliant. For non-federally funded websites, it’s a gray area, but certainly a legal risk. Best practice is to be compliant and empower equal access and equal opportunity for all digital content. The Internet in particular can dramatically improve the lives of people with disabilities. It’s important to remember that accessibility is not just for the blind – it also accommodates auditory, motor, cognitive, and seizure disabilities. With about 15% of the global population living with some form of disability, it’s crucial as a reputable brand to want to make your website and digital content accessible for everyone. But it’s not always easy…

Accessibility Design

Accessibility should be considered early on in the design phase. It’s also important to remember that there’s no “end” to accessibility – it’s an evolving process. There’s also no ‘correct’ solution to accessibility. The WCAG 2.0 instead focuses on four principles of accessibility to base on for criterion testing:

1. Perceivable
2. Operable 
3. Understandable 
4. Robust 

What do these principles mean and how can I design in style with them in mind? 

Perceivable

This means web content is made available to the senses – sight, hearing, and/or touch. 

Text Alternatives: You must provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols, or simpler language.

• All non-decorative images should have alternative text (aka ‘alt text’)
• Complex images should be described on a separate and linked page
• Form buttons and fields should be labeled

Pro tip: Use arrows so google can “read” hidden content. 

↓

Time-Based Media:

• Audio content should have text transcripts
• Video content should have synchronized captions 
• Any visual content in video should be described 

Adaptable: Create content that can be presented in different ways (for example, simpler layout) without losing information or structure. 

• Semantic markup is used for headings and text (e.g, <h1>, <ul>, <ol>, <strong>)
• Menus should be logical and intuitive from reading order alone
• Instructions do not rely on shape, size, location, or with auditory cues

Not only are these practices compliant, but they also provide tremendous SEO benefits! So why wouldn’t you implement an adaptable structure?

Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

• Color is not used as the sole method of conveying content or distinguishing visual elements
• Contrast (http://webaim.org/resources/contrastchecker/)
  • The text has a contrast ratio of 4.5:1 (AA)
  • The large text has a contrast ratio of 3:1 (AA)
    • Large text is defined as text larger than 18 points (~24px) or bold text larger 14 points (~19px)
• The page is readable and functional when text size is doubled (AA)
• Should be able to pause or change the volume of any audio longer than 3 seconds

Pro Tip: Test your color contrast and font size with this tool to ensure it’s compliant. Accessible design can still look modern and creative! https://www.getstark.co/

↓

Operable

This means the user interface components and navigation must be operable. 

Keyboard Accessible: Make all functionality available from a keyboard

• All functionality is available using the keyboard unless the functionality cannot be accomplished in any known way using the keyboard
• Keyboard focus is never trapped

Enough Time: Provide users enough time to read and use content

• If a page or application has a time limit, the user is given options to turn off, adjust, or extend that time limit
• Automatically moving, blinking, updating, or scrolling content that lasts longer than 5 seconds can be paused, stopped, or hidden by the user. 

Pro Tip: On auto-scroll content, include a play/pause button so it can be paused and the content can be consumed. If the content on auto-play doesn’t have a link or text, or really any content associated with it, then it does not need a pause/play button.

↓

Seizures: Do not design content in a way that is known to cause seizures

• No content flashes more than 3 times per second and do not contain too much red 

Navigable: Provide ways to help users navigate, find content, and determine where they are

• A link is provided to skip navigation and other page elements that are repeated across web pages
• Pages have descriptive and informative page titles
• Navigation is logical and intuitive
• The purpose of each link can be determined by the link text and context alone. Links with the same text that go to different locations are readily distinguishable.
• Multiple ways to find other web pages of the sites (e.g., table of contents and search) (AA)
• Avoid duplicative page headings and label text (AA)
• Focus states are visible to the user (AA)

Understandable

It’s as simple as it sounds – content and interface need to be easy to understand. This should be a website goal for both disabled and abled users!

Readable: Make text content readable and understandable

• The language of the page is identified using the HTML lang attribute (e.g., <html lang=“en”>)
• The language of page content that is in a different language is identified using the lang attribute (e.g., <blockquote lang=”es”>) (AA)

Predictable: Make Web pages appear and operate in predictable ways

• When a page element receives focus or a user interacts with a form or control, it does not result in a substantial change to the page, creates a pop-up, or any other change that could confuse the user, unless the user is informed of the change ahead of time
• Navigation links do not change order (AA)
• Elements across multiple webpages are consistently identified (AA)

Input Assistance: Help users avoid and correct mistakes 

• Required elements for a form are clearly labeled as such
• Form validation issues are provided in a quick and accessible manner
• Required interactive elements have sufficient labels and instructions
• Suggestions should be provided for fixing input errors (AA)
• Changes to legal or financial data can be confirmed or reversed (AA)

Robust

Content can be used reliably by a wide variety of user agents, including assistive technologies

Compatible: Maximize compatibility with current and future user agents

• Avoid HTML parsing errors (http://validator.w3.org)
• Markup is used in a way that facilitates accessibility (e.g., ARIA labels for custom interface components)

Remember, accessibility is more than just following these guidelines – it’s about equal access to digital content. You could be the next big example in your industry for accessibility, and maybe even be eligible for an award. And once your beautiful, new website is built, there are tools to help you ensure your site is accessible. Download WAVE to identify accessibility and Web Content Accessibility Guideline (WCAG) errors. 

Not sure how to get started? Contact us at Bluetext – we’re here to help! 

A business’ marketing content is crucial in informing and educating prospects and customers about the company. It helps communicate the company’s story, credibility, leadership in the industry, as well as specific solutions and challenges they can solve. It not only represents your business but also your value proposition. It determines what sets you apart from your competition. Content marketing helps to educate and guide customers on authentic and trustworthy experiences, ultimately leading to conversions for your business. 

There is no shortage of marketing resources available. From infographics to whitepapers, to case studies and blogs, marketing content exists in all shapes and sizes. The variance helps open your resources to a wide range of audiences while also keeping content fresh and modern. But what is the best way to showcase all your resources together in one organized, concise place?

Rise of the Resource Centers

The popularity of businesses creating online Resource Centers/Hubs on their websites is through the roof. Resource Centers consist of pages and pages of content marketing assets. End users typically can preview the type of content, a short description, and maybe even a thumbnail image. Resource Centers can often become extremely overwhelming for a user, driving away conversions. The user journey is important to keep top-of-mind when designing your Resource Center. 

One of the best ways to improve the user experience while browsing content marketing is to aid them in finding exactly what would cater to their needs. Taxonomy tags are the most efficient way to categorize content by type, category, or keyword. Users should be able to easily search or filter between taxonomies, to view results relevant to them as a click of a button. Resource Center listing pages can even pre-filter content and allow the user to view specific collateral types, topics, or more upon landing.

Industry Examples

For example, Genpact exemplifies a simple user journey on their Resource Center. The first thing a user sees landing on their “Insights” page is the ability to search for content related to a specific industry, function, or even to improve a strategic goal. By establishing obvious and easy to use personalization options, users feel catered to and confident they will find exactly what they are looking for. And even without a specific intent in mind, users can pre-filter options to simply browse by industry, function, or goal-relevant to them. Users can even combine all three filtering options to view even more tailored results.

Another great example of pre-filtered content in a Resource Center is IPsoft. IPsoft filters all content by types, such as Press Releases, Opinions or blogs, or educational resources such as whitepapers and videos. For users browsing the newsroom, all content is sorted chronologically and categorized by large, recognizable tags. In addition, popular posts constantly follow the user in the right-hand column while social media share buttons are easily accessible in the left-hand column.

McKinsey takes a unique approach in its Resource Center by showcasing its range of content marketing and news types in nugget-sized promotional banners. With this approach, a user is introduced to a wealth of resources and content types, without being overwhelmed. With only one to four resources shown per type, the page is easily scannable. This not only caters to the simplified user journey for the user who knows what they want they’re looking for, but also for the user who wants to explore and browse content. McKinsey sorts by popular posts, magazine insights, global institute insights, and podcasts and videos into one streamlined interface, much like a magazine stand. This further cements the credibility of the company as well by highlighting various company publications.

Along with pre-filtering content for your audience, creating a unique and well-designed Resource Center is key for standing out amongst your competitors and bringing in potential conversions. It’s crucial you recognize the goal for your Resource Center – is it to highlight outstanding thought leadership? Or is it to showcase your wide range of insights? Once you have your goal in mind, focus on user experience, and strategic branding to achieve your goals and watch the conversions come in.

Affinity is a prime example of using unique branding to frame their content marketing as interesting and valuable. Affinity is focused on showcasing a breadth of content and has created a unique design to accomplish this goal. When you land on the News, you immediately view the most recent article, ready for your users to read. While prioritizing the most up to date content, the left-hand column allows users to scroll through other posts or resource types with the ability to filter by categories. It gets a user hooked on the breaking headline, but not without showing off the greatest hits.

Another great example of a unique Resource Center is Guidehouse. Guidehouse has a large number of insights, thus utilizes sticky navigation. Sticky navigation follows a user as they scroll up and down on a page so that a menu of alternate pages or sections are always in view. Their sticky navigation showcases pre-filtered content in a variety of industries. This highlights their range of abilities, while also ensuring users never feel lost in an unfamiliar industry.

We all want to be thought leaders, but your company has to look the part. Don’t underestimate the power of your marketing content. Utilize your content and drive conversions for business and reputational success!

Considering amping up your Resource Center? Trust Bluetext with all your digital marketing and design needs!

 

What is responsive web design?

At its core, responsive web design uses a single layout for a web page then dynamically adapts to best fit the user’s screen, whether it’s a desktop, laptop, tablet, or a mobile device. This creates a seamless and recognizable experience for every user and session if viewed on a laptop one day, and on a mobile device the next.

Responsive web design not only improves user experience but also increases development and design efficiency. This method of web design is preferred over an adaptive approach since it reduces the number of layouts designers and developers need to account for. Rather than designing the same page for small and large desktops, tablets, and mobile devices, responsive design dynamically updates page layout to fit the users’ screen.

User Experience and Expectations

Welcome to 2020, where everyone is walking around with a miniature computer glued to the palm of their hands. Users have become more and more comfortable browsing online for everything from e-commerce to B2B research.  Even if your business imagines themselves being primarily viewed at the office or on traditional desktop screens, you must accommodate for changes in user behavior. It’s highly likely that your users may find your website while browsing LinkedIn on their phone or tablet, or maybe Googling on-the-go. And if you have successfully captured their interest on a mobile device, you better prepare for a more thorough investigation on desktop. Your website now has two unique sessions that you should ensure are seamless and as familiar as possible. Imagine being blown away by a beautifully designed website, only to show your colleague the next day on your iPhone and find the mobile site clunky and unusable.

As Krisztina Szerovay explains responsive web design, nowadays, it’s more of an expected standard than a luxury for sites to utilize a responsive design. With a significant portion of site traffic coming from mobile, it’s more important than ever to ensure your site caters to all users regardless of screen size. 

Work smarter, not harder. 

Responsive web design provides many benefits such as increased flexibility, better SEO, reduced costs, and better mobile experiences. Instead of making a new design for each new device or screen size, rapid response allows you to stick with one design. Google recommends using responsive designs as they allow you to focus on a single page while also improving the mobile experience for users.

This approach is also cost-effective thanks to its faster implementation and easier management. Lastly, responsive designs’ simplified layouts provide your mobile users with more enjoyable experiences. And as we already know, with more and more web traffic coming from mobile, a good mobile experience is essential. Responsive web designs have even led to higher engagement, with users visiting more pages on average per visit.

A word of caution, trust the experts

While responsive web design has numerous benefits, it’s worth noting it’s not for every company. This method requires more up-front planning to ensure the design and experience are clear for users. But that’s where Bluetext comes in, our experienced designers and developers collaborate to develop a site that not only meets your goals but also works across all devices.

Indirectly, the responsive method provides additional benefits. Since your site must be designed for all the content to be repositioned based on the users’ screen, we work with you to find the simplest and clearest way to convey your message. Often, responsive designs benefit from a very straightforward design. For example, Apple doesn’t change any of the content that’s shown on their desktop site compared to its mobile site, the only difference is their menu and content placement. With the knowledge of industry best practices, we can guide you every step of the way from content placement to functionality.

Read more about how we recently designed and developed a fully responsive site for Challenger. Our team created a site with current best practices for content functionality while giving more flexibility to the back-end users to accommodate various user journeys.

When building and launching digital campaigns, many of the key determinants of success are evaluated through digital engagement measurement and tracking. However, as websites and ad-tech have evolved in recent years, so have protections and privacy policies. It’s easy to write off the need for a comprehensive privacy policy, however, this is a recipe for disaster in the age of big data regulation and enforcement. To avoid the FTC and International regulators ire, digital agencies such as Bluetext recommend taking data privacy measures that cater to the most comprehensive regulations in effect. 

For businesses with users outside of the United States, being aware of the General Data Protection Regulation (GDPR) and similar legislation is an essential consideration. The GDPR has created strict provisions for EU web users’ privacy and data rights, which extends to US browsers. As global privacy legislation evolves, North American businesses that handle global users’ data must comply with current regulations and build with an eye on future compliance. Top digital marketing agencies advise and design campaigns and websites with these policies in mind to provide frictionless engagements. 

What is the GDPR?

The GDPR is an extraterritorial set of provisions that updated Europe’s data protection standards. The privacy policy strengthens the protections set in 1995, adding requirements for greater transparency and disclosure to users, in addition to modernizing the “cookie law” of 2002.

The GDPR goes beyond earlier regulation, focusing on personal data protection regardless of the type of data and how companies must document user consent in a transparent fashion. These protections apply to all persons browsing within or originating from the European Union. 

The term “personal data” is not synonymous with “personally identifiable information”, or PII. PII has traditionally been a legal concern for American businesses, and it refers to a more defined set of information than the GDPR model. PII does not have to be context-specific to be regulated, in contrast, the GDPR emphasizes the consumer risks of data aggregation.

My business isn’t located in Europe, why should I care?

The GDPR’s reach is far greater than the medley of privacy protections in effect across the United States. Violators of the regulations risk penalties of €20 million ($22.6 million as of writing) or 4 percent of global annual revenues for the preceding fiscal year, whichever is greater. Comprehensive legislation at the state level in the U.S. has been varied, many forward-thinking businesses are beginning to take steps to adapt their practices to comply with the California Consumer Privacy Act (CCPA). Ultimately every website will have to comply with some set of standards, so it is wise to be proactive and implement privacy protection now. Top digital marketing agencies such as Bluetext are taking steps to protect against potential violations of the CCPA and GDPR by changing cookie collection practices, recommending new data collection practices, and designing clear consent forms. 

Changing privacy policies impact sites from the bottom up, starting with development and design

In a digital-first world, data is a critical component of many businesses online and offline strategies. With the implementation of the GDPR, marketers and web developers must be more diligent about what data we collect, the means by which we collect it, and how we handle sensitive information. When building or updating websites, web developers, and digital project managers should take this as an opportunity to rethink how sites can be more transparent and adopt the Privacy by Design framework. 

The Privacy by Design framework highlights design-thinking approaches to development prior to launch to eliminate the need for post-hoc privacy fixes once a project is live. Solutions such as making privacy the default setting for site visitors, making privacy standards visible and open, and giving users specific privacy information notices are easy considerations to add to the development plan.

If your site is already live, consider a development sprint focused on auditing areas of potential weakness. In assessing your data hygiene, your team can look for unsafe or unnecessary modules that can be disabled, particularly those found in APIs and third-party libraries. Adtech integrations may help source leads and retarget with better precision, but validating that their pixels and tracking are in alignment with GDPR best practices is essential. 

The aesthetic design of websites is also impacted by changing privacy practices. GDPR consent requires clear and explicit opt-in notices to users. Designers, user experience experts, and marketers should work collaboratively to update existing landing page components to incorporate new disclosure features. One simple mantra to internalize in the design phase? Offer accessible, clean choices around cookies and pixels.

When building clear user permissions for data capture, the GDPR requires that websites define data retention and deletion plans for all the personal data collected. Adding GDPR conscious logic to scripts at the code level of your site can save time for site custodians and business analysts alike in the future. 

Updating best practices for common marketing tactics and tools 

Updating the fine print on your Privacy Policy is just the first step of complying with new regulations; common marketing campaign tactics such as cookies should also be rethought through the lens of compliance.  Cookies are the small data files that can be placed on users’ browsers and provide a trove of useful insight to website operators. Under the GDPR, businesses are legally liable for any activities on their sites, specifically protecting user data from third-party cookie tracking.

Many businesses use cookie tracking to better measure the impact of their marketing strategies, and they combine tracking with other user data to build user personas. While this has been an accepted practice in the past, the new regulation now requires clear permission from European users to collect this information, whether the site is for an American or French company. As noted in the impact of GDPR on design, cookie usage has to be explained on either the homepage or a  second-level page on the navigation. This immediate opt-in should allow users to understand how their data is collected, the purpose of the data, and how long they are consenting to these cookies.

As a website operator, sites must withhold all cookies and trackers on your website until you have received clear and explicit user consent on each type of cookie and tracker. This consent has to be given freely, described in explicit plain language, and users must have the ability to withdraw consent. The rights of users under the GDPR are extensive — to comply, website custodians must update their privacy policies and opt-in tools. 

This sounds like a lot of work, why should I care?

Ultimately, thoughtful privacy policies, development, and design provide a safeguard for both businesses and users. The GDPR gives consumers new rights to access and manage their data on digital platforms, and businesses that do not adapt to meet these regulatory requirements can face steep fines. While these changes can seem overwhelming, a top digital marketing agency such as Bluetext can guide your business through the murkiness of data privacy design and compliance.

Have you ever taken a placement quiz on a website to determine which Internet package was right for you? Have you completely filled in your LinkedIn profile to get rid of the accomplishment bar at the top? Have you found something unexpected on a website that caused you to spend more time browsing? If you answered yes to any of the above questions, you’ve experienced elements of “gamification” in web design. 

What is Gamification?

Gamification is the act of taking a process that already exists (say, filling out a social media profile) and applying game mechanics to make it more engaging. Some examples of game mechanics frequently used in website gamification include: 

• Points and Achievement – Usesf positive reinforcement that allows website users to set goals, earn badges, and “level up” or gain some sort of elevated status. 
• Rules of Play – games typically have set rules of play, including fast feedback (i.e. a star for a correct answer, or a slight change in color for a completed answer, etc.).
• Competition/ Status – Competition between other users or to get a personal high score, is also a common aspect of gamification. Often, winning will confer some sort of elevated status on users (i.e. a top tier loyalty customer, etc.). 
• Self-expression – Social aspects or collaboration could also be considered aspects of gamification – a message board, for example, could be gamified.

You may be thinking, “my business is too serious for a silly game!” However, that’s not what we mean by “gamification”. Gamification is about increasing engagement for an existing process. You could use it for everything from encouraging customers to return to your site to onboarding new employees in a fun way that will stick with them. 

Why Do People Use Gamification in Websites? 

Gamification can have many examples for websites, including higher levels of adoption (for loyalty programs, for example), conversion increases, or decreases in time spent onboarding clients or employees. In fact, even just one element of interactivity on your site can encourage a deeper level of attention and participation from website users because users intrigued by one element of a site are more likely to search for more engaging content. 

According to the Peak-End rule in modern psychology, content that sparks moments of joy or discovery, however brief, is much more memorable than other types of content. Gamification can spark these peaks – with something relatively simple like visual storytelling with minimal interactions (like on a marketing website for your complex product set) to a full-on competition with a leaderboard and diverse levels (like on a language learning website).

Gamification Guidelines

While gamification can be a great way to add interest and interactivity to your site, it also can increase the levels of expectation that users have for your site content and overall business. Here are some guidelines to consider when considering gamification in your web design:

• Make it more than just a fun add on: Gamification methods can’t just be an add on. They must resonate with your business mission and strategy. Otherwise, they will take away from your site and business message. 
• Include a way out: Ensure your game elements don’t block users from engaging in other ways with your site. You should use gamified elements to enhance engagement, but make sure you have other options for those who might not want to play or who might be looking for information about you and your products faster. 
• Follow logic and keep it simple: Knowing basic psychology is important when adding game elements to a site. If these elements don’t make sense to users, the point of gamification is lost. In addition, you need to keep things simple. Remember, you’re not creating an entire game, just using aspects of games to accomplish a business goal. Sudden realizations (sparks of discovery) are better in progression – you shouldn’t expect your users to learn or retain too many things at once. 

Gamification Ideas for Your Business 

Everyone’s business is different and will have different possible ways to include gamification in their site. Here are a few for different types of businesses: 

• Quiz Mechanics: A quiz or game to figure out which of your products or packages is right for the user. This can teach the user more about what you do and the differences between your packages in a fun way that will be memorable.
  • Real-world example: TravelZoo’s literary map of the UK (to generate buzz for the different cities on the map) 
• Social Mechanics: A competition that displays rankings of different users so that more users complete reviews, order more, or come back to use your site or resource more often. A message board on your company website can also be implemented so that users can share good (and bad) experiences with friends and family. 
  • Real-world examples: Citroen’s on-screen test to get users to scroll as fast as they can (to associate Citroen with speed and enjoyment) 
• Problem Solving: You provide users the tools they need to solve a problem that you pose to them. With more information, users receive more content and more control of the process. (To set up Vive’s VR headset, the company put a game on their site – upon completion of which, the headset will be ready). 
• Accomplishment and Completion: You encourage users to complete a task that is already halfway done by dangling an accomplishment. (LinkedIn uses a status bar when you’re filling out your profile to encourage you to fill it out more fully and to share on the platform with others). 

BadgeOS

A great gamification WordPress plugin that we recommend our clients to consider is BadgeOS. BadgeOS is a fully customizable add-on, allowing you to define an unlimited number of types and customize them as much as you like. Utilizing BadgeOS, company’s can design their own badges, define required steps to achieving specific badges, track achievements via a leaderboard, allow users to share achievements via social media, and so much more.

We Won’t Play Games with Your Site – But We Can Gamify It 

Want to explore gamification and its possibilities for your site, but don’t know where to start? We can help! Bluetext has a wealth of experience in creating engaging and successful sites, including gamification, from visual storytelling to quizzes, to choose-your-own-adventure experiences. We won’t play games with your site, but you can bet that we can gamify it.

In the past few years, the option for “dark mode” has become increasingly popular as our time spent on-screen steadily climbs. Dark mode is a display setting on a computer, tablet, or mobile device that allows the user to view their content with a predominantly dark theme, compared to the typical white background we find on most websites and apps. So what is the purpose of this change? UX research shows that dark backgrounds enhance page contrast, making visuals pop and easier for the user to focus on.

Early adopters of dark mode will remember when it was only a one-off feature, offered exclusively within certain mobile apps. Slowly, as time passed and more software updates were revealed, operating systems like iOS 13 and Android 10 offered a dark mode option that applied device-wide; making the switch for all of your default apps (i.e. your notepad, weather, and more). Now that dark mode is more widely available on our top visited apps like Instagram, Twitter and soon Facebook, many website designers and developers are wondering if a dark mode option is right for their site.

Is Dark Mode for Me?

There are a number of factors to consider before adding a dark mode setting option on your site. The trendiness vs. the more concrete usability points is the main question to ask yourself. What is the goal of your site? If the focus is on the style and design, it makes a better case for a dark mode implementation. There is evidence that users viewing content in dark mode are able to more easily focus on the visuals on screen, over the content. Dark mode is ideal for distinct CVIs or attractive product imagery. If brand awareness or e-commerce is your site’s main focus, dark mode may improve page performance.  If a KPI is more content driven, focusing on conversions and leads, dark mode might not be a critical feature.

Web developers should also be aware of the time needed to implement a dark mode option—both initially and to factor it in with future updates. If the project is already on a timeline with a quick turn around, it could be better to revisit the integration as a post-launch add-on item.

Consider Your Users:

Two key end-user  benefits stand out when considering dark mode for your site:

1. The highly convincing argument that it may be easier on the eyes. This is pretty self-explanatory. Users are becoming more aware of daily screen time and actively seeking out ways to maintain a healthy balance with technology. For instance, Apple recently released Screen Time, allowing users to track the amount of time spent on their devices. Though it is not the responsibility of web designers and developers to look out for users’ natural light-dark cycles and circadian rhythms, it serves as an added bonus to offer your site visitors a dark mode option. Think of it this way: the easier on the eyes, the longer your visitors will stay on the site. 
2. It can improve device battery life. That’s right—some developers claim that dark mode consumes only a fraction of the percentage that using a site or application takes from your battery, saving your users time between charges.

With the rise of digital personalization and online interactions, it’s important that your users feel your brand has their best interest in mind. Especially when attracting new users, these subtle enhancements to their experience can make all the difference. Ultimately, dark mode is largely an aesthetic decision, so you’ll want to think through how to integrate this with current branding. 

Recommendations for How to Use

If you decide to include a version of a dark mode integration in your site or app, here are some additional recommendations to use as a guideline. Start by establishing an alternate dark mode color palette for your brand. Since your users will be more drawn to the visual aspects of the site while viewing a darker background, make sure that none of the brand colors you’re using are too saturated or too bright in contrast to the dark background.

The development team should explore the options for adding additional theming options to your site using custom CSS classes on existing code. Decide whether you will allow your site’s visitors to choose their display options, revealing a dark mode theme, or if it will be automatically based on their browser settings, and even other in-app indicated preferences if designing for a mobile app. The best option being that whatever you decide for the user’s interaction with it, it should closely resemble other display settings and theme updates available on your site. If these are not present, recognizable icons, like a light bulb or sunshine (for light mode) and the moon (for dark mode) are acceptable for a quick turn-on turn-off functionality.

As the popularity of user-end site personalization options increases, rely on these helpful tools to help the decision-makers on your team in their choice to join the dark mode movement.

 

 

A fantastical idea, a powerful pitch, and energetic enthusiasm from all sides of SonicWall stakeholders. Only one task remaining: execution of the over the top Boundless Campaign.

SonicWall came to Bluetext with one main objective: bring their Boundless Cybersecurity campaign to life. As such, the SonicWall team needed creative assistance in bringing the campaign visuals up to par with their brand value. The Bluetext team was asked an age-old question of B2B companies, “How can we make this campaign memorable?”

Especially in the saturated cybersecurity market, it can be challenging to differentiate from strong competitors and help visual abstract brand promises. So the Bluetext team presented a thought-provoking approach to the campaign’s new creative and campaign taglines.

“When cyber threats are limitless, your defenses must be Boundless.” Break free with SonicWall Boundless Cybersecurity.

To communicate and contextualize this message, Bluetext presented a creative direction that would showcase the end-user in a gravity-free surrealist state, which literally breaks free of the constraint of cyber threat. The creative would be scaled across main industry verticals in order to personalize and target advertisements. The idea was over the top, innovative, and ambitious but well-received with client buy-in. Next came the challenge of execution, which was overcome using a custom photoshoot complete with realistic costumes, props, and even a trampoline. In order to achieve the effect of floating in an anti-gravity state, professional ballet dancers were hired to jump on the trampolines. Photographers captured the dancers posing mid-air, then flipped the photo 180°.

Once the in action shots were captured, the images were edited to remove the backgrounds and impose on industry-specific scenes. Related props were also imposed onto background images to make the scene appear as if person and objects had been magically released from the pull of gravity while the world remains grounded around them.

   At the time of the new Homepage and campaign landing page launch, these static images truly came to life with a subtle parallaxing effect.

To drive users to these newly premiered pages, SonicWall needed eye-catching advertisements that viewers would — no pun intended — gravitate to. Bluetext designed a variety of verticalized static banner ads and further animations to drive page traffic.

In need of a brilliant campaign that you want to bring to life? Get in touch with Bluetext and see how we can turn ideas into ROI reality for your company.

Best Practices for Conversion Driven UX Design

If your company has a website published in the public domain, chances are, you know a thing or two about conversion goals. Conversion goals help to measure marketing performance, set goals and most importantly, provide conversions for a company. On websites, conversion goals can range from lead generation to sales to even page views. The point is, you must find your conversion goal and optimize your website toward it. There are various design choices that are simple, yet efficient in achieving different types of conversion goals. The goal is to keep it simple – the lesser the cost per conversion, the higher the return-on-investment (ROI). 

Hack Your Way to Higher Conversion Rates

Less is More

According to CEO of Chartbeat, Tony Haile, “You have just 15 seconds (or less) to convince new visitors to stay through the power of your site’s design alone.” Compared to years ago when web-design trends were over-the-top and animation and flash were all the rage, clean and simple flat designs are what reign supreme today. Market trends indicate today’s consumers appreciate a nice, clean layout. Impress your visitors with your content and offerings. Bombarding them with unnecessary flash and animation not only annoys them, but it also slows down the load time of your website. Whatever you do, don’t mirror your site after this masterpiece. You can always check the speed of your website using Google’s PageSpeed Insights tool. PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster.

Fire Excessive Fonts

When a user lands on a site with various different styles of old and new fonts, it becomes a disjointed and confusing user experience. If you’ve got more than two or three fonts on your homepage, trim them down to create a more modern look. Having two primary fonts keeps your website consistent and organized. While you’re at it, consider increasing your font size for readability. Smashing Magazine reported that “anything less than 16 pixels could impair your site’s readability.” Your website should not only be consistent but also readable.

Give Content a Break

Put yourself in the user’s perspective. Nothing is more intimidating and scary than landing on a page with big blocks of unbroken text. You would bounce too! Large text fields are an immediate red flag that digesting the material will be time-consuming and complex.  Mix it up and improve your site’s readability by adding headings, subheadings, bulleted lists and numbered lists to break down content into easily-digested segments.

Improve Your Visuals

While you’re thinking about breaking up content, consider adding imagery. Customers or prospects may need to literally “see it to believe it” and images can be a powerful tool to help contextualize value. Custom graphics and visuals are a great option that is sure to impress users. Cheesy stock photos can seem generic and off-putting, so consider upgrading to simple tools like Canva and PicMonkey which make it easy to customize your images. In addition, if you’re looking to generate confidence in your service or product, try human photography. According to various studies, images of human faces can have a positive image in driving contact form conversions. Remember, people trust people! Human faces help establish an emotional connection, which in turn makes your website a more personalized experience.

Trust in the Numbers

While imagery and human photography might make a subconscious impact on trust, seal the deal with statistics and testimonials. People inherently trust in data and social proof. Statistics can help rationalize and solidify the decision-making process, especially when compared against competitors. Highlighting elements of social proof is an extremely easy and effective way to drive conversions. Consider positioning this information higher on the page, or perhaps in eye-catching designs, so users can be sure not to miss it.

Always Open the Window

Outbound links are a critical component of the ideal SEO formula, but be sure never to lead users away from your site. Make sure that all external links open in a new window. This ensures not only the best user experience for the user, but your site will stay open and users won’t drop off in search of content elsewhere. 

Make it Stick

Add a Contact or Sales call-to action-directly in the main menu. Keeping the main conversion at top of mind (and menu) ensures your users are always enabled to contact you. You would never want a customer or potential lead to finally be ready to convert, only to be lost in the site and unable to contact you. To really make your central call to actions stand out, consider implementing a sticky navigation. This means that the main menu will lock in place above your content, no matter where the user is on the page. 

 

Need to make changes to your website to improve your navigation? Bluetext can help.

 

 

A Content-First Approach.

Enterprise-level website redesigns are exciting but can be overwhelming. There are countless variables to consider – from appeasing stakeholders and business units, to ensuring an intuitive customer-first user experience that aligns with company-defined website goals and KPIs. One of the most important considerations to think about before embarking on a large-scale website redesign is content. A beautiful, new design is worthless without good content. Users want (and expect) to get value from every website they visit, and that value comes from the content. But at the enterprise level, understanding and applying a smart content strategy can be a daunting and difficult task. Luckily, the content marketing experts at Bluetext are here to help. 

6 Key Content Strategy Steps to Take Before Design:

1. Conduct a Content Audit 

Before investing in a big website redesign, there needs to be a thorough discovery phase that involves conducting a ROT (redundant, outdated, trivial) analysis to understand the current state of content, identify legacy content that should be removed, any gaps in the content, and ultimately understand if the current content aligns with the redesign goals. Bluetext has industry-leading crawling and scraping tools, such as Screaming Frog, to automate and provide this data. Competitive analysis and market research are also critical steps to gaining insight into how other players in the industry are applying content strategy. Some specific aspects to take note of include:

• Page structure and content flow
• Calls to actions
• Navigation/sitemap 
• Linking 
• Relevance to the user
• Language/tone of voice
• SEO
• Multi-media usage 

2. Establish Website Goals & KPIs

Out with the old and in with the new! In order to create a successful new website, you need to identify the current weaknesses and where improvements can be made. Like any major business venture, it must begin with setting realistic goals. Be sure to benchmark against tactics and KPIs (key performance indicators) to measure the success of those goals. A flashy new website might look nice, but ultimately your stakeholders want to see quantifiable success. It’s important to audit what content is working and has high conversions. Leverage Google Analytics to see what the most trafficked pages are and what users are searching for. Setting up click tracking and heat mapping on your site provides data to help understand user behavior and guide decisions. An example of a website redesign goal mapped to tactics and KPIs may look like this:

1. • Goal: Streamline Product Page Content
     1. Onsite Tactics: Design product template based on journey-oriented content strategy. Reduce content to highlight the most important and relevant selling points/CTAs.
     2. KPIs: 
        1. X% decrease in bounce rate on product pages
        2. X% increase on time on product pages
        3. X% increase on product page conversion rates 

 

 

3. Build out Website Personas for Journey Mapping 

Understanding the different personas using your website is pivotal because these users and their unique goals should inform the content requirements. For example, a large software company’s website will have multiple personas. One persona might be a new, less-informed user who is seeking a solution for a specific problem they have. Another persona may be a returning customer and therefore more educated. This informed user might be looking for product support or to try a free download of a new product. 

These two users have very different needs for the website and therefore the way they navigate the site will be different, and the website content and design need to account for that. Understanding the goals of the various personas and the likely journey or path in how they use the site to achieve that goal directly impacts the content and the content hierarchy they should see. 

4. Create Data-Driven Navigation

An intuitive site structure (displayed via the navigation) is integral to a great website. The navigation informs the user how the site is structured, and when done well, helps guide the user to the content they need to see. According to Sweor, “88% of online customers are less likely to return to a site after a bad experience.” Considering many customers rely on either search or the navigation to guide them, having an intuitive navigation that ensures every persona has a clear path to their destination is key. Think of your sitemap as a personal GPS through the sales funnel. It should route a user from a unique “Current Location” to the end goal of conversion. Analyze user-behavior data to better understand how different customers are using the navigation currently. Is there a significant difference between new and returning user behavior? Also, see if there are other ways customers are using the site that aren’t accounted for in the navigation that should be. Once a proposed sitemap/navigation is created, conduct usability testing to validate the new structure. 

The goal of a good navigation system should be to get the user to the most relevant content as quickly and easily as possible. Much of this comes from smart design, but content plays a big role here, too. Use skimmable, digestible words that customers understand, not lengthy, internal company jargon. Users are quick to click, so using copy that resonates fast and leads the user to the right path will provide a better experience for them. This applies to content across all pages as well as navigation content. “Most of the time we don’t choose the best option—we choose the first reasonable option.” Don’t Make Me Think, Steve Krug. 

There are only a few chances to convince the user that they can get to the content they need before they get frustrated, bounce, and look elsewhere at another site. As such, every piece of content needs to be thoughtful and intuitive.

 

5. Define Goals for Each Page-Type/Template 

At the enterprise level with hundreds of products and solutions spanning multiple business units, it becomes extremely difficult to give all the content the time and nurturing it needs. It becomes tempting to simply include everything as a “catch-all”, but this is a fast-track to overwhelming and losing user interest. 

As mentioned previously, different personas require different content. Defining goals for each page-type/template helps focus the content to achieve that goal. Is the call to action driving a conversion for that goal? Are the proper users being driven to this page to achieve that goal? Do these page-specific goals align with the previously set redesign goals, tactics, and KPIs? Once goals are well-defined for each page-type/template, then the content requirements and hierarchy should be thought out accordingly. 

6. Determine Content Requirements and Hierarchy 

Now that page goals are defined, it’s time to determine content requirements and content flow. The content should be aligned with the goals of that page and when done right, will improve conversions. The order of the content displayed is important, as users skim and expect to see the most relevant content at the top. The perfect marriage of content and design always refers back to the goals and on-site tactics. Ensure the content drives the user to perform the goal of that page (whether it’s downloading a free trial, contacting sales, submitting a form, etc.). Once content requirements and hierarchy are well defined, then it’s finally time for design! 

Understanding and planning out content needs early-on makes the design process more efficient and effective. That being said, the biggest ROI for smart content strategy will be proven after launch when those previously defined KPIs improve. 

Looking to get started on your next big website redesign? The experts at Bluetext are ready to help!