We began our partnership with one of our favorites called a Context Canvas. In this kickoff activity, our teams met each other and got right into a collaborative design exercise.

We worked together to populate the canvas, clarifying the goals of the project, identifying who we were designing for and their needs, documenting the website differentiators, and defining what success would mean. By kicking off the project with this exercise, we were able to all get aligned on the big picture and goals of this effort.

For the next few weeks, we dug into discovery — interviewing stakeholders, health plan members, and health care providers in order to truly understand their needs and challenges when it came to the website.

We also conducted a competitor analysis, an SEO audit, and a content audit to get a full view of the existing site and the landscape of the industry. We learned from our interviews that internal teammates and members alike thought that CCA was a unique example of excellence in health care, but the website didn’t reflect that in its messaging and design.

Additionally, CCA staff wrote informative and interesting content for their members, but it was only available in print form, since there was no intuitive place to put this on the website, and many members were missing it.

We also learned that scalability and accessibility were top of mind for a lot of stakeholders; CCA had plans for expansion and they wanted to make sure they were providing current and future members with an optimal experience that would not cause them headaches to manage.

After gaining context from our interviews, we moved on to other types of research to further inform our design decisions. Two methods we used for this were tree testing (asking users to find things using a site’s basic organizational structure and terminology) and an in-situ website survey.

We knew going into tree testing that CCA had a bit of untangling to do with the website’s navigation. Members had remarked that getting around the site was difficult, and the hierarchy that differentiated one health plan from another was not clear. Before jumping into a navigation redesign, we conducted tree testing with members and providers on the existing website to understand where users were getting tripped up. We realized through testing that some of the language used on the site could be contributing to confusion, such as using the term “formulary” when “covered drugs” might be clearer.

Knowing that navigation was a challenge for members, and that CCA’s audience often included people who may have visual or comprehension impairments, we decided to create a unique navigation design tailored to these needs.

Usability testing on this design showed that members could navigate much more easily, and that the design seemed more friendly and intuitive.

Next came the visual design for the site. CCA had established colors, fonts, and iconography, but the brand needed a refresh. We were able to take these important brand elements and elevate them, while still keeping the look and feel familiar to members and staff.

We enhanced their typography by evolving the brand font from Helvetica to Helvetica Now, a new take on the typeface that prioritized digital legibility and accessibility. We devised a system for using their existing brand colors to distinguish different plans without overloading the site with too many color variations.

We also designed an extensive icon library to help convey the sometimes complex world of healthcare in a simple format. All and all, we made a lot of substantial improvements to the CCA brand while still maintaining the brand’s integrity and familiarity.

When we began working with CCA, expansion was at the forefront of the team’s minds. We needed to create a modern, easy-to-update site that could also scale. In order to accomplish this, we created a WordPress Multisite. (Multisite is a WordPress feature that allows you to manage multiple websites from a single WordPress installation.)

CCA needed an easy way to deploy new state sites as they became available. We used WordPress Multisite to enable them to spin up new state sites with ease.

Another benefit of this setup was document management. We created ways for the team to easily pull content into the state sites from the main site hub to create a centralized place to manage important documents and avoid duplication. This setup made website management easier and more intuitive for staff to maintain.

As a healthcare organization serving people with complex needs, accessibility was a top priority for CCA. Equitable access is built into their ethos, and as an organization that works with Medicare, they are required to meet accessibility laws such as ​​Section 503 of the Rehabilitation Act and ADA.

Our team worked with CCA to ensure that designs were compliant from the beginning, as well as developed in an accessible way. When the new site was ready to launch, we conducted a thorough accessibility audit by hand using a screen reader and keyboard, identifying and mitigating any remaining issues.

CCA began to see the positive impact almost immediately upon launch. Bounce rate decreased by 28% and download activity increased sharply – concrete signs that the new experience was easier to use and engage with.

Comparing analytics from Oct. ‘20–Oct. ’21 to the time period covering Oct. ‘22–Oct. ‘23, organic traffic increased by almost 90%, users grew by 110%, and page views were up by 85%. In addition, CCA’s internal teams have reported an easier-to-use CMS and the time-to-market for subsequent state sites sped up markedly.

Since launching the new site in 2021, CCA has continued to expand and change their organization, and we’ve been there every step of the way. When we began our partnership, CCA was just beginning to build out their design maturity. With our support, they have increased their internal team’s understanding of UX best practices and onboarded new team members with a goal of delivering a great experience to their customers.

