Less can be Much More

The previous Foundation Medicine (FMI) team built their marketing platform on a decoupled content management architecture. Oomph has used decoupled and micro-service architecture for projects such as Leica Geosystems and Wingspans. 

But decoupled is not right for every organization, and a decoupled approach can be architected in many different ways. FMI had found their implementation created more headaches than high-fives: 

• The flat hierarchy of Contentful created 158 content types, most of which were not useful for creating content.* Therefore, authors had to sift through long lists to find the actual content they needed to edit or create.
• Not everything in their front-end templates was accessible through the CMS. (That would have created even more content types!) So the team was beholden to an engineer to make text edits within some areas.
• Previewing new pages before publishing was not added to their implementation. Authors struggled to predict how content in the admin would display as the published page, and spent much time toggling back and forth.

In short, publishing new content or making content edits was too slow. Responding quickly to changing market conditions or new announcements in the cancer treatment space was not possible, eroding reliance and trust in what should be a cutting-edge brand.

* It should be noted that Contentful uses a “Content Type” for almost everything, from content to taxonomy to design components.

Moving away from Decoupled

Based on their current pain points, Oomph verified that switching to a traditional “monolithic” architecture would solve their problems and provide additional benefits: 

• Reduce cognitive overload and maintenance overhead by drastically reducing content types 
• Empower authors to update all content anywhere
• Accelerate content publishing with an accurate visual preview

Oomph completed an extensive audit and reduced content types from 158 down to 30. We created a tight, flexible system in Drupal of just 14 content types — news item, event page, product page, etc. —  and 16 design components — text blocks, accordions, etc. 

How did we achieve such a reduction? Our consolidation approach moved from fewer specific options (one thing for a small number of very specific pieces of content) to flexibility within general ones (one thing to support many pieces of content with specific options).

Retaining Key Functionality

Foundation Medicine exists to help people with cancer and those who treat them. To accomplish this, the website features intricate tools for providers to navigate essential cancer resources and patients to find a specialist. None of these tools were compromised by switching to Drupal. In fact, with efficiency gains and more timely content governance, these resources became more valuable.

Connecting Providers with Genomic Data and Patients with Personalized Care

The upgrade to Foundation Medicine’s digital platform has been invisible by design. The brand and the visuals were performing well for their business and were comfortable for their audience. The outward appearance didn’t need an update, but the internal workflows that support continued trust certainly did. 

The Foundation Medicine team now has the autonomy to make content updates quickly, the architecture and design components to confidently curate each page build, and the infrastructure to create clear and consistent content — a win for the team and for the many people who turn to Foundation Medicine in their time of need.

Oomph has worked with Lifespan since 2010 and created the second version of their intranet on Drupal 7. A critical tool like an intranet needs regular maintenance. Even with regular updates, there comes a time when the whole platform needs a re-architecture to be flexible, secure, and performant.

In 2021, it was time to plan the next phase of the intranet on Drupal 9. Lifespan used the redesign as an opportunity to realign the employee journeys with the evolution of their work. And COVID-19 had provided an opportunity to reevaluate whether a security-first, HIPAA-compliant intranet could be available to those working from home.

Critical Top-Tasks

The Oomph team ran a Discovery and research phase to gather requirements and understand employee expectations. We ran workshops with client stakeholders, identified important work tasks and created 5 employee personas, conducted one-on-one interviews with key persona types, and gathered feedback from employees with an online and email survey. 

Through this research, we started to see two different types of tasks emerge: those that required speed to a destination and those that required exploration and unstructured browsing.

Tasks requiring speed to completion:

• Access health and safety policies
• Access a staff directory and immediately contact high-value individuals
• Access job tools, which are often 3rd-party digital services, for everything from timesheets to diagnostics to general education 
• Access online forms to request items and services
• Access HR and employment benefits

Tasks requiring unstructured browsing: 

• Access Department sites, particularly my department for relevant news & events
• Be exposed to company culture through up-to-date news and events, videos, seminars, and important business announcements or press coverage
• Access the internal job board to find advancement opportunities
• If I am a new employee, or a new manager, access onboarding material and quick links for new individuals
• Visit and browse the Bulletin Board 

It became clear through our process that Lifespan employees needed to move quickly and slowly, often in the same session, depending on the important tasks they needed to complete. The intranet needed to support both types of journeys to remain a successful platform for getting work done and absorbing company culture.

A Focused Priority on Search

Expectations about fast and accurate search are high because of you know who. When designing search for an employee intranet, the baseline requirements are even higher. We knew that we had to get the design and implementation of search right. 

