Junto Bike Works was as a direct-to-consumer brand focused on urban transportation. My role involved creating a design system that would serve our consumer-facing website and product interfaces, including digital dashboards.
Role
UX+UI Design, Design Strategy, Research & Brand
Tools
Figma, Figjam, Illustrator
Timeframe
Design System - 3 months
Site Design - 3 months
Problem
Many people who want their first commuter bicycle are intimidated by bike shops but also find the online alternatives confusing.
Goals
Build a site that gives users a familiar feeling and makes the ordering process as easy as ordering something like a piece of clothing online.
Crafting an Adaptable Design System Framework
Drawing inspiration from the Atomic Design System, I aimed to construct a well-structured system of interconnected components that could be universally applied across all of Junto's digital product offerings. We initiated this process by optimizing our D2C website, with plans to extend the system to electric bicycle interfaces over time.
Below is a breakdown of the building process for different site elements.
Tokens
We started building out the core of the design system and the basic values needed to build and maintain our site - spacing, color, typography, border-radius, etc.
Atoms
From there, we built out the building blocks for our site, or the atoms. We tried to keep the build clean and familiar. We didn’t want the experience to feel foreign.
All of these elements were built with accessibility in mind, and each passed WCAG color contrast check.
Molecules
Using atoms, we then built up molecules. Following this structure helped us build out reusable sections, making site building more fluid and ensuring constant design.
Organisms
From there, we take the designs a step further and build out slightly more complex components. These are built up of multiple molecules.
Using Our Systems to Build
By utilizing the framework we've set up, we were able to develop our site further. These building blocks not only facilitate the creation of diverse new pages and projects but also ensure adherence to accessibility guidelines, keeping our content inclusive and user-friendly. This approach allows us to expand our offerings while consistently upholding our brand's identity and values.
Templates
We build out templates for help us maintain structure. Below are the grids I created that were used for the entire D2C site.
Pages
These user flows are dedicated to specific user or business scenarios, and they serve as valuable resources. These flows were used actively by different stakeholders and helped shape the product.
Retrospective
Creating a design system structure with scalability in mind empowered us to swiftly implement changes to our website, enabling us to surpass our annual sales projections in half the initially estimated time.
This system offered the flexibility for rapid adaptations, resulting in a notable boost of more than 50% in click-through rates from shopping to cart conversion.
42%
in click-through rates
28%
increase in add
to cart
3.1%
decrease in site
exits
Want to see more?
Junto Bike Works was as a direct-to-consumer brand focused on urban transportation. My role involved creating a design system that would serve our consumer-facing website and product interfaces, including digital dashboards.
Role
UX+UI Design, Design Strategy, Research & Brand
Tools
Figma, Figjam, Illustrator
Timeframe
Design System - 3 months
Site Design - 3 months
Problem
Many people who want their first commuter bicycle are intimidated by bike shops but also find the online alternatives confusing.
Goals
Build a site that gives users a familiar feeling and makes the ordering process as easy as ordering something like a piece of clothing online.
Crafting an Adaptable Design System Framework
Drawing inspiration from the Atomic Design System, I aimed to construct a well-structured system of interconnected components that could be universally applied across all of Junto's digital product offerings. We initiated this process by optimizing our D2C website, with plans to extend the system to electric bicycle interfaces over time.
Below is a breakdown of the building process for different site elements.
Tokens
We started building out the core of the design system and the basic values needed to build and maintain our site - spacing, color, typography, border-radius, etc.
Atoms
From there, we built out the building blocks for our site, or the atoms. We tried to keep the build clean and familiar. We didn’t want the experience to feel foreign.
All of these elements were built with accessibility in mind, and each passed WCAG color contrast check.
Molecules
Using atoms, we then built up molecules. Following this structure helped us build out reusable sections, making site building more fluid and ensuring constant design.
Organisms
From there, we take the designs a step further and build out slightly more complex components. These are built up of multiple molecules.
Using Our Systems to Build
By utilizing the framework we've set up, we were able to develop our site further. These building blocks not only facilitate the creation of diverse new pages and projects but also ensure adherence to accessibility guidelines, keeping our content inclusive and user-friendly. This approach allows us to expand our offerings while consistently upholding our brand's identity and values.
Templates
We build out templates for help us maintain structure. Below are the grids I created that were used for the entire D2C site.
Pages
These user flows are dedicated to specific user or business scenarios, and they serve as valuable resources. These flows were used actively by different stakeholders and helped shape the product.
Retrospective
Creating a design system structure with scalability in mind empowered us to swiftly implement changes to our website, enabling us to surpass our annual sales projections in half the initially estimated time.
This system offered the flexibility for rapid adaptations, resulting in a notable boost of more than 50% in click-through rates from shopping to cart conversion.
42%
in click-through rates
28%
increase in add
to cart
3.1%
decrease in site
exits
Want to see more?
Junto Bike Works was as a direct-to-consumer brand focused on urban transportation. My role involved creating a design system that would serve our consumer-facing website and product interfaces, including digital dashboards.
Role
UX+UI Design, Design Strategy, Research & Brand
Tools
Figma, Figjam, Illustrator
Timeframe
Design System - 3 months
Site Design - 3 months
Problem
Many people who want their first commuter bicycle are intimidated by bike shops but also find the online alternatives confusing.
Goals
Build a site that gives users a familiar feeling and makes the ordering process as easy as ordering something like a piece of clothing online.
Crafting an Adaptable Design System Framework
Drawing inspiration from the Atomic Design System, I aimed to construct a well-structured system of interconnected components that could be universally applied across all of Junto's digital product offerings. We initiated this process by optimizing our D2C website, with plans to extend the system to electric bicycle interfaces over time.
Below is a breakdown of the building process for different site elements.
Tokens
We started building out the core of the design system and the basic values needed to build and maintain our site - spacing, color, typography, border-radius, etc.
Atoms
From there, we built out the building blocks for our site, or the atoms. We tried to keep the build clean and familiar. We didn’t want the experience to feel foreign.
All of these elements were built with accessibility in mind, and each passed WCAG color contrast check.
Molecules
Using atoms, we then built up molecules. Following this structure helped us build out reusable sections, making site building more fluid and ensuring constant design.
Organisms
From there, we take the designs a step further and build out slightly more complex components. These are built up of multiple molecules.
Using Our Systems to Build
By utilizing the framework we've set up, we were able to develop our site further. These building blocks not only facilitate the creation of diverse new pages and projects but also ensure adherence to accessibility guidelines, keeping our content inclusive and user-friendly. This approach allows us to expand our offerings while consistently upholding our brand's identity and values.
Templates
We build out templates for help us maintain structure. Below are the grids I created that were used for the entire D2C site.
Pages
These user flows are dedicated to specific user or business scenarios, and they serve as valuable resources. These flows were used actively by different stakeholders and helped shape the product.
Creating a design system structure with scalability in mind empowered us to swiftly implement changes to our website, enabling us to surpass our annual sales projections in half the initially estimated time.
This system offered the flexibility for rapid adaptations, resulting in a notable boost of more than 50% in click-through rates from shopping to cart conversion.
42%
in click-through rates
28%
increase in add
to cart
3.1%
decrease in site
exits
Want to see more?
Junto Bike Works was as a direct-to-consumer brand focused on urban transportation. My role involved creating a design system that would serve our consumer-facing website and product interfaces, including digital dashboards.
Role
UX+UI Design, Design Strategy, Research & Brand
Tools
Figma, Figjam, Illustrator
Timeframe
Design System - 3 months
Site Design - 3 months
Problem
Many people who want their first commuter bicycle are intimidated by bike shops but also find the online alternatives confusing.
Goals
Build a site that gives users a familiar feeling and makes the ordering process as easy as ordering something like a piece of clothing online.
Crafting an Adaptable Design System Framework
Drawing inspiration from the Atomic Design System, I aimed to construct a well-structured system of interconnected components that could be universally applied across all of Junto's digital product offerings. We initiated this process by optimizing our D2C website, with plans to extend the system to electric bicycle interfaces over time.
Below is a breakdown of the building process for different site elements.
Tokens
We started building out the core of the design system and the basic values needed to build and maintain our site - spacing, color, typography, border-radius, etc.
Atoms
From there, we built out the building blocks for our site, or the atoms. We tried to keep the build clean and familiar. We didn’t want the experience to feel foreign.
All of these elements were built with accessibility in mind, and each passed WCAG color contrast check.
Molecules
Using atoms, we then built up molecules. Following this structure helped us build out reusable sections, making site building more fluid and ensuring constant design.
Organisms
From there, we take the designs a step further and build out slightly more complex components. These are built up of multiple molecules.
Using Our Systems to Build
By utilizing the framework we've set up, we were able to develop our site further. These building blocks not only facilitate the creation of diverse new pages and projects but also ensure adherence to accessibility guidelines, keeping our content inclusive and user-friendly. This approach allows us to expand our offerings while consistently upholding our brand's identity and values.
Templates
We build out templates for help us maintain structure. Below are the grids I created that were used for the entire D2C site.
Pages
These user flows are dedicated to specific user or business scenarios, and they serve as valuable resources. These flows were used actively by different stakeholders and helped shape the product.
Retrospective
Creating a design system structure with scalability in mind empowered us to swiftly implement changes to our website, enabling us to surpass our annual sales projections in half the initially estimated time.
This system offered the flexibility for rapid adaptations, resulting in a notable boost of more than 50% in click-through rates from shopping to cart conversion.
42%
in click-through rates
28%
increase in add
to cart
3.1%
decrease in site
exits
Want to see more?
Junto Bike Works was as a direct-to-consumer brand focused on urban transportation. My role involved creating a design system that would serve our consumer-facing website and product interfaces, including digital dashboards.
Role
UX+UI Design, Design Strategy, Research & Brand
Tools
Figma, Figjam, Illustrator
Timeframe
Design System - 3 months
Site Design - 3 months
Problem
Many people who want their first commuter bicycle are intimidated by bike shops but also find the online alternatives confusing.
Goals
Build a site that gives users a familiar feeling and makes the ordering process as easy as ordering something like a piece of clothing online.
Crafting an Adaptable Design System Framework
Drawing inspiration from the Atomic Design System, I aimed to construct a well-structured system of interconnected components that could be universally applied across all of Junto's digital product offerings. We initiated this process by optimizing our D2C website, with plans to extend the system to electric bicycle interfaces over time.
Below is a breakdown of the building process for different site elements.
Tokens
We started building out the core of the design system and the basic values needed to build and maintain our site - spacing, color, typography, border-radius, etc.
Atoms
From there, we built out the building blocks for our site, or the atoms. We tried to keep the build clean and familiar. We didn’t want the experience to feel foreign.
All of these elements were built with accessibility in mind, and each passed WCAG color contrast check.
Molecules
Using atoms, we then built up molecules. Following this structure helped us build out reusable sections, making site building more fluid and ensuring constant design.
Organisms
From there, we take the designs a step further and build out slightly more complex components. These are built up of multiple molecules.
Using Our Systems to Build
By utilizing the framework we've set up, we were able to develop our site further. These building blocks not only facilitate the creation of diverse new pages and projects but also ensure adherence to accessibility guidelines, keeping our content inclusive and user-friendly. This approach allows us to expand our offerings while consistently upholding our brand's identity and values.
Templates
We build out templates for help us maintain structure. Below are the grids I created that were used for the entire D2C site.
Pages
These user flows are dedicated to specific user or business scenarios, and they serve as valuable resources. These flows were used actively by different stakeholders and helped shape the product.
Retrospective
Creating a design system structure with scalability in mind empowered us to swiftly implement changes to our website, enabling us to surpass our annual sales projections in half the initially estimated time.
This system offered the flexibility for rapid adaptations, resulting in a notable boost of more than 50% in click-through rates from shopping to cart conversion.
42%
in click-through rates
28%
increase in add
to cart
3.1%
decrease in site
exits
Want to see more?
Want to chat? Email me at
Made with love <3 . ©2024 Mike Tonkinson
Want to chat? Email me at
Made with love <3 . ©2024 Mike Tonkinson
Want to chat? Email me at
Made with love <3 . ©2024 Mike Tonkinson
Want to chat? Email me at
Made with love <3 . ©2024 Mike Tonkinson
Want to chat? Email me at
Made with love <3 . ©2024 Mike Tonkinson