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:

Overall ScoreFirst Contentful PaintLargest Contentful PaintTotal Blocking TimeCumulative Layout ShiftSpeed Index
Mobile before33.4s15.7s8980ms0.043s22.9s
Mobile after314.4s21.1s2140ms0.503s9.5s
CHANGE+28+1s+5.4-6840 ms+0.43-13.4
Desktop before38.9s4.5s1600ms0.043s3.9s
Desktop after631.2s4.5s420ms0.207s2.6s
CHANGE+25+.3 s0-1180ms+0.164-1.3

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.

Have you ever waved to someone and they didn’t wave back? Awkward, right? But are you sure they could see you and recognize you? Was the sun in their eyes? Were you too far away? Were you wearing a face mask?

There is a similar situation with your branding on your website. On a smaller mobile device, is your logo legible, or are the words shrunk down and too small? Are the colors high-contrast enough to be seen on a sunny day? Is there consistency between your social media avatar and your website, between your print materials and your digital advertising? Can customers recognize your brand wherever it might be displayed? 

For your brand to be the most successful, it takes a little extra effort to think through all of these possible scenarios. But it’s worth it, or your customers will give you the cold shoulder, whether they intended to or not. 

This extra bit of strategy and planning around your brand is called “Responsive Branding.” Just like responsive design, where your website’s content adapts to the device a customer is using, responsive branding adapts to the device, the medium, and the platform while also considering situations like low light, high light, animated, or static.

Oomph works with organizations across industries to build or refresh responsive brands that serve and delight their users across the full spectrum of digital experiences. Here’s what we’ve learned about responsive branding and our tips for creating one that works. 

What Is Responsive Branding?

Let’s first start with what you’ve probably already heard — responsive web design. Coined by Ethan Marcotte in 2010, the “responsive” part came to mean that a web design responded to the size of the screen, from a phone to a tablet to a widescreen desktop monitor. 

Then came responsive logos. These take the elements of the main logo and adapt them for different sizes and use cases. A logo might have too much detail to be legible as a small social media icon, for example.

Responsive Branding blends these ideas and looks at the design system holistically. A successful responsive brand may include:

Why Responsive Branding Matters

Your business makes a huge investment in building a brand that stands apart from the competition while communicating your personality and value. You are building trust with customers through every interaction. When your brand works well in one situation but not another, it erodes trust. 

A strong brand will be clear, understandable, and memorable for all users in all situations. Whether you have physical locations or digital ones, the brand works with the same consistent strength and message every time.

When you invest in a responsive brand, you: 

3 Elements of a Responsive Brand

A responsive brand is more than a shape-shifting logo. The most responsive brands make strategic use of these three elements: 

1. Logo

Your logo is the first piece of your brand that customers will recognize. Using a single-state logo can compromise that impression — a logo that looks great at a large scale is often unintelligible as a small icon. 

Responsive logo designs help ensure your logomark is clear and impactful no matter where you apply it. Beyond the size considerations we mentioned, it should include different formats like horizontal, vertical, and square to support many different digital, social, and print platforms. 

Some other techniques we use to create scalable logos include:

Oomph Tip: It’s okay to take several design rounds to get it right. Iterating helps uncover where you’ll use the logo, what it must convey, and which colors and iconography can best support that purpose. We went through several design iterations with our client AskRI before settling on a bold, simple font and clear chat bubble icon that plays off the state of Rhode Island’s distinctive shape. 

Color Palette

A responsive color palette is less about picking complementary shades on a color wheel and more about creating an experience that works in all situations. People with visual impairments and people on low-lit smartphones, for example, rely on high-contrast color combinations to engage with your brand. 

Start by following the Web Content Accessibility Guidelines (WCAG), which include specific recommendations for color contrast ratios. Colors that meet that standard include light text with dark backgrounds, or vice versa. 

Depending on where your brand appears, you may need to adjust your color palette for different settings. For example, your full-color logo might look stunning against a solid white background but becomes illegible against bright or dark colors. A single color logo is useful for some digital use cases like Windows web icons and iOS Pinned Tabs. In non-digital spaces, single color logos are great when color printing isn’t an option, such as with engraving or embroidery. Build out alternate color variations where necessary to make sure your palette works with you – not against you – across your materials. 

Oomph Tip: If your brand palette is already set in stone, try playing with the brightness or saturation of the values to meet recommendations. Often your brand colors have a little wiggle room when combinations are already close to passing corformance ratios. Check out our article about this issue for more pointers.

Typography and Layouts

Responsiveness is also important to consider when structuring web pages or marketing collateral. The most legible layouts will incorporate adaptable typography with clear contrast and simple scaling. 

When selecting a font, be sure to think about: 

