→
Magic is a developer tool which adds passwordless login to websites and applications.
- Title
- Design Lead
- Role
- 1st employee & founding designer
Selected works
From Fortmatic to Magic
I joined Fortmatic as its first employee, designing and building websites and product UIs. As we expanded into passwordless authentication, I proposed rebranding to Magic after hearing users pronounce “Fortmatic” as “Fort-magic.”
Context
Magic lets developers add customizable and secure passwordless login to apps. Magic aims to be is the Stripe or Segment of auth.
Magic lets your engineers focus on building the business, not on authentication.
Role
Since Magic had an engineering-driven culture, as a non-engineer, I wore a lot of hats. I also did frontend development, QA, and PM work.
Process & tools
UX & UI design
I mostly used Figma to create and share UX flows and UI mockups. As the only UX and product designer, I tried to communicate and teach the design thinking behind my choices. This knowledge-sharing was critical to scale design-thinking across a startup.
From our website to our developer dashboard – I owned the UX of anything that had a UI. Luckily, I wasn't alone in discussing UX since I had a great team who came up with great UX suggestions all the time!
But UX did not only include website or application UI. For Magic, email was a key part of our main product's UX. I also designed, set up, and managed our marketing and transactional emails via Customer.io.
Animations
I like to use Principle for Mac to quickly create animations. Animations can better engage users and communicate concepts to them. They also add more personality to Magic's brand.
I also like to use animation to communicate some proposed UI interactions to my team. Show > Tell
Frontend dev
As a startup, we were usually strapped on engineering resources. (What startup isn't?) And since I was comfortable making responsive, animation-filled websites, I became the main implementor for all our static sites. This included https://magic.link and https://docs.magic.link.
We had recently hired a very talented visual designer full-time. He was my awesome coworker from Roofstock! He took some design work off my plate and leveled up our branding. In a few weeks, you would have seen his amazing designs for magic.link (which I also coded up).
Product metrics
I also managed our product analytics. I used Segment to hook up and manage various data sources. And I used Amplitude to analyze said data to find patterns and quantitative insights from our UI flows.
I usually provided a visual guide for where and how each event was triggered.
And instead of sharing dry Amplitude graphs, I liked to share my findings and insights via videos. I synthesized my findings down into simple slide decks for these videos.
While I was still practicing how to not say "um" as often, my team enjoyed these videos. They told me the videos helped them learn how our products were doing, so that was a win in my book.
Impact
The impact I personally cared the most about was culture. I was the one conducting behavioral and culture-fit interviews as Magic ramped up its hiring.