We remain a strategic agency partner of CCA’s, providing insights, design, and development solutions where needed as they continue to improve their brand. We’re proud of all we’ve been able to accomplish together and look forward to the future!

This project was executed by our US team, formerly known as ETR. The company was acquired by Infinum in 2023.

PHASE 1

UX research and recommendations on how to improve the existing product

We began working with The Class in the winter of 2021, right as the world was entering its second year of the pandemic. Exercise habits had changed dramatically due to social distancing and gym closures, which pushed The Class to consider how to translate its offering online.

But what exactly is The Class? What we found in talking to their students is that it’s not an easy experience to describe. Many said to truly get it, you’d have to try it. While there can be benefits to a brand having mystery, that same ambiguity can cloud and overcomplicate an online presence. Piquing someone’s curiosity without giving too much away is a slippery slope that can often lead to visitors abandoning a website instead. Our first task was doing some UX auditing and research with existing customers as well as those who didn’t know what The Class was to find that perfect balance. 

We spoke to 10 prospective audience members (those who are not yet members of The Class but fit the demographic) and four current members. In addition to an interview, we also had participants participate in a usability test of the current website. 

Through our research we sought to answer these questions:

Prospects

Students

PHASE 2

Small, incremental feature upgrades and testing with users

Next, we moved on from the marketing site to the product. We started with researching and upgrading the design of a core part of the experience — finding a class. After working with the client to design a prototype of an upgraded filter and search experience, we conducted usability testing with real members to see how it performed. Again we did a combination interview and usability test. We first learned about the participant’s habits, needs, and current experience, and then we dove into the prototype and watched how they interacted with it. 

In this research sprint we prioritized speed and validating our ideas quickly. We tested with just five users in the first iteration, but we gained valuable insights we wouldn’t have realized on our own. For example, we learned that making small language tweaks would make a big difference in understanding how a filter worked as well as make the experience feel more inclusive. From this quick research sprint we were able to come up with a list of action items to make improvements to our design. 

PHASE 3

Feature prioritization, concepting, and development of an entirely new platform

The Class’s digital experience at this point had been supported using Vimeo’s API. Our development team had been jumping through hoops to get Vimeo’s framework to cooperate with the unique features The Class team wanted to accomplish. But The Class team had even greater ambitions, and it was becoming obvious that Vimeo just wouldn’t be able to make it all possible. Enter our next challenge: create a new, bespoke platform for The Class to live on from the ground up. 

Our development team worked in close collaboration with The Class’s lead developer to build this new platform. We utilized a hybrid approach to building the web and mobile apps, sharing many components from the same codebase. This allowed us to save time and keep the UI and experience consistent across all platforms. In addition, we took the lead on developing a native TvOS app and Roku TV to extend the reach of the new platform to more audiences.

The Class team had no shortage of good ideas for their product’s evolution, but now it was time to prioritize. Using the knowledge we gained from previous research, we were able to prioritize feature ideas based on things we knew to be important to The Class students. We created a project roadmap, front-loading the features that provided the greatest value with the lower levels of UX and dev work needed, and got to work.

Translating a physical space to digital design

The Class studio in New York City is an experience. When you walk into the lobby, the lighting is dim and the space is mysterious. But when it’s time for Class, you enter an open space filled with natural light and bouncy sprung flooring. This effect of opening up and becoming lighter is very intentional.

So the challenge was for our visual design team to translate that to a digital space. The visual design is simple and soothing, utilizing light and dark palettes intentionally. Colors like fog, sand, and sage wash over the user as they navigate. We worked hard to make sure this digital space felt on brand for The Class, and that the typography, imagery, graphics, and colors all worked together to make the online experience feel just as special as in person.

Expanding the product offering

After a successful relaunch of their platform, The Class’s newest challenge involved how to expand their offering to include yoga and meditation. We conducted several rounds of testing to understand things like their audience’s opinion on these changes, the right language to use, and how to structure the navigation. Because of the testing we were able to ensure that the updates were not a jarring change to users but a welcome one.

An ongoing partnership

Like many of our clients, The Class was very happy with the results of our collaboration and has kept us as an ongoing partner. We continue to provide UX and development guidance to their evolving and growing platform, and we look forward to the future innovations we’ll get to work together on.

This project was executed by our US team, formerly known as ETR. The company was acquired by Infinum in 2023.

PROJECT GOALS & CHALLENGES

Redesigning a website is more than just a design exercise – it’s a chance to redefine how an organization connects with its audience. This redesign project had several unique goals and challenges:

APPROACH & SOLUTION

Following our Purpose-Driven Design process, we began with the Strategy phase of the project in August 2021. This phase lasted about two and a half months and included a significant amount of research.

