the block
designing web products for crypto news, research, and data
theblock.co
about
my role
product designer
team
head of design — josh gragg
graphic design — zoe del rosario
product — matt vitebsky, ankit verma + more
eng — mike price, brian mendoza, + more
graphic design — zoe del rosario
product — matt vitebsky, ankit verma + more
eng — mike price, brian mendoza, + more
time
oct 2021 to present
outcome
worked in-house with two other designers to oversee all design on theblock.co, a publication for direct, unbiased reporting on digital assets.
here, i was responsible for the design of zero-to-one projects like the block prices and learn.
i also led major redesigns of the primary navigation, collection and article pages and am the point person for the site's typography and design system.
all the work i'm sharing here is from design efforts i led and was directly responsible for.
here, i was responsible for the design of zero-to-one projects like the block prices and learn.
i also led major redesigns of the primary navigation, collection and article pages and am the point person for the site's typography and design system.
all the work i'm sharing here is from design efforts i led and was directly responsible for.
theblock.co/prices
price pages
launching price pages on theblock.co was a zero to one project that i led in the summer of 2023. the goal was to create a hub for people to check detailed cryptocurrency price information in a clean and user-friendly way.
we wanted to leverage our unique advantages in the news space in offering price information, so along with the numbers, we created sections for related news and related learn articles that would be linked to each cryptocurrency.
we wanted to leverage our unique advantages in the news space in offering price information, so along with the numbers, we created sections for related news and related learn articles that would be linked to each cryptocurrency.
prices hype video :)
graph interaction
price page video on launch day
price pages
theblock.co/learn
learn pages
in spring 2023, we as a company started a new project called the block learn. our news team began authoring a huge repository of informational articles.
the business goal was to improve our SEO, site traffic, and brand awareness because there's a big gap on the internet of unbiased, fact-based crypto information.
i was in charge of the product design here, from ideation, working with stakeholders to doing quality assurance with developers.
it ended up being a big success, with a launch on august 2023, around 40,000 average monthly pageviews, and over 100 articles written.
the business goal was to improve our SEO, site traffic, and brand awareness because there's a big gap on the internet of unbiased, fact-based crypto information.
i was in charge of the product design here, from ideation, working with stakeholders to doing quality assurance with developers.
it ended up being a big success, with a launch on august 2023, around 40,000 average monthly pageviews, and over 100 articles written.
learn home page implementation
.png)
learn home
learn article
learn article, mobile
theblock.co/news
news: collection & article
i led a recent redesign of the news experience. this included both collection (latest, category, author pages) and the article pages themselves.
we were working on our design system and updating the site's main font, so a main goal here was deciding on a type scale that was readable at a lot of different screen sizes.
i was also looking at adding more recirculaton modules so that the user has suggestions for related content to keep them in the experience.
we were working on our design system and updating the site's main font, so a main goal here was deciding on a type scale that was readable at a lot of different screen sizes.
i was also looking at adding more recirculaton modules so that the user has suggestions for related content to keep them in the experience.
article experience
latest news – mobile
i spent a long time working out all the little nuances in the typography here (sizes, line heights, weight, color, card spacing, etc etc). i really wanted our pages to be very readable and almost soothing to the eye.
another thing we added is the related article inline link where we have the opportunity to suggest the user an article closely related to where they are on their current piece of content.
another thing we added is the related article inline link where we have the opportunity to suggest the user an article closely related to where they are on their current piece of content.
article
article – inline link
site navigation
we launched a primary nav redesign because of reports current nav wasn't serving people well.
for one, breaking news doesn't happen so often, so an always present breaking news banner isn't useful. this also made a layer cake on mobile.
secondly, we had links to news sub-categories (ie. companies etc) but not the latest news page, which our head of news felt wasn't useful.
finally, we found we couldn't add to the top level nav without upsetting the symmetry.
for one, breaking news doesn't happen so often, so an always present breaking news banner isn't useful. this also made a layer cake on mobile.
secondly, we had links to news sub-categories (ie. companies etc) but not the latest news page, which our head of news felt wasn't useful.
finally, we found we couldn't add to the top level nav without upsetting the symmetry.
before
after
we ended up going for a model where the nav starts out at a pretty big height but then really reduces on scroll. i like this approach because it retains the feel of being a big newspaper, but it's still really usable when interacting with the site or trying to read something.
nav dropdown panels (shown on hover in desktop screens)
background + problem probably scratch this
1/x
initially, i was brought on at the block for one main objective: to help design a new product called the block pro. the problem was that at this time, the block had several separate b2b and b2c web products. two of these products were separate websites with different url, login, and design formats, creating confusion among users.
the goal of the block pro was to bring together these products into one format, to make it easy for clients to understand what we offered. here's a slide from my first presentation at the block that shows the earliest design concept that we ended up building on to create what we have today.
the goal of the block pro was to bring together these products into one format, to make it easy for clients to understand what we offered. here's a slide from my first presentation at the block that shows the earliest design concept that we ended up building on to create what we have today.
since then, i've spent a lot of time focused on the block pro, but i've also recently been doing projects for the public facing site, theblock.co. i've also dabbled in image creation for articles and making icons.
