Material's Website Launch (Contract)
Role:
Designer & Developer
Company:
Material Security (Contract)
Material Security had this fascinating approach to email security that flipped the traditional model on its head. Instead of trying to prevent attacks (which everyone else was doing), they focused on protecting what hackers do once they actually break in.
The company had been operating under the code name Stellarite since 2017 and was finally ready to emerge from stealth mode. They needed a website that would clearly communicate this novel approach while still feeling like a serious enterprise security company.
Their target audience was CSOs and CISOs who were tired of the standard security pitch from Proofpoint and Mimecast. These folks needed to quickly understand why Material's approach was different and worth their attention.
Material Security's website launch project
I came in with just six weeks before their June 30th public unveiling. The design agency had provided static desktop mocks that were about 80% complete, but I needed to transform them into a fully functional, responsive website while also rounding out any remaining design work.
Project Constraints
Time was the biggest pressure. Six weeks to launch isn't much when you're building something from scratch, especially when your starting point is desktop-only mockups and a light brand guideline.
On the technical side, I needed to integrate with their existing TypeScript-based monorepo. The team was small but growing fast, so whatever I built needed to be maintainable by future developers and flexible enough for their marketing team to manage.
This wasn't a situation for perfection. It was about being pragmatic, prioritizing what mattered for launch, and building a foundation they could grow with.
Responsive Web Design
Even though the designs were desktop-first, I took a mobile-first development approach. By starting with the smallest screen and working up, I was able to fill any design gaps early that would have been painful to find later.
I went with styled-components within React to keep the styles scoped to their components. We wanted styles to be flexible enough that some of them (padding, colors, simple layouts) could be managed by the marketing team.
The typography needed special attention. I built out the type components with a custom scaling system that adjusted text sizes proportionally to viewport width. This kept major parts of the design the same across devices and required fewer breakpoints.
Responsive Text
Secure what your business is made of
One platform to protect the entire cloud workspace
Content Management System
With the core interface in place, I focused on implementing Prismic CMS to give Material's marketing team independence from developers for basic content updates.
This got interesting when we discovered Prismic didn't have native TypeScript support at the time. Luckily, there were some Typescript experts at Material that helped make sure we could continue building. It was worth the effort, later when Typescript support was added by Prismic, it was a breeze to move over to.
The heart of the CMS implementation was a system of modular "slices" - reusable content components the marketing team could mix and match. Instead of calling a developer every time they needed a new page section, they could just grab pre-built components and arrange them however they needed.
CMS Prototype
Extend Zero Trust Security to Email
When attackers have multiple ways in, blocking messages is no longer enough.
Material protects accounts even after they're compromised or harmful messages get through.
Launch and Impact
We hit our deadline and successfully launched the new Material Security website on June 30, 2020, right as they emerged from stealth mode.
The site launched with everything they needed: a compelling homepage that clearly explained their unique approach, detailed product pages that dove deeper into features, team information to build credibility, and initial blog content to establish thought leadership.
The launch generated significant attention in the security community. I kept hearing that people appreciated how clearly Material explained their unique approach to email security, and even employees saying that the site was part of what drew them in initially.
Post Launch
Once we had the essentials working, I was able to spend time on building the brand beyond the basics. Security concepts can be both abstract and intimidating, so we created custom illustrations that made these ideas approachable while reinforcing the brand.
To keep the marketing team moving quickly, we also created an asset production workflow and documentation that eased the creation of new visuals. This meant they could generate consistent imagery without getting bottlenecked waiting for design resources for every new blog post or feature page.
Outcomes and Lessons
The Material website project succeeded not just in hitting their launch date, but in creating a foundation that scaled with their explosive growth. The component and slices architecture we built became the foundation for years of future development and content updates, maintaining consistency while accommodating the constant evolution startups demand.
What I took from this project was a deeper appreciation for pragmatic systems. Creating flexible, maintainable systems that evolve alongside a rapidly growing company is a moving target that can feel like it's teasing you. It's quite the rush to be forced to adapt and be excited by how well your former self anticipated your future needs.