ETHNews Redesign

Making keeping up with crypto news not so cryptic

Team & Duration

Solo; 2 days 

Role

Usability testing, prototyping, UI designer

Deliverables & Methods 

Deliverables: Prototype

Methods: Content analysis, affinity diagramming, usability testing, jobs to be done framework, personas, wireframing

  • ETHNews is an emerging provider of Ethereum and Blockchain ecosystem news covering breaking news, announcements, information, and in-depth analyses on Ethereum, blockchain, and virtual currency developments. And for those new to Ethereum and blockchain technology, they have handy reference material and guides.

Goal 

Being a passionate cryptospace lurker myself, my goal was to answer these three questions:

  1. How do people currently use the site/app?
  2. Are they facing any usability issues or have concerns?
  3. What can I do to help solve these issues/concerns through design?

Process

I divided my game plan into 5 distinct phases, cheers to IDEO’s human-centered design thinking process

1. Empathize with Users

Understanding

In order to get me thinking about all the different possibilities of why someone would use ETHNews, I created a list of possible users, situations, motivations, and outcomes using the Jobs To Be Done framework.

This would help me understand the mindset and background of the user’s behavior, needs, and goals to help formulate the various tasks I would be asking them to complete.

Jobs to be Done Framework

User     Situation     Motivation     Outcome

Newcomer

When I have the time to spare, I’m looking for resources that will provide me information, so that I can continue learning outside of my job.

Enthusiast

When I need to keep up with news in the cryptospace, I’m looking for a reliable place of news stories, particularly in finance, so that I don’t miss out on any business opportunities.

Provisional Personas

Based on the exercise above, I crafted two provisional personas. These personas are purely based off of my assumptions and serve to inform my design decisions during the initial phase of design and research.

I’ll be validating or invalidating my assumptions during user research and testing.

Content Analysis

I went through the site and app to gather what content was being shown on the homepage and why it was there to begin formulating preliminary questions.

I came up with questions that tested for the following scenarios ↓

    Task Scenarios

    You are dabbling in cryptocurrency investment and want to understand the landscape of news in the field and the underlying blockchain technology. You go to ETHNews for more information. 

    • Can you find more info on the current price of Ether? Can you see another way to find it?
    • Can you go to the latest news video? Can you find another way to find it?
    • Show me how you go through the news stories. 
    • Can you find more news stories? 
    • Can you find some educational material to learn more about cryptocurrency/blockchain?
    • Is always knowing the current price of Ether important to you?
    • Can you change the currency conversion of Ether?

    Guerilla Usability Testing

    Usability testing is a very quick way to understand obstacles faced in an application from a user’s perspective. In order to improve the site/app, I first had to gain insights by observing people using the site/app while observing their interactions.

    I found a user who would be willing to participate in my experiment who had never used the site/app  before and was not well-versed in cryptocurrency or blockchain.

    2. Defining the Problem

    Analysis

    After I had completed my initial round of usability testing, I reviewed my notes and wrote down any  obstacles they came across on post-it notes. Through affinity mapping and analysis, I focused on addressing the top three issues that were most painful for the user. Here is what I came up with ↓

    Pain Points

    • Navigation comprehension
    • Intimidating color scheme and layout (crypto doesn’t need to be cryptic)
    • Lack of context for news stories on app

    3. Ideate Solutions

    UI Sketching

    After identifying the pain points, I was ready to start solving these issues.

    Sketching is a great way to get your thoughts on paper without being committed to a single design. I came up with a few potential ideas that could be possible solutions to the pain points.

    4. Prototype

    Hi-fi Prototype

    Once I felt ready to create hi-fi versions of a few of my proposed solutions, I transferred my sketches into Figma. I drafted a click through prototype of my proposed design solutions using InVision. With this new prototype, I could test again to see whether my design was effective or not.

    Mobile App Pain Points // Before

    Mobile App Pain Points // After

    Daily Dashboard

    Latest News and Navigation

    Latest News Alternative