Tag: UX Design

Getting Started With the New Google Analytics

Posted on | by siteadmin | Leave a Comment on Getting Started With the New Google Analytics

If you’re using Google Analytics to create better experiences for your customers or improve marketing decisions for better ROI, then you’re going to want to upgrade to the next generation of measurement. Google Analytics 4 is a new kind of property. It’s replacing Universal Analytics next year and has several advantages, including:

  • New data privacy features that make it durable for the future
  • Machine learning that automatically surfaces insights about the customer journey across platforms and devices
  • Enhanced integrations with Google Ads for improved campaign optimization

At Signal, we’re supporting clients with this migration. Here are a few standout upgrades to look forward to that have impacted our work.

  • New and improved data model – The previous model of page views, events, hits and sessions has been replaced with a system of events, parameters and user properties, making report creation and analysis much more intuitive.
  • User-ID – Associate your own identifiers with individuals, then stitch together the user’s behavior across different sessions, devices and platforms. This sets a foundation for new insights and opportunities, and improves user count accuracy.
  • Audiences – Enables user segmentation using any combination of attributes. Build these subsets of users in ways that are important to your business – and then push those audiences to your Google Ads campaign. Here’s a list of suggested audiences to get your wheels turning.
  • Enhanced data visualization – You’ll find standard reports similar to what you’re used to in Universal Analytics, but they’re much more user-focused in GA4. There’s also an entirely new toolset for custom reports, including starter templates based on technique (Funnel exploration, Path exploration, Segment overlap, User explorer, Free form, etc.), use case (by Acquisition, Conversion or User behavior) or industry (ecommerce, etc.).

Getting started

Universal Analytics properties will sunset in July 2023, so now is the time to start your migration. We recommend collecting data in both Universal Analytics and Google Analytics 4 properties so your team has time to get comfortable with the differences and set expectations moving forward.

  • If you already have a Universal Analytics property, just go to the admin area of your analytics property and click GA4 Setup Assistant then follow the instructions.
  • If you use a website builder platform that requires you to provide a “UA-” ID (i.e. won’t accept a “G-” ID) you can still use Google Analytics 4. Here’s some further info for setting up GA4 for a CMS-hosted website.
  • If you’re brand new to Google Analytics, create an account and set up a Google Analytics 4 property

While some setups are straightforward, others can be complex and influence your analysis and reporting in unexpected ways. Signal understands how important your data is and we are glad to assist you in this process.

dark patterns and ux design

Ethical UX and Dark Patterns

Posted on | by siteadmin | Leave a Comment on Ethical UX and Dark Patterns

ethical ux and dark patterns

Dark patterns are features of online interface design, crafted to intentionally force or manipulate users into doing things they would not otherwise do under normal circumstances. These tactics, drawn from extensive behavioral psychology research, benefit the website’s business and are unethical to use. Soon, they may also be illegal: legislation has recently been introduced to prohibit the use of dark patterns. It pays for marketers to know what they are and to avoid them.

Examples of dark patterns

You’ve probably experienced one of the most frequent types of dark pattern: the frustrating disguised ad that pretends to be a video or other content to get you to click on it. Other examples of dark pattern use include:

  • Sneak into basket – the site sneaks something into your cart through the use of an opt-out radio button or check box
  • Privacy Zuckering – named after the infamous Facebook CEO, this entails tricking people to publicly share more information than intended
  • Misdirection – Using design to focus your attention on one thing in order to distract your attention from another
  • Confirmshaming – Shaming the user into opting into something using clever wording in the option to decline
  • Obstruction – Making it easy to sign up for a recurring charge or subscription, but hard to cancel

Abuses of power

Twitter users are sharing dark patterns as they find them with the handle @darkpatterns. Take a look at the Hall of Shame to see what’s been reported. TurboTax may have the dubious honor of employing deception at every possible turn to scam users into paying to file their taxes when it should have been free.

Dark patterns are prevalent

