Oomph has been quiet about our excitement for artificial intelligence (A.I.). While the tech world has exploded with new A.I. products, offerings, and add-ons to existing product suites, we have been formulating an approach to recommend A.I.-related services to our clients.
One of the biggest reasons why we have been quiet is the complexity and the fast-pace of change in the landscape. Giant companies have been trying A.I. with some loud public failures. The investment and venture capitalist community is hyped on A.I. but has recently become cautious as productivity and profit have not been boosted. It is a familiar boom-then-bust of attention that we have seen before — most recently with AR/VR after the Apple Vision Pro five months ago and previously with the Metaverse, Blockchain/NFTs, and Bitcoin.
There are many reasons to be optimistic about applications for A.I. in business. And there continue to be many reasons to be cautious as well. Just like any digital tool, A.I. has pros and cons and Oomph has carefully evaluated each. We are sharing our internal thoughts in the hopes that your business can use the same criteria when considering a potential investment in A.I.
Using A.I.: Not If, but How
Most digital tools now have some kind of A.I. or machine-learning built into them. A.I. has become ubiquitous and embedded in many systems we use every day. Given investor hype for companies that are leveraging A.I., more and more tools are likely to incorporate A.I.
This is not a new phenomenon. Grammarly has been around since 2015 and by many measures, it is an A.I. tool — it is trained on human written language to provide contextual corrections and suggestions for improvements.
Recently, though, embedded A.I. has exploded across markets. Many of the tools Oomph team members use every day have A.I. embedded in them, across sales, design, engineering, and project management — from Google Suite and Zoom to Github and Figma.
The market has already decided that business customers want access to time-saving A.I. tools. Some welcome these options, and others will use them reluctantly.
The Risks that A.I. Pose
Every technological breakthrough comes with risks. Some pundits (both for and against A.I. advancements) have likened its emergence to the Industrial Revolution of the early 20th century. And a high-level of positive significance is possible, while the cultural, societal, and environmental repercussions could also follow a similar trajectory.
A.I. has its downsides. When evaluating A.I. tools as a solution to our client’s problems, we keep this list of drawbacks and negative effects handy, so that we may review it and think about how to mitigate their negative effects:
- A.I. is built upon biased and flawed data
- Bias & flawed data leads to the perpetuation of stereotypes
- Flawed data leads to Hallucinations & harms Brands
- Poor A.I. answers erode Consumer Trust
- A.I.’s appetite for electricity is unsustainable
We have also found that our company values are a lens through which we can evaluate new technology and any proposed solutions. Oomph has three cultural values that form the center of our approach and our mission, and we add our stated 1% For the Planet commitment to that list as well:
- Smart
- Driven
- Personal
- Environmentally Committed
For each of A.I.’s drawbacks, we use the lens of our cultural values to guide our approach to evaluating and mitigating those potential ill effects.
A.I. is built upon biased and flawed data
At its core, A.I. is built upon terabytes of data and billions, if not trillions, of individual pieces of content. Training data for Large Language Models (LLMs) like Chat GPT, Llama, and Claude encompass mostly public content as well as special subscriptions through relationships with data providers like the New York Times and Reddit. Image generation tools like Midjourney and Adobe Firefly require billions of images to train them and have skirted similar copyright issues while gobbling up as much free public data as they can find.
Because LLMs require such a massive amount of data, it is impossible to curate those data sets to only what we may deem as “true” facts or the “perfect” images. Even if we were able to curate these training sets, who makes the determination of what to include or exclude?
The training data would need to be free of bias and free of sarcasm (a very human trait) for it to be reliable and useful. We’ve seen this play out with sometimes hilarious results. Google “A.I. Overviews” have told people to put glue on pizza to prevent the cheese from sliding off or to eat one rock a day for vitamins & minerals. Researchers and journalists traced these suggestions back to the training data from Reddit and The Onion.
Information architects have a saying: “All Data is Dirty.” It means no one creates “perfect” data, where every entry is reviewed, cross-checked for accuracy, and evaluated by a shared set of objective standards. Human bias and accidents always enter the data. Even the simple act of deciding what data to include (and therefore, which data is excluded) is bias. All data is dirty.
Bias & flawed data leads to the perpetuation of stereotypes
Many of the drawbacks of A.I. are interrelated — All data is dirty is related to D.E.I. Gender and racial biases surface in the answers A.I. provides. A.I. will perpetuate the harms that these biases produce as they become easier and easier to use and more and more prevalent. These harms are ones which society is only recently grappling with in a deep and meaningful way, and A.I. could roll back much of our progress.
We’ve seen this start to happen. Early reports from image creation tools discuss a European white male bias inherent in these tools — ask it to generate an image of someone in a specific occupation, and receive many white males in the results, unless that occupation is stereotypically “women’s work.” When AI is used to perform HR tasks, the software often advances those it perceives as males more quickly, and penalizes applications that contain female names and pronouns.
The bias is in the data and very, very difficult to remove. The entirety of digital written language over-indexes privileged white Europeans who can afford the tools to become authors. This comparably small pool of participants is also dominantly male, and the content they have created emphasizes white male perspectives. To curate bias out of the training data and create an equally representative pool is nearly impossible, especially when you consider the exponentially larger and larger sets of data new LLM models require for training.
Further, D.E.I. overflows into environmental impact. Last fall, the Fifth National Climate Assessment outlined the country’s climate status. Not only is the U.S. warming faster than the rest of the world, but they directly linked reductions in greenhouse gas emissions with reducing racial disparities. Climate impacts are felt most heavily in communities of color and low incomes, therefore, climate justice and racial justice are directly related.
Flawed data leads to “Hallucinations” & harms Brands
“Brand Safety” and How A.I. can harm Brands
Brand safety is the practice of protecting a company’s brand and reputation by monitoring online content related to the brand. This includes content the brand is directly responsible for creating about itself as well as the content created by authorized agents (most typically customer service reps, but now AI systems as well).
The data that comes out of A.I. agents will reflect on the brand employing the agent. A real life example is Air Canada. The A.I. chatbot gave a customer an answer that contradicted the information in the URL it provided. The customer chose to believe the A.I. answer, while the company tried to say that it could not be responsible if the customer didn’t follow the URL to the more authoritative information. In court, the customer won and Air Canada lost, resulting in bad publicity for the company.
Brand safety can also be compromised when a 3rd party feeds A.I. tools proprietary client data. Some terms and condition statements for A.I. tools are murky while others are direct. Midjourney’s terms state,
“By using the Services, You grant to Midjourney […] a perpetual, worldwide, non-exclusive, sublicensable no-charge, royalty-free, irrevocable copyright license to reproduce, prepare derivative works of, publicly display, publicly perform, sublicense, and distribute text and image prompts You input into the Services”
Midjourney’s Terms of Service Statement
That makes it pretty clear that by using Midjourney, you implicitly agree that your data will become part of their system.
The implication that our client’s data might become available to everyone is a huge professional risk that Oomph avoids. Even using ChatGPT to provide content summaries on NDA data can open hidden risks.
What are “Hallucinations” and why do they happen?
It’s important to remember how current A.I. chatbots work. Like a smartphone’s predictive text tool, LLMs form statements by stitching together words, characters, and numbers based on the probability of each unit succeeding the previously generated units. The predictions can be very complex, adhering to grammatical structure and situational context as well as the initial prompt. Given this, they do not truly understand language or context.
At best, A.I. chatbots are a mirror that reflects how humans sound without a deep understanding of what any of the words mean.
A.I. systems are trying its best to provide an accurate and truthful answer without a complete understanding of the words it is using. A “hallucination” can occur for a variety of reasons and it is not always possible to trace their origins or reverse-engineer them out of a system.
As many recent news stories state, hallucinations are a huge problem with A.I. Companies like IBM and McDonald’s can’t get hallucinations under control and have pulled A.I. from their stores because of the headaches they cause. If they can’t make their investments in A.I. pay off, it makes us wonder about the usefulness of A.I. for consumer applications in general. And all of these gaffes hurt consumer’s perception of the brands and the services they provide.
Poor A.I. answers erode Consumer Trust
The aforementioned problems with A.I. are well-known in the tech industry. In the consumer sphere, A.I. has only just started to break into the public consciousness. Consumers are outcome-driven. If A.I. is a tool that can reliably save them time and reduce work, they don’t care how it works, but they do care about its accuracy.
Consumers are also misinformed or have a very surface level understanding of how A.I. works. In one study, only 30% of people correctly identified six different applications of A.I. People don’t have a complete picture of how pervasive A.I.-powered services already are.
The news media loves a good fail story, and A.I. has been providing plenty of those. With most of the media coverage of A.I. being either fear-mongering (“A.I. will take your job!”) or about hilarious hallucinations (“A.I. suggests you eat rocks!”), consumers will be conditioned to mistrust products and tools labeled “A.I.”
And for those who have had a first-hand experience with an A.I. tool, a poor A.I. experience makes all A.I. seem poor.
A.I.’s appetite for electricity is unsustainable
The environmental impact of our digital lives is invisible. Cloud services that store our lifetime of photographs sound like featherly, lightweight repositories that are actually giant, electricity-guzzling warehouses full of heat-producing servers. Cooling these data factories and providing the electricity to run them are a major infrastructure issue cities around the country face. And then A.I. came along.
While difficult to quantify, there are some scientists and journalists studying this issue, and they have found some alarming statistics:
- Training GPT-3 required more than 1,200 MWh which led to 500 metric tons of greenhouse gas emissions — equivalent to the amount of energy used for 1 million homes in one hour and the emissions of driving 1 million miles. GPT-4 has even greater needs.
- Research suggests a single generative A.I. query consumes energy at four or five times the magnitude of a typical search engine request.
- Northern Virginia needs the equivalent of several large nuclear power plants to serve all the new data centers planned and under construction.
- In order to support less consumer demand on fossil fuels (think electric cars, more electric heat and cooking), power plant executives are lobbying to keep coal-powered plants around for longer to meet increased demands. Already, soaring power consumption is delaying coal plant closures in Kansas, Nebraska, Wisconsin, and South Carolina.
- Google emissions grew 48% in the past five years in large part because of its wide deployment of A.I.
While the consumption needs are troubling, quickly creating more infrastructure to support these needs is not possible. New energy grids take multiple years and millions if not billions of dollars of investment. Parts of the country are already straining under the weight of our current energy needs and will continue to do so — peak summer demand is projected to grow by 38,000 megawatts nationwide in the next five years.
While a data center can be built in about a year, it can take five years or longer to connect renewable energy projects to the grid. While most new power projects built in 2024 are clean energy (solar, wind, hydro), they are not being built fast enough. And utilities note that data centers need power 24 hours a day, something most clean sources can’t provide. It should be heartbreaking that carbon-producing fuels like coal and gas are being kept online to support our data needs.
Oomph’s commitment to 1% for the Planet means that we want to design specific uses for A.I. instead of very broad ones. The environmental impact of A.I.’s energy demands is a major factor we consider when deciding how and when to use A.I.
Using our Values to Guide the Evaluation of A.I.
As we previously stated, our company values provide a lens through which we can evaluate A.I. and look to mitigate its negative effects. Many of the solutions cross over and mitigate more than one effect and represent a shared commitment to extracting the best results from any tool in our set
Smart
- Limit direct consumer access to the outputs of any A.I. tools, and put a well-trained human in the middle as curator. Despite the pitfalls of human bias, it’s better to be aware of them rather than allow A.I. to run unchecked
- Employ 3rd-party solutions with a proven track-record of hallucination reduction
Driven
- When possible, introduce a second proprietary dataset that can counterbalance training data or provide additional context for generated answers that are specific to the client’s use case and audience
- Restrict A.I. answers when qualifying, quantifying, or categorizing other humans, directly or indirectly
Personal
- Always provide training to authors using A.I. tools and be clear with help text and microcopy instructions about the limitations and biases of such datasets
1% for the Planet
- Limit the amount of A.I. an interface pushes at people without first allowing them to opt in — A.I. should not be the default
- Leverage “green” data centers if possible, or encourage the client using A.I. to purchase carbon offset credits
In Summary
While this article feels like we are strongly anti-A.I., we still have optimism and excitement about how A.I. systems can be used to augment and support human effort. Tools created with A.I. can make tasks and interactions more efficient, can help non-creatives jumpstart their creativity, and can eventually become agents that assist with complex tasks that are draining and unfulfilling for humans to perform.
For consumers or our clients to trust A.I., however, we need to provide ethical evaluation criteria. We can not use A.I. as a solve-all tool when it has clearly displayed limitations. We aim to continue to learn from others, experiment ourselves, and evaluate appropriate uses for A.I. with a clear set of criteria that align with our company culture.
To have a conversation about how your company might want to leverage A.I. responsibly, please contact us anytime.
Additional Reading List
- “The Politics of Classification” (YouTube). Dan Klyn, guest lecture at UM School of Information Architecture. 09 April 2024. A review of IA problems vs. AI problems, how classification is problematic, and how mathematical smoothness is unattainable.
- “Models All the Way Down.” Christo Buschek and Jer Thorp, Knowing Machines. A fascinating visual deep dive into training sets and the problematic ways in which these sets were curated by AI or humans, both with their own pitfalls.
- “AI spam is already starting to ruin the internet.” Katie Notopoulos, Business Insider, 29 January 2024. When garbage results flood Google, it’s bad for users — and Google.
- Racial Discrimination in Face Recognition Technology, Harvard, 24 October 2020. The title of this article explains itself well.
- Women are more likely to be replaced by AI, according to LinkedIn, Fast Company, 04 April 2024. Many workers are worried that their jobs will be replaced by artificial intelligence, and a growing body of research suggests that women have the most cause for concern.
- Brand Safety and AI, Writer.com. An overview of what brand safety means and how it is usually governed.
- AI and designers: the ethical and legal implications, UX Design, 25 February 2024. Not only can using training data potentially introduce legal troubles, but submitting your data to be processed by A.I. does as well.
- Can Generative AI’s Hallucination Problem be Overcome? Louis Poirier, C3.ai. 31 August 2023. A company claims to have a solution for A.I. hallucinations but doesn’t completely describe how in their marketing.
- Why AI-generated hands are the stuff of nightmares, explained by a scientist, Science Focus, 04 February 2023. Whether it’s hands with seven fingers or extra long palms, AI just can’t seem to get it right.
- Sycophancy in Generative-AI Chatbots, NNg. 12 January 2024. Human summary: Beyond hallucinations, LLMs have other problems that can erode trust: “Large language models like ChatGPT can lie to elicit approval from users. This phenomenon, called sycophancy, can be detected in state-of-the-art models.”
- Consumer attitudes towards AI and ML’s brand usage U.S. 2023. Valentina Dencheva, Statistica. 09 February 2023
- What the data says about Americans’ views of artificial intelligence. Pew Research Center. 21 November 2023
- Exploring the Spectrum of “Needfulness” in AI Products. Emily Campbull, The Shape of AI. 28 March 2024
- AI’s Impact On The Future Of Consumer Behavior And Expectations. Jean-Baptiste Hironde, Forbes. 31 August 2023.
- Is generative AI bad for the environment? A computer scientist explains the carbon footprint of ChatGPT and its cousins. The Conversation. 23 May 2023
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:
- 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
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
Unexplained failure rate Before
Avg. incremental build time
Unexplained failure rate After
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 Weight | Before | After | % Change |
---|---|---|---|
Desktop | 25.41 MB | 3.61 MB | Down 85.79% |
Mobile | 12.07 MB | 3.62 MB | Down 70.01% |
Visualizing the improvements to loading speed:
Core Web Vitals Improvements:
Overall Score | First Contentful Paint | Largest Contentful Paint | Total Blocking Time | Cumulative Layout Shift | Speed Index | |
---|---|---|---|---|---|---|
Mobile before | 3 | 3.4s | 15.7s | 8980ms | 0.043s | 22.9s |
Mobile after | 31 | 4.4s | 21.1s | 2140ms | 0.503s | 9.5s |
CHANGE | +28 | +1s | +5.4 | -6840 ms | +0.43 | -13.4 |
Desktop before | 38 | .9s | 4.5s | 1600ms | 0.043s | 3.9s |
Desktop after | 63 | 1.2s | 4.5s | 420ms | 0.207s | 2.6s |
CHANGE | +25 | +.3 s | 0 | -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:
- A logo version for different sizes and applications. Variations might include one with the tagline, one without, one with a mark and typeface, one just the name, one just the mark, the possibilities go on!
- Secondary logo options which may include abbreviations, monograms, or different combinations of the main elements
- When applicable, an internationalized version of the wordmark and tagline
- A color palette that can provide variation while addressing accessibility and situations of low light or high glare
- A fluid typography system that provides contrast between sizes within different size media (including print!)
- A fluid spacing system
- Motion when appropriate, like video intros and outtros
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:
- Make your brand more visible. More users can connect with you when you have a brand that’s both recognizable and responsive. Given that 60% of consumers are more likely to buy from a brand they recognize, the opportunity cost of not getting this right is huge.
- Improve accessibility. Digital accessibility means people of all abilities can use your website and experience your brand. Up to 1 in 4 American adults live with a disability, so a lack of accessibility means fewer customers to reach. For visual brand elements, that means considerations for color blindness, low vision, and cognitive impairments like dyslexia.
- Create a more consistent brand. Responsive branding equips your team with the tools to express your brand effectively across mediums. That means less time involved in building new assets and a more consistent experience that meets your users’ high expectations.
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:
- Dropping words or lettering
- Dropping the icon or image
- Creating an abbreviation version
- Stacking the icon/image and text/lettering
- Combining separate elements into a single icon
- Simplifying details and shapes within logo marks
- Varying thickness and white space to make small logos more legible
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:
- Minimum legible sizes. When is small too small? It depends, of course, but don’t forget older customers, those with low vision, or those in situations that make reading more difficult. Use at least a 16px size for digital products and 12pt size for print. These might change depending on the font, but these sizes are a great place to start.
- Inclusive typefaces. Many designers overlook how understandable certain letterforms appear to be. A way to quickly review is to look at the number 1, lowercase l (L), and uppercase I (i) of any typeface. Then also look at the capital O, the zero, and the lowercase o — 1lI O0o. Can you tell the difference when these characters are out of context? If you can’t, then your customers might have trouble as well. Use your judgment, but also use this trick to expose possible problems with your communication. These five keys to accessible web typography are a great place to start.
- Scaling ratios. Similar to a musical scale of harmonious notes, a typographic scale is a collection of font sizes that work well together. Using a typographic scale helps to make your text visually appealing and readable for different users across different devices. Some examples include exponential scales, where you multiply the previous font size by a ratio to get the next font size, and Fibonacci sequences, where you add a number from the Fibonacci set to the base font value to get a new size in the scale.
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.