Once I set myself the task to produce a redesign case-study, I knew that it would be best to focus on a site that was already relevant to the current tech community. My hope was that the case study might generate a discussion. Around the same time, a colleague had mentioned they’d stumbled upon my company via CrunchBase. After checking it out for myself, I found that the site was in need of a redesign to stay relevant. Thus, after sketching a few ideas, I consulted a few colleagues to conduct a usability test and uncover what exactly wasn’t working with the existing site.

How CrunchBase Should Be: A Toptal ReDesign

CrunchBase Usability Testing

I recruited two usability testers reflective of the investor and entrepreneur target markets. I needed to see CrunchBase through their eyes, to focus on real problems, and to see what worked and didn’t work.

I recruited Russ G., a campaign consultant in his mid 50’s and Mike is an entrepreneur in his mid 30’s. The tests were conducted remotely using the conferencing software of their choice. Russ chose Anymeeting and Mike chose Zoom. I took screenshots periodically and we recorded the tests. To start the test, I asked them to find more information on the Skillbridge acquisition and to “think out loud”.

Both testers struggled to locate the information they had been tasked to find within the first 3 minutes. Each arrived at the acquisition page eventually, and the paths they took changed my understanding of an ideal user flow as well as how to prioritize features and content on the pages.

Why CrunchBase?

CrunchBase is the leading platform for information on accelerators, investors, and start-ups. Even pre-seed, pre-revenue, pre-almost-everything start-ups like mine have a seat at the table, and the most newsworthy info percolates to the top.

All content is user submitted. The database is gigantic. Millions of users flock to CrunchBase every month to promote their organization, meet others, and learn about their industry. Investors flock to CrunchBase to analyze trends, adjust deal-flow, and make better informed investment decisions.

I wrote this redesign to offer a glimpse into one simple design process. I start with the business and hone in on the user, offering visual clues along the way.

Founded in 2007 by Mike Arrington, CrunchBase “began as a simple crowd-sourced database to track startups covered on TechCrunch.”

It is the place to track start-ups. Hailed as the “Wikipedia of start-ups” by venture capitalist, Fred Wilson, CrunchBase continues to win hearts. Entrepreneurs love CrunchBase because it helps them to tell their story. Investors love CrunchBase because it keeps them up to date.

CrunchBase needed to dust off the cobwebs to stay relevant. I couldn’t wait to recommend new colors, fonts, sizing, spacing, and visual treatment, and more. The web-site is very hard for me to read, and when I show it to people, I tend to get a ‘what the heck is this?’ look on their face. That’s normal. What’s not normal is how long it lasts. Eventually, the look turns to disgust. They seem to be wondering ‘what kind of taste is this?’. From there, I notice a breath of hope. Their chin turns up, theirs eyes to the logo in the upper left. They seem to be wondering ‘do I trust this site?’

Wireframing The Homepage

After the usability tests, I wire-framed the existing homepage – black and white, reverse contrast – to better understand how CrunchBase looked to its millions of power users. I wanted to feel the logic and structure. I traced what was there to appreciate the design better and to get acquainted with every decision behind it.

Rather than designing with placeholder text like Lorem Ipsum, I quickly populated the wire-frame with ‘real’ content using Craft, a new plug-in by Invision. It was my first time using it. It worked wonderfully.

I found an appreciation for what was there. Only after, did I start to make changes.

Setting the KPIs

For this theoretical case study, I chose two Key Performance Indicators that could measure the success of the update, post-deployment. I find this to be an often overlooked and critical part of the process. Without real data to measure the effects of an update, it’s hard to know when to celebrate. Did things get better? What if things got worse? I picked two KPI goals that I consider leading indicators to the health of the website:

  • 10x more premium trials started per session, 1st month vs last month.
  • 4x more site-wide searches completed per session, 1st month vs last month.

Target Vs Actual Flow

One of the things I learned from the usability tests was that “search” is a smoother path for users than “all acquisitions.”