A Princeton University study recently combed through 53,000 product pages from 11,000 shopping websites to characterize and quantify the prevalence of dark patterns – that is, designs that trick the user into doing things like clicking a link to subscribe to a service, or hiding the “Close Account” link with a myriad of other links to make it harder to leave the site. Here’s what they found:

  • 1,818 instances of dark patterns on shopping websites, which together represent 15 types of dark patterns
  • The patterns were present on 1,254 of the 11,000 shopping websites – approximately 11.1%
  • Shopping websites that were more popular, according to Alexa rankings, were more likely to feature dark patterns
  • A total of 234 instances of deceptive dark patterns were found across 183 websites
  • 22 third-party entities provided shopping websites with the ability to create dark patterns on their sites

Legislation to combat the problem

U.S. Senators Mark R. Warner and Deb Fischer have introduced legislation in Congress aimed at prohibiting the use of dark patterns. The Deceptive Experiences to Online Users Reduction (DETOUR) Act seeks to curb manipulative dark pattern behavior by prohibiting the largest online platforms (those with more than 100 million monthly active users) from relying on user interfaces that intentionally impair user autonomy, decision-making or choice.

UX and UI: The ethical dilemma of dark patterns

While the use of dark patterns may not be illegal at this time, there are certainly some concerns about the ethics of employing them in UX and UI design. Let’s look at the differences:

  • UX, or user experience design, identifies pain points and user needs in a web design, creates a prototype for solving those issues, validates the prototype through testing and then builds a product that brings resolution to those issues.
  • UI, or user interface design, looks at the visual design of the site (the look and feel, personality and brand) and considers how people will interact with that design.

UX designers could be considered the architects of macro-interactions, while UI designers are more the makers of micro-interactions. However, both play a role in dark pattern tactics. UX design should carve out a path for the user by putting their needs first. It’s the path the user expects, not a design strategy that takes advantage of the user by misleading them or by trapping them in a maze of confusion from which they can’t escape. Likewise, UI design should not be undertaken to use the site’s look and feel – its colors, fonts, and other design elements – to manipulate the user into making potentially harmful choices.

Our best defense against dark patterns use – as designers and users – is awareness of this unethical behavior. Companies risk their reputations and the goodwill of their customers by employing dark pattern tactics that sabotage the user. In addition to losing customers, they may incur negative press, or be shamed on social media, finding the consequences outweigh the benefits of such designs.

When planning, designing and prototyping your next project, ask Signal keeping the user’s best interests at heart.

Questions to Ask Before Choosing a Digital Agency

Posted on | by siteadmin | Leave a Comment on Questions to Ask Before Choosing a Digital Agency

If you’re looking for a new digital agency, chances are that you’re either unhappy with your current agency, or looking to supplement an unmet need on your team, and you want to explore options. Either way, it’s an important decision. Understandably, you want to make the right choice. Otherwise, it’s like hiring someone who isn’t quite right for the job, with negative consequences that can last a long time.

As a digital agency ourselves, we know the importance of being a good fit for our clients, which helps us both enjoy a long-lasting, mutually beneficial relationship. Every agency really does have a unique DNA. We recognize it’s difficult to choose based on a meeting or two, but hopefully the ideas outlined here will help you be better prepared for the task.

Below are some questions to ask yourself and potential agency partners, across the following critical areas: Staffing, Strategy, Content, Design and Technology.

Staffing

Before meeting with potential agency partners, take a look at your team and be honest about your strengths and weaknesses. What gaps do you see? Effective marketing campaigns require careful planning and execution, and your organization may not have all of the resources to do it in-house. What kind of talent do you need?

Once you begin a dialogue with a potential partner, make sure you ask about the agency’s staff members and their top competencies, so you can fill your gaps. Generally speaking, digital agencies with a well-rounded team are better equipped to handle your brand’s needs in today’s marketing world. Look for a team with a deep enough bench, but one that won’t get you lost in bureaucracy. And look for experienced professionals with diverse capabilities such as interactive design, application development, user experience (UX), marketing strategy, content development and video/motion graphics.

Strategy

This will typically dovetail off of the staffing question, but before meeting with potential partners, it’s important to know if you’re interested in driving your own comprehensive strategy with a collaborative agency partner, or if you’re looking to turn over the reins to the agency. This may help you decide between a smaller, specialized agency or one that’s more full-service.

When you meet, ask what experience the agency has within your industry. Or, what steps will they take to become an expert on your business and industry. It’s nice to have an agency that understands your unique purpose and goals, especially if you’re looking for an agency to drive the strategy. Choosing an agency savvy about your industry can save valuable “onboarding” time.

