designing the block pro product
01 / PROBLEM
context
my role
product designerteam
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 organizationtimeframe
october 2021 – presentdeliverables
the block pro product design, the block pro design systemimpact
the block pro launched jan 2023goal
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. :)
link
theblock.co (the block free website)
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.
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.
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
