The goal of the site was to create a well-organized hub for a trove of resources that had been previously provided in one-off conversations. He also knew that those resources would only continue to grow, making it important to build a living site that appealed to public officials and future funders alike. 

Together, we architected a vision for The Lab Manual website, identifying the essentials for launch and features to phase in later. Key goals included:  

• Creating an interactive experience with tools that readers could use directly in their work
• Infusing the site with visual creativity and storytelling elements to make complex research topics more digestible 
• Launching a minimum viable product (MVP) site within the desired timeline and budget, while planning for future growth

Oomph knew we had to look beyond traditional government and research sites to achieve The Lab Manual’s unique digital goals. We conducted in-depth stakeholder discovery sessions and scoured websites across industries, from data-rich websites like FiveThirtyEight to e-reader apps like Kindle, to gather inspiration for the features The Lab Manual needed: engaging long-form content, strong visual storytelling, and interactive data. Then, we engineered a website for The Lab Manual that felt like a dynamic guided journey. 

Telling a Story Through Design & Development

A Narrative-Driven Homepage

To captivate users from their first click, we created a storytelling-focused homepage that concisely explained The Lab Manual’s mission and resources. Animated elements also helped make the page feel more immersive than a traditional linear scroll. We mocked up the animations directly in Figma so the client could see, rather than imagine, the user experience — saving time and effort during the development process. 

Custom Educational Features

Oomph designed the website to be thought-provoking, but The Lab Manual wanted to leave readers with answers — not more questions. Our designers and developers collaborated to build features that helped readers understand content without interrupting the story. Key features included a linked glossary to expand on key terms used throughout the site; a pop-up search for other terms and topics, rather than relegating additional information to the footnotes; and a map created with Mapbox to help visitors find nearby policy labs.

Simplified Content Management

Despite the complexity of its content, The Lab Manual needed to be simple to manage. Our developers built a CMS-less solution the client could edit using Markdown, making it easier and more cost-effective to update content as The Lab Manual grows.

Bridging Science and Policy, Now & For the Future

With a solid MVP in place, we are already seeking new features and content opportunities to serve The Lab Manual’s growing user base. The website has quickly caught the eye of the industry, winning a GDUSA Digital Design Award. For The Lab Manual, though, the real win is bringing what was once a lofty vision into reality — a resource that provides government officials with the tools to create effective, evidence-based policies. 

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.

Rapid Discovery with a Cohort Analysis

Oomph hit the ground running, bringing our human-centered design expertise and passion for environmental causes to strategize a solution. We knew that balancing rigor and speed would be critical – how could we design a site positioned for success without over-investing in features that might need to change later? Through market and user research, rapid prototyping, and close collaboration with Rare and development partner Adapt, we swiftly moved from vision to reality.

Surveying the Landscape

While purchasing carbon credits is similar to making a nonprofit donation in some ways, it also blends elements of investing and crowdfunding in a distinct experience. Oomph first conducted a cohort analysis of more than 20 platforms, from other emerging carbon credit marketplaces to crowdfunding sites like Kickstarter and Kiva. The process uncovered some promising initial approaches, but also underscored the lack of best practices in the space. Ultimately, we determined that Catch Carbon needed to emphasize real-world impact: giving like-minded supporters a place to rally behind a shared cause and directly see the positive effects of their dollars.

Creating Connection and Credibility with Users

Building on Rare’s insights into its audience – climate-concerned citizens eager to be part of the solution – we knew that Catch Carbon would primarily draw users interested in taking personal action to reduce carbon impacts. User journey mapping allowed us to anticipate the visitor’s thoughts and feelings at every stage – curious as they enter the site, inspired as they browse projects, proud after deciding to purchase – and make design choices to guide them along the way. Our strategy included:

• Synthesizing project data to showcase the total impact of Catch Carbon’s work, helping to build trust and motivate users
• Each item needs its own line
• Simplifying the primary navigation and standardizing project descriptions to help users easily discover, compare, and support projects that matched their interests
• Creating user-friendly naming conventions for project types, including “Collections,” which bundle multiple projects like a mutual fund so users can make their dollars go even further

A Collaborative Design Process

With a solid strategy in place, Oomph dove in to bring the design to life. We led Rare through a 20-second design “gut check” workshop to develop a shared design language, then used style tiles to quickly hone in on the design aesthetic. As we moved into full page designs, we worked hand in hand with Adapt and Rare to test an internal API system that would populate project data, refining the design in real-time as we determined which information was possible to include.

“Out of Home” (OHH) advertising is widely understood as billboards, transit stops, and street furniture. But OHH advertising is also place-based mobile advertising and digital messages that can react to the time of day and weather. These emerging avenues were some of the customer education messages that OUTFRONT Media, one of the top three outdoor advertising companies in the country, needed a new website to convey.

OHH was new to us, but we enjoy diving deep into new industries and absorbing information from all directions. While getting to know OUTFRONT Media during our initial explorations and discovery meetings, Oomph and Straightline Media were surprised to learn:

he previous market finder used “inside baseball” language — terms that people at OUTFRONT understand, but that the general populace does not. Markets were labeled by city and state with vague geographic terms like “non-metro”. It was not friendly to the DIY customer. We helped guide technical conversations around how a better flow might work and captured the journey in wireframes and external working examples.

The Market finder is an integral part of the customer journey, so we placed it in page content to support the education process. As a customer understands how OHH and OUTFRONT works, they are prompted to enter their location and get more direct information. As part of wireframes and design, the language was an important aspect to try out and sharpen. Vague button text like “Get Started” was replaced with stronger and more descriptive actions like “Start Building Your Campaign.”

OHH is a powerful mechanism to reach people even as consumers become blind to advertising in traditional media — a billboard or subway poster can’t be ad-blocked. One of the most powerful ways to tell this story is through data. OUTFRONT has a number of “Insights” but potential customers are less likely to seek this information out themselves. Instead, we made sure to include teasers along their journies that highlight the effectiveness of sample campaigns. These Insights provide powerful results with brands that visitors are familiar with.

The entire journey from discovery to wireframing, testing, and design was an exciting and challenging process that pushed both teams towards an excellent outcome. We hope that the clarity of the navigation, message, and visitor journey continues to get new eyeballs and customers.