Productivity Saas
Superhuman
Productivity Saas
Superhuman
Productivity Saas
Superhuman
Productivity Saas
Superhuman
Branding
Problem
As the first and only brand designer at Superhuman, I established the Superhuman brand from the ground up by defining its identity, developing brand guidelines, and implementing the new brand across all channels. I engaged stakeholders to reassess our previous perspectives on Superhuman and crafted a brand that resonated with our growing target audience.
Role
Brand strategy lead, creative director, design lead
Branding
Problem
As the first and only brand designer at Superhuman, I established the Superhuman brand from the ground up by defining its identity, developing brand guidelines, and implementing the new brand across all channels. I engaged stakeholders to reassess our previous perspectives on Superhuman and crafted a brand that resonated with our growing target audience.
Role
Brand strategy lead, creative director, design lead
Branding
Problem
As the first and only brand designer at Superhuman, I established the Superhuman brand from the ground up by defining its identity, developing brand guidelines, and implementing the new brand across all channels. I engaged stakeholders to reassess our previous perspectives on Superhuman and crafted a brand that resonated with our growing target audience.
Role
Brand strategy lead, creative director, design lead
Branding
Problem
As the first and only brand designer at Superhuman, I established the Superhuman brand from the ground up by defining its identity, developing brand guidelines, and implementing the new brand across all channels. I engaged stakeholders to reassess our previous perspectives on Superhuman and crafted a brand that resonated with our growing target audience.
Role
Brand strategy lead, creative director, design lead
Defining the brand
Led a workshop with key stakeholders to evaluate our old brand ideas, discuss what worked and what didn't, and gather input on our brand direction. The result? New and improved brand attributes!
Remarkable
Avant-garde
Powerful
Delightful
Defining the brand
Led a workshop with key stakeholders to evaluate our old brand ideas, discuss what worked and what didn't, and gather input on our brand direction. The result? New and improved brand attributes!
Remarkable
Avant-garde
Powerful
Delightful
Defining the brand
Led a workshop with key stakeholders to evaluate our old brand ideas, discuss what worked and what didn't, and gather input on our brand direction. The result? New and improved brand attributes!
Remarkable
Avant-garde
Powerful
Delightful
Defining the brand
Led a workshop with key stakeholders to evaluate our old brand ideas, discuss what worked and what didn't, and gather input on our brand direction. The result? New and improved brand attributes!
Remarkable
Avant-garde
Powerful
Delightful
Brand moodboard
I gathered inspiration and connected each brand attribute to a visual element that authentically represents Superhuman as a brand.
Brand moodboard
I gathered inspiration and connected each brand attribute to a visual element that authentically represents Superhuman as a brand.
Brand moodboard
I gathered inspiration and connected each brand attribute to a visual element that authentically represents Superhuman as a brand.
Brand moodboard
I gathered inspiration and connected each brand attribute to a visual element that authentically represents Superhuman as a brand.
Brand guidelines
Using the moodboard as a guide, I explored and created unique visual elements. These were then organized into clear brand guidelines with instructions on how to use each element effectively.
Brand guidelines
Using the moodboard as a guide, I explored and created unique visual elements. These were then organized into clear brand guidelines with instructions on how to use each element effectively.
Brand guidelines
Using the moodboard as a guide, I explored and created unique visual elements. These were then organized into clear brand guidelines with instructions on how to use each element effectively.
Brand guidelines
Using the moodboard as a guide, I explored and created unique visual elements. These were then organized into clear brand guidelines with instructions on how to use each element effectively.
Custom Superhuman Emojis
Our customer-facing teams often used emojis to add a touch of joy to customer interactions. Integrating emojis into our brand was a natural step, aiming for an authentic Superhuman feel. I collaborated with Bonnie Kate Wolf to bring the Superhuman emoji vision to life. Through a feedback loop, we fine-tuned the emojis based on my creative direction, ensuring they genuinely embodied the essence of Superhuman.
Custom Superhuman Emojis
Our customer-facing teams often used emojis to add a touch of joy to customer interactions. Integrating emojis into our brand was a natural step, aiming for an authentic Superhuman feel. I collaborated with Bonnie Kate Wolf to bring the Superhuman emoji vision to life. Through a feedback loop, we fine-tuned the emojis based on my creative direction, ensuring they genuinely embodied the essence of Superhuman.
Custom Superhuman Emojis
Our customer-facing teams often used emojis to add a touch of joy to customer interactions. Integrating emojis into our brand was a natural step, aiming for an authentic Superhuman feel. I collaborated with Bonnie Kate Wolf to bring the Superhuman emoji vision to life. Through a feedback loop, we fine-tuned the emojis based on my creative direction, ensuring they genuinely embodied the essence of Superhuman.
Custom Superhuman Emojis
Our customer-facing teams often used emojis to add a touch of joy to customer interactions. Integrating emojis into our brand was a natural step, aiming for an authentic Superhuman feel. I collaborated with Bonnie Kate Wolf to bring the Superhuman emoji vision to life. Through a feedback loop, we fine-tuned the emojis based on my creative direction, ensuring they genuinely embodied the essence of Superhuman.
Product visuals
Crafted as visual storytellers for our features, the product abstractions aim to maintain a clear connection with our product design. There's room for a touch of exaggeration to effectively communicate the feature's goals and enhance visual engagement. In achieving this, I employ strategic layering of white gradients and blurs, resulting in a sophisticated glass effect. Beyond aesthetics, this technique adds a level of refinement to our product visuals.
Product visuals
Crafted as visual storytellers for our features, the product abstractions aim to maintain a clear connection with our product design. There's room for a touch of exaggeration to effectively communicate the feature's goals and enhance visual engagement. In achieving this, I employ strategic layering of white gradients and blurs, resulting in a sophisticated glass effect. Beyond aesthetics, this technique adds a level of refinement to our product visuals.
Product visuals
Crafted as visual storytellers for our features, the product abstractions aim to maintain a clear connection with our product design. There's room for a touch of exaggeration to effectively communicate the feature's goals and enhance visual engagement. In achieving this, I employ strategic layering of white gradients and blurs, resulting in a sophisticated glass effect. Beyond aesthetics, this technique adds a level of refinement to our product visuals.
Product visuals
Crafted as visual storytellers for our features, the product abstractions aim to maintain a clear connection with our product design. There's room for a touch of exaggeration to effectively communicate the feature's goals and enhance visual engagement. In achieving this, I employ strategic layering of white gradients and blurs, resulting in a sophisticated glass effect. Beyond aesthetics, this technique adds a level of refinement to our product visuals.
Partners
Emoji Designer
Bonnie Kate Wolf
Partners
Emoji Designer
Bonnie Kate Wolf
Partners
Emoji Designer
Bonnie Kate Wolf
Partners
Emoji Designer
Bonnie Kate Wolf
Website
Problem
Taking on the role of the first and only Brand Designer at Superhuman, I undertook the task of spearheading a new website from scratch. This encompassed designing and implementing new systems to ensure the website's consistency and efficiency, and addressing the outdated design principles and tooling that no longer resonated with Superhuman's evolving team and identity.
Role
Brand strategy lead, design lead, systems, website strategy lead
Website
Problem
Taking on the role of the first and only Brand Designer at Superhuman, I undertook the task of spearheading a new website from scratch. This encompassed designing and implementing new systems to ensure the website's consistency and efficiency, and addressing the outdated design principles and tooling that no longer resonated with Superhuman's evolving team and identity.
Role
Brand strategy lead, design lead, systems, website strategy lead
Website
Problem
Taking on the role of the first and only Brand Designer at Superhuman, I undertook the task of spearheading a new website from scratch. This encompassed designing and implementing new systems to ensure the website's consistency and efficiency, and addressing the outdated design principles and tooling that no longer resonated with Superhuman's evolving team and identity.
Role
Brand strategy lead, design lead, systems, website strategy lead
Website
Problem
Taking on the role of the first and only Brand Designer at Superhuman, I undertook the task of spearheading a new website from scratch. This encompassed designing and implementing new systems to ensure the website's consistency and efficiency, and addressing the outdated design principles and tooling that no longer resonated with Superhuman's evolving team and identity.
Role
Brand strategy lead, design lead, systems, website strategy lead
2.5x
faster development of webpages using design system than previously.
<20mins
for marketing to spin up a new landing page using the Framer toolkit.
2.5x
faster development of webpages using design system than previously.
<20mins
for marketing to spin up a new landing page using the Framer toolkit.
2.5x
faster development of webpages using design system than previously.
<20mins
for marketing to spin up a new landing page using the Framer toolkit.
2.5x
faster development of webpages using design system than previously.
<20mins
for marketing to spin up a new landing page using the Framer toolkit.
A peek at the old website
The old Superhuman website was hard-coded and lacked a distinct brand. It featured a diagonal line across the entire site with a disruptive high-contrast, requiring constant adjustments by engineers to ensure legibility. The product screenshots were busy and challenging to understand. Additionally, there were outdated full-bleed images with unrelated text that did not align with the product.
A peek at the old website
The old Superhuman website was hard-coded and lacked a distinct brand. It featured a diagonal line across the entire site with a disruptive high-contrast, requiring constant adjustments by engineers to ensure legibility. The product screenshots were busy and challenging to understand. Additionally, there were outdated full-bleed images with unrelated text that did not align with the product.
A peek at the old website
The old Superhuman website was hard-coded and lacked a distinct brand. It featured a diagonal line across the entire site with a disruptive high-contrast, requiring constant adjustments by engineers to ensure legibility. The product screenshots were busy and challenging to understand. Additionally, there were outdated full-bleed images with unrelated text that did not align with the product.
A peek at the old website
The old Superhuman website was hard-coded and lacked a distinct brand. It featured a diagonal line across the entire site with a disruptive high-contrast, requiring constant adjustments by engineers to ensure legibility. The product screenshots were busy and challenging to understand. Additionally, there were outdated full-bleed images with unrelated text that did not align with the product.
The process
The process comprised various phases, such as research, wireframing, establishing information hierarchy, content creation, and an exhaustive quality assurance (QA) process. Throughout each step, I collaborated closely with stakeholders from engineering, marketing, and leadership to ensure seamless alignment.
The process
The process comprised various phases, such as research, wireframing, establishing information hierarchy, content creation, and an exhaustive quality assurance (QA) process. Throughout each step, I collaborated closely with stakeholders from engineering, marketing, and leadership to ensure seamless alignment.
The process
The process comprised various phases, such as research, wireframing, establishing information hierarchy, content creation, and an exhaustive quality assurance (QA) process. Throughout each step, I collaborated closely with stakeholders from engineering, marketing, and leadership to ensure seamless alignment.
The process
The process comprised various phases, such as research, wireframing, establishing information hierarchy, content creation, and an exhaustive quality assurance (QA) process. Throughout each step, I collaborated closely with stakeholders from engineering, marketing, and leadership to ensure seamless alignment.
The new homepage
The Superhuman homepage showcases our brand's unique design elements, enhanced by custom animations for an engaging experience. The product visuals go beyond a direct representation, using exaggerated versions to help users understand our features better. Trustmarkers, value propositions, and feature narratives are strategically incorporated throughout the website to build trust and convey the benefits of our product.
The new homepage
The Superhuman homepage showcases our brand's unique design elements, enhanced by custom animations for an engaging experience. The product visuals go beyond a direct representation, using exaggerated versions to help users understand our features better. Trustmarkers, value propositions, and feature narratives are strategically incorporated throughout the website to build trust and convey the benefits of our product.
The new homepage
The Superhuman homepage showcases our brand's unique design elements, enhanced by custom animations for an engaging experience. The product visuals go beyond a direct representation, using exaggerated versions to help users understand our features better. Trustmarkers, value propositions, and feature narratives are strategically incorporated throughout the website to build trust and convey the benefits of our product.
The new homepage
The Superhuman homepage showcases our brand's unique design elements, enhanced by custom animations for an engaging experience. The product visuals go beyond a direct representation, using exaggerated versions to help users understand our features better. Trustmarkers, value propositions, and feature narratives are strategically incorporated throughout the website to build trust and convey the benefits of our product.
A workflow upgrade
I advocated for transitioning from the old hard-coded Superhuman website to a CMS-based redesign, and we ultimately chose Framer. This decision enabled us to establish a design system, empower the marketing team for self-page creation, and seamlessly integrate sophisticated animations.
A workflow upgrade
I advocated for transitioning from the old hard-coded Superhuman website to a CMS-based redesign, and we ultimately chose Framer. This decision enabled us to establish a design system, empower the marketing team for self-page creation, and seamlessly integrate sophisticated animations.
A workflow upgrade
I advocated for transitioning from the old hard-coded Superhuman website to a CMS-based redesign, and we ultimately chose Framer. This decision enabled us to establish a design system, empower the marketing team for self-page creation, and seamlessly integrate sophisticated animations.
A workflow upgrade
I advocated for transitioning from the old hard-coded Superhuman website to a CMS-based redesign, and we ultimately chose Framer. This decision enabled us to establish a design system, empower the marketing team for self-page creation, and seamlessly integrate sophisticated animations.
Design system
Built out a design system in Figma from scratch. Collaborated closely with engineers to build this into Framer.
Design system
Built out a design system in Figma from scratch. Collaborated closely with engineers to build this into Framer.
Design system
Built out a design system in Figma from scratch. Collaborated closely with engineers to build this into Framer.
Design system
Built out a design system in Figma from scratch. Collaborated closely with engineers to build this into Framer.
We put together our enterprise landing page in under a week using the design system. In the past, a page like that might have taken twice as long — and possibly even longer.
Carlton Keedy, Former Senior Software Engineer at Superhuman
We put together our enterprise landing page in under a week using the design system. In the past, a page like that might have taken twice as long — and possibly even longer.
Carlton Keedy, Former Senior Software Engineer at Superhuman
We put together our enterprise landing page in under a week using the design system. In the past, a page like that might have taken twice as long — and possibly even longer.
Carlton Keedy, Former Senior Software Engineer at Superhuman
We put together our enterprise landing page in under a week using the design system. In the past, a page like that might have taken twice as long — and possibly even longer.
Carlton Keedy, Former Senior Software Engineer at Superhuman
A self-serve toolkit
Designed a solution for marketing to build website pages self-serve in Framer. Guided engineering team to build this toolkit. Provided marketing with resources to understand how to use toolkit
A self-serve toolkit
Designed a solution for marketing to build website pages self-serve in Framer. Guided engineering team to build this toolkit. Provided marketing with resources to understand how to use toolkit
A self-serve toolkit
Designed a solution for marketing to build website pages self-serve in Framer. Guided engineering team to build this toolkit. Provided marketing with resources to understand how to use toolkit
A self-serve toolkit
Designed a solution for marketing to build website pages self-serve in Framer. Guided engineering team to build this toolkit. Provided marketing with resources to understand how to use toolkit
Reusable modules
The Framer toolkit is made up of reusable modules that can be mixed and matched to create the desired landing page.
Reusable modules
The Framer toolkit is made up of reusable modules that can be mixed and matched to create the desired landing page.
Reusable modules
The Framer toolkit is made up of reusable modules that can be mixed and matched to create the desired landing page.
Reusable modules
The Framer toolkit is made up of reusable modules that can be mixed and matched to create the desired landing page.
Toolkit user experience
The modules are set up using design guardrails. With these guardrails the user is only able to edit content and visuals. They can not edit typefaces, colors, and spacing. This means designs are consistent and brand design approved, even when pages are built by non-designers.
Toolkit user experience
The modules are set up using design guardrails. With these guardrails the user is only able to edit content and visuals. They can not edit typefaces, colors, and spacing. This means designs are consistent and brand design approved, even when pages are built by non-designers.
Toolkit user experience
The modules are set up using design guardrails. With these guardrails the user is only able to edit content and visuals. They can not edit typefaces, colors, and spacing. This means designs are consistent and brand design approved, even when pages are built by non-designers.
Toolkit user experience
The modules are set up using design guardrails. With these guardrails the user is only able to edit content and visuals. They can not edit typefaces, colors, and spacing. This means designs are consistent and brand design approved, even when pages are built by non-designers.
With the toolkit, we can do new projects that might have been off the table entirely before because they would’ve taken way too long
Carlton Keedy, Former Senior Software Engineer at Superhuman
With the toolkit, we can do new projects that might have been off the table entirely before because they would’ve taken way too long
Carlton Keedy, Former Senior Software Engineer at Superhuman
With the toolkit, we can do new projects that might have been off the table entirely before because they would’ve taken way too long
Carlton Keedy, Former Senior Software Engineer at Superhuman
With the toolkit, we can do new projects that might have been off the table entirely before because they would’ve taken way too long
Carlton Keedy, Former Senior Software Engineer at Superhuman
Videos
Problem
Superhuman, known for its valued concierge onboarding, encountered challenges as our customer base expanded. Maintaining this personalized onboarding became difficult. Consequently, we needed a solution for new customers to onboard independently through a self-serve approach.
Role
Project lead, lead designer
Videos
Problem
Superhuman, known for its valued concierge onboarding, encountered challenges as our customer base expanded. Maintaining this personalized onboarding became difficult. Consequently, we needed a solution for new customers to onboard independently through a self-serve approach.
Role
Project lead, lead designer
Videos
Problem
Superhuman, known for its valued concierge onboarding, encountered challenges as our customer base expanded. Maintaining this personalized onboarding became difficult. Consequently, we needed a solution for new customers to onboard independently through a self-serve approach.
Role
Project lead, lead designer
Videos
Problem
Superhuman, known for its valued concierge onboarding, encountered challenges as our customer base expanded. Maintaining this personalized onboarding became difficult. Consequently, we needed a solution for new customers to onboard independently through a self-serve approach.
Role
Project lead, lead designer
Design
The design of this tutorial was meant to be polished and professional, while still showing a walkthrough tutorial that was 1:1 with our product.
Design
The design of this tutorial was meant to be polished and professional, while still showing a walkthrough tutorial that was 1:1 with our product.
Design
The design of this tutorial was meant to be polished and professional, while still showing a walkthrough tutorial that was 1:1 with our product.
Design
The design of this tutorial was meant to be polished and professional, while still showing a walkthrough tutorial that was 1:1 with our product.
Animation
I partnered with Chris Wong to bring my designs to life with smooth transitions and product animations.
Animation
I partnered with Chris Wong to bring my designs to life with smooth transitions and product animations.
Animation
I partnered with Chris Wong to bring my designs to life with smooth transitions and product animations.
Animation
I partnered with Chris Wong to bring my designs to life with smooth transitions and product animations.
Partners
Animation
Chris Wong
Partners
Animation
Chris Wong
Partners
Animation
Chris Wong
Partners
Animation
Chris Wong