Content

Before hearing any pitches, take a look at your content and think about what needs improvement, updating or deleting – and consider any new content you need an agency to develop. It helps to look at your analytics to see what your audience is engaging with – and what they’re not. You can also ask your sales and customer service teams what topics they’re currently hearing for great insights.

When you meet, ask about the agency’s content development strategy. Remember, a good process starts with understanding your industry and audiences. Make sure to find out how closely your agency’s social media and content marketing teams work together when it comes to producing content. And, look for an agency who is experienced in delivering across email, search, social, PR and sales enablement. As a resource, think about our 5 Steps to Content Marketing.

Design

Before meeting, review the agency’s portfolio online. An agency is putting the best of the best on their website, so this should give you a sense of the group’s design chops.

When you meet, it’s important to find out the process behind the design – how the agency ensures an optimal CX and UX. These are not just buzzwords. Positive UX is critical to your audience’s engagement with your website, tools and key touchpoints along their customer journey. It’s important to find an agency who can describe their process, and who knows that good UX isn’t just about design, but also all of the elements (content, information architecture, interactivity and functionality) which underpin design. Read our UX Demystified feature for more tips.

Technology

Before meeting, make a list of the software and platforms used by your organization. At a minimum, this includes your CRM, marketing automation platform and CMS. Are they seamlessly integrated, or are there gaps in your tech?

When you talk, find out how familiar the agency is with all aspects of your MarTech. Some agencies “go deep” and are very specialized in a particular platform, while others work across many and can bring a fresh perspective no matter the technology. Decide what’s better for you.

Final thought – How will you measure success?

Expect this question from your agency, and know how to answer it. Regardless of the measurement tool, the results should be reported in a format that you and your stakeholders understand, like leads and revenue. Get prepared by reading how to create a measurement plan. When you meet with potential partners, make sure you’re comfortable with how they intend to show results.

Knowledge is power when it comes to choosing a digital marketing agency. Ask good questions to help you make the most informed decision.

Use Animated Emails to MOVE People

Posted on | by siteadmin | Leave a Comment on Use Animated Emails to MOVE People

animated emails

If pictures are worth a thousand words, how much more can your emails say with pictures that move? From animated GIFs and cinemagraphs, to embedded videos and CSS animations, today’s digital marketers have rich possibilities at their fingertips. When stacked against static emails, animated emails are better at catching attention and can more quickly explain how your product or service works. Just a few lines of code can make marketing magic happen.

CSS animation: the latest innovation

These animations are done in the Cascading Style Sheets (CSS) via keyframes. CSS properties are changed at regular intervals to create animations or transitions within the email. With this type of animation, you can animate most HTML elements without using external scripts like Java or Flash.

  • THE PROS: CSS animation has some advantages over the easier-to-use GIF animation. For one, only the first image in a GIF will show in email clients like Outlook. GIFs are also larger files that slow down the load time for emails. Additionally, CSS animations are smoother and look better on high-quality mobile screens.
  • THE CONS: CSS animation isn’t well supported by many email clients. This chart offers a summary of how clients react to CSS animation. As with embedded videos, it’s important to code your email for a simpler rendering in older email clients – like a static image or a GIF.

Prezi’s understated background animation proves you don’t need to go big to make an impact.

A few more animations to consider

Animated GIFs

Check out these animated GIF-centric emails. GIFs like these are the simplest way to add animation to a plain email, providing the awesome opportunity to show multiple images of a product or make it move.

This simple, friendly GIF is eye-catching and completely on-brand.

 

UBER’s subtle animation pulls the audience into the experience of using the app.

 

MOO’s clean, modern layout and fresh copy combine to make a winning gif.

Cinemagraphs

With the cinemagraph, only a single element of the image or background is animated while everything else stays static – a moving picture with a cinematic effect. This exciting imagery is sure to grab attention and add a touch of elegance.

Train to Machu Picchu: This cinemagraph captures the romance and excitement of luxury train travel.

Amazon: The fan is eye-catching, but the slight movement of the woman’s dress is the “gotcha” in this chic cinemagraph.

Chanel: With sparklers and gentle eye movement, this cinemagraph embodies the elegance of Chanel’s brand.

Armani: Armani’s cinemagraph manages to create story and emotion with the softest of movement.

