Berkshire Hathaway: Redesigning a Decades-Old Website
Unsolicited redesign of Berkshire Hathaway’s website by Desirel Lawrence
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
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
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 Vox, The Atlantic, Built 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
For design inspiration, I looked at websites from Jefferies Financial Group, BlackRock, 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.
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
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.
