THE CHALLENGE

The Challenge

Keene State College (KSC), a liberal arts institution within the University System of New Hampshire, needed a modern, user-friendly website that aligned with its mission while effectively serving multiple audiences.

Over time, the existing site had grown into an overwhelming digital ecosystem, filled with complex navigation, disjointed content, and inconsistent branding. To better serve students and stakeholders, KSC needed to:

  • Prioritize prospective students while maintaining relevance for parents, faculty, and alumni.
  • Simplify content structure to help users quickly find what they need.
  • Modernize the design and user experience while staying true to the college’s brand.
  • Improve accessibility and performance to ensure a seamless experience across all devices.

KSC partnered with Oomph to create a scalable, audience-first digital experience that supports recruitment, engagement, and long-term adaptability.


OUR APPROACH

We focused on eliminating friction and enhancing engagement through a user-first strategy, modern information architecture, and a flexible, scalable design system.

Understanding the Audience & Challenges

Our discovery process included stakeholder workshops, user journey mapping, and content analysis to identify key roadblocks. We uncovered:

  • Difficult navigation made it hard for prospective students to find admissions and academic program details.
  • Multiple audiences competing for visibility resulted in a cluttered, confusing user experience.
  • Inconsistent branding and outdated UI weakened the college’s online presence and first impressions.

By clearly defining what success looked like and identifying areas of improvement, we laid the foundation for a streamlined, student-centric digital experience.

Defining the Strategy & Roadmap

With a deep understanding of user needs, we developed a strategy focused on engagement, clarity, and accessibility.

  • Navigation designed for prospective students while keeping secondary audiences accessible.
  • A scalable mega menu that simplified content discovery without overwhelming users.
  • A brand refresh of the digital identity that modernized KSC’s online presence while maintaining its authenticity.
  • WCAG 2.1 Level AA accessibility compliance to ensure an inclusive experience for all users.

This strategy ensured that KSC’s website would be functional, engaging, and built to support student recruitment.

Executing the Vision

To bring the strategy to life, we developed a modern design system with a flexible, component-driven architecture that simplifies content management and improves the user experience.

  • Audience-first navigation & mega menu – Prospective students can quickly find key admissions and academic information, while faculty, parents, and alumni have dedicated sections tailored to their needs.
  • Scalable component library – A structured yet flexible design system enables KSC teams to easily update and manage content while maintaining a cohesive visual identity.
  • Optimized for mobile & accessibility – A fully responsive, WCAG-compliant design ensures a seamless experience across all devices.

By creating a well-structured, intuitive content ecosystem, KSC now has a digital experience that is easy to manage and designed for long-term adaptability.

This team brings creativity and structure to projects. Decisions are based on data and reports, but they include a connection to heart and real world users. They bring in subject matter experts at the appropriate time but never lose site of the big picture.”

DIRECTOR OF MARKETING, Keene State College

THE RESULTS

A Student-Centric Digital Experience

The new Keene State College website now provides:

  • A clear, structured experience for prospective students – Admissions, academics, and student life content is now easier to find and explore.
  • A modernized digital identity – A refreshed brand and UI create a welcoming, engaging first impression.
  • Seamless navigation for multiple audiences – While prospective students remain the priority, faculty, alumni, and parents still have dedicated access points.
  • An accessible, scalable, and future-proof platform – Designed to support long-term growth, engagement, and institutional goals.

A Digital Experience That Grows With Its Community

Keene State’s new site is more than just a redesign—it’s a long-term investment in student engagement, accessibility, and institutional identity. By focusing on audience needs, structured content, and a scalable design system, KSC now has a future-ready digital presence that enhances recruitment, supports students, and strengthens the college community.

Is Your Higher Ed Website Ready for the Next Generation of Students?

If your institution is struggling with outdated content, complex navigation, or disconnected user experiences, a strategic digital approach can create clarity and engagement.

Let’s talk about how Oomph can help your institution stand out in an increasingly competitive higher ed landscape.

From code to launch

4.5 mos.

Sites launched within a year

25

Performance improvement

350 %

THE BRIEF

A Fractured System

With a network of websites mired in old, outdated platforms, Rhode Island was already struggling to serve the communication needs of government agencies and their constituents. And then the pandemic hit.

