CASE STUDY

Coinmarketcap.com

As the popularity of crypto currencies continues to increase around the world, the demand for a centralized source with easy and realtime access to all coins and tokens has grown to make Coinmarketcap the most popular site for all things crypto. Coinmarketcap is a bootstrapped aggregator of all crypto data available from API’s on the web today – made with Bootstrap 3. According to Alexa, it ranks in the top 500 sites on the web (Oct ’17).

For added context, Coinmarketcap is ranked between Hp.com 367, and Oracle.com 369, respectively. The second most popular site in the crypto space is Bittrex, an online exchange ranked at 582.

357

Alexa Rank

Challenge

The current Coinmarketcap site has an extensive amount of data from coins and tokens, that currently don’t have follow a user flow. Evaluate Coinmarketcap and propose a better UX/UI experience. Use design thinking to discover and solve for unmeet user needs. Share your process and sketches. Lastly, how would you execute your solution in 3 months.

Insights

The first step was to frame a question, “How might we improve the UX / UI experience for Coinmarketcap.com?”. Secondly, gather inspiration from user research. Without any onsite analytics or user test groups, I researched Alexa and Twitter for insights into unmeet user needs.

Alexa

Analytics data

Predominently male

Age 25-34

No Children

Mostly Hispanic and African

25.7% of visits from USA (runnerup India 4.9%)

Browses from home

Web metrics

4M unique monthly users (USA)

7 min on-site time

9 visits per visitor

4 page views per visit

35 monthly page views per visitor

50% bounce rate

“Ethereum” accounts for 9% of search traffic

Twitter

Insights

Desire to download charts to CSV

Confusion about market cap highs

Enjoy making predictions

Users tend to follow a small group currencies

Performance of new coins

You guys just added a log scale button to your charts. I love you. That's all.

Can we download full history in .csv file?

With enough insights gathered, I created 3 personas: Trader, Enthusiast, and Enterprise – focusing only on the trader persona for the scope of this case study.

Next came the sitemap in order to see a full picture of the current site flow. I experienced the site as a user and made a list of what was working and wasn’t.

Observations / Walkthrough

Not working

Homepage, all, top 100 (same page)

Coin and top 100 (same page)

Token and top 100 (same page)

“Trader Volume” rename to “Volume”

Requires several clicks to locate currencies of interest

Clickable elements without context

Excessive AD’s

Missing 404

Working

Fast page load time

Comprehensive list of all currencies

Ability to buy currency on the details page

Useful tools like market share percentage

Trend pages (i.e. gainers and losers)

FREE

Mashup

The mashup method from Design Thinking was used to generate ideas that align with user needs. During this part of the Design Thinking process, I didn’t hold back from coming up with silly, or impractical ideas. As long as they connect with the problem at some level. The intent is to explore ideas that could offer clues towards a feature that is truly meaningful for the user.

Ideas

Chart + Vault

Volume + Security officer

Price + Branch manager

Margin + Security

Orders + Teller

Crypto + R/C cars

Make ideas tangible

After the fun mashup phase was over, it was time to revisit the sitemap and make some improvements. Then create wireframe sketches for use in rapid collaboration. Lastly, telling a story through user journey.

Design

Now users can easily keep track of their favorite crypto currencies, and stay up to date with key market data. New product features include account creation, the ability to follow coins or tokens, and dashboard that prominently displays key market info in real-time, such as market cap, latest / hottest crypto currency, and dominate / runner-up coins. A redesigned navigation , search, and footer. UI improvements include a new logo and a minimalist look and feel in order to keep focus on what the user cares about most: data.

The mobile experience also includes improvements, such as the ability to scroll horizontally through the tables and optimized font and table sizes.