Embedded videos are simply that – videos that play within your email copy. Like CSS animations, embedded videos may not be supported for all email clients, so it’s important to code for a fall back. Take a look here for an embedded video coding example.

Don’t forget!

  • Always include a fallback color and a description tag.
  • Some email providers show just the very first frame, not the full animation. Make sure the first frame of your GIF shows the most critical message.
  • Any animated files should be as lightweight as possible – heavy GIFs and videos can send emails directly to the spam folder.
  • Always run a few test sends (on desktop, mobile and multiple browsers) to see how your email functions, and where it is sent to (inbox or spam).

With any of these animation alternatives, there’s a learning curve for coding, but the end result is worth it. In a world where the visual is king, the more innovative and interesting your email images, the higher your audience engagement!

The Signal team is here to help you with all things email, from copy and design to detailed coding.

 

Animated visual cues

How Animated UI Enhances the User Experience

Posted on | by siteadmin | Leave a Comment on How Animated UI Enhances the User Experience

Animated UI

Traditional animation for the web – including animated slides and headlines or parallax features – focuses on adding visual interest and flare, not on enhancing the user experience. Adding “zing” has its place but as users have become more savvy and digital devices more sophisticated, users have become hungry for a better overall experience. Taking the traditional a step further, partnering animations with thoughtful user interface (UI) elements can improve website UX, by doing things like offering cues and directing the eyes.

How motion supports usability

Interface objects are either static (like photos or copy) or in motion (animations). When motion is involved, this invites the user to participate in the experience, effectively increasing website usability. Human eyes simply can’t resist objects in motion!

From the technical UX perspective, there are 4 key ways that motion supports usability:

  1. Expectation: Minimize the gap between what the user expects and what they experience in terms of how elements behave.
  2. Continuity: Create seamless user flow. Continuity isn’t necessarily about following a linear path but that the entire experience feels continuous, not jagged or confusing.
  3. Narrative: Lead the user down an expected, linear path using visual cues. Narrative is at work when animation helps show users where they are on the journey.
  4. Relationship: Guide user understanding and decision making with spatial, temporal and hierarchical relationships between interface objects.

UX in motion – the principles in real life

The great examples below illustrate some of the critical principles of UX in motion.

VISUAL CUES: Drawing attention to areas of importance to help users interact

As the user directly manipulates the floating button, the designer communicates to the user – via motion –  how the objects are linked, and the relationship between them. The floating action button allows the user to share his or her profile, and gives them five ways to do it in real time. This provides the user with visual cues for how the content should be shared – supporting usability by expectation.

 

Design by Rahul Bhosale

TRANSFORMATION: Creating a continuous narrative flow to pull the user along

This is an excellent example of the transformation principle, where an animation that grabs the user’s attention and draws them to the desired outcome. Transformation is a critical principle of UX in motion because it really stands out (think animated progress bars or flashing check marks to help guide users down the path). In this example, users clearly see what will happen next (continuity!).

 

Design by Volorf

VALUE CHANGE: Offering users a sense of dynamic relationship

When value based interface objects (text or numerals) load with no value change, it’s a missed opportunity. Motion can help distinguish dynamic values – such as time, income, game scores or business metrics – from single, static numbers. In this example, the countdown timer does a great job of reflecting a dynamic reality.


Design by Dawid Sobecki

OVERLAY: Using motion to show spatial relationship in “flatland”

Here, the bidding feature overlays the main content, creating a visual hierarchy while allowing users to maintain their sense of place. Overlay is a technique that allows designers to communicate relationship between “z-axis” positioned layers, helping users understand where they are oriented in space. Logical relationships, like the one created here, support usability.

 

Design by Ales Nesetril

NARRATIVE: Engaging users by telling a visual story

The animations in this banking app spin a clear visual narrative of the process, keeping the user both engaged and on task. Seeing this animation, the user will be able to complete the task quickly and efficiently. It also gives a sense of confidence about how the steps will unfold.

 


Design by Sam Borek

Ready to take your website to the next level? Our interactive designers are waiting to deliver UI elements that wow your users.

Increase Employee Engagement with Intranet UX Design

Posted on | by siteadmin | Leave a Comment on Increase Employee Engagement with Intranet UX Design