COVID accelerated the demand for better, faster communication and greater efficiency amid the rapidly changing pandemic. It also spotlighted an opportunity to create a new centralized information hub. What the government needed was a single, cohesive design system that would allow departments to quickly publish and manage their own content, leverage a common and accessible design language, and use a central notification system to push shared content across multiple sites.

With timely, coordinated news and notifications plus a visually unified set of websites, a new design system could turn the state’s fragmented digital network into a trusted resource, especially in a time of crisis.


THE APPROACH

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.

Multiple color themes

Site authors choose from five color themes, each supporting light and dark mode viewing. Every theme was rigorously tested to conform with WCAG AA (and sometimes AAA), with each theme based on a palette of 27 colors (including grays) and 12 transparent colors.

User preferences

Site visitors can toggle between light or dark mode or use their own system preference, along with adjusting font sizes, line height, word spacing, and default language.


Mobile first

Knowing that many site visitors will be on mobile devices, each design component treats the mobile experience as a first-class counterpart to desktop.

Examples: The section menu sticks to the left side of the view port for easy access within sections; Downloads are clearly labelled with file type and human-readable file sizes in case someone has an unreliable network connection; galleries appear on mobile with any text labels stacked underneath and support swipe gestures, while the desktop version layers text over images and supports keyboard navigation.

High Accessibility

Every design pattern is accessible for screen readers and mobile devices. Color contrast, keyboard navigation, semantic labeling, and alt text enforcement all contribute to a highly accessible site. Extra labels and help text have been added to add context to actions, while also following best practices for use of ARIA attributes.


Performance aware

Each page is given a performance budget, so design components are built as lightly as possible, using the least amount of code and relying on the smallest visual asset file sizes possible.


THE RESULTS

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.

We were always impressed with the Oomph team’s breadth of technical knowledge and welcomed their UX expertise, however, what stood out the most to me was the great synergy that our team developed. All team members were committed to a common goal to create an exceptional, citizen-centered resource that would go above and beyond the technical and design expectations of both agencies and residents .

ROBERT MARTIN ETSS Web Services Manager, State of Rhode Island

The Brief

Simplifying Complexity without Losing Power

The biggest challenge as Oomph acclimated to the tax-collection world was rapidly learning enough about the complex regulations and requirements of municipalities in the industry to provide sound advice and recommendations. We started by examining their systems — the workflow of documenting and planning new product features and adding them to the roadmap, of designing the UX of those features, and of leveraging their in-house design system to build and support those features. 

RSI’s main product, GOVERNMENT PREMIER, are highly customizable and configurable. Every single screen has options that would display depending on the authenticated user’s role and privileges and the tenant’s own back-office processes. User stories included many requirements based on permissions and configuration. This added challenges when imagining potential interface solutions that need to accommodate growth in multiple directions. 

Oomph’s purposefully used our outside perspective to ask many questions about GOVERNMENT PREMIER’s processes. We took our years of experience designing interfaces for a wide range of consumers and applied them here. In this typically slow-to-evolve space, a user-focused experience coupled with GOVERNMENT PREMIER’s technical expertise would revolutionize tax collection as a friendlier, more intuitive, and highly customizable experience.


Our Approach

Maintaining Consistency in a Rapidly Evolving Product

Our findings and recommendations indicated previous UX teams did not create a rulebook that governed their decisions, and so, the system lacked consistency. Quality Assurance reviews would suffer from this lack of governance as well. Therefore, the first thing we did was to establish rules to design by: 

  • Use Storybook as a source of truth, and expand atomic elements with larger patterns (called molecules in Atomic-design-speak).
  • Enforce a global design token system for colors, typography, stateful user feedback, and spacing.
  • Use Material UI (MUI) from Google as our foundation. This was a previous decision that was not fully enforced, which led elements to become over-engineered or duplicated. This became known as the “Build on the shoulders of giants” rule.
  • Destructive actions (like Delete or Cancel) are placed to the left of creative actions, like “Save” or “Next.”
  • Every screen has one primary focus. Complex screens need a focal point for the task and user’s need to feel confident they are using the interface correctly. When long forms are required, break them down into smaller chunks. Users can save their progress and concentrate on smaller groups of tasks. Color should be used to focus users on the most important actions, and to alert them when data errors need to be addressed. 