Research activities included stakeholder interviews, user interviews, competitor website UX analysis, audits of Google Analytics and existing website content, and also drew on previous research we had completed with the client over the years. Our UX research team absorbed and unpacked all of this information using the affinity mapping technique in a Miro Board, which we constantly referred to throughout the course of the project.

Through research, we validated that the primary website audience is family caregivers—an important north star for all strategic decisions related to information architecture and content development. Research also helped to prioritize VNS Health’s secondary and tertiary audiences. We ultimately identified four key audiences for the website and summarized our insights around those audiences by creating User Archetypes for each of them.

We packaged up our research insights and corresponding strategic recommendations for the website’s overall UX and information architecture into a Discovery Readout deck. Also included as part of this deliverable was a detailed set of functional requirements that we identified to be within scope for the project.

Armed with our research and strategic direction, we headed into the Implementation phase. We worked through more than 20 wireframes that leveraged 42 custom WordPress Gutenberg blocks and 15 modified blocks.

While we were working on wireframes, VNS Health’s content development partner, CareContent, was working on copywriting (90% of the site’s content was getting completely overhauled/rewritten). We had weekly status meetings to align on progress and reconcile any discrepancies that arose between copy and wireframe layouts.

We ultimately decided as a team to put draft copy directly into our wireframes for many pages to ensure that we were planning for the UI to handle the correct amount of content. Doing this also helped us catch any gaps where we had a planned content section in the wireframe but no copy currently written for it (or vice versa, where there was a planned piece of copy but no place for it in the wireframe).

The biggest challenge of the visual design phase was taking a set of brand guidelines and figuring out their ideal digital application. We needed to keep true to the spirit of the guidelines without overcomplicating development related to key brand elements like overlapping circles. (It’s surprisingly tricky to set rules for this type of element in a CMS setting.)

In addition to converting the site from fixed-template WordPress to the block-based functionality of WordPress Gutenberg, we also used this as an opportunity to implement GA4, the new version of Google Analytics that all companies will be compelled to adopt starting in Summer 2023.

It cannot be overstated how important project management was on this project. With so many concurrent tracks, it was critical to keep everything coordinated and in motion throughout the Implementation phase. We decided early on that coordinating multiple teams would require a “single source of truth” for important documentation. The goal was to avoid important documents or reference links from being lost in emails or Google Drive folder.

Learning from past experiences, we introduced a project hub document that was used successfully in the past to organize all important documents, links to designs and wireframes, and other critical pieces. Keeping this organized made finding information as simple as saying “It’s in the hub!”

Project management tools were also utilized, of course, and our platform of choice is Asana. With the numerous parts and pieces to the website plan, keeping a detailed yet functional set of tickets allowed multiple team members to work in tandem efficiently.

The VNSHealth.org website was launched on-time and on-budget on May 18, 2022. Soon after launch, we already started seeing positive signals:

This project was executed by our US team, formerly known as ETR. The company was acquired by Infinum in 2023.

Clinician’s Brief now enhances user engagement with its dynamic homepage, where experts encounter a constantly evolving interface designed to keep vets informed, connected, and engaged.

Working on user personas, we realized that the only way to get nurses to embrace a new platform and adopt a new protocol was to demonstrate to them that this was not just another administrative task – that they were actually getting time back to care for patients.

Stryker was able to take the strategy, creative direction, and the requirements we developed together and build the final experience on their platform – paving the way for the improved adoption of this mission-critical tool.

The Bloom Diagnostics mobile app is central to using the Bloom System. It offers personalized reports that are easy to understand and act upon.

Encrypted medical data is sent to Bloom Analytics, the company’s proprietary cloud solution. The algorithms aggregate anonymized test results, check for any anomalies, and provide immediate feedback within the app.

When it comes to health, data safety is paramount. Bloom System is fully encrypted, meaning no-one but the end user can read the lab results.

Building an advanced privacy-centric system is no small feat. Combined with a robust business logic and sophisticated data encryption, the objective was to keep the codebase tight.

We helped Bloom Diagnostic build an Android app, utilizing Kotlin Multiplatform for all business logic. The system needed to be easily maintainable, and the codebase sharable between iOS and Android devices.

OUR APPROACH

USER INTERFACE

Other similar apps offer a multitude of features, making it difficult for uses to single out what’s important. We focused on life-saving tracking data – meds, moods, weight, water and sodium intake, as well as daily and weekly summaries. Finding trends is key.

FROM VISION TO PRODUCT