We took a learn-once, use-everywhere approach when it came to search interfaces. Search would be a core part of finding many types of content — tools, forms, people, departments, locations, and more. Each had to have a similar structure and set of filtering options to be the most useful. 

The list of tools, locations, or people needed smart defaults. Before someone conducts their own search, each screen displays popular searches and the common content people need to access. In some cases, an employee does not even need to search in order to find what they need.

Two search pages, similar interfaces: The Job Tools search and Staff Directory follow similar patterns, adhering to our “learn once, use everywhere” rule

Personalization that follows Employees from Device to Device

Personalization had to be a part of our solution as well. Employees are able to use S.S.O. to access the intranet from their personal devices or workstation computers in the hospitals. Workstations are often shared between multiple clinical staff, therefore, our system needed to support stopping one task on on device and picking it back up on another.

A Favorites feature allows employees to create their own transportable bookmarks. Almost everything on the site can be bookmarked, reducing the need to search for commonly used content and tools. Six custom favorites are available from the left drawer at all times, while the entire list of favorites is one more click away.

Supporting Speed and Engagement

Speed is at the heart of critical tasks and high-quality patient care. A nurse, at a shared workstation, needs to log in quickly, find the tool they need, and administer care. Time is critical. They don’t want extra clicks, a search that doesn’t work intuitively, or slow page load times. Staff don’t want it, and management doesn’t want it, either. 

Engagement is slower and the intention is different. Speed is for tasks. Engagement is for exploring. This is how company culture is communicated and absorbed. This is when people catch up with department and company news, find events to attend, view a photo gallery from an event they missed, or browse a bulletin board to swap items with other employees. You can’t have an intranet that is ALL business just like you can’t have an intranet that is NO business.

A Dashboard Built for Speed or Browsing

On the starting page, an employee might be in need for something immediate or might have time to explore. We do not know their intention, therefore, this page needs to support both. 

The left drawer is open to employees on the dashboard. It is open to show them what it contains and to remove a click when accessing the important common destinations within. The first seven links are common items for any employee, curated by the Lifespan team. They are a mixture of tactical items — like time sheets — and company culture items — like the CARE recognition program. 

Below that are the employee Favorites. The first six favorites are shown while all are available with an extra click.

The top navigation supports speed to common destinations, some of which are search interfaces and others which are built for browsing. 

The rest of the page showcases engagement and company culture. Featured news stories with images are balanced with quick news and event lists. Flexible content sections allow authors to add and remove content blocks as new items are required. 

Other content pages that were focused on engagement are the deeper News and Events pages, customized Location pages (for each major hospital location), and a community Bulletin Board.

Smooth Onboarding and Acceptance

No matter how confident our teams were, we didn’t really know if the redesign was a success until employees moved from the older tools they were familiar with. The Lifespan team did a fantastic job creating walk through videos ahead of the launch. Old tools and directories stayed available for a period of overlap, but our teams saw quick adoption into the new tools in favor of the familiar. 

Since the intranet is now available off of the closed Lifespan network, we have seen mobile traffic increase dramatically. The responsive design is an improved experience over the previous intranet and the numbers prove it. In fact, we have found that more employees engage in company culture content on their personal devices, while using the company workstations for their tasks. 

Oomph is very proud to have worked with one of the largest private employers in the state, and we are very proud to have our work used by over 17,000 people every day. Oomph continues to support the Lifespan team and the intranet project, iteratively improving the features and evolving the toolset to be effective for all.

Go Ask Alice! (GAA!) is a judgment-free, anonymous question-and-answer site. It is part of Alice! Health Promotion, a department of Columbia Health. Their content has always been reliable, accurate, and thoroughly researched by professionals — humans, not Artificial intelligence (AI)!  While organic search brings many different kinds of audiences across the globe to their answers, their primary audience is the college students of Columbia University. These digital natives need the content to speak their language and to look modern and relevant. Oomph leaned into the college-aged persona to create a user interface that was fun, unique, and approachable while acknowledging and respecting the gravity of the questions students ask. 

Empathize with both Visitors and Authors

We began by working to understand and empathize with their audience — which was easy. How many of us have gotten lost searching for answers to questions we might not ask our own close friends? Questions like, “Can I get Hepatitis A from eating raw seafood?”, “Do I have OCD?” or even “Why did my father abandon me?” Analytics supported how these types of questions were prevalent. They also showed that while many visitors found GAA! through search, those visitors found their answer and quickly left. While in some ways, this was positive — someone had a question and found a satisfactory answer — visitors missed lots of other answers to questions they might have.