Entity Summary screen Before
Entity Summary screen After

Ultimately, these rules are flexible and have served well as a starting point. Any new screen can adhere to these rules, and when we find cases where these rules are preventing users from completing their tasks or are frequently confusing users, we revisit them to make updates or clarifications. Oomph has continued to consult on new screen design and UX workflows after more than a year of working together.

A sample of components from the GOVERNMENT PREMIER application

The Results

Setting a New North Star to Align Our Compasses

To continue to move the product forward without increasing UX and technical debt, the teams needed a well-defined shared understanding for the user experience. Internal teams were moving forward, but not always in the same direction. Within the first month, our teams agreed upon a playbook and then continued to expand it during our engagement. We met twice weekly with product owners across the company and became a sought-after resource when teams were planning new features.

A sample of screens from the GOVERNMENT PREMIER application

During our time together, we have celebrated these outcomes:

  • Oomph consolidated the color palette from 55 colors to just 24 without losing any necessary distinctions. All colors are contrast conformant with WCAG 2.2 Level AA as a baseline.
  • Colors, typographic sizes, spacing values, form elements, buttons, icons, and shadows have all been converted to design tokens.
  • Figma has been used as the design system record, while Storybook has been strengthened and updated to smartly leverage Material UI. The success of Storybook is largely due to its inclusion as a GOVERNMENT PREMIER project dependency — it has to be used and the latest version is often pinned as the product evolves.
  • An internal Design Manager at RSI was established as someone to lead the engineering team and maintain quality oversight as it pertains to the design system.
  • Oomph completed designs for 15 features for GOVERNMENT PREMIER, many of which involve designs for three or more screens or modals. Oomph also designed workflows for over a dozen Online Services workflows with a heavier emphasis on mobile-responsive solutions.

As Oomph moves into our second year collaborating with the GOVERNMENT PREMIER teams, we plan to fully investigate user personas on both the admin and taxpayer side of the platform, add more context and governance to the project designs, and provide quality assurance feedback on the working application. We value our partnership with this unique team of experts and look forward to continuing the tax software revolution.


THE BRIEF

When Seraphic Group’s founder, Zach Bush, MD, saw patterns in people’s health linked directly to problems with the food supply, he became an advocate for regenerative farming. As a potential solution to deteriorating public health, global warming, and even poverty, regenerative farming offers benefits for local and global communities. But, getting farmers to switch to it from conventional techniques is a challenge.

Regenerative farming is good for the environment and the economy in the long run—but, short term, it’s more work and more expensive than chemical-heavy, conventional farming. Add in that the appropriate techniques depend on variables like geography, soil type, and climate, and it’s a difficult thing for people to figure out on their own.

Their platform idea, Atlus∗U, needed to not only educate farmers about regenerative agriculture, but also motivate them to try it, and stick with it, for the long haul.


THE APPROACH

Understanding the Educational Purpose

As we noted in an article on different types of online learning platforms, a platform’s educational purpose determines the tools and features that will best achieve its objectives. Atlus∗U spans two purpose categories, Student Stakes Learning and Broad Stakes Learning, which means that effective education is crucial for both the learners and their larger communities.

To that end, our design vision focused heavily on content comprehension, along with keeping users motivated and engaged. Our framework included educational content and tools, accountability systems, and community features. A key component was personal stories: sharing the experiences of farmers who had successfully converted their businesses to regenerative farming and could help and encourage others to do the same.

Above all, Seraphic wanted Atlus∗U to grow and evolve over time as a kind of living guide to regenerative farming. While most online learning platforms stop when the coursework ends (think of a CPR course, where you get a certificate and you’re done), for this platform, the end of the coursework was just the beginning of the journey.


THE RESULTS

In our design, the whole community drives the learning experience, not just the teachers and coursework. It’s easy for students to connect with others who are taking the same courses, while members-only forums provide a place for productive networking, questions, stories, and support. Some forums are attached to specific lessons, so that the dialogue isn’t just between teachers and students; all members, including alumni, can participate and share their learnings on a given topic.

Another component, the accountability partner system, was crucial for achieving Seraphic’s goal of driving lasting change. Research shows that publicly sharing a goal gives people a 65% chance of success, while reporting to a specific accountability partner boosts that chance to 95%.

