Berkshire Hathaway: Redesigning a Decades-Old Website

Unsolicited redesign of Berkshire Hathaway’s website by Jeff Shibasaki

Unsolicited redesign of Berkshire Hathaway’s website by Jeff Shibasaki

Part 1: The Challenge

Background

Berkshire Hathaway is a multinational conglomerate that wholly owns more than sixty companies, including Geico, Duracell, Dairy Queen and Fruit of the Loom. Berkshire Hathaway also has a significant minority holding in public companies like the Kraft Heinz Company, American Express, Apple, etc. The company is led by its chairman, CEO and renowned investor –– Warren Buffet.

Problem

berkshire-hathaway-website-before-redesign.png

When I read that Warren Buffet sold all of Berkshire Hathaway's shares in the four largest U.S. airlines in response to the coronavirus, I visited his website to learn more. While I didn't find the answer, I did find a website desperately in need of a makeover.

The entire website is a list of plain text links and PDFs. No navigational elements (i.e. navbar, breadcrumbs, footer, etc.), no images (aside from the Geico logo), no headings, no copy  –– nothing to engage users or help them accomplish tasks. Not only does the website lack professionalism and a user-centered design, but it's an embarrassment for Berkshire Hathaway. Why does the third-largest conglomerate in the world have one of the worst websites in the world? I didn't know, but I wanted to find out and improve the user experience.

Scope

I only redesigned the homepage of Berkshire Hathaway's website for this case study, but I provided an explanation herein for pages that I added/renamed, removed and combined.

Roles

  • User research

  • Information architecture

  • Copywriting

  • Content strategy

  • Visual design

Tools

  • Paper

  • Markers

  • Miro

  • Sketch

  • Adobe Color

  • WhatFont

Copyright

The photo of Warren Buffet is a copyright of Wall Street Playbook and the photo of Kiewit Plaza is by JonClee86 on Wikipedia.

 

Part 2: The Process

Step 1: Empathize

becoming-warren-buffett-documentary.png

To better understand what Berkshire Hathaway does and how the company is successful, I read articles on Investopedia. Additionally, I looked at several Berkshire Hathaway subsidiary websites like Geico, Duracell, Dairy Queen and Fruit of the Loom. Unlike Berkshire Hathaway’s website, these marketing websites are professionally designed for targeted audiences.

I also watched the documentary, Becoming Warren Buffett, to understand Warren’s psyche. The billionaire lives in a five-bedroom home in Omaha, Nebraska that he bought in 1958 for $31,500. He also never spends more than $3.17 on breakfast from McDonald’s. 😆

Warren’s frugalness and tech-averse lifestyle is likely why the website design has been ignored for more than 20 years.

Next, I audited Berkshire Hathaway’s website to understand what’s right, wrong and missing. These are some of the highlights:

Authority

  • Alexa Rank: 29,688 (U.S.)

  • Backlinks: 4343,606

  • Referring Domains: 17,096

Performance (Homepage)

  • Size: 65KB

  • Load Time: 173 MS

  • Page Requests: 6

Search Engine Optimization

  • Alt Tags: Yes (Geico logo)

  • Canonical Tags: Missing

  • Keywords: Not Optimized

  • Meta Description Tags: Missing

  • Open Graph Tags: Missing

  • Structured Data: Missing

  • Title Tags: Not Optimized (All Caps)

  • XML Sitemap: Missing

Mobile

  • Font Size: Too Small

  • Responsive: No

  • Tap Targets: Too Small

  • Viewport: Not Set

Security

  • HTTPS: Yes

  • Secure JavaScript Libraries: Yes

Content Strategy

Pages

  • About: Missing

  • Blog/News: Missing (Only PDFs)

  • Contact: Missing

  • Privacy Policy: Missing

  • Terms of Service: Missing

Content

  • Copy: Missing

  • Target Audience: Not Defined

  • Value Propositions: Missing

Information Architecture

  • Bios: Missing

  • Business Description: Missing

  • Calls to Action: Missing

  • Contact Information: Missing

  • Filter/Search: Missing

  • Footer: Missing

  • Headings: Missing

  • Labels: Poor

  • Navigability: Poor

  • Navigation Bar: Missing

  • Social Links: Missing

  • Website Structure: Poor

Visual Design

  • Branding: Poor

  • Colors: Poor

  • Favicon: Missing

  • Images: Yes (Geico logo)

  • Fonts: Poor (Times)

The audit provided copious evidence that the website was much worse than I had first assumed. Not only would this data help me define the pain points in Step 2, but it would also help me create the metrics.

Finally, I looked at Berkshire Hathaway’s keywords and LSI keywords to understand what users are searching for. While I learned that people are primarily searching for the company, its stock and information about Warren Buffet, I did find a popular search query for ‘berkshire hathaway website so bad’ that led to comments on Quora and articles from VoxThe AtlanticBuilt In and various web designers. The Atlantic writes that the last major redesign occurred in the late 90s.

“The biggest change to Berkshire Hathaway’s website came in 1999, when the design switched from a single bulleted list of 11 links to a two-column bulleted list with a teensy bit more white space around its 14 hot-links.”

To conclude my research, I pulled the notable details from the website audit, comments and articles and added that data to virtual sticky notes in Miro.

