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.

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. 


The Brief

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:

  • Modernize the design and attract more web-savvy students to read answers to questions they didn’t know they should ask.
  • Reinforce trust by being open about the process and the real human professionals behind the answers.
  • Improve search, filtering, and findability by leading with topics first and guiding visitors to the types of questions that interest them most.
  • Mitigate and simplify complex authoring processes to empower the small editorial team to answer more questions, support responses with engaging media, and reduce staff frustration.

The Approach

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.

Human responses feel human

With the rise of AI and Google’s AI-generated search results, our design reinforced the humanity and empathy of GAA! by establishing a clear “Dear Alice” with a unique handwritten font and response from the author. When dealing with potentially sensitive and health-threatening answers, an authentic human voice is essential, and one that puts answers into context — is this thing I am asking about “normal”? What are the additional considerations I should know about? And so on. AI might give you one answer, but it won’t contain the context and nuance these anonymous human-generated questions require.

Unique Colors & Illustrations

Blue is strongly associated with Columbia Health and prevented the previous site from standing independently. Our design reduced focus on blue and shifted the site’s primary colors to maroon and yellow. Several other colors create wayfinding paths associated with answer topics. Scrolling the All Topics category page becomes a delightfully random color experience.

All color combinations adhere to WCAG 2.2 guidelines for Level AA, increasing the accessibility of this color-rich site for all visitors. 

A new set of illustrations curates a sense of inclusivity better than stock photos could. A wide variety of humans were chosen to represent the diversity of student populations. Little details, like the randomized person in the site’s footer, add a sense of surprise and delight to the entire browsing experience.

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:

  1. The editor’s name, the answer’s published date, and its revision date were moved from the bottom of an answer and brought to the top. This information helps establish credibility quickly before reading an entire answer
  2. A feedback feature was added to individual answers, giving the GAA! team real-time data about the responses but also giving new visitors a greater sense of social proof
  3. A “Cite this Response” feature makes cutting and pasting an MLA (Modern Language Association) General Format- or Chicago-style academic citation into research papers easy. Since answers are so well-researched, these citations propagate GAA! further into academic culture

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 Results

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!

The Drupal Association brought a new challenge to the Drupal community this past summer. At the beginning of May 2024, Dries Buytaert, the founder and leading visionary for the Drupal platform, announced an ambitious plan codenamed Starshot. The community rapidly came together around the concept and started planning how to make this vision of the future a reality, including Oomph.

What is Starshot/Drupal CMS?

Codename Starshot is now known as Drupal CMS. Drupal is a free, open-source content management system (CMS) where authors and developers build and maintain websites. Drupal has been around since 2001, and in the past, it was focused on being a developer-friendly platform that supports complex integrations and custom features.

Drupal CMS is a reimagining of Drupal for a wider market. Currently, Drupal successfully supports the complexities that governments, high-volume editorial sites, and membership organizations require. But, the barrier to entry for those that wanted to start with a small, simple site was too high. 

Drupal CMS is the community’s solution to drastically lower the barrier to entry by providing a new onboarding and page-building experience, recipes for common features, advanced SEO features, and “AI Agents” that assist authors with content migration and site-building acceleration. Dries challenged the community to start building towards a working prototype in less than 4 months, in time to demonstrate significant progress for the audience at DrupalCon Barcelona in mid-September.

The Contact Form Track

The Contact Form is an official recommended recipe. As the name suggests, its purpose is to provide a Recipe that installs the necessary modules and default content to support a useful, but simple, Contact Form. 

The primary user persona for Drupal CMS is a non-technical Marketer or Digital Strategist. Someone who wants to set up a simple website to promote themselves, a product, and/or a service. A Contact Form should start simple, but be ready for customization such as integrations with popular email newsletter services for exporting contacts and opting into receiving email. 

Research and Competitive Analysis

Drupal CMS aims to compete with juggernauts like WordPress and relative newcomers like SquareSpace, Wix, and Webflow. To create a Contact Form that could compete with these well-known CMSs, our first step was to do some competitive research.

We went in two directions for the competitive analysis (Figma whiteboard). First, we researched what kinds of experiences and default contact forms competitor CMSs provided. Second, we took stock of common Contact Form patterns, including those from well-known SAAS products. We wanted to see the kinds of fields that sales lead generation forms typically leveraged. With both of these initiatives, we learned a few things quickly: 

Our approach was starting to take shape. We internally documented our decisions and high-value MVP requirements and presented them to the advisory board for feedback. With that, we were off to create the start of our Contact Form recipe. 

Recipe and Future Phases

