Securitize Web Redesign and Iteration
Developing a public website to welcome investors and improve the sales and customer education journey
What is Securitize?
Securitize tokenizes private equity, and allows it to be transferred and traded autonomously, improving an antiquated, paper-based process.
In 2021, we opened Securitize Markets, a platform which broadens access to this traditionally limited space.
Our website had to evolve to welcome these investors while still enabling lead flow for our sales team.
Tech and tools used
Site Architecture:Craft CMS, TailwindCSS (utility-first CSS framework), AlpineJS
Design Tools and Project Management:Figma, JIRA, git-flow
Visit the website Before

After

When I joined, Securitize was focused on it's B2B offering - the ability to tokenize private equity and allow issuers to fundraise digitally. However, our product team had almost completed a marketplace which would allow investors to proactively seek out private market investments - a new development in the space.
With Securitize Markets as the new centerpiece of our business strategy, we had to develop a new website that focused on investors, not institutions, with a fresh new brand and better content strategy to match.
Project Goals:
- Organize two distinct customer journeys
- Execute a full rebrand and ensure consistency between our design system and the live site
- Build an extensible design so that our customer success and content managers can build pages on demand
- Design a fully responsive site
Organizing Customer Journeys
We had quite a bit of content from our old site to migrate. From thought leadership to past news articles, we wanted to ensure that the most important and backlinked pages made it to the new site intact. However, there was a clear challenge - how would we prevent that backlog from overwhelming our new core features? To answer that question, we ran cardsorts for the material which would be deployed on the new site.
Cardsort Takeaways:
- Four clear headers centered around Investors, Businesses, Content, and About Us
- The necessity of sub-sections under these four main headers
- The division of Securitize Markets and Capital, despite a similar target audience
- The complexity of the "Business" section. Read down to the B2B Navigation section to see how we iterated there in the future!
Sample Cardsort 1

Sample Cardsort 2

Responsive Design System
I am a strong believer that a designer's and developer's tools shape their product. In this case, our website's theming was primarily driven by TailwindCSS, which itself has a rather opinionated view on responsive design. Therefore, we took cues from Tailwind's design philosophies for our work.
Design System Framework:
- Mobile-first design - start with wireframes for mobile and then adapt for larger screen sizes
- Design for 5 responsive breakpoints rather than strictly for mobile and desktop
- Instead of using different base font sizes for mobile and desktop, "crush the scale" for mobile, using smaller jumps in font size between header types.
- Develop a color system based on HSL, with 9 levels of each of the main colors used on our site.
Design System

Designing for Viewports

Iterating on B2B Navigation
As we lived with our site over a few months, our Salespeople communicated two issues -
- Lead volume was high, but most came through our general contact page and did not specify how we might best assist their fundraise.
- Leads were unaware of the structure of our offerings.
Before

User Test Insights:
- Excessive use of industry terms and buzzwords obfuscate the content of these pages
- No clear hierarchy: some of these pages host social media content, while others should be critical to our lead flow. Despite this, all pages are represented as equal.
I don’t quite know where to look on this menu - these terms are too technical or vague and my eye isn’t drawn to any particular area.
- Client from Whitehall Capital
After

The result has a clear primary call to action (”Explore our All-In-One Solution”), separates our product offerings into their own hubs, and describes each product, allowing users to navigate to the page (and form) which suits their needs best, while improving our ambient education.