Framework
RemixHeavybit
Heavybit is a San Francisco-based investor in developer-first startups. We redesigned their UI, helped them consolidate content in Sanity and built a performant and feature-rich site with Remix.
Requirements
Design user interface and new pages based on a design system
Consolidate content into one single Sanity dataset and improve content editing experience
Build a performant and feature-rich interface
Integration with Mux for media management and Algolia for search
Implement authentication for users to sign-up and create content
Create whitepaper reports to position Heavybit as a leader in the industry
Improved design
We first conducted a design audit of Heavybit, and suggested dozens of improvements.
We then proceeded with the creation of a refreshed UI based on their existing brand guidelines. This was an opportunity to move from Sketch to Figma, which enables collaboration.
We have created a design system and broke down the website into modules, to empower the marketing team the creation of unlimited landing pages without the involvement of designers and developers.
Design system
To ensure consistency across the design, we have created a design system (including a UI kit) that enabled developers creating a consistent user interface and designers having a foundation to create new pages and modules.
Modular setup
The website is broken down into modules on purpose. Instead of having rigid pages, they consist of modules glued together.
This empowers content creators when creating new landing pages and deciding on the layout of the pages.
Social banners
Heavybit is very active in the developer community.
To engage the audience, we have created OG image templates for each initiative category.
“Tinloof have been an excellent partner for us on our website rebuild project. The site they have so far delivered is performant and secure. Omar and Seif are deeply experienced in Sanity and React, but also in communicating clearly about their work, responding to our specific needs and priorities, and finding creative solutions to difficult problems. It has been a pleasure working with Omar and Seif for the past quarter, and I’m excited to continue partnering with them as we build new features and functionality.”
Ted CarstensenPlatform Director @ Heavybit
Tech stack
View allRemixHeadless CMS
SanityDeployment Platform
NetlifyMedia Management
MuxSearch Solution
AlgoliaAuthentication Solution
SupabaseFast and modern website
We leveraged the headless architecture to build a fast website with SEO best practices in mind and a headless CMS that makes the site easy to manage.
The frontend is built with the framework Remix, which enables fresh content thanks to SSR (Server-Side Rendering).
The headless CMS we've used is Sanity, which empowers their marketing team to create unlimited landing pages without the involvement of designers and developers.
The site and the Sanity studio are both deployed securely on Netlify.
Heavybit is an investor in both Sanity and Netlify.
Content management with Sanity
Heavybit's site was initially built on WordPress, and got eventually migrated to two different frameworks, 11ty and Gatsby, which caused the creation of two Sanity datasets to fetch content.
We've rebuilt the frontend using Remix as the sole framework, and consolidated all the content in one single Sanity dataset, offering the Heavybit team one single source of truth for content.
We've also enabled the content team to create pages without involvement of developers, thanks to the modular architecture we've adopted, and preview changes before going live.
Manage video content with Mux
We have integrated Mux with Sanity, so Heavybit's marketing team can directly display videos for their courses and events.
Mux does all the heavy lifting when it comes to video processing, and seamlessly integrates with Sanity.
Custom features
Search with Algolia
To make the website easy to navigate, we have developed a search feature to empower users easily find content, be it a profile, a company, a profile, a job, and more.
Algolia enables us to reach top page speeds, thanks to its sophisticated infrastructure.
Jobs search
To help their portfolio companies actively get more talented staff, we have fetched jobs from portfolio companies and displayed them directly on the site.
We connect with 3rd party tools like Greenhouse and Personio and automatically fetch the job posts to Heavybit's Sanity studio.
Here's a technical article where we share how we use Netlify Functions to fetch jobs for Heavybit.
Table of Contents automated generation
Table of contents on articles, podcasts, and other educational material, are automatically generate based on the headings the copy teams writes.