For the Go Ask Alice! author team, technical issues often arose that were rooted in an overly complex content architecture and workflows that required lengthy workarounds. A complicated review and approval process and ineffective spam filters made combing through user submissions time-consuming. The longer it takes the team to create new answers, the less students will want to send GAA! their questions.

Our shared goals were to:

Modernization & Trust-building 

Most Gen-Z students and younger generations won’t trust a site that isn’t designed well for a mobile screen. Our design process emphasized the small screen experience, keeping filters, sharing, citations, and recirculation in logical places. The Columbia Health brand is also a powerful lever for establishing trust with a young audience, but we were careful not to let it overpower GAA!’s own authentic brand.

Supporting Trust with New Features

Enhancement ideas started to surface during Discovery and continued throughout the process from both teams. Some of our favorites include:

Increased User Engagement & Accessibility

Accessibility & Safety with a Quick Exit Button

Go Ask Alice! has many sensitive questions: questions about sexual abuse, suicide, drug use, and topics generally that you may not want someone else to see on your phone. We introduced a Quick Exit feature on each page of the site. When visitors click the button, a new tab is quickly opened, and the site’s browsing history is removed from their device. While this is not a well-known action in the general population, many in unsafe situations know how they work and what “Exit Site” means. 

Oomph has written an in-depth article about the quick exit button and has released a Quick Exit Drupal Module to help other teams implement this feature. 

Encouraging Question Browsing over Asking New Questions

It may seem counterintuitive, but one of the major workflows we redesigned was asking a question in the first place. The GAA! team has compiled thousands of great answers over the years and frequently updates old answers with new content to keep them current with changes in medical approaches. The small but mighty team didn’t want to answer the same questions over and over again by referring new askers to pre-published answers. 

Our solution emphasized search and intentionally made access to the Question form difficult. Visitors are encouraged to search for answers to previously posted questions first. Quite often, they will discover an answer to their questions (and maybe some helpful answers to questions they did not expect). Only if they have searched first will they encounter the “Can’t find your question” call to action, which leads them through the steps of asking a new question. 

The new site feels like a new beginning for the GAA! team. While the site has only recently launched, we look forward to seeing how it impacts key metrics like time on site and return visits. In the meantime, we’re also excited to see how the newly revamped admin experience helps the GAA! content team serve their audience even better than before. 

When faced with a sensitive question about mental, nutritional, emotional, or sexual health, college students can continue to Go Ask Alice!

New Drupal, New Design

Migrating a massive site like healthdata.org is challenging enough, but implementing a new site design simultaneously made the process even more complex. IHME wanted a partner with the digital expertise to translate its internal design team’s page designs into a flexible, functional set of components  — and then bring it all to life in the latest Drupal environment. Key goals included:

The new healthdata.org site required a delicate balance of form and function. Oomph consulted closely with IHME on the front-end page designs, then produced a full component-based design system in Drupal that would allow the site’s content to shine now and in the future — all while achieving conformance with WCAG 2.1 standards.

Equipping IHME To Lead the Public Health Conversation

Collaborating on a Comprehensive Content Model

IHME needed the site to support a wide variety of content and give its team complete control over landing page layouts, but the organization had limited resources to achieve its ambitious goals. Oomph and IHME went through several rounds of content modeling and architecture diagramming to right-size the number and type of components. We converted their full-page designs into annotated flex content diagrams so IHME could see how the proposed flex-content architecture would function down to the field level. We also worked with the IHME team to build a comprehensive list of existing features — including out-of-the-box, plugins, and custom — and determine which ones to drop, replace, or upgrade. We then rewrote any custom features that made the grade for the Drupal migration.

Building Custom Teaser Modules

The IHME team’s design relied heavily on node teaser views to highlight articles, events, and other content resources. Depending on the teaser’s placement, each teaser needed to display different data — some displayed author names, for example, while others displayed only a journal title. Oomph built a module encompassing all of the different teaser rules IHME needed depending on the component the teaser was being displayed in. The teaser module we built even became the inspiration for the Shared Fields Display Settings module Oomph is developing for Drupal.

Creating a Fresh, Functional Design System

With IHME’s new content model in place, we used Layout Paragraphs in Drupal to build a full design system and component library for healthdata.org. Layout Paragraphs acts like a visual page builder, enabling the IHME team to construct feature rich pages using a drag and drop editor. We gave IHME added flexibility through customizable templates that make use of its extensive component library, as well as a customized slider layout that provides the team with even more display options.

Working to Make Citizens and Communities Healthier 

IHME has long been a leader in population health, and its migration to the latest version of Drupal ensures it can lead for a long time. By working with Oomph to balance technical and design considerations at every step, IHME was able to transform its vision into a powerful and purposeful site — while giving its team the tools to showcase its ever-growing body of insights. The new healthdata.org has already received a Digital Health Award, cementing its reputation as an essential digital resource for the public health community.