Improving CrunchBase

When first examining the CrunchBase website, I noticed some issues with its aesthetic impression, as well as its usability. Mostly, I felt that the valuable information was just too difficult to comprehend, or find as a user. There is so much data and compelling content on CrunchBase, yet if it isn’t easy to uncover, then it is useless for those visiting the site.

It’s understandable that the location is difficult to organize, as what seems to be required is a robust, yet coherent system. Therefore, in this redesign, I focus on how startup data can be better visualized, and how page to page navigation can be more user-friendly. All of this must be accomplished while maintaining a contemporary aesthetic to enforce its relevance. The proposed changes target business and user goals.

New Framework and Features

The proposed homepage offers clearer content and more interaction opportunities for the user. By increasing engagement towards news, content, and upgrades I’d expect increased revenue in both ads and subscriptions. In a word, the proposed homepage is more ‘powerful.’ On the homepage are a series of critical of redesigned elements that I will cover in detail.

New Value Proposition

The new top banner focuses interaction on the homepage, offering a more telling first impression for new users on the site. CrunchBase offers a rare depth of content. The existing top banner on CrunchBase describes the value of the platform in muddled terms. It doesn’t look interactive although “Discover”, “Customize”, and “Contribute” are clickable and lead to different areas of the site. These are essential navigation tools, and yet don’t seem to be as effective as they could be. The proposed top banner illustrates the value by encapsulating the tagline as hint text in a search. It streamlines the value proposition and sets expectations instantly.

The new header quickly communicates the values of the site to users.

New Sidebar

Without modifying the site’s architecture, the new sidebar leverages space and scale to communicate its navigational purpose and potential better. You can see that with the font change, and more visual space the headings are more legible.

The new sidebar better leverages visual hierarchy.

The new sidebar is more readable at a quick glance with a more balanced visual weight, which is a result of slightly increasing it’s width, giving the text more room to breathe. As well, by removing the emblems, which were not clear on their own, the text is no longer competing for the user’s visual attention.

New Sort and Filter Within Cards

The goal of the enhanced table functionality above is to increase premium downloads. By offering users a way to sort and filter within “Featured Venture Investments” and “Featured Acquisitions,” more users will understand the premium tools and more users will start a free trial. By anchoring a free trial offer to the proposed “Download Spreadsheet” Button, the sales funnel aligns more closely with a user’s appetite for the product.

New Data Visualization

The new data visualization on the homepage takes all of the finance information from CrunchBase and puts it in an easy to read graph. Rather than focusing on who is trending on CrunchBase, the “Venture Deals By Quarter” graph offers the pulse of the industry at a glance. This reinforces one arm of the CrunchBase mission: to be the ecosystem of industry data for venture-backed startups and the trusted resource for the industry at large.

However, this being said, a merit of the chart was that it was clickable and encouraged engagement from the user. So, although it doesn’t communicate as quickly as the graph, it may have provided a deeper engagement with the site. Therefore, this is something that I would like to submit to some testing before determining for certain.

Design Process

Now that I’ve taken you through some of the fundamental changes, I think it’s important that I also offer some insight into my design process. Design decisions don’t just happen but require thoughtful investigation.

Business Goals

As a UX designer, I operate at the intersection of business and user goals. My goal is to make companies more profitable and users more productive.

Before all the artsy stuff, I need to understand the big picture. Only using the product isn’t enough. What is the value? Who pays? What channels? What are the far-reaches of the business’s perimeter? Who are all the players? How does it all fit together? I’ve yet to find a better tool for this than the Business Model Canvas.

I started this design process with a quick round of research as I filled out a Business Model Canvas for CrunchBase. I was surprised to find so many customer segments and learn so many things. It was like having a two-hour sit-down with the CEO. Thanks to the Business Model Canvas, I learned what not to change. This can be the most important place to start.

CrunchBase Case Study

