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

Empathize with both Visitors and Authors

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

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

Our shared goals were to:

• 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.

Modernization & Trust-building 

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

Supporting Trust with New Features

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

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 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!

Simplifying Complexity without Losing Power

The biggest challenge as Oomph acclimated to the RSI world was rapidly learning enough about the complex regulations and requirements of municipalities in the tax collection 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 products, revX and revX Online Services, 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 RSI’s processes. We took our years of experience designing interfaces for a wide range of consumers and applied them here. In this typically archaic and slow-to-evolve space, a user-focused experience coupled with RSI’s technical expertise would revolutionize tax collection as a friendlier, more intuitive, and highly customizable experience.

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 the basis of revX. 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.” In button groups, twice as much space should be placed between destructive actions and creative actions, while half as much space can be placed between related actions. An example would be the grouping of Cancel, Reset, and Save actions where Cancel and Reset are placed 1rem apart while the Cancel/Reset group is 2rem away from the Save action.
• Every screen has one primary focus. Complex screens need a way for the user to focus on the task and feel confident they are using the interface correctly. When long forms are required, break them down into smaller chunks. This allows users to 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. 

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.

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.

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 MUI. The success of Storybook is largely due to its inclusion as a revX 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 revX, 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 RSI 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.

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

Equipping IHME To Lead the Public Health Conversation

Collaborating on a Comprehensive Content Model

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

Building Custom Teaser Modules

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

Creating a Fresh, Functional Design System

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

Working to Make Citizens and Communities Healthier 

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

Custom Tools Leveraging Site Factory

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

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

Introducing Quahog: A RI.gov Design System

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

The Purpose of the Design System

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

Efficient and Effective Paths to Communication

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

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

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

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

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

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

The Borrower Experience

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

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

The Investor Experience

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

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

The Mobile Experience

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

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

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

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

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

Open Source the Museum’s Entire Collection

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

An Evolving Partnership

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

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

Want to know a little more? — J. Hogue, Director of Design & UX at Oomph, and Jeremy Radtke, Assistant Director, Digital Initiatives, RISD Museum, gave a presentation at Design Week RI on September 20, 2018, all about the process of the redesign.

Connecting People and Planet

NEEF’s website is the gateway that connects its audiences to a vast array of learning experiences – but its existing platform was falling short. The organization needed more visually interesting resources and content, but it also knew its legacy Drupal site couldn’t keep up.

NEEF wanted to build a more powerful platform that could seamlessly:

• Communicate its mission and showcase its impact to inspire potential funders
• Broaden its audience reach through enhanced accessibility, content, and SEO
• Be a valuable resource by providing useful and engaging content, maps, toolkits, and online courses
• Build relationships by engaging users on the front end with easy-to-use content, then seamlessly channeling that data into back-end functionality for user-based tracking

Strategy is the foundation for effective digital experiences and the intuitive designs they require. Oomph first honed in on NEEF’s key goals, then implemented a plan to meet them: leveraging existing features that work, adding critical front- and back-end capabilities, and packaging it all in an engaging, user-centric new website.

Information architecture is at the core of user experience (UX). We focused on organizing NEEF’s information to make it more accessible and appealing to its core audiences: educators, conservationists, nonprofits, and partners. Our designers then transformed that strategy into strategic wireframes and dynamic designs, all of which we developed into a custom Drupal site.

The New NEEF: User-Centered Design

A Custom Site To Fuel Connection

NEEF needed a digital platform as unique as its organization, which is why Oomph ultimately delivered a suite of custom components designed to accommodate a variety of content needs.

Engaging and thoughtful design

NEEF’s new user experience is simple and streamlined. Visual cues aid in wayfinding (all Explore pages follow the same hero structure, for example), while imagery, micro-interactions (such as hover effects) and a bold color palette draw the user in. The UX also emphasizes accessibility and inclusivity; the high contrast between the font colors and the background make the website more readable for people with visual impairments, while people with different skin tones can now see themselves represented in NEEF’s new library of 100 custom icons.

Topic-based browsing

From water conservation to climate change, visitors often come to the NEEF site to learn about a specific subject. We overhauled NEEF’s existing site map to include topic-based browsing, with pages that roll resources, storytelling, and NEEF’s impact into one cohesive package. Additional links in the footer also make it easier for specific audiences to find information, such as nonprofits seeking grants or teachers looking for educational materials.

NPLD-hosted resources and event locator

Oomph refreshed existing components and added new ones to support one of NEEF’s flagship programs, National Public Lands Day (NPLD). People interested in hosting an event could use the new components to easily set one up, have their own dashboard to manage, and add their event to NEEF’s event locator. Once the event has passed, it’s automatically unlisted from the locator — but archived so hosts can duplicate and relaunch the event in future years.

Protecting the Planet, One User at a Time

Oomph helped NEEF launch its beautiful, engaging, and interactive site in May 2023. Within three months, NEEF’s team had built more than 100 new landing pages using the new component library, furthering its goal to build deeper connections with its audiences.

As NEEF’s digital presence continues to grow, so will its impact — all with the new custom site as its foundation.

Three Organizations Working Towards One Goal

The American Foundation for Suicide Prevention (AFSP), the National Action Alliance for Suicide Prevention (Action Alliance), and the Suicide Prevention Resource Center (SPRC) have been commissioning The Harris Poll to conduct a bi-annual, nationally representative survey of adults in the U.S. to understand the public’s beliefs and attitudes about mental health and suicide.

This year, 2022, all three suicide prevention organizations teamed up with Oomph to take that data and distill it into a microsite for easy consumption among professionals and the general public who visit the site.

The data from the poll shows that progress has been made, but there is still more to do. We all must continue to learn more about suicide and mental health, particularly through increased research efforts, teaching everyone how to help prevent suicide and strengthen mental health, and advocate for improved access to care and robust crisis services.

Oomph made sure our approach to information design, branding, and messaging came across effectively and clearly. How could we use data to show people which actions they could personally take to affect positive change?

Design Sprint to E-Learning Microsite

Our initial idea of the audience was more public facing rather than a specific audience. We started our design approach to be stylized and playful.

Taking a step back, we regrouped and determined that the audience was more academic and administrative, therefore it was to lean towards a professional tone. A new idea clicked — we could present this microsite as an e-learning experience.

The new design direction features four key chapters: the Introduction, Learn About the Data, Know How to Help, and Advocate for Change. By implementing a tab-like navigation, it allows for users to hop to each section they may be most interested in, and reads as if it is an eBook.

Each section is color coded, and the navigation has a gradient that brings in all of the sections together in unity to showcase that message throughout. Each section follows a similar pattern: an introduction, data from the Harris Poll, an opportunity to find resources about the chapter, and shareable resources to help spread the message on the viewer’s own social channels. We hope that by the end of the microsite, the user is ready to inform themselves further by finding resources or sharing about the current perceptions of suicide.