Oomph Tip: Don’t go it alone. Tools like Typescale and Material UI’s The Type System can simplify typography selection by recommending font sets that meet usability and scalability requirements. And the U.S. Design System has some suggestions as to which typefaces are the most accessible.

How To Get Started With Responsive Branding

To create a responsive brand that resonates, you first have to identify what elements you need and why you need them. That second part is your secret sauce: finding a balance between a design your users can recognize and one that inspires them. 

A design audit can zero in on the needs of your brand and your audience, so you can create a responsive design system that meets both. Not sure where to start? Let’s talk.

THE BRIEF

Never Stopping, Always Evolving

Leica Geosystems was founded on cutting-edge technology and continues to push the envelope with their revolutionary products. Leica Geosystems was founded by Heinrich Wild and made its first rangefinder in 1921. Fast forward to the 21st century, and Leica Geosystems is the leading manufacturer of precision laser technology used for measurements in architecture, construction, historic preservation, and DIY home remodeling projects.

Oomph and Leica collaborated on an initial project in 2014 and have completed multiple projects since. We transitioned the site into a brand new codebase with Drupal 8. With this conversion, Oomph smoothed out the Leica team’s pain points related to a multisite architecture. We created a tightly integrated single site that can still serve multiple countries, languages, and currencies.

THE CHALLENGE

Feeling the Pain-points with Multisite

Leica’s e-commerce store is active in multiple countries and languages. Managing content in a Drupal multisite environment meant managing multiple sites. Product, content, and price changes were difficult. It was Oomph’s challenge to make content and product management easier for the Leica team as well as support the ability to create new country sites on demand. Leica’s new e-commerce site needed to support:

MULTIPLE COUNTRIES AND A GLOBAL OPTION

SIX LANGUAGES

MANY 3RD-PARTY INTEGRATIONS

The pain points of the previous Multisite architecture were that each country was a silo:

  • No Single Sign On (SSO): Multiple admin log-ins to remember
  • Repetitive updates: Running Drupal’s update script on every site and testing was a lengthy process
  • Multiple stores: Multiple product lists, product features, and prices
  • Multiple sites to translate: each site was sent individually to be translated into one language

THE APPROACH

Creating a Singularity with Drupal 8, Domain Access, & Drupal Commerce

A move to Drupal 8 in combination with some smart choices in module support and customization simplified many aspects of the Leica team’s workflow, including:

  • Configuration management: Drupal 8’s introduction of configuration management in core means that point-and-click admin configuration can get exported from one environment and imported into another, syncing multiple environments and saving configuration in our code repository
  • One Database to Rule Them All: Admins have a single site to log into and do their work, and developers have one site to update, patch, and configure
  • One Commerce Install, Multiple stores: There is one Drupal Commerce 2.x install with multiple stores with one set of products. Each product has the ability to be assigned to multiple stores, and price lists per country control product pricing
  • One Page in Multiple Countries and Multiple Languages: The new single site model gives a piece of content one place to live, while authors can control which countries the content is available and the same content is translated into all the languages available once.
  • Future proof: With a smooth upgrade path into Drupal 9 in 2020, the Drupal 8 site gives Leica more longevity in the Drupal ecosystem

LEARN VS. SHOP

Supporting Visitor Intention with Two Different Modes

While the technical challenges were being worked out, the user experience and design had to reflect a cutting-edge company. With the launch of their revolutionary product, the BLK 360, in 2018, Leica positioned itself as the Apple of the geospatial measurement community — sleek, cool, cutting-edge and easy to use. While many companies want to look as good as Apple, few of them actually have the content and product to back it up.

The navigation for the site went through many rounds of feedback and testing before deciding on something radically simple — Learn or Shop. A customer on the website is either in an exploratory state of mind — browsing, comparing, reviewing pricing and specifications — or they are ready to buy. We made it very clear which part of the website was for which.

This allowed us to talk directly to the customer in two very different ways. On the Learn side, the pages educate and convince. They give the customer information about the product, reviews, articles, sample data files, and the like. The content is big, sleek, and leverages video and other embedded content, like VR, to educate.

On the Shop side the pages are unapologetically transactional. Give the visitor the right information to support a purchase, clearly deliver specs and options like software and warranties, without any marketing. We could assume the customer was here to purchase, not to be convinced, so the page content could concentrate on order completion. The entire checkout process was simplified as much as possible to reduce friction. Buying habits and patterns of their user base over the past few site iterations were studied to inform our choices about where to simplify and where to offer options.

THE RESULTS

More Nimble Together

The willingness of the Drupal community to support the needs of this project cannot be overlooked, either. Oomph has been able to leverage our team’s commitment to open source contributions to get other developers to add features to the modules they support. Without the give and take of the community and our commitment to give back, many modifications and customizations for this project would have been much more difficult. The team at Centarro, maintainers of the Commerce module, were fantastic to work with and we thank them.

