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.

• 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!

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.

• 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.

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

• 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.

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.