intranet ux design

You know how important it is to give your customers a positive user experience (UX) with your website. Now what about your employees?

If you work for a large organization, you’re probably using SharePoint as your intranet / employee portal platform. But no matter which platform you’re using, in today’s increasingly digital workplaces, your intranet is critical to finding and sharing information, especially for remote workers located across the country – or the globe. The intranet is a vital hub for corporate communications, team collaboration and access to business applications, not to mention HR activities across the employee lifecycle.

Why invest in intranet UX?

The benefits of intranet UX include:

  • Improved efficiency: Making your intranet’s navigation system more intuitive and organizing content allows your employees to independently find information quickly and easily. Better design helps people get their jobs done more effectively!
  • Community building: Branding an intranet for your company makes employees feel it is theirs. Creating ownership can increase usage. Employees feel like spending time learning, exploring and interacting with others there.
  • More effective communication: It’s easy for your intranet to quickly become cluttered and difficult for employees to access the information they need. It’s necessary to periodically clean house with a user-centered approach to ensure content is easy to find any anything outdated is removed.

4 steps to great UX 

Improving the SharePoint user experience for your employees is a four-step process:

  1. Find opportunities for improvement: The first step in the UX process is to use existing data –conduct several interviews or use surveys to gather internal feedback and review metrics like top site search keywords to determine user needs and opportunities for improvement within your intranet.
  2. Optimize your intranet’s structure: Next, audit the tasks and content of your intranet to determine inconsistency, hidden options and clumsy UI mechanics. Use this insight to develop a new site map that removes redundancy and makes paths more relevant and intuitive. In terms of content, determine what content is outdated, edit existing content that needs polish, and develop any new content that may be missing.
  3. Create prototypes: Develop clickable UI wireframes of key pages that address user needs and make content easy to access, understand and use. Use an iterative Agile development process to get direct feedback from users as early and often as possible.
  4. Implement, test and optimize: The last step of the process is to incorporate the updated design, content and functionality into your intranet. Don’t forget to test with real intranet users to ensure optimal UX.

Ready for more? Check out our User-Centered Design Playbook to learn how Signal helped one company improve their website UX.

 

 

marketers reconsider A/B testing

Time to Reconsider A/B Testing

Posted on | by siteadmin | Leave a Comment on Time to Reconsider A/B Testing

A/B testing isn’t making marketers very happy. Once a promising solution to website optimization, A/B testing is now seen as faulty, time-consuming and difficult. While setting up A/B testing is easy with the right tools, getting the answers you need takes time, practice and expertise. In fact, most A/B tests are never published because they don’t increase conversions! Marketers are seeing much more benefit from focusing optimization efforts on more modern, user-centric testing methods. Here’s why you should reconsider A/B testing.

the latest on A/B testing

It takes time to get right

Each A/B test requires a hypothesis around how your variations will measure up to the control – and repeated rounds of testing to gain usable insights. It’s a time-consuming process best suited to helping you learn about your target audience with incremental steps. But remember, true lifts in conversions come from understanding the user and serving relevant and valuable offers (something that may be more easily done with data and personas).

It’s error-prone

Did you know that only 1 out of 8 A/B tests have driven significant change? A/B testing is so wonky because you’d need to run tests until you reach statistical confidence – the probability that a test result is accurate. (Most researchers look for a 95% confidence level in order to reach a conclusion.) Otherwise, results may be influenced by random factors and produce false data. Calculating statistical confidence can be too complex for those of us who are not statisticians.

It’s not for every business

Another reason A/B testing fails may be sample size. There are tools available for determining the correct number, but some estimates suggest that 25,000 visitors may be needed to reach statistical confidence, and smaller businesses are unlikely to have that kind of traffic. This is one of the reasons that Optimizely, one of the most popular A/B testing tools, is discontinuing its free platform in favor of one more focused on large enterprises.

Contact our team today to learn more about understanding your key audiences – and making sure your websites are living up to their promise.  

The smart 404 page and tips to improve the endgame stage of user journey

Website UX: Don’t Leave Users Hanging

Posted on | by siteadmin | Leave a Comment on Website UX: Don’t Leave Users Hanging

Improving 404 error and post-conversion pages