Finally, our learning tools were designed to enhance both content comprehension and retention. Course videos were a key feature, designed not just for the course, but for reference over time. Students have the ability to bookmark videos and attach notes to specific sections, letting them revisit important info whenever they need it.


THE IMPACT

While online learning has been around for a long time, recent advancements in design and functionality make it possible for learning platforms to have a transformative impact on individuals and across society.

In the case of Atlus∗U, it’s not just the coursework that drives users’ learning; an entire community is mobilized to help you succeed. With a focus on collaborative, lifelong learning, our design brings together farmers from around the world to improve their business, grow healthier food, and protect our world.

Need help building an effective online learning platform? Let’s talk about your goals and how to achieve them.


THE BRIEF

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.


THE APPROACH

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.


THE RESULTS

Together with our technology partners, CraftsmanMotionpoint, 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.


The Brief

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:

  • Successfully moving the site from Drupal 7 to the latest release of Drupal
  • Auditing and updating IHME’s extensive set of features to meet its authoring needs while staying within budget
  • Translating the designs and style guide produced by the IHME team into accessible digital pages
  • Enhancing site security by overhauling security endpoints, including an integration with SSO provider OneLogin

The Approach

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.

You all are a fantastic team — professional yet personal; dedicated but not stressed; efficient, well-planned, and organized. Thank you so much and we look forward to more projects together in the future!

CHRIS ODELL Senior Product Manager: Digital Experience, University of Washington

The Results

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.


The Brief

Powering Design With User Feedback

MLH exists to help Massachusetts residents find information to solve common legal issues, like securing public benefits or fighting an eviction. To ensure every aspect of the site was grounded in the audiences’ needs, MLH wanted to incorporate feedback during the discovery and design phases from real people who fit MLH’s primary and secondary audience profiles.  

By performing a thorough discovery process — including working group interviews, visitor interviews, cohort site analysis, and wireframe and prototype testing — Oomph was able to create a successful site design dedicated to the needs of visitors.


The Approach

Helping the Audience by Understanding Them 

MLH shares insights on heavy topics ranging from housing and homelessness to money, debt, and immigration. The site contains sensitive information that could change their visitors’ lives; by connecting them to domestic violence help or resources to get their children back, for example. When Oomph first jumped into the project, our main goal was to step into the shoes of their user groups to better understand their needs when they seek legal information.

The main audience of MLH is Massachusetts residents who are primarily low-income and may not speak English as a first language. They use the site to become informed about legal issues they’re facing quickly and efficiently. As one visitor stated:

 “I’m coming here because I have a problem. I want to know, where’s the search? What can I do here? What can I not do? Don’t waste my time making me read [fluff]…”

To meet this need, the MLH team provides information in plain English at a fourth to sixth-grade reading level, rather than using complicated lawyer jargon, which makes it accessible to a wider group of people. Additionally, many resources have been professionally translated into other languages, such as Spanish.

The secondary audience that visits the site is those who help the primary audience, such as social service providers, legal aid lawyers, and legal librarians. Oomph had to walk a fine line by getting feedback from the secondary audience to help inform information about the primary audience; however, our main goal was to ensure that low-income and non-English-speaking people could find the answers they needed.

Gaining the Audience’s Trust with Thoughtful Design Details

We learned that many visitors found the MLH website by searching Google with their questions. Many primary audience members would visit the site on their mobile phones, perhaps even listening to its content with their text-to-speech tool. This increased the importance of a mobile-first design so the pages loaded quickly, the information was clear, and the experience made sense for mobile browsing.

A Modernized Design

The site’s look was outdated, making some visitors feel that it either lacked credibility or didn’t contain the latest legal rules and laws (even though it’s been actively maintained and added to for the past 15+ years!). For the Oomph team, the final designs had to walk a fine line between being authoritative, trustworthy, and comforting. To achieve this, we retained the blue color palette but created slightly softer tones to help create a calming aesthetic.

Each main topic has an associated icon as well as subtopics to support clarity

Our team also limited the amount of photography on the site but ensured that any photos we used represented the diverse groups MLH serves. Icons became a tool to guide the visitor through different topics; regardless of the visitor’s language, the icon could help them understand what information may be within that particular topic.

