UX CASE STUDY
Redesigning The Lab (and Beyond)
Duration
90 hours
Organization
Clarity Campaign Labs
Role
User research, usability testing, information architecture, UX/UI design
Tools
Figma, Squarespace
Clarity Campaign Labs (Clarity) provides customized data science and strategy solutions for progressive campaigns and organizations. Clarity was looking to redesign their website, specifically a section called The Lab.
In order to determine how to redesign The Lab, I took a mixed-methods approach to research to learn about their users and how they were experiencing the website. Then, I drew upon the research findings and worked closely with the stakeholder to design wireframes and develop a prototype of The Lab to address stated pain points.
More importantly, by the end of this project, my work became pivotal in changing how Clarity thinks about their website; I helped them understand how design can impact business goals and persuaded them to expand the scope of the redesign from The Lab to the rest of their website.
We launched the completely redesigned website in July.
CHALLENGE
Pinpointing the Problem
The task was to redesign The Lab — The Lab was its own section in the top level navigation, but it hadn't been updated in a while relative to the rest of the website. So at the very least, The Lab needed to be up-to-date and functioning properly.
But in our hearts, we knew that simply update the content wasn't enough.
The task was to "redesign The Lab". But what does that actually mean?
Create new content? Change the layout? Generate new visuals? Add new features or cool animations? We intuitively knew that something needed to be done, but Clarity nor I knew what it could be.
How might we "redesign The Lab"? Why does it need to be redesigned?
RESEARCH
Starting Somewhere
Some ideas we had at the outset of this project: Revise content so that it is up-to-date? Replace the screenshots with more eye-catching visuals? Brainstorm content for another Lab tool?
Certainly there were lots of possibilities, but given the short timeline, what was going to be the most impactful? We needed to uncover the problem and we needed data.
Goals
Uncover patterns about the target audience and the expectations they may have for Clarity's website
Understand other organizations that operate within the same space, what they offer, and how Clarity is different
Produce insights that will help inform the redesign
Viewing from different angles
I took an exploratory research approach because I wasn't sure what kind of information I could learn or where it could come from. I combined
Stakeholder interviews to get industry knowledge and confirm Clarity's goals for the website and project
Competitive analysis to learn how similar organizations present themselves and how Clarity can set itself apart but also align in ways users expect
Client interview analysis to understand the client perception of Clarity
These interviews were conducted prior to my involvement, but I found it relevant and useful in understanding Clarity’s personality, branding, and voice in the perspective of their clients.
Metrics analysis to find patterns of user interaction and engagement with the website, and
Usability testing with the current website to establish a baseline user experience, observe interactions and reactions to the website, and identify areas where the site does not meet user expectations.
Usability testing was conducted was conducted with 7 participants who are not exactly in target audience but have experience as the target archetype — the potential client. Participants were asked to freely browse the Clarity website and voice any reactions and opinions they had.
At the end, participants were asked, “based on your experience, would you reach out to Clarity?” Only 3/7 participants said “yes”.
This is an affinity map of usability test participant reactions and feedback, categorized by topic.
Collecting and collating the findings
The research resulted in holistic findings about the entire website. When research was completed, we synthesized the data collected as a whole, but due to our short timeline, we were selective of the research upon which we could act. This case study will discuss those relevant findings.
Analytics between September 2020 to February 2021 (6 months) revealed that visitors to Clarity's website usually found it through organic search (eg. Google), although a significant proportion landed on the site through a direct link. Yet visitors did not engage much with the site.
More interestingly, 2 of the top 4 most visited pages were from The Lab, and one of the these pages had even more visits and entrances that the homepage.
To usability testing participants, The Lab was an exciting component of the website, with interactive and useful tools.
However, they were confused about what it was and got the impression that it was separate from what Clarity does.
Getting into the user perspective
To frame the research findings in the perspective of a potential client, the key target audience, I introduced a persona, Alison Newton.
Alison is a campaign manager based in Arlington, VA looking for data services for her local campaign. When she visits Clarity's website, she is in the "Consideration Stage" of her customer journey: she is doing some light due diligence and is deciding whether to move forward and contact Clarity.
Alison’s expectation for the website is to easily find the information necessary to understand the company and its services, determine their fit for her problems, and feel confident about working with them.
Does the website meet Alison's expectation?
It could, but it most likely doesn't and thus, Alison does not reach out to Clarity.
Research suggested that the website does contain all the necessary information that could compel Alison to reach out — outlined services, examples of previous work, demonstrated investment from previous clients, etc. — however, it is likely that Alison ends up not finding what she's looking for because she doesn't spend enough time on the website to find it or gets lost looking.
While we'd like Alison to follow the green path of her customer journey, it's more likely that she's experiencing the grey path.
With respect to The Lab, she may think it's important because it is its own section of the website, or she may be intrigued by its name, but when she lands on it, she is ultimately confused.
Specifically, she
Doesn't understand what The Lab or its pertaining content is
Couldn’t tell what is important or relevant to her, and
Couldn’t easily scan and digest the content
“I don’t know what the company wants me to take away from The Lab. Here is some cool stuff we did? But why does that matter to me?”
DEFINE
Making Data-Driven Decisions
The research generated tangible data points and helped us understand a baseline user experience from which we could now improve.
Research also reinforced the purpose of the project — to redesign The Lab — as it was found to be the most visited and engaged part of the website. Participants also thought that The Lab had potential to show exciting and interesting things that Clarity has done, an opportunity to demonstrate how Clarity is special, even though they were not sure what to make of it.
Goals
Unpack findings from user research and synthesize into actionable insights
Get clarity on the problem we’re solving for
Brainstorm and outline how the problem will be addressed within the project scope
Putting the problem into words
Research also helped us put the problem that we intuitively knew, but couldn't exactly pinpoint, into words.
We discovered that people were confused and couldn't tell what The Lab was. This sounds like an obvious finding, but it externally validated what Clarity assumed, but didn't actually know.
The Lab had lost its identity and was thus lacking coherence within itself and the rest of the website.
Giving The Lab an identity
The Lab began as a place where Clarity showcased projects to demonstrate their expertise and the creative, cutting-edge ways they were utilizing data. Over time, The Lab naturally outgrew its original purpose (thus, the confusion), so it had to be given a new identity.
We did this by
Redefining The Lab and being more descriptive
Considering the four projects on the page, it was difficult to come up with a unifying definition that could cohesively tie them together. Was The Lab a place to show active projects they're working on? Was it a place to demonstrate "Why Clarity"? Was it a products page?
Looking at it from a different angle, why should Alison care about The Lab?
In answer to that question, Clarity wanted Alison to know that The Lab was relevant because it contains data analytics tools she can utilize to inform her campaign strategy. Language was updated to reflect that.
Focusing on the substantive content
Once we defined The Lab as more of a toolset, it was natural to decide to remove content that weren't tools and thus, not useful to the user.
“If I was Alison, would I even want to see [these two projects]?”
— Clarity stakeholder
This left The Lab with two tools. This decision was also supported by usability testing, where multiple participants noted the incompatibility of the projects.
Revising the projects as tools
As is, it's not clear that these are tools part of Clarity's offerings as they seemed more educational instead of getting people to act. We decided that these pages would be revised to look more like product pages that describe the features, giving users a frame of reference to more easily understand the page.
DESIGN
Redesigning The Lab
Now that we had a plan to address the biggest issue users had about The Lab, I could think about how to implement those decisions and address other pain points in the user interface.
Goals
Perform a content audit to understand and identify what needs to be redesigned
Design wireframes that take into consideration technical constraints
Develop an interactive prototype for a second round of usability testing
Designing step by step
I knew that I was designing, to an extent, two types of pages — a landing page and a product page.
Researching design patterns
What did effective landing and product pages look like? I did secondary research and visited the websites of different field-agnostic data analytics firms to identify common design patterns. How did they lay out their product features? What type of content did they include? How did they get users to contact them?
Adapting patterns to content
I could then create wireframes mimicking these design patterns, adapting these patterns to the content of Clarity's website. I also had to keep in mind what design is possible using a Squarespace template.
Clarity uses Squarespace to host their website and even though their website could be customized in a range of ways using CSS and Javascript, I didn't want to create a design that would require too much coding because it would be more of a burden to update down the line.
Sticking to the design system
As I was designing only a section of the entire website, I also wanted to make sure that the new design was consistent to Clarity's brand, existing styles, and components — large green banner atop a page, font styles, and buttons to name a few.
Thinking responsive
I began designing for desktop as analytics revealed most users visit on desktop. But a significant proportion also visit on mobile.
When considering how Squarespace adjusts content for mobile, I realized that some of my wireframes were not feasible because they would create inconsistencies once the content is stacked.
Going back & forth on an open line of communication
During this process, I kept in constant communication with Clarity, showing them different options of the design, getting their feedback, and iterating based on that feedback.
This image presents different options of various UI elements, not the evolution of the design.
Guiding the user
Besides being confused over what The Lab was, participants also expressed that they didn't know what to focus on and pointed out a few jarring elements.
In other words, they didn't feel guided while browsing and didn't have a smooth experience, and I aimed to address their specific pain points in the redesign.
Reducing cognitive load
Original Design
The Lab page presents four projects in a grid, with large images and titles and smaller sized descriptions underneath. When viewing this, it's difficult to discern what is actually important to focus attention. In addition, the layout doesn't clearly indicate that the projects can be clicked/tapped for more.
New Design
I arranged the content so that the user can only focus on one tool at a time. It has placeholder text for a description so the user can gauge its relevance as well as a button to clearly show the user that there's more.
Making actions easy
Original Design
It wasn't clear what the main action users were supposed to take after getting to the bottom of a page. One page has a "reach Clarity" button that directs to the "Contact Us" page. Another has a "Request a Demo" embedded form. Other pages have a "back to the Lab" button.
New Design
The purpose of the website is to move potential clients to reach out to Clarity, and so I tried to make that action as easy as possible. All pages have a "Request a Demo" CTA, where the form is either embedded or opens in a lightbox so users don't have to be directed to another page.
Aiming to scan
Original Design
The layout doesn't allow the user to easily scan the content and find what they are looking for. Images are large, while text is small for the viewport. Copy isn’t very descriptive relative to its image. Pages require lots of scrolling.
New Design
I laid out the content like a list, making use of different sized fonts to indicate relative importance. I utilized more whitespace to give content room to breathe and wrote "punchy" headings that describe what the tool can do for the user. Users can just skim the headings to get a gist and make a decision.
Pleasing the eye
Original Design
Participants commented on the use of bright green and orange and the stock images that made the text hard to read. They also noticed the usage of screenshots, the largeness of the images, and the inconsistency of visuals compared to the rest of the website.
New Design
While trying to stay within Clarity's existing design system, I did break a few rules, which Clarity was receptive to with reasoning. I used muted instead of the "intense" green and orange so it's easier on the eyes. I also increased the margin size of the page so that it's easier to read. I removed the stock images and redesigned the screenshot visuals to be more aesthetically pleasing, but still convey meaning.
TEST
Testing Round 2
Due to limited time for recruitment and scheduling, the second round of usability testing was completed with a subset of the previous usability test participants. Understanding that this is not usual procedure, I found this to be beneficial as they already had familiarity with the existing website and company, and they were able to provide constructive feedback on a section of the site.
Goals
Get feedback on usability of the new design, determine whether the new design successfully addressed specific pain points or met user expectations
Learn how participants feel about the new look and feel, understand how the design and aesthetics affect their overall user experience
Identify areas of the website where usability and engagement can be improved
Heading in the right direction
All participants felt that the design had enhanced their overall viewing experience, particularly due to the layout of content, visual design, and concise language.
These improvements even improved how participants understood and viewed the company.
But, they still had questions, still not quite understanding the purpose and relevance of The Lab.
And if truly these tools are like products as the participants perceived, they would have liked to feel more confident that these tools had produced results and can solve their problems.
Overall, participants had a better user experience – information was easier to scan and digest, language was concise and straightforward, and visual design had improved.
However, they would like to see more results, proof, and/or use cases and a clearer relationship between The Lab and Clarity's services.
This hits home a finding from the first round of usability testing: participants perceived The Lab as separate from what they do as a company, which means the content isn’t presented in a way where users could truly understand the breadth of Clarity's service offerings.
Extrapolated further, users are not able form a coherent and accurate impression of Clarity from what they can see on the website.
NEW CHALLENGE
Improving Coherence to Enhance Understanding
Gathering all that we've learned so far, we know that it's possible that the Clarity website can meet the expectations of potential clients, but expectations are likely not being met.
Instead, users find themselves
Confused and unable to grasp what Clarity does
Not finding what they’re looking for because relevant information is buried and hard to find
Getting lost while trying to navigate the site or not knowing where to focus their attention
Unable to get a sense of Clarity's brand personality because of inconsistent visuals and tone
In other words, the website is lacking coherence, that despite the good content there may be, it is not well communicated, integrated, and presented so users can quickly and easily comprehend Clarity and their services, build trust, and form an accurate impression.
How might we help users understand Clarity more coherently?
OUTCOME
Following the Data
The Lab has been redesigned — it has a new identity and improved visual hierarchy, usability, and aesthetics. However, there is compelling data to suggest that this design process should be applied on a larger scale.
Users want The Lab to be more cohesive with the rest of the website and the rest of the website to move in the same direction of The Lab in terms of usability and visual design. Therefore, Clarity has decided to continue this project with a broadened scope to look at the website holistically.
Considering another user perspective
At one point on this journey, we had decided to cut down The Lab to two tool/product pages for the sake of time and to table the other two tools. Now, there's opportunity to revisit the other tools because they get the most traffic on the website and another target audience finds them useful for another purpose.
Though these tools may not have a lot of value to potential clients, they do have value to another type of persona — Jayson Romero, a job seeker currently living in Baltimore, MD. Jayson has his own motivations and expectations for the Clarity website, broadly
To understand the roles that Clarity is hiring for
To get a sense of the Clarity team and company culture (ie. get a sense of what it would be like to work there), and
Apply or reach out for more information
Considering Jayson's perspective will add another dimension to this redesign.
In Summary
Clarity Campaign Labs was looking to redesign a section of their website, The Lab. But what exactly did that mean?
I began with exploratory research and usability testing to understand the industry, the target audience and their expectations, and the current user experience with the website. This helped me identify the problem and redesign The Lab to address some pain points, resulting in an improved user experience.
Even though this project began without a clear destination in mind, I was able to figure out what to do based on research, data, user feedback, and working with Clarity.
Overall, my work was pivotal in changing how Clarity thought about their website. I helped Clarity understand how a well-designed website, which is one that considers user motivations and needs, can contribute to achieving business goals. Presented with the data gathered, Clarity was persuaded to expand the scope of this project from The Lab to the rest of their website.
Discoveries
Trust in the design process (it's fun!). At the start of this project, I didn't know what to do or really have an idea of what the end product would look like. I was mystified. But once I started to do something, I always found out what I could do next. It was also pretty exciting to discover the next logical step.
Don't underestimate the importance of copy and microcopy. Oftentimes I feel like there's a greater emphasis on visual and UI design, but the words we use can make a big difference to the user experience. We had to redefine The Lab because its previous definition no longer was suitable. Additionally, the use of more succinct language made a positive impression on usability test participants, even giving them the perception that Clarity was organized and can communicate well.
Control the delivery of the user experience with visual hierarchy. It seems to me that many of the pain points that users experienced — not knowing where to focus their attention, taking too long to find information, the jarring viewing experience, etc. — can be addressed with more logical and strategic structuring of the elements on the page. It wasn't so much that there was an issue with the content, but how the content is communicated and perceived.