Web design can be a complex affair for as subjective as it may seem. Or is it? At C2, we use a data-driven approach to ensure our designs are as objective as possible by backing them with user research and UX best practices.
We recently partnered with Prince George’s County Public Schools (PGCPS), one of the nation’s 25 largest school districts, to use a data-driven approach to redesign their website on Optimizely. Their old site was difficult to navigate and find proper school-specific information resulting in high bounce rates. They wanted their website to better promote its recognized programs, attract new talent and students, and share information with its students, staff, families, and the community.
Leveraging a branded design system, PGCPS feels and functions like a more united experience that gets users to the information they’re looking for, quickly. The new PGCPS district website design uses video, multi-language support, and responsive design to create a memorable and highly usable web experience.
Results like these don’t manifest from gut-checking design decisions. They come from conducting research and intentionally shaping the design to accomplish both business and user goals.
As our team continues to take on strategic redesigns, I thought I’d share C2’s experience making the design process as subjective as possible by using data-driven design.
What is data-driven design?
Simply put, data-driven design is the process of making informed, human-centered design decisions. It’s a method in which our decisions are based on the reflection from analytical data and user behavior.
Taking this approach helps us:
- Understand users and their needs
- Move beyond assumptions and best practices
- Deliver effective experiences that drive business results
Too often, designs are created without giving serious thought to the users who will be engaging with them. The assumption is that if a design looks nice, the user will be pleased. This is a mistake.
Data collection methods for data-driven design
A well-crafted, human-centered design process involves measuring the experience itself. Data can help us validate our hypothesis and ability to measure outcomes.
There are two types of data we can use to inform our design decisions:
Quantitative data
Quantitative data is factual, numerical data that helps us understand who, what, when, and where. We can get most of our quantitative data for a website or application from Google Analytics, Google Tag Manager, and other analytics tools.
Examples of quantitative data include:
- Google analytics: time on site, bounce rate, conversion funneling
- Google Tag Manager: Event and goal tracking
- Social media analytics: most engaged content, newsletter engagement, etc.
Qualitative data
Qualitative data include the feelings and actions of our audience, demonstrating why and how. It shows us the user perspective and helps us understand not just what happened, but why and how it happened. We often communicate qualitative data through personas, journey maps, behavior heat maps, surveys, and focus groups.
Examples of qualitative data include understanding:
- The way a user moves through a website navigation menu
- Why a user chose not to finish signing up or checking out
- If a user was able to find what they were looking for with on-site search
Note: Data-driven design isn’t about gathering as much data as possible, but about finding insights that help validate your assumptions and provide direction for creating a more user-centered experience. Being able to drive business outcomes is only as successful as your ability to understand and apply insights from data and your audience.
Using data to inform design
Analytical success is not just about collecting data. It is about collecting relevant data and drawing appropriate conclusions and actionable insights from it.
We do this a couple ways:
Identify key audiences
Understand that different users have varying needs, goals, challenges, and frustrations. Use your findings to determine key audiences and what they come to your website to accomplish. Order those tasks based on frequency and priority for each audience.
Tip: Use analytics to understand what type of content each audience is coming for and consider the path for finding that information.
.png)
Refine choices
Now that we’ve ordered tasks, we must refine them to put the most pressing and high-priority items first. Hick’s Law, a best practice UX principle, has proven that the time it takes to make a decision increases with the number and complexity of choices provided. There is limited real estate on the web, and there is only so much of a page a user will see when they land on a site, so we must be deliberate with how we use it.
.png)
Explore similar experiences
Users spend most of their time on sites other than yours, so consider how they are already used to consuming content. Another UX principle, Jakob’s Law, concludes that users prefer your site to work the same way as other sites they already know. Looking to social media for inspiration, a card-based design was implemented to make content easier to digest and emulate other frequently visited experiences.
Design for longevity
Users visit your website with a goal to find answers or resources. Content delivery should be the backbone to design, so don’t try to re-invent the wheel. Create a component-based design library for how content will be delivered. This ensures a more consistent experience throughout the site, and allows us to “isolate” content and, to some degree, future-proof the site by iteratively improving design and content elements.
Using data to get buy-in from stakeholders
Advocating for a redesign project or even minor design changes can be challenging to present to apprehensive stakeholders. Use data to your advantage and make the case! Here are a few suggestions for how to demonstrate its value.
Visualize and report on data: Show what valuable insights you have found and demonstrate what content is highly engaged with, where users are bouncing, how they are finding information on your site with on-site search or organic search. Show how these stats align with current goals.
Show a reimagined experience: Using key insights, mockup a vision of what your new site design and experience could look like. We used Figma and InVision, some UX design tools, to visualize and add minor interactions to take PGCPS for a “test drive” through a new site design.
Show how we handle their content: Show and explain how different stakeholder content will be handled. Provide alternatives for sharing that information including social media, related content, etc.
Listen and iterate: Nothing kills buy-in faster than taking a defensive stance. Give in a bit and listen to feedback. Rather than seeing criticism as negative, take it as an opportunity to dig deeper for a better solution.
Leverage case studies and competitor sites: See how other websites in your industry compare and look for relevant case studies demonstrating the ROI value of a data-driven redesign.
It is not enough for a website design to be aesthetically pleasing, it must serve a purpose. By taking a data-driven approach to design, we can ensure every decision is intentional and in service to providing an optimal experience for users while also driving business results, like it did for PGCPS.
Taking a data-driven design approach, C2 was able to help PGCPS create a solution that truly serves its users. The new website experience allows its nearly 19,000 employees and 130,000+ students to find resources easily with prioritized menu items, robust search, and Spanish translation support. Meanwhile its 800+ content editors can now make content changes while keeping brand consistency, staying accessibility compliant, and enabling translation support with safeguards and workflows in place.
At C2, we always use data to inform our decision-making and to ensure the classically subjective topic of design is as objective as possible. If you could use help forming a case for a redesign or are looking for a partner to get started, get in touch with us here.