Phil Frilling started the Contact Form recipe, which is currently under peer review. The recipe is barebones for Phase 1 and will install the required modules to support a default Contact Form and email the site owner when messages are received. Once the initial recipe is accepted, a round of testing, documentation, and additional UI in a custom module may be required. 

Our plans include additional fields set as optional for the site owner to turn on or off as they need. Some customization will be supported in a non-technical user-friendly way, but all the power of Drupal WebForms will be available to those that want to dig deeper into customizing their lead forms.

In the short term, we are proposing:

Next stop, the Moon

DrupalCon Barcelona took place last week, September 24 through 27, 2024, and the Drupal CMS prototype was displayed for all to see. Early 2025 is the next target date for a market-ready version of Drupal CMS. The community is continuing to push hard to create a fantastic future for the platform and for authors who are dissatisfied with the current CMS marketplace.

Oomph’s team will continue to work on the Contact Form Track while contributing in other ways with the full range of skills we have. The great part about such a large and momentous initiative as Drupal CMS is that the whole company can be involved, and each can contribute from their experience and expertise. 

We’ll continue to share our progress in the weeks to come!


Thanks! 

Track Lead J. Hogue with Philip Frilling contributing engineer, Akili Greer and Rachel Hart researchers, and thanks to Rachel Hart again for bringing the Contact Form Track Lead to Oomph for consideration.


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

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.

Departments

164

Job & Clinical Tools

430

Staff Contacts

40000

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.


The Approach

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.

The intranet landing page, called simply the Dashboard, contains links to support speedy task completion as well as content promoting company culture

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.

A individual location page on mobile has flexible content areas for each team to customize their experience
The section navigation sticks to the left side and expands to reveal deeper navigation for that section

The Results

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.


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

The RISD Museum publishes a document for every exhibition in the museum. Most of them are scholarly essays about the historical context around a body of work. Some of them are interviews with the artist or a peek into the process behind the art. Until very recently, they have not had a web component.

The time, energy, and investment in creating a print publication was becoming unsustainable. The limitations of the printed page in a media-driven culture are a large drawback as well. For the last printed exhibition publication, the Museum created a one-off web experience — but that was not scalable.

The Museum was ready for a modern publishing platform that could be a visually-driven experience, not one that would require coding knowledge. They needed an authoring tool that emphasized time-based media — audio and video — to immediately set it apart from printed publications of their past. They needed a visual framework that could scale and produce a publication with 4 objects or one with 400.

A sample of printed publications that were used for inspiration for variation and approach.

THE APPROACH

A Flexible Design System

Ziggurat was born of two parents — Oomph provided the design system architecture and the programmatic visual options while RISD provided creative inspiration. Each team influenced the other to make a very flexible system that would allow any story to work within its boundaries. Multimedia was part of the core experience — sound and video are integral to expressing some of these stories.

The process of talking, architecting, designing, then building, then using the tool, then tweaking the tool pushed and pulled both teams into interesting places. As architects, we started to get very excited by what we saw their team doing with the tool. The original design ideas that provided the inspiration got so much better once they became animated and interactive.

Design/content options include:

  • Multiple responsive column patterns inside row containers
  • Additionally, text fields have the ability to display as multiple columns
  • “Hero” rows where an image is the primary design driver, and text/headline is secondary. Video heroes are possible
  • Up to 10-colors to be used as row backgrounds or text colors
  • Choose typefaces from Google Fonts for injection publication-wide or override on a page-by-page basis
  • Rich text options for heading, pull-quotes, and text colors
  • Video, audio, image, and gallery support inside any size container
  • Video and audio player controls in a light or dark theme
  • Autoplaying videos (where browsers allow) while muted
  • Images optionally have the ability to Zoom in place (hover or touch the image to see the image scale by 200%) or open more

There are 8 chapters total in RAID the Icebox Now and four supporting pages. For those that know library systems and scholarly publications, notice the Citations and credits for each chapter. A few liberally use the footnote system. Each page in this publication is rich with content, both written and visual.


RAPID RESPONSE

An Unexpected Solution to a New Problem

The story does not end with the first successful online museum publication. In March of 2020, COVID-19 gripped the nation and colleges cut their semesters short or moved classes online. Students who would normally have an in-person end-of-year exhibition in the museum no longer had the opportunity.

Spurred on by the Museum, the university invested in upgrades to the Publication platform that could support 300+ new authors in the system (students) and specialized permissions to limit access only to their own content. A few new features were fast-tracked and an innovative ability for some authors to add custom javascript to Department landing pages opened the platform up for experimentation. The result was two online exhibitions that went into effect 6 weeks after the concepts were approved — one for 270+ graduate students and one for 450+ undergraduates.


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. Knowing that, we had to design an accessible experience on any phone, tablet, or desktop device. 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 BRIEF

