Everyone’s been saying it (and, frankly, we tend to agree):  We are currently in unprecedented times. It may feel like a cliche. But truly, when you stop and look around right now, not since the advent of the first consumer-friendly smartphone in 2008 has the digital web design and development industry seen such vast technological advances.

A few of these innovations have been kicking around for decades, but they’ve only moved into the greater public consciousness in the past year. Versions of artificial intelligence (AI) and chatbots have been around since the 1960s and even virtual reality (VR)/augmented reality (AR) has been attempted with some success since the 1990s (That Starner). But now, these technologies have reached a tipping point as companies join the rush to create new products that leverage AI and VR/AR. 

What should we do with all this change? Let’s think about the immediate future for a moment (not the long-range future, because who knows what that holds). We at Oomph have been thinking about how we can start to use this new technology now — for ourselves and for our clients. Which ideas that seemed far-fetched only a year ago are now possible? 

For this article, we’ll take a closer look at VR/AR, two digital technologies that either layer on top of or fully replace our real world.

VR/AR and the Vision Pro

Apple’s much-anticipated launch into the headset game shipped in early February 2024. With it came much hype, most centered around the price tag and limited ecosystem (for now). But after all the dust has settled, what has this flagship device told us about the future? 

Meta, Oculus, Sony, and others have been in this space since 2017, but the Apple device has debuted a better experience in many respects. For one, Apple nailed the 3D visuals, using many cameras and low latency to reproduce a digital version of the real world around the wearer— in real time. All of this tells us that VR headsets are moving beyond gaming applications and becoming more mainstream for specific types of interactions and experiences, like virtually visiting the Eiffel Tower or watching the upcoming Summer Olympics.

What Is VR/AR Not Good At?

Comfort

Apple’s version of the device is large, uncomfortable, and too heavy to wear for long. And its competitors are not much better. The device will increasingly become smaller and more powerful, but for now, wearing one as an infinite virtual monitor for the entire workday is impossible.

Space

VR generally needs space for the wearer to move around. The Vision Pro is very good at overlaying virtual items into the physical world around the wearer, but for an application that requires the wearer to be fully immersed in a virtual world, it is a poor experience to pantomime moving through a confined space. Immersion is best when the movements required to interact are small or when the wearer has adequate space to participate.

Haptics

“Haptic”  feedback is the sense that physical objects provide. Think about turning a doorknob: You feel the surface, the warmth or coolness of the material, how the object can be rotated (as opposed to pulled like a lever), and the resistance from the springs. 

Phones provide small amounts of haptic feedback in the form of vibrations and sounds. Haptics are on the horizon for many VR platforms but have yet to be built into headset systems. For now, haptics are provided by add-on products like this haptic gaming chair.

What Is VR/AR Good For? 

Even without haptics and free spatial range, immersion and presence in VR is very effective. It turns out that the brain only requires sight and sound to create a believable sense of immersion. Have you tried a virtual roller coaster? If so, you know it doesn’t take much to feel a sense of presence in a virtual environment. 

Live Events

VR and AR’s most promising applications are with live in-person and televised events. In addition to a flat “screen” of the event, AR-generated spatial representations of the event and ways to interact with the event are expanding. A prototype video with Formula 1 racing is a great example of how this application can increase engagement with these events.

Imagine if your next virtual conference were available in VR and AR. How much more immersed would you feel? 

Museum and Cultural Institution Experiences

Similar to live events, AR can enhance museum experiences greatly. With AR, viewers can look at an object in its real space — for example, a sarcophagus would actually appear in a tomb — and access additional information about that object, like the time and place it was created and the artist.

Museums are already experimenting with experiences that leverage your phone’s camera or VR headsets. Some have experimented with virtually showing artwork by the same artist that other museums own to display a wider range of work within an exhibition. 