MLH has also accumulated a lot of content over the years. To help organize its search and topic organization feature, we incorporated content filters according to the information type: articles, how-tos, e-books, and videos. Each category has its own icon, and each icon is represented by a color. This helps unify the search based on the type of content the visitor is seeking.

An overview of filter types across the site

Color Contrast and Accessibility

From the start, MLH made it very clear that their new designs should comply with both 508 and WCAG 2.1 guidelines — ideally conforming to the highest level of contrast, level AAA. As Oomph created the color palette, we were careful to use only high-contrast colors and document how to use them in a system to ensure that the palette satisfied accessibility guidelines. 

An contrast grid, which documents color contrast pairs and the level of conformance they achieve

Supporting the Content With Tools

MLH had several existing tools to assist in digesting content. During our discovery phase, we validated the need for these tools and upgraded them. For example, on the content pages, there are options to print, share, listen to the content, and even switch the language as the visitor lands on the page.

Within the main navigation menu, the design included a “Quick Exit” button. This supports visitors who need to abandon the page when, for example, a domestic violence survivor’s abuser re-entered the room.

We cultivated a passion for this feature through our research and have written an article detailing our best practices for implementing a quick exit button. Additionally, we have created a Drupal Module for this feature so that more people can implement this important tool for sites with sensitive content.

Findability of Content Through the Main Menu Navigation

On a larger scale, the primary and secondary navigation menus needed an upgrade. As it stood, the main categories were wall-to-wall across the desktop, and it was hard to determine where a visitor needed to go. The secondary navigation menu read like a table of contents in a chapter book and didn’t allow the visitor to return to other categories. 

We solved for this by creating a survey to test a proposed navigation structure and revised the information architecture (IA). This included a new top menu that supported every step of our primary audience’s journey. We also created a level of navigation that directed visitors to the information they were looking for, no matter how they entered the site. 

Main topics are divided into subtopics to support comprehension and scannability.

Search

For search, we used a multi-filter approach which allows visitors to search both by topic and by content type. This filtering allowed them to find questions that might belong to multiple categories, and to narrow down content to the types they are willing to review.

The search page allows the visitor to filter by information type and browse by legal topic

Proactive vs. Reactive Enhancements

Analytics and user interview results showed that most visitors start their journey on either the homepage or pages that are three or more levels down the navigation. Many also reach the site via a specific Google search. While it is likely they found what they needed, they may not be aware of other information that can help them. To mitigate the risk of bouncing away from the website, we created a “Viewers also reviewed…” component on answer pages that showcased related content more naturally.

Repeating Help Footer

Above the footer, we created a “safety net” to help visitors who have browsed the site for a long time but have not found what they are looking for. If they reached the end of the page, this footer would direct them to more content that may hold their answers.

Previously Viewed

We added a “Previously Viewed” section at the bottom of content pages to remind visitors of the content they have already reviewed. This reduces the burden on the visitor when they ask themselves, “I think I’ve seen that already, but I can’t remember where I saw it.”


The Results

A Modern, Helpful Website Design

Through prototype testing with our first design mock-up with real visitors, the participants individually determined that the new site’s design and content organization was easy to navigate, gave them a trustworthy impression, and looked appealing. Today, the MLH website is live with a fresh Oomph design. We hope the structure and design will continue to not only keep visitors on the site longer but also help those visitors find the legal answers that they need.

Have a project that requires a human-first, empathetic approach? Consider talking to Oomph about incorporating user feedback into a user experience-focused design project for your next website refresh.


THE CHALLENGE

The Challenge

Fidelity Investments manages one of the most extensive content ecosystems in financial services, producing a constant stream of insights, trend analyses, and investment strategies. However, its design team faced a critical challenge — their design system felt restrictive rather than empowering.

While Fidelity’s internal team was updating brand standards, they struggled to apply them strategically within their digital experience. The design system supported incremental changes but lacked the flexibility to evolve with new ways of presenting content. Designers felt stuck in familiar patterns, limiting opportunities to rethink layouts, improve content discovery, and enhance engagement.

To break free from these constraints, Fidelity brought in Oomph to infuse fresh thinking, introduce new editorial layout strategies, and expand the capabilities of their design system.


OUR APPROACH