Imagine someone cruising along and enjoying the journey, when a DEAD END sign suddenly appears. It can feel like a frustrating slap in the face! The same thing happens online with website dead ends that jolt users right out of the experience. The “endgame stage” of the user journey is an opportunity to create engagement, nurture leads and move traffic, so don’t miss it. Consider these tips to help improve the user experience with your website.

Do a detailed walkthrough

Look at your current content and navigation – including things like your information architecture, site map and user interface. Your goal is to root out spots where users are left hanging. If users have made a purchase, filled out a contact form, registered for an event or read a blog post, what happens after they complete the action? Ask yourself what you want users to do – and then funnel them to the next step with a cool link or clear call to action. Seems pretty simple, but these things are often overlooked during design.

Try these 2 ways to improve your UX

  1. The smart 404 page

Ease the frustration of a missing webpage or lack of search results with a smart 404 page. It’s a great place to play with design and copy – or even to incorporate gamification or interactivity. The Signal 404 page gives people multiple ways out, making the 404 but a minor delay. Here are some other inspiring examples:

  1. Thank you page with a twist

The thank you or “success” page is often a missed opportunity to set expectations – what’s happening now, after they’ve purchased your product or filled out your form? Keep people moving by including:

  • High-value product or project links
  • Helpful content, like white papers or videos
  • Special offers or promo codes
  • Social sharing and referral features
  • Feedback opportunities

Read our new white paper, User-Centered Design Playbook, to find expert tips on improving the UX / CX of your website.

user-centered design case study

User-Centered Design Playbook

Posted on | by siteadmin | Leave a Comment on User-Centered Design Playbook

Website case study

User-Centered Design
 

The world’s largest independent distributor of Toyotas called upon Signal to audit and optimize their finance website to provide customers with an improved user experience for managing their vehicle leases and loans.

Their goals were to improve navigation and usability issues, and to personalize content based on where customers are in the life cycle.

In this new case study, you’ll learn about the steps our team took to enhance the customer experience (CX).

 

STEP 1:

 

PLANNING & RESEARCH

Our UX optimization approach typically follows a 4 step process, tailored based on client needs. With this project, our first step was to understand current website performance and identify opportunities using existing data and information. Evaluating basic website metrics and internal feedback is an efficient way to gain insight into the present state of affairs.

Planning and Research

Put a measurement plan in place

Don’t forget to set your goals at the outset of the project. For a website, this may include things like fewer clicks, faster actions, reducing call center support or fixing reported usability issues. You’ll want to be able to measure improvements on these key metrics later.

We find that more companies are using an organic approach to UX optimization for their websites – meaning they replace full website redesign efforts (every few years) with continuous improvements to ensure the best possible customer experience.

Scrutinize website analytics

Your next step is to take a close look at your website analytics. It’s important to know which pages are getting views, so you can focus efforts on those that are most visited. As Forbes notes1, web analytics:

  • Allow you to personalize things to frequent visitors’ distinct tastes
  • Reveal what’s working – or not – from a UX / CX perspective
  • Enable you to proactively fix site issues before they escalate
  • Inform the customer journey – if you take time to use and listen to the data!

Analytics for our client revealed a couple of major action items. Their Home, Account Summary and Login pages carried 80% of the visitor traffic, and they needed UX attention. Analytics also revealed more mobile users than previously known – a critical point to keep in mind when redesigning web elements.

Investigate hot site search terms

We always recommend looking at search terms / keywords, because while some people use search as a primary means of navigation, most are using it because they are having trouble finding the information they need. The following top search words helped us prioritize certain information on the site:

Search image

TOP SITE SEARCH KEYWORDS

  1. statement, statements
  2. payment history, pay
  3. interest rate, refinance
  4. payoff
  5. extension

Listen to the call center

Employees who work in the client’s call center are on the front lines fielding customer questions – especially those that could be answered by an effective site structure and relevant content. CSRs told us there were a number of areas which needed to be built out on the website. Based on their feedback, we improved instructions and UI to ensure that customers:

  • View the status of pending payments
  • See their outstanding balance, payoff amount, due date and interest rate prominently featured
  • Find an easy selection area for invoice preference (paper or paperless)

Look at customer survey data

Like website analytics, your customer survey data is another fertile source of information about pain points. Dig in and see if there’s anything relevant.

Cool tools for deeper dives