Same Look, Better Build

Ordinarily, when we embark on rearchitecting a site, it happens as part of a complete front-end and back-end overhaul. This was a unique situation. Visit California users enjoyed the site’s design and helpful content features, so we did not want to disrupt that. At the same time, we needed to upgrade the frustrating back-end experience, look for broken templates, and find optimizations in content and media along the way.   

An underperforming API (which functions like an information pipeline to move content from one part of the site to another) and bloated data/code resulted in sluggish site performance and slow content updates/deployments. If the Visit California team wanted to change a single sentence on the site, pushing it live took well over an hour, sometimes longer — and often the build failed. Poorly optimized images slowed the site down even further, especially for the mobile visitors who make up the majority of site traffic. 

They were in dire need of a decoupled site connection overhaul so they could: 

Oomph started by looking under the hood — or, in this case, under the APIs. While APIs are supposed to make sites perform better, an outdated API was at the root of Visit California’s problem. Over the course of the project, Oomph integrated a new API, optimized images, and corrected bottlenecks across the site to make updates a breeze.

Putting Visit California in the Fast Lane

Implemented a New API

Visit California needed an API that could more quickly move data from the back end to the front. Two previous clients shared Visit California’s back-end architecture but used a modern JSON API Drupal module successfully. Switching from the GraphQL module to JSON API on the back end streamlined the amount of data, resulting in the team updating content or code in minutes instead of hours or days.

Streamlined Data During Deployments

On the front end, a Gatsby Source GraphQL plugin contributed to the issue by pulling and refreshing all data from the entire system with each content update. Oomph replaced the faulty plugin, which had known limitations and lacked support, with the Gatsby Source Drupal plugin.  On the back end, the Gatsby Integration module was configured to work with JSON API to provide incremental builds — a process that pulls only updated content for faster deployments.

Fixed Image Processing Bottlenecks

Because we were already in the code, both teams agreed this was a great opportunity to identify improvements to boost page performance. We found that image processing was a drag — the site previously processed images during deployment rather than processing them ahead of time on the back-end. Oomph used the JSON API Image Styles module to create image derivatives (copies) in different sizes, ultimately decreasing build times. 

Lightened the Load on the Back-End

As Oomph configured the new architecture, we scoured the site for other opportunities to reduce cruft. Additional improvements included removing deprecated code and rewriting code responsible for creating front-end pages, eliminating static queries running thousands of times during page creation. We also resized large images and configured their Drupal site to set sizing guardrails for photos their team may add in the future.

Home page weight before and after:

Visualizing the improvements to loading speed:

Core Web Vitals Improvements:

Exploring the Golden State, One Story at a Time

Once Oomph was done, the Visit California site looked the same, but the load times were significantly faster, making the site more easily accessible to users. By devising a strategy to pull the same data using completely different methods, Oomph created a streamlined deployment process that was night and day for the Visit California team. 

The massive initiative involved 75,000 lines of code, 23 front-end templates, and plenty of collaboration, but the results were worth it: a noticeably faster site, a markedly less frustrating authoring experience, and page performance that would make any Californian proud.

Custom Tools Leveraging Site Factory

A key goal was being able to quickly provision sites to new or existing agencies. Using Drupal 9 (and updated to Drupal 10) and Acquia’s Site Factory, we gave the state the ability to stand up a new site in just minutes. Batch commands create the site and add it to necessary syndication services; authors can then log in and start creating their own content.

We also created a set of custom tools for the state agencies, to facilitate content migration and distribution. An asynchronous hub-and-spoke syndication system allows sites to share content in a hierarchical manner (from parent to child sites), while a migration helper scrapes existing sites to ensure content is properly migrated from a database source.

Introducing Quahog: A RI.gov Design System

For organizations needing agility and efficiency, composable technology makes it easier to quickly adapt digital platforms as needs and conditions change. We focused on building a comprehensive, component-based visual design system using a strategy of common typography, predefined color themes and built-in user preferences to reinforce accessibility and inclusivity.

The Purpose of the Design System

The new, bespoke design system had to support four key factors: accessibility, user preferences, variation within a family of themes, and speedy performance.

Efficient and Effective Paths to Communication

The first sites to launch on the new system, including covid.ri.gov, went live four and a half months after the first line of code was written. A total of 15 new sites were launched within just 8 months, all showing a 3-4x improvement in speed and performance compared with previous versions.