Oomph worked inside Fidelity’s existing design system, bringing an outside perspective to challenge old assumptions and push the boundaries of their brand standards.

Reimagining Editorial Storytelling

With Fidelity generating massive amounts of financial content, our team explored new ways to organize and present information. We conducted a cohort analysis of leading editorial experiences across industries, studying how different platforms arranged related content, structured topic-based storytelling, and guided users through complex financial narratives.

We then worked within Fidelity’s Figma files, prototyping new layout variations that:

  • Allowed for dynamic grouping of content by topic, trend, or investor interest.
  • Introduced larger, more structured content modules to replace scattered individual components.
  • Created scalable patterns that could adapt to different content types and investment themes.

Expanding the Design System Beyond Incremental Updates

While Fidelity’s internal team was busy refining brand alignment, we helped them move beyond small tweaks to explore new possibilities. Our role was to:

  • Push the boundaries of what was possible within their existing system.
  • Experiment with layouts that weren’t explicitly outlined in the brand standards.
  • Provide fresh external perspectives on how the brand could evolve digitally.

Collaboration & Seamless Handoff

We worked side by side with Fidelity’s internal team, ensuring every new layout and component fit within their development and governance structure. While Oomph focused on strategy and design, Fidelity’s team took the lead on integrating new components into their system and coding them into production.

Our handoff process included:

  • Detailed design annotations and functionality breakdowns.
  • Guidance on flexibility—such as how components could adapt to different use cases.
  • Clear expectations for future scalability and content governance.

By the end of the engagement, Fidelity had not only expanded their design system but also re-energized their creative thinking.


THE RESULTS

A More Flexible, Scalable Design System

Oomph helped Fidelity’s design team break free from rigid design patterns and accelerate innovation by delivering:

  • A reimagined editorial content strategy that improves engagement and storytelling.
  • Expanded design system components that allow for more dynamic content grouping.
  • A faster, more creative design workflow that helps Fidelity scale design updates with confidence.

By combining fresh creativity with structured execution, Fidelity was able to move forward with clarity, confidence, and a more powerful digital experience.

Helping Enterprises Scale Design Without Sacrificing Innovation

For large enterprises, design systems should accelerate progress—not slow it down. If your team is struggling with applying brand standards, creating scalable content models, or evolving your digital experience, let’s talk.


THE BRIEF

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: 

  • Reduce time and effort spent on updating site content
  • Implement a more reliable build process decreasing frustration and delays
  • Create a better, faster browsing experience for users

THE APPROACH

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.

Avg. full build time

64 min

Unexplained failure rate Before

52 %

Avg. incremental build time

42 min

Unexplained failure rate After

0 %

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:

Page WeightBeforeAfter% Change
Desktop25.41 MB3.61 MBDown 85.79%
Mobile12.07 MB3.62 MBDown 70.01%

Visualizing the improvements to loading speed:

Core Web Vitals Improvements:


THE RESULTS

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.

Have you ever waved to someone and they didn’t wave back? Awkward, right? But are you sure they could see you and recognize you? Was the sun in their eyes? Were you too far away? Were you wearing a face mask?

There is a similar situation with your branding on your website. On a smaller mobile device, is your logo legible, or are the words shrunk down and too small? Are the colors high-contrast enough to be seen on a sunny day? Is there consistency between your social media avatar and your website, between your print materials and your digital advertising? Can customers recognize your brand wherever it might be displayed? 

For your brand to be the most successful, it takes a little extra effort to think through all of these possible scenarios. But it’s worth it, or your customers will give you the cold shoulder, whether they intended to or not. 

This extra bit of strategy and planning around your brand is called “Responsive Branding.” Just like responsive design, where your website’s content adapts to the device a customer is using, responsive branding adapts to the device, the medium, and the platform while also considering situations like low light, high light, animated, or static.

Oomph works with organizations across industries to build or refresh responsive brands that serve and delight their users across the full spectrum of digital experiences. Here’s what we’ve learned about responsive branding and our tips for creating one that works. 

What Is Responsive Branding?

Let’s first start with what you’ve probably already heard — responsive web design. Coined by Ethan Marcotte in 2010, the “responsive” part came to mean that a web design responded to the size of the screen, from a phone to a tablet to a widescreen desktop monitor. 