Heat Maps

Heatmaps and recordings

helped us see users’ movement within key pages, giving us a more accurate idea about engagement.

Personas

Personas

allowed us to be mindful of users’ key characteristics and needs.

Customer Journey Map

Customer journey maps

broke down the steps and phases, so that we could clearly see pain points and capture ideas for improvements.

GET THE DETAILS on these methods in our UX Demystified white paper

 

STEP 2:

 

INFORMATION ARCHITECTURE

If you’ve ever gotten lost, you know about the importance of having a good map to steer you right! The concept extends to the sometimes twisting, turning paths of website navigation. As the Nielsen Norman Group (NNG) points out2:

Information Architecture

“Structure and navigation must support each other and integrate with search and across subsites. Complexity, inconsistency, hidden options, and clumsy UI mechanics prevent users from finding what they need.”

Audit website tasks and content

Our first step in thinking about information architecture – that is, the organization and labeling of website information – was to conduct a thorough audit of the client’s current site. This allowed us to create a comprehensive catalog of content and user tasks, segmented by stages of the customer lifecycle.

Action / content Onboarding 1 – 3 months 3 – 12 months 12+ months
Register for an account X
Learn about my vehicle’s features X
View my balance X X X
New lease rates X X
Monthly service coupons X X X
New vehicle offers X
View my payoff X

Use card sorting to optimize information architecture

Using the information gleaned in the audit, we conducted open and closed card sorting sessions with 25 users on a digital platform called Optimal Workshop. Card sorting is an easy UX research method that allows users to categorize content and tasks – as well as to develop intuitive navigation labels. The chart below answers3 some of the questions you may have.

When is card sorting helpful?
  • To find out how users expect to see information on a website
  • To organize a sitemap
  • To organize submenus
  • To classify products or services
How do you do card sorting?
  • Use a digital platform, such as Optimal Workshop, to categorize items and allow session participants sort them into groups that make sense to them.
What is the difference between “open” and “closed” card sort testing?
  • With open card sorting, users can create their own categories or add missing information. This helps you categorize and prioritize tasks/content and label groups.
  • Closed card sorting limits participants to using only those cards provided. The goal is to optimize and confirm your chosen navigation categories and labels.

Card sorting matrix

Develop a new site map

The Signal team combined all the feedback from user research along with IA best practices and testing to create the final site architecture, removing redundancy and making paths more relevant and intuitive to the tasks at hand.

 

STEP 3:

 

USER INTERFACE

Usability.gov defines user interface (UI) as a focus on “anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions.”4

Based on our findings from research and testing, we worked with a number of methods to show our client the new user flow, functionality and layouts.

User Interface

Wireframes: a quick and cost-effective way to prove concepts

These low-fidelity iterations connected the information architecture we created to its visual design, helping us:

  • Prioritize content
  • Allocate space to given items
  • Decide where to locate items

Wireframes

Clickable prototypes: conveying intended functionality in the interface

Don’t build it – “fake it” first! Both wireframes and prototypes are mockups of the proposed site or application, but we recommend prototyping to experience functionality. The clickable site prototype gave us something to test, so we could work iterations faster than with fully functional code.

Higher fidelity mockup: the final step before the site build

Finally, we applied styles and branding to give users a preview of what the site would look like. The goal: improve design first before moving into (potentially) more time-consuming coding and development.

High fidelity layout

Agile development

At Signal, we operate from a place of “customer first.” And for us, that means thinking about what’s important to the end customer – our clients’ clients. This is a cornerstone of the Agile methodology, an iterative design process that aims to get the work into the hands of the customer as early and often as possible. It can be applied to any project, from websites and marketing communications to digital apps.

Learn how we do Agile at Signal!

 

STEP 4:

 

TESTING & OPTIMIZATION

Conduct user testing

The last step of the process is to test the new design with real website users to ensure optimal UX / CX. User testing doesn’t have to be as daunting – and expensive – as the traditional focus group in a lab environment. There are many digital platforms to help recruit volunteers and conduct tests. We chose Usertesting.com, a site that uses crowdsourced testers who are ready and waiting. You can even define your target attributes such as age or gender.

Testing and Optimization

