Grayscale
When I got hired at Grayscale Investments, I came into a situation where the company needed to rebuild the entire website on a new tech stack, within a limited time window. This entailed migrating from the Optimizely CMS, with a website developed by a third-party vendor, to a Vercel-hosted site leveraging the Sanity CMS that would be developed internally. This project had to be completed within a limited time window to avoid extending contracts with Optimizely and the development vendor, and it required balancing meeting deadlines with optimizing as much of the website as possible during this new build.
Below you’ll find some before-and-after examples, demonstrating my goal of making the website tighter and more functional while still retaining the beautiful Grayscale branding. You can also explore the website yourself here.
Home Screen
Home Screen | Before
Lots of form over function here, this screen saw a massive drop-off in traffic before users even reached the first section following the scrolling animation.
Home Screen | After
The goal here was to create a concise home screen that provided users with bite-sized pieces of what the rest of the site had to offer. Leveraging cards and horizontal carousels, we were able to maximize the real estate on this page without requiring users to scroll endlessly.
Documents Screen
As one of the most important pages on the website for Grayscale’s users, this page deserved a lot of love. The previous iteration utilized cards and had no form of filtering or search functionality. With the new version, we created a much more user-friendly page with streamlined list view, search function, and click-through functionality so that users can navigate straight to each respective product page if they so choose. You’ll find the Before on the left, and the After on the right:
Documents page | Before
Documents page | After
About page | Before
About page | After
Developing Working Prototypes
User Interface Improvements
Documenting Product Guidelines / Best Practices
Building Standardized Toolkit Templates for Graphics
Orchestrating A/B Tests (Quantitative Analysis)
Conducting User Studies (Qualitative Analysis)
Comprehensive Audits of UI Elements