Then came responsive logos. These take the elements of the main logo and adapt them for different sizes and use cases. A logo might have too much detail to be legible as a small social media icon, for example.

Responsive Branding blends these ideas and looks at the design system holistically. A successful responsive brand may include:

Why Responsive Branding Matters

Your business makes a huge investment in building a brand that stands apart from the competition while communicating your personality and value. You are building trust with customers through every interaction. When your brand works well in one situation but not another, it erodes trust. 

A strong brand will be clear, understandable, and memorable for all users in all situations. Whether you have physical locations or digital ones, the brand works with the same consistent strength and message every time.

When you invest in a responsive brand, you: 

3 Elements of a Responsive Brand

A responsive brand is more than a shape-shifting logo. The most responsive brands make strategic use of these three elements: 

1. Logo

Your logo is the first piece of your brand that customers will recognize. Using a single-state logo can compromise that impression — a logo that looks great at a large scale is often unintelligible as a small icon. 

Responsive logo designs help ensure your logomark is clear and impactful no matter where you apply it. Beyond the size considerations we mentioned, it should include different formats like horizontal, vertical, and square to support many different digital, social, and print platforms. 

Some other techniques we use to create scalable logos include:

Oomph Tip: It’s okay to take several design rounds to get it right. Iterating helps uncover where you’ll use the logo, what it must convey, and which colors and iconography can best support that purpose. We went through several design iterations with our client AskRI before settling on a bold, simple font and clear chat bubble icon that plays off the state of Rhode Island’s distinctive shape. 

Color Palette

A responsive color palette is less about picking complementary shades on a color wheel and more about creating an experience that works in all situations. People with visual impairments and people on low-lit smartphones, for example, rely on high-contrast color combinations to engage with your brand. 

Start by following the Web Content Accessibility Guidelines (WCAG), which include specific recommendations for color contrast ratios. Colors that meet that standard include light text with dark backgrounds, or vice versa. 

Depending on where your brand appears, you may need to adjust your color palette for different settings. For example, your full-color logo might look stunning against a solid white background but becomes illegible against bright or dark colors. A single color logo is useful for some digital use cases like Windows web icons and iOS Pinned Tabs. In non-digital spaces, single color logos are great when color printing isn’t an option, such as with engraving or embroidery. Build out alternate color variations where necessary to make sure your palette works with you – not against you – across your materials. 

Oomph Tip: If your brand palette is already set in stone, try playing with the brightness or saturation of the values to meet recommendations. Often your brand colors have a little wiggle room when combinations are already close to passing corformance ratios. Check out our article about this issue for more pointers.

Typography and Layouts

Responsiveness is also important to consider when structuring web pages or marketing collateral. The most legible layouts will incorporate adaptable typography with clear contrast and simple scaling. 

When selecting a font, be sure to think about: 

Oomph Tip: Don’t go it alone. Tools like Typescale and Material UI’s The Type System can simplify typography selection by recommending font sets that meet usability and scalability requirements. And the U.S. Design System has some suggestions as to which typefaces are the most accessible.

How To Get Started With Responsive Branding

To create a responsive brand that resonates, you first have to identify what elements you need and why you need them. That second part is your secret sauce: finding a balance between a design your users can recognize and one that inspires them. 

A design audit can zero in on the needs of your brand and your audience, so you can create a responsive design system that meets both. Not sure where to start? Let’s talk.

In good times and bad, healthcare is deeply ingrained in our lives. From the beginning to the end, our providers monitor our growth, treat our illnesses and injuries, and keep us as healthy as possible.

But healthcare organizations can no longer take that provider-patient dynamic for granted. In the wake of the COVID-19 pandemic, more patients than ever distrust the healthcare system. The healthcare industry is also working to recover from the $206.2 billion hit it took in 2020, driven largely by forced delays in preventative care and elective surgeries.

As the healthcare sector finds its footing post-COVID, providers have a tremendous opportunity to build stronger patient relationships than ever before. In 2022, 83% of healthcare consumers said they wanted to make their health and wellness a priority again, while another 37% said they wanted to be more engaged with their healthcare. So where should providers start? With a laser focus on user experience (UX).

