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.

Same Look, Better Build

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

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

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

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

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

Putting Visit California in the Fast Lane

Implemented a New API

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

Streamlined Data During Deployments

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

Fixed Image Processing Bottlenecks

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

Lightened the Load on the Back-End

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

Home page weight before and after:

Visualizing the improvements to loading speed:

Core Web Vitals Improvements:

Exploring the Golden State, One Story at a Time

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

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

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.

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