For our client, we assembled 10 tester volunteers for “think aloud” user testing, using Usertesting.com’s easy online platform. (For the user experience design geeks out there, “think aloud” testing is one type of remote unmoderated usability study.5)

“A remote unmoderated usability study is when participants complete pre-determined activities using a design or interface. The participant decides when and where they would like to complete the study, and uses an online tool to participate, provide feedback, and record the session.”

The male and female testers ranged in age from 18 – 65 and were average computer users. We tested the client’s current design against our new design, using simple tasks such as “Find your payment history” or “Change your user/password.” Listening to real users narrate their way through web pages was incredibly valuable.

  • “Hey, it’s not popping out at me…” [OLD DESIGN]
  • “I’m confused about vehicle vs. account maintenance…” [OLD DESIGN]
  • “Yes, this is where I want to go…” [NEW DESIGN]

Listen to a few clips from the live user testing sessions.

The UX experts at NNG call think aloud testing the #1 usability tool, and for good reason. The benefits include6 being:

  • Cheap, because you don’t need special equipment to gather insights
  • Robust, because it’s easy to get good findings (without a lot of statistical expertise)
  • Flexible, because you can use it any stage of development
  • Convincing, because clients love direct insight into how their customers think and act

Results

  • Improved “time to task”
  • Validated label names
  • Prioritized better navigation and page layout
  • Tone and attitude changes from frustration to confidence from old to new design

Improved key metrics from the measurement plan put in place at the beginning of the process

Final thoughts

User-centered design principles can improve the overall customer journey, which helps you:

  • Better compete in the marketplace
  • Turn happy customers into repeat customers
  • Shorten the customer lifecycle

The UX / CX process we outlined in this case study can be scaled to fit your needs. The deeper you go, the more you can uncover and fix.

 

Signal’s multi-disciplinary team of writers, designers, strategists and technologists won’t lean towards a one-size-fits-all solution – we’ll craft one just for you.

References:

  1. https://www.forbes.com/sites/danielnewman/2017/04/04/improving-customer-experience-through-customer-data/#e020a8a4e64d
  2. https://www.nngroup.com/articles/top-10-ia-mistakes/
  3. https://uxplanet.org/improving-information-architecture-through-card-sorting-730a66b7bdda
  4. https://www.usability.gov/what-and-why/user-interface-design.html
  5. https://help.usertesting.com/hc/en-us/articles/115003379332-Remote-unmoderated-usability-study
ux optimization and card sorting

Create a Better User Experience with Card Sorting

Posted on | by siteadmin | Leave a Comment on Create a Better User Experience with Card Sorting

card sorting is an easy ux research method

The structural design of your website – AKA informational architecture – is critical to UX optimization. Visitors who can’t find what they need while navigating will become frustrated – or even worse, abandon your site altogether! Card sorting is an easy UX research method that helps you design a user-centered site that increases usability and delivers a positive customer experience.

What is card sorting?

Card sorting allows users to categorize content and tasks – as well as to develop intuitive navigation labels. This time-saving step helps you create clarity before moving to site design.

What data do I need?

The first step is to conduct an information audit of your website to understand how things are organized and labeled. Look at things like website analytics, hot search terms and customer survey data. Consider creating a spreadsheet of content and user tasks – what do users need to know and do?

How do you actually do card sorting?

Simple – just write down the elements you want to categorize on cards or sticky notes, and have session participants sort them into groups that make sense to them.

Another option is to use a digital platform such as Optimal Workshop, which gives you the flexibility to run quick research remotely. 

digital card sorting

When is it helpful?

  • To find out how users expect to see information on a website
  • To organize a sitemap
  • To organize submenus
  • To classify products or services

What are “open” and “closed” card sorting? 

  • With open card sorting, users can create their own categories or add missing information. This helps you categorize and prioritize tasks/content and label groups.
  • Closed card sorting limits participants to a set batch of cards, and defines the available groups or categories to put the cards into. Volunteers can’t create their own groups and tasks – they’ve got to stick to what you’ve given them. The goal is to optimize and confirm your chosen navigation categories and labels.

What do I do with the card sorting data?

Use it to create your final information architecture, one that’s more intuitive – and relevant to your audience. Now you’ll be set to proceed to creating the user interface – the flow, functionality and actual website layout.

Contact Signal to help you plan and execute UX research to ensure the best possible customer experience.