Emily
readey

designing the block pro product

01 / PROBLEM

context

  • my role

    product designer
  • team

    james cabrera, josh gragg / design leads
    ankit verma, matthew vitebsky / product leads
    zoe del rosario, alek hamid / graphic design
    anton matseichyk, mike price, brian mendoza & many others / development
    + so many other people across the organization
  • timeframe

    october 2021 – present
  • deliverables

    the block pro product design, the block pro design system
  • impact

    the block pro launched jan 2023
  • goal

    as a user interested in digital assets, i can effortlessly engage with the block's research, news, and data.
  • note

    this project was a huge team effort, but here i'm exclusively showing features and pages that i produced as a product designer. this was the biggest project i've worked on and my personal favorite. :)

01 / PROBLEM

background + early concept

  • in october 2021, i began work at the block as a full-time product designer. i was brought on for one main objective: to help design a completely new product for the block called the block pro.

    the problem was that at this time, the block had several separate b2b and b2c products. two of these products were websites with separate urls, logins, and design styles, creating confusion among users.

    the goal of the block pro was to be a product suite with a new design style that would bring existing and new products together, to make it easy for clients to have many accounts with user-specific access.

    here's a slide from my very first presentation at the block that shows the absolute earliest design concept that we ended up building on to create what we have today.

    (above) block pro concept slide from november 2021

01 / PROBLEM

login

(above) four login screens

the login experience is something i wanted to really captivate the user and create the feeling that they were using a premium product — almost like the feeling of picking up a really beautiful hardcover book.

i ended up choosing to feature one of six randomly rotating images created by the block's incredibly talented graphic design team on our login page.

(above) login light mode

(above) login dark mode

01 / PROBLEM

onboarding

the onboarding experience is something we created relatively recently with the block's news, research, and revenue teams. it followed a new granular notification system launch we did previously.

the goal is for users to quickly sign up for areas they're interested in and immediately receive relevant newsletters and notifications that make the product useful to them.

(above) onboarding screen 1, dark and light. the fill is the selected state and the outline is the hover state.

(above) onboarding flow mobile

(above) onboarding flow desktop. technically each square should outline when hovered on. but i was lazy

01 / PROBLEM

home

the home page is something we've iterated on repeatedly, and we're still working on changing it today. these screenshots show an iteration when we decided to divide home into a feed of articles and a feed of data. for the article feed, we created a list and card view - one showing images, one not. there's still a lot here i think we can improve.

(above) home — category filter dropdown

(above) home — list & card view

01 / PROBLEM

article page

the article page is my favorite thing i've worked on within the block pro. to me, the article page is the most important part of the product – it's where people consume content and ideally spend most of their time. i wanted to make something incredibly clear, simple, and enjoyable to read.

(above) research article view

(above) news article reading experience


i had some constraints to deal with. this article page had to work for both our news and research products, but news had a 212px wide additional side nav that research didn't, so the article body couldn't follow the exact same responsiveness guidelines on both pages.

there were also separate additional components - news needed a sticky popular section, research needed a sticky table of content section, and news needed an ad that will only appear sometimes. to simplify this, i designed them all to stay at 212px fixed width, the same as the news side nav.

(above) news article reading experience

(above) news article page @ 2000px

(above) news article page @ 1024px

(above) news article page @ 1024px

(above) research article reading experience

01 / PROBLEM

ui things — modals

(above) modals for the block pro landing page and theblock.co

01 / PROBLEM

ui things — tables

(above) tables used in the block pro

01 / PROBLEM

ui things — search

(above) search used for the block pro data

01 / PROBLEM

app core experience