We look forward to continuing to support Leica Geosystems and their product line worldwide. With a smooth upgrade path to Drupal 9 in 2020, the site is ready for the next big upgrade.

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 Challenge

Execute on a digital platform strategy for a global private equity firm to create a centralized employee destination to support onboarding, create interpersonal connections between offices, and drive employee satisfaction.

The key components would be an employee directory complete with photos, bios, roles and organizational structure; News, events, and other communications made easily available and organized per location as well as across all locations; The firm’s investment portfolio shared through a dashboard view with all pertinent information including the team involved.

These components, and the expected tactical assets that an intranet provides, would help the firm deepen connections with and among employees at the firm, accelerate onboarding, and increase knowledge sharing.

The Approach

Supporting Multiple Intentions: Browsing vs. Working

An effective employee engagement platform, or intranet, needs to support two distinct modes — task mode and explore mode. In task mode, employees have access to intuitive navigation, quick page loading, and dynamic search or filtering while performing daily tasks. They get what they need fast and proceed with their day.

At the same time, a platform must also encourage and enable employees to explore company knowledge, receive company-wide communications, and connect with others. For this firm, the bulk of content available in explore mode revolves around the firm’s culture, with a special focus on philanthropic initiatives and recognition of key successes.

Both modes benefit from intuitive searching and filtering capabilities for team members, news, events, FAQs, and portfolio content. News and events can be browsed in a personalized way — what is happening at my location — or a global way — what is happening across the company. For every interaction within the platform, the mode was considered and influential of nearly all design decisions.

From a technical standpoint, the private equity firm needed to support security by hosting the intranet on their own network. This and the need to completely customize the experience for close alignment with their brand meant that no off-the-shelf pre-built intranet solution would work. We went with Drupal 8 to make this intranet scalable, secure, and tailor-made to an optimal employee experience.

The Results

The platform deployment came at a time when it was most needed, playing a crucial role for the firm during a global pandemic that kept employees at home. What was originally designed as a platform to deepen employee connections between offices quickly became the firm’s hub for connecting employees within an office. As many businesses are, the firm is actively re-evaluating its approach to the traditional office model, and the early success of the new platform indicates that it is likely to play an even larger role in the future.

THE BRIEF

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

THE DISCOVERY

Expanding Outfront’s reach from Agencies to Mom-and-Pops

OUR RESEARCH & UNDERSTANDING

“The United States of Audiences” is the demographic landscape made up of microcosms centered around interests and activities. OUTFRONT understands all these niche groups and can hyper target them to get businesses those audiences.

Through information architecture testing, an understanding of their business goals, and internalization of this new brand message, we crafted a main navigation that spoke directly to OUTFRONT’s target audiences. These pages communicate they “get” them in two ways — OUTFRONT understands these audiences’ needs and

CUSTOMER ACTIONS

To buy media placements from OUTFRONT, a business needs to:

  • Understand the value of OHH advertising
  • Explore the media options in their location
  • Investigate the costs of these different options
  • Call a sales associate in their area to discuss custom packages

Finding a market lets a potential customer define themselves even further by gathering their location

they can put the right message in front of the right people to get clients new business.

Large brands already understand how important it is to have OHH in their advertising mix. An emerging market for companies like OUTFRONT is actually smaller businesses — local chains and even mom and pop businesses. To court these new customers, OUTFRONT has to create a customer portal that supports do-it-yourself media management, and the website messaging has to educate a small business about the process and how to buy.

data. From here, they can easily access the media that is available specifically to their geographic area. After a sale is made, a customer needs continuing support. The website should:

  • Make it easy for a customer to find production specs for various media
  • Provide links to a portal that give them analytics and reporting statistics
  • Give them a clear path to extending their current campaign or starting a new one

THE APPROACH

Defining Audience Destinations

OUTFRONT narrowed its focus to the audiences that it needs to win and continue to support — new advertisers, new and existing agency relationships, and property owners who lease their real estate to OUTFRONT for displays (these could be individual real estate owners, large municipalities, or large destinations like airports, stadiums, and entire city transit systems). The journey for these new customers is the main navigation, and these journies funnel through the Market Finder to become more personalized.

Returning customers will find inspiration, case studies, galleries, and support resources in the footer navigation. One of the reasons for this bifurcation was the amount of content that OUTFRONT Media needs to manage. Their previous navigation tried to be everything to everyone, and therefore, was confusing. Labels like “Who We Are / What We Do / Where We Are…” contained too much “we” and not enough “you”. A modern customer doesn’t have time to figure out the navigation — it should speak to them directly in language that they understand.

Giving Visitors Clear Directions

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

THE RESULTS

Focusing Attention on Results

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.