Step 2: Define

To create the design strategy, I converted the data on the sticky notes into pain points in Miro. For example, I turned the missing navigation into a pain point because users always need to return to the homepage. Additionally, I turned the missing legal pages into a pain point because the site doesn’t look and feel trustworthy. Frankly, these pain points could’ve gone on forever because the website has so many issues, but I tried to focus on the primary problems.

Next, I organized the pain points on a board in Miro and used dot-voting by sticking dots on the biggest pain points. Since I was the only person voting on this solo project, I used two dots for issues that I considered important and three dots for issues I considered urgent. Stickies with similar pain points were combined.

Then, I tallied the dots to find the biggest pain points.

Finally, I inverted those pain points to create a list of goals to work toward and determined what success looked like for each goal by creating metrics.

Step 3: Ideate

Since I didn’t have enough user data to create personas, I used the pain points to divide users into three groups — shareholders (primary), journalists (secondary) and fans of Warren (tertiary).

For the sitemap, I created a mind map in Miro. Knowing who I was designing for and using the design strategy as my guide helped me decide what pages needed to be added/renamed, removed or combined.

Pages Added/Renamed

  • Added a blog called News to move all of the content from News Releases, so posts can be searched and filtered and shareholders and journalists can easily subscribe for updates.

  • Added an About page because it’s a core page on every website and users shouldn’t have to go to Wikipedia to learn about the company.

  • Renamed Links to Berkshire Subsidiary Companies to Subsidiaries for simplification.

  • Renamed Annual & Interim Reports to Reports for simplification.

  • Renamed Link to SEC Filings to SEC Filings for simplification.

  • Renamed Comparative Rights and Relative Prices of Class A and B Stock to Class A and B Stock for simplification.

  • Renamed Letters from Warren E. Buffett Regarding Pledges to Make Gifts of Berkshire Stock to Pledges for simplification.

  • Added a Terms of Service and Privacy Notice because the Legal Disclaimer page doesn’t appear to meet the legal notices for a website.

  • Renamed Legal Disclaimer to Disclaimer for simplification.

Pages Removed

  • Removed A Message From Warren E. Buffett because it’s an advertisement for Geico that hurts the reputation of Berkshire Hathaway with shameless self-promotion. The website should provide information, not be an advertisement.

  • Removed Annual Meeting Information because this content should be combined on the News page.

  • Removed Proxy Statement — 2020 because this is related to when the last and next Annual Meeting will be held and, again, should be combined on the News page.

  • Removed Celebrating 50 Years of a Profitable Partnership because this book is only available on eBay — not bookstores — and eBay shows people who’ve bought this book have also viewed several pornographic books — which doesn’t help Berkshire Hathaway’s reputation.

Pages Combined

  • Combined all of the pages with thin content containing various letters from Warren and Charlie and renamed it to Letters for simplification.

Step 4: Prototype

berkshire-hathaway-redesign-wireframe.png

For design inspiration, I looked at websites from Jefferies Financial GroupBlackRock, Inc. and KKR & Co. Inc. I also looked at Bill Gates’ website since he’s a Berkshire Hathaway investor.

Since Berkshire Hathaway doesn’t have any website images that I could use, BlackRock’s text boxes inspired me to design something similar for presenting the calls to action in the middle of the page.

I also decided to add a short section about Berkshire Hathaway that briefly tells users what the company does. If Warren wasn’t such an icon, I probably would’ve included a shorter version of this in the hero section. However, since he’s the image of the company, I thought a photo of him with a fitting quote could convey Berkshire Hathaway’s value proposition.

berkshire-hathaway-redesign-style-guide.png

I changed the logo from Times to Bebas Neue and used PT Serif for headings and Arial for body text to give the site a modern, distinguished appearance. Currently, Berkshire Hathaway uses Times for the logo and all text on the website. The best practice here is to use the logo typeface for the logo –– nothing else. This makes it stand out and become memorable.

For the colors, I used Adobe Color to reimagine the brand colors since one of the pain points was the bad use of color –– blue logo, blue text and purple links.

I made all of these aesthetic changes to rebrand Berkshire Hathaway for enduring success, long after the 90-year old Warren retires.

 

Part 3: The Solution

berkshire-hathaway-redesign.png

I wrote the copy for the primary users (shareholders), but also made sure that secondary and tertiary users (journalists, fans of Warren) could easily navigate the site.

Finally, I chose a photo of Warren from a Google search and a photo of Berkshire Hathaway’s headquarters on Wikipedia. These two images, along with Berkshire Hathaway’s subsidiary logos, were enough to complete this redesign.

 

Final Thoughts

I set out to investigate redesigning Berkshire Hathaway’s website because I found it to be a terrible user experience. Some people argue on forum websites that the design doesn’t need to change because Berkshire Hathaway is already wildly successful. To me, that doesn’t make any sense. The website is for its users –– not Berkshire Hathaway.

Jeff Shibasaki

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque nisl massa, et vestibulum mauris ultricies vitae. Nulla a quam et magna tristique luctus eu ac eros.

https://jeffshibasaki.com
Previous
Previous

The New York Times: Upgrading the Podcast Directory

Next
Next

Ally Financial: Redesigning the Website for a Tech-Savvy Audience