Every site now meets accessibility guidelines when authors adhere to training and best practices, with Lighthouse accessibility and best practice scores consistently above 95%. This means the content is available to a larger, more diverse audience. In addition, a WAF/CDN provider increases content delivery speeds and prevents downtime or slowdowns due to attacks or event-driven traffic spikes.

State agencies have been universally pleased with the new system, especially because it provides authors with an improved framework for content creation. By working with a finite set of tested design patterns, authors can visualize, preview, and deploy timely and consistent content more efficiently and effectively.

While One Percent for America (OPA) had an admirable goal of helping eligible immigrants become U.S. citizens, the project faced a major stumbling block. Many immigrants had already been misled by various lending institutions, payday loans, or high-interest credit cards. As a result, the OPA platform would need a sense of trustworthiness and authority to shine through.

The platform also had to handle a broad array of tasks through a complex set of workflows, backstops, and software integrations. These tasks included delivering content, signing up users, verifying eligibility, connecting to financial institutions, managing loan data and investment balances, and electronically sending funds to U.S. Citizenship and Immigration Services.

Given the challenges, our work began with a month-long discovery process, probing deeper into the audience, competitive landscape, customer journeys, and technological requirements for the platform. Here’s what we learned.

The Borrower Experience

Among those deep in the citizenship process and close to finishing the paperwork, many are simply waiting to have the funds to conclude their journey. For them, we designed as simple a workflow as possible to create an account, pass a security check, and apply for a loan.

Other users who are just starting the process need to understand whether they’re eligible for citizenship and what the process entails. We knew this would require smart, in-depth content to answer their questions and provide guidance — which was also a crucial component in earning their trust. Giving away genuinely helpful information, combined with carefully chosen language and photography, helped lend authenticity to OPA’s stated mission.

The Investor Experience

OPA sought to crowdfund capital from small investors, not institutions, creating a community-led funding source that could scale to meet borrowers’ needs. A key innovation is that funders can choose between two options: making tax-deductible donations or short-term loans.

If an investor makes a loan, at the end of the term they can decide to reinvest for another term, turn the money into a donation, or withdraw the funds. To reinforce the circular nature of the platform, we designed the experience so that borrowers could become investors themselves. The platform makes it easy for borrowers to change their intent and access different tools. Maturity dates are prominently displayed alongside “Lend Again” and “Donate” actions. Testimonials from borrowers on the dashboard reinforce the kinds of people who are helped by an investment.

The Mobile Experience

Our research made it clear the mobile experience had to be best in class, as many users would either prefer using a phone or didn’t have regular access to a tablet or computer. But, that didn’t mean creating a mobile app in addition to a desktop website. Instead, by designing a universal web app, we built a more robust experience — more powerful than most mobile apps — that can be used anywhere, on any device.

However, tasks like signing up for an account or applying for a loan need to be as easy on a mobile device as on a desktop. Key UX elements like step-by-step workflows, large touch targets, generous spacing on form fields, soft colors, and easy-to-read fonts produced a highly user-friendly interface.

Together with our technology partners, Craftsman, Motionpoint, and Platform.sh, we built an innovative digital platform that meets its users exactly where they are, from both a technological and cultural standpoint.

This groundbreaking work earned us a Gold Medal from the inaugural 2022 Anthem Awards, in the Innovation in Human and Civil Rights category. The award recognizes new techniques and services that advance communities and boost contributory funds.

In our ongoing partnership with OPA, Oomph will continue working to expand the business model with new features. We’re proud to have helped build this impactful resource to support the community of new Americans.

Open Source the Museum’s Entire Collection

Behind the Museum’s initiative to re-platform the website from a closed system to an open source system like Drupal 8 was another, perhaps even larger, initiative: a plan to “open source” the museum’s entire collection. They will bring all 100,000 objects online (they have a little over 13,000 available prior to launch, a mere 13%) and use a Creative Commons license system that allows visitors to download and repurpose high-resolution images whenever the objects are in the public domain. This was the heart of the revolution upon which the RISD Museum was about to embark.

An Evolving Partnership

Site visit patterns have seen significant improvement — sessions per user and pages per session have increased while bounce rate has decreased. Thanks are due in part to the new hosting environment with Acquia, which has provided hefty speed increases and stability — page load times have decreased, server response time is significantly less, and page download time is far less as well.

As the RISD Museum grows their online collection even further, we have identified a backlog of ideas that we’d love to address, from a more fully featured search, an integrated audio guide, and a more open and collaborative way for users to share back what they have done with the museum’s assets. A new Drupal 8 (now 10) implementation gives the museum plenty of room to grow virtually. The collaborative relationship between Oomph and the RISD Museum is only beginning.