Customer Value Proposition

I picture business goals as ‘pegs on a board’ and user goals as ‘the gaps’. To design for these shortcomings, I imagined a few fictional, yet life-like personas for CrunchBase. From their breakfast cereal, to the car they drive, to the bank they bank with, I took notes and thought about how they spend their day, the problems they have, what a ‘big-win’ for them looks like, and what their needs, wants, and fears might be in relation to CrunchBase. I focused on two customer types:

  • The first time entrepreneur
  • The venture capitalist

CrunchBase is an extensive website with remarkable features and functionality behind it. Rather than focusing on the existing architecture (and designing for the technology), I started with a single user goal reflective of the customer value proposition. From there, I decided on the types of screens required for this goal.

The goal I picked was “to learn more about the recent Skillbridge acquisition by Toptal”. The image below is a user flow which documents the screen types involved.

Wireframe Sketches

To me, sketching feels like the most productive part of the process. Maybe this is because I’ve always loved to draw. It carried me through architecture school. It drew me to software design. I still remember my first job as a UX freelancer, sketching screens for an iPhone app late one night, in the wee hours after my day job. “I need to do this all the time.” I thought to myself. “I want to draw for a living.”

Good ideas, bad ideas – they all happen very quickly when sketching. There is no faster way to get an idea out there and to see if it have legs, than to draw on big sheets of paper with a very inky pen.

CrunchBase Case Study

Design Reviews

Throughout the process, I led remote design reviews attended by Toptal’s very talented Director of Design, Danielle Reid. These reviews helped clarify the insights, focus the strategy, and even unearth a few key opportunities.

One of these opportunities was data-visualization on the homepage that could instantly show the market at large.

CrunchBase Business + User Goals

The purpose of this case study is to showcase one designer’s approach to design. There is no right way or standard when it comes to big projects and small teams. As a designer who often works with startups, I tend to try new things and adjust the process for new opportunities along the way.

To summarize my process here, I started with a business model canvas, which influenced customer journeys, sketching, usability testing, wireframing, and hi-fidelity mocks.

What do you think?

I’d love to hear your thoughts on the solution and or design process. Feel free to direct message me on Twitter at @8ndw or comment below.

About the author

Andrew Graunke, United States
member since October 3, 2015
Andrew is endlessly driven by product/market fit. He has honed his intuition and expertise in this concept through experience working at both Fortune 500 companies and angel-backed startups. Andrew also has an affinity for design, having graduated from a top-ranking Architecture school. A philosopher at heart, he believes in people, products, prototypes, and ideas. [click to continue...]
Hiring? Meet the Top 10 Freelance Web Designers for Hire in December 2016

Comments

Luboš Volkov
Good one Andrew!
Andrew Graunke
Thanks, Luboš! Glad you enjoyed it.
Alexandre Stuber
Awesome! Congratulations on the article :)
inumair
Nice revamp
Andrew Graunke
Thanks, Alexandre!
Andrew Graunke
Thanks!
Khaled Monsoor
Nice job, Andrew. An overhauling to CrunchBase UI is a long overdue.
Alex
Looks pretty sweet Andrew! Great ideas all throughout
Andrew Graunke
CrunchBase just announced a massive update! Has anyone tried the new CrunchBase Pro? https://www.producthunt.com/tech/crunchbase-pro
Andrew Graunke
Thanks, Alex!
Andrew Graunke
Thanks, Khaled!
comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great engineering and design posts.
Free email updates
Get the latest content first.
Thank you for subscribing!
You can edit your subscription preferences here.
Trending articles
Relevant technologies
About the author
Andrew Graunke
Designer
Andrew is endlessly driven by product/market fit. He has honed his intuition and expertise in this concept through experience working at both Fortune 500 companies and angel-backed startups. Andrew also has an affinity for design, having graduated from a top-ranking Architecture school. A philosopher at heart, he believes in people, products, prototypes, and ideas.