Wingspans’ primary audience is digital natives — young, tech-savvy users who expect fast, frictionless interactions and relevant content. Fail to deliver, and they’ll abandon you in a heartbeat.

The new platform needed to provide a scalable, flexible foundation for a range of content and tools being developed by the Wingspans team. We had to turn a collection of disparate pieces — story content, user data, school information, and more — into a cohesive digital framework that could grow and evolve. Above all, Wingspans needed a design-first approach, wrapping the educational aspects in an intuitive, engaging digital experience.


THE APPROACH

While storytelling formed the heart of the Wingspans platform, the site’s interactive features would be crucial for getting students to explore and engage with the content. Building on Lindsay’s familiarity with the educational market, we mapped out the content architecture, workflows, and functions for a host of interactive features to keep students engaged.

For the tech stack, we turned to a mix of microservices to provide a stable, flexible, and scalable architecture with lightning-fast performance. These included a Gatsby front end, Firebase database, AWS cloud storageAlgolia site search, Cosmic JS content management system, and more. We also worked to ensure the technology reflected Lindsay’s empathy-driven approach. For instance, we customized Algolia to deliver search results specifically tailored to a student’s profile and interests—in other words, an encyclopedia that understood its users and presented its information in a distinctly human way.


THE RESULTS

The platform’s most impactful feature is how easily students can find and bookmark career stories that resonate with who they are. With over 700 stories and 40 mini-documentaries available, each with an associated set of lessons, the site’s personalized search function and ultrafast content delivery are key. On the backend, the customized CMS and robust content architecture make it easy for the Wingspans team to align content with users’ profiles and browsing activity.

Bringing it all together, the Career Builder feature lets students select stories and content to create a customized career roadmap that they can share with parents, teachers, and counselors. A core element of the platform’s personalized user experience, the Career Builder brings Wingspans’ central premise to life: If you can see it, you can be it.

Oomph really fulfilled their commitment to building an immersive and radically personal platform that brought my vision to life.

— Lindsay Kuhn, Wingspans Founder and CEO

THE BRIEF

A Creative Beacon Sets a New Path

The RISD Museum is the 20th largest art museum in the United States with over 100,000 objects in its collection, including Ancient art, costumes, textiles, painting, sculpture, contemporary art, furniture, photography, and more. The museum occupies more than 72,000 square feet in three historic and two contemporary buildings along Providence’s bustling South Main Street and riverfront.

We often say that a website redesign is more like a collective therapy session — it’s an opportunity to air grievances in a safe space, to think about the future untethered to the present situation, and make decisions that could change the course of the organization. Since many websites are more than just a marketing platform, a redesign can affect the entire organization and the way they communicate their value to their own team and the world.

At the heart of this project were large, existential questions:

What does it mean to be a physical institution collecting physical objects in a digital world?

What do viewers want out of a museum experience in an interactive space?

Can a museum be more relaxed about how viewers will interpret the work?

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.


THE APPROACH

MuseumPlus & Drupal 8 equals Open Access

The heavy lift for our engineers was an integration with RISD’s museum software, MuseumPlus. MuseumPlus needed to continue to be the source of truth for any object, artist, or exhibition. The teams again collaborated extensively to work towards an API that could provide all the correct information

between the two databases, and a system of daily jobs and manual overrides to start a synchronization process. As the online connection grows, these connections will be the critical link between the public-facing object data and the internal records.

The aesthetics of the site became a structural backdrop for the objects, artwork, and images of people in the physical spaces of the museum.

Gray and white wireframes evolved into a black and white interface that kept information clear and clean while allowing the colors of the artwork to shine through. Language around the site’s architecture was simplified and tested for clarity. An element of time — words like Soon, Upcoming, Now, Ongoing, Past — keeps the visitor grounded around the idea of a physical visit, while open access to objects online serves a whole community of art lovers and historians that may never be able to visit in person.

A bold storytelling idea came out of our collective collaborative process — the homepage experience opens with four videos, a cinematic exterior shot and three interior videos that explore the three main sections of the navigation. The homepage becomes a gateway into the physical space. Choosing a path via the navigation takes the viewer inside to explore the spaces and the objects. Instead of a homepage that assumes a visitor wants to see everything and then choose something to explore deeper, this one introduces them to the content in a way that connects them to the physical space.


THE RESULTS

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.