As telehealth and retail disrupters like CVS and Amazon gain momentum, it’s easier than ever for patients to get a flu shot or a test for strep throat – a convenience that patients love. These healthcare disruptors also have a leg up in the virtual world, since they’re powered by the modern digital platforms that patients have come to expect.

To find a way forward, traditional healthcare organizations need to focus on creating a strong UX and digital presence that can both compete with disruptors and satisfy the regulatory requirements unique to healthcare (we’re looking at you, HIPAA).

Why Your Patients Expect Better UX

Once upon a time, patients believed that doctors knew best. They went to the healthcare provider down the street and trusted that the provider had the expertise to resolve their health woes.

In 2023, patients are informed consumers. 60% of patients research online before choosing a provider, many of whom consult the healthcare organization’s website. If this isn’t reason enough to revamp your digital footprint, 40% of patients also say they prefer to book appointments online.

Together, these statistics illustrate a growing demand among patients for more robust, patient-friendly digital experiences. The issue is that this is exactly what healthcare organizations have struggled to do for years. At Oomph, some of the most common challenges we see among healthcare brands include:

Yet there are exciting examples of innovation across the industry, too. Forward-thinkers like the Cleveland Clinic are proof that healthcare UX can and should be innovative — largely because better digital capabilities enhance the patient experience, fueling stronger relationships that benefit providers and the patients they serve.

Our healthcare team at Oomph works with providers of all sizes to uncover digital solutions that make sense for their size and structure, budget, and patient needs. Here, Oomph UI Designer Alyssa Varsanyi shares best practices they’ve developed in partnership with our healthcare clients.

Our 4 Healthcare UX Best Practices

1. Be Accessible and Inclusive

Accessibility is non-negotiable for any digital experience. It’s even more important for provider sites, which are likely serving people with a wide range of conditions — all of whom need and deserve complete and immediate access to healthcare.

To create a healthcare UX accessible to all, healthcare organizations should:

2. Create a Safe Space

In healthcare, protecting patient data is table stakes. To create a safe space, you have to think not just about patient confidentiality but also about building trust. A thoughtful digital environment with inclusive language can go a long way to helping patients feel seen, heard, and cared for.

Websites like Cedars-Sinai are a great example of how websites can be built around trust. Their platform exemplifies how language can be the foundation for a credible site, especially when paired with supportive modules like sources and testimonials.

To take the same approach to your site:

3. Make Navigation Easy

Many patients come to healthcare systems with an immediate need — a parent needs to find an open appointment NOW for their child’s pre-season sports physical, or a cooking enthusiast needs to locate an urgent care on a Sunday to patch up the new chopping-related cut on their hand.

In either scenario — and countless others that people face daily — it’s critical that patients can easily find the right information at the right time and in the right way.

To make this a reality, healthcare organizations should strive to:

As technical as these tactics are, don’t forget to show empathy, too. It is possible to show compassion online, like how Stanford Health poses the question, “What can we help you find?” Emotional asks like this can illustrate an organization’s genuine desire to be helpful to their patients.

4. Build Responsive Experiences

Healthcare needs don’t wait until patients are sitting in front of their computers. Think about an adult child peeking over their senior parent’s shoulder while they search for a specialist, or a new parent scrolling through their phone at midnight while cradling their sick baby.

Now imagine those people frantically pinching at the screen so they can read the entire text block or find the right button. Stressful, right?

Patients should be able to seamlessly access healthcare anytime anywhere, which means designs must be responsive. Keep in mind:

What does that look like in practice? Consider the Summit Health website. Its simple navigation makes it easy for patients to find what they’re looking for, while the responsive design enables patients to engage on the go.

Healthcare UX Is a Journey, Not a Destination

At Oomph, we’ve seen firsthand how these healthcare UX best practices transformed the patient experience of our many healthcare clients. Even still, it’s important to note that UX isn’t one-size-fits-all. A national network of hospitals may need a very different digital patient experience than an owner-operated group of general practice clinics.

So how do you start building a UX that works for you and your patients? Research and testing.

UX audits, user research, and usability testing are all keys to the lock that is an effective UX strategy. By identifying what’s working and what’s not, what your patients want and what they don’t, you can put your organization on an evidence-based path to world-class UX.

Interested in exploring ways to improve UX for your own patients? We’re here to help.