With the expansion of personal VR equipment like the Vision Pro, the next obvious step is to bring the museum to your living room, much like the National Gallery in London bringing its collection into public spaces (see bullet point #5).

Try Before You Buy (TBYB)

Using a version of AR with your phone to preview furniture in your home is not new. But what other experiences can benefit from an immersive “try before you buy” experience? 

What’s Possible With VR/AR?

The above examples of what VR/AR is good at are just a few ways the technology is already in use — each of which can be a jumping-off point for leveraging VR/AR for your own business.  

But what are some new frontiers that have yet to be fully explored? What else is possible? 

Continue the AR/VR Conversation

The Vision Pro hasn’t taken the world by storm, as Apple likely hoped. It may still be too early for the market to figure out what AR/VR is good for. But we think it won’t go away completely, either. With big investments like Apple’s, it is reasonable to assume the next version will find a stronger foothold in the market.

Here at Oomph, we’ll keep pondering and researching impactful ways that tomorrow’s technology can help solve today’s problems. We hope these ideas have inspired some of your own explorations, and if so, we’d love to hear more about them. 

Drop us a line and let’s chat about how VR/AR could engage your audience. 

Portable Document Format, or PDF, files have been around since 1992, offering a software-agnostic solution for presenting and sharing digital documents. For organizations that existed before the ’90s, PDFs became an easy way to move from physical to digital; they could take the same documents they used to print and now share them digitally as PDFs.

A few years after PDFs were officially launched, CSS came onto the scene as the preferred computer language for styling web pages. Over the following three decades, PDF capabilities grew alongside CSS and other digital technologies, giving creators new ways to lay out and publish their content.

Fast forward to today. Developers worldwide (Oomph among them) have been making websites for a while. We have online forms, interactive databases, and of course, plain old text on a webpage. And yet, PDFs persist.

What’s So Bad About PDFs?

Mobile Phones

Think of the last time you tried looking at a PDF on your phone. First off, there’s the issue of finding it. Depending on your operating system and browser, the file might open right in a new browser tab, or it might download and disappear into some folder you forgot about until this exact moment. (And of course, when you find the folder, you realize this is the fifth time you’ve downloaded this same file.)

Now that you’ve opened the file, you see the tiny text of an 8.5” x 11” page shrunk to a quarter of its intended size. So you pinch, zoom, and drag the page around your screen. You might rotate your phone to the dreaded horizontal orientation to fit a whole line of text at once. If this PDF is a fillable form, you may be simply out of luck on your mobile device unless you’re ready to go down a rabbit hole of separate apps and workarounds.

If, for just a minute, we want to ignore the massive amount of mobile usage — including the 15% of American adults who fully depend on phones for internet access — there’s plenty more cause for PDF concern.

Accessibility

Let’s talk about accessibility. There’s a good chance that your digital properties, including PDFs, are legally required to conform to accessibility standards. This is true for government entities — both federal and more recently, state, local, and district governments, thanks to a Title II update — as well as businesses and nonprofit organizations. 

Beyond the legalities, the CDC reports that about 27% of American adults have a disability. While not all 70 million of these people use a screen reader, we know some people use assistive technology even if they don’t identify as having a disability. (When’s the last time you pressed a button to open a door just because your hands were full or to let a large group of people pass through?) Improvements for the sake of accessibility, more often than not, lead to a more effortless, more intuitive experience for everyone.

While it’s possible to make a PDF accessible, the process for doing so is extensive and involves several manual checks. This can be so time-consuming and specialized that businesses and professionals dedicate themselves entirely to remediating PDFs for accessibility. 

Of course, making a website accessible isn’t as easy as plug-and-play, but accessibility should already be built into the system. Content editors who are not technical professionals can publish accessible content with relative ease on an accessible website platform (as long as we can all remember not to link “click here”) but are typically left to their own devices when it comes to documents.

Brand Reputation

Beyond these critical issues, there are a few more problems that are less vital to users but could have a negative business impact. 

For one, documents like PDFs open up a whole world of styling possibilities. The flexibility might feel like a benefit at first, but give it a little time and I’m certain you’ll start seeing inconsistencies from one document to the next. Add in a few more people preparing these files, and those small differences will pile up, giving users an impression that maybe the business is not quite as put together as they thought. (Not to mention that every change in presentation is asking users to understand a new format, slowing them down or confusing them.) Consistency is key to building a trustworthy brand; every unnecessary variation erodes that trust.

There’s also the near certainty that the information provided in PDFs will need updating. When that happens, you’d better make sure to delete the old file in favor of the new one and update all your links. Since the file format made it easy (or necessary) for users to download the content to their devices, there’s a greater chance that they’ll hold onto old information, even though a newer version is now on the website.

Finally, storing important information in PDFs gives you less control over optimizing for search engines. Google has a tough time reading PDF content (though proper tagging and metadata will help), so these files often rank lower in search results than webpages with similar content. The more that content lives in PDFs and not webpages, the more your SEO will suffer, and the less likely people will be to find and consume your content.

What You Can Do Instead

Like I said, PDFs solved a real problem… 30 years ago. They still have their place today, but more often than not, there’s a better way.

Does It Need To Be a PDF?

When the PDF is just a basic document of text, we recommend turning that into a basic webpage of text. It’s easy to say, but making it happen might mean taking a fresh look at why that information is in a PDF in the first place.

Custom Layout

If you’re using PDFs to create a certain layout, consider how you can achieve something similar through CSS. You might be able to build something you like using the layout and style options already available in your CMS, but you probably won’t create a perfect 1:1 match. 

Any design in a Word or Google document can also exist on a webpage. If there’s a certain design you use time and time again in your PDFs that you just can’t recreate with the web editing tools, you might need some new code. It becomes an exercise in prioritization to weigh the benefits of building a custom layout against the time and cost of doing so. 

Also, remember that a design that works well for a printed page may not be the best design for a responsive webpage. Rather than recreating the exact layout digitally, ask yourself what you’re trying to achieve with the layout and whether there’s a better way to meet that same goal. While unique designs may be more difficult to create on a webpage than a PDF, I’d urge you to consider this a benefit in most cases. Limitations create consistency, which will most likely simplify the experience for both content editors and users.

Designing for Print

Speaking of print, that might be another reason for including PDFs. You may know that a portion of your audience will want to print out the page, maybe to annotate it or to have it on hand as they complete a related task.

In reality, you can serve this user without sacrificing everyone else’s online experience. Developers can use targeted CSS to customize how a webpage will print or export — including what content will display and its styling. Going this route affects how the page will print with the browser tool, and you could even provide a “Print” link if that’s a common need. Ultimately, targeted CSS means the printed content can look as similar or different from the webpage as needed. 

Process 

Another common cause for PDFs is that they’re simply baked into the content publishing process. Whether from fear of changing approved content or a lack of knowledge around what’s possible in the CMS, content teams may use PDF uploads as a fallback for publishing the information quickly and moving on.

A solution here may be to bring your site editor into the process sooner. As the web expert, they can speak to what will work well and what might need to change when moving the content to a webpage. The site editor may need to be heavily involved at first, but their load should lighten as the writers and other team members learn the website’s needs. 

In some cases, it might also be worth building new CMS templates, such as content types. This can be especially helpful for reinforcing consistency when several people manage the website. If the content needs to follow a specific format, a highly structured edit form can act as an outline. You can share this template with the original content creators so that everyone is working toward a shared goal. 

Repurposed Content

Most likely, your organization does more than manage a website. Maybe you have a brick-and-mortar office with brochures and paperwork, or you host webinars with branded slide decks. There are plenty of reasons you might create and share documents other than uploading them onto your website, but you still want the same information available online. And since it’s already put together, the easiest way to share it could be to upload the PDF.

Unfortunately, this is a situation where easy doesn’t cut it. The same tri-fold brochure that looks professional and appealing on a reception desk can be confusing and annoying on a computer or phone. A printed form works great for in-office visitors, but a web form can give users the benefits of autocomplete and progressive disclosure they’ve come to expect online. 

The best experience for your users requires attention to their context. Ultimately, we need to be intentional and thoughtful about what users need in their current situation, which may require different presentations of the same content.

Embrace Digital

We’re not expecting to see the end of PDFs on websites anytime soon. For one, sometimes it’s simply out of your control. Maybe you’re providing an official government form that only exists as a fillable PDF. Even if the document is internally produced, change may be lengthy and involved, requiring buy-in from those who hold the purse strings.

While we wait for the world to change, we can advocate for a better user experience. If a PDF “needs” to stay, maybe you can duplicate the most important content onto the page linking to it. If you have any control over the document itself, you can test for accessibility and make sure it’s properly tagged. Get started with the tools and guidance we’ve collected in this accessibility resources document.

How easily your audience can access your information and services sets the tone for how they perceive your organization. The good news is that there’s so much you can do to make their experience positive, no matter how they choose to interact with your content. If you need help, let us know.


The Brief

New Drupal, New Design

Migrating a massive site like healthdata.org is challenging enough, but implementing a new site design simultaneously made the process even more complex. IHME wanted a partner with the digital expertise to translate its internal design team’s page designs into a flexible, functional set of components  — and then bring it all to life in the latest Drupal environment. Key goals included:


The Approach

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

Equipping IHME To Lead the Public Health Conversation

Collaborating on a Comprehensive Content Model

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

Building Custom Teaser Modules

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

Creating a Fresh, Functional Design System

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

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

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

The Results

Working to Make Citizens and Communities Healthier 

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


THE BRIEF

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: 


THE APPROACH

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

Putting Visit California in the Fast Lane

Implemented a New API

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

Streamlined Data During Deployments

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

Avg. full build time

64 min

Unexplained failure rate Before

52 %

Avg. incremental build time

42 min

Unexplained failure rate After

0 %

Fixed Image Processing Bottlenecks

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

Lightened the Load on the Back-End

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

Home page weight before and after:

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

Visualizing the improvements to loading speed:

Core Web Vitals Improvements:


THE RESULTS

Exploring the Golden State, One Story at a Time

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

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


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


THE BRIEF

The Virtual Lab School (VLS) supports military educators with training and enrichment around educational practices from birth through age 12. Their curriculum was developed by a partnership between Ohio State University and the U.S. Department of Defense to assist direct-care providers, curriculum specialists, management personnel, and home-based care providers. Because of the distributed nature of educators around the world, courses and certifications are offered virtually through the VLS website.

Comprehensive Platform Assessment

The existing online learning platform had a deep level of complexity under the surface. For a student educator taking a certification course, the site tracks progress through the curriculum. For training leaders, they need to see how their students are progressing, assign additional coursework, or assist a student educator through a particular certification.

Learning platforms in general are complex, and this one is no different. Add to this an intertwined set of military-style administration privileges and it produces a complex tree of layers and permutations.

The focus of the platform assessment phase was to catalog features of the largely undocumented legacy system, uncover complexity that could be simplified, and most importantly identify opportunities for efficiencies.


THE RESULTS

Personalized Online Learning Experience

Enrollment and Administration Portal

Administrators and instructors leverage an enrollment portal to manage the onboarding of new students and view progress on coursework and certifications.

Course Material Delivery

Students experience the course material through a combination of reading, video, and offline coursework downloads for completion and submission.

Learning Assessments & Grading

Students are tested with online assessments, where grading and suggestions are delivered in real time, and submission of offline assignments for review by instructors.

Progress Pathways

A personalized student dashboard is the window into progress, allowing students to see which courses have been started, how much is left to complete, and the status of their certifications.

Certification

Completed coursework and assessments lead students to a point of certification resulting in a printable Certificate of Completion.


FINAL THOUGHTS

Faster and More Secure than Ever Before

When building for speed and scalability, fully leveraging Drupal’s advanced caching system is a major way to support those goals. The system design leverages query- and render-caching to support a high level of performance while also supporting personalization to an individual level. This is accomplished with computed fields and auto-placeholdering utilizing lazy builder.

The result is an application that is quicker to load, more secure, and able to support hundreds more concurrent users.

Why Drupal?

When building for speed and scalability, fully leveraging Drupal’s advanced caching system is a major way to support those goals. The system design leverages query- and render-caching to support a high level of performance while also supporting personalization to an individual level. This is accomplished with computed fields and auto-placeholdering utilizing lazy builder.

The result is an application that is quicker to load, more secure, and able to support hundreds more concurrent users.