Modernizing the i-PRO Ecosystem: From Portal Redesign to Scalable UI Foundations
Modernizing the i-PRO Ecosystem: From Portal Redesign to Scalable UI Foundations
Modernizing the i-PRO Ecosystem: From Portal Redesign to Scalable UI Foundations
Modernizing the i-PRO Ecosystem: From Portal Redesign to Scalable UI Foundations
Modernizing the i-PRO Ecosystem: From Portal Redesign to Scalable UI Foundations
Focusing on improving the user experience for their users who have difficulty using the product.
Focusing on improving the user experience for their users who have difficulty using the product.
Focusing on improving the user experience for their users who have difficulty using the product.
Focusing on improving the user experience for their users who have difficulty using the product.
Focusing on improving the user experience for their users who have difficulty using the product.
Background
Background
i-PRO (previously known as Panasonic) is a security technology company that specializes in advanced video surveillance and public safety solutions.
i-PRO (previously known as Panasonic) is a security technology company that specializes in advanced video surveillance and public safety solutions.
My role
My role
UX Designer
Started as a UX design generalist and, after identifying key pain points, became the sole designer leading the new design system while continuing to support the portal redesign.
UX Designer
Started as a UX design generalist and, after identifying key pain points, became the sole designer leading the new design system while continuing to support the portal redesign.
UX Designer
Started as a UX design generalist and, after identifying key pain points, became the sole designer leading the new design system while continuing to support the portal redesign.
UX Designer
Started as a UX design generalist and, after identifying key pain points, became the sole designer leading the new design system while continuing to support the portal redesign.
UX Designer
Started as a UX design generalist and, after identifying key pain points, became the sole designer leading the new design system while continuing to support the portal redesign.
Challenge
Challenge
To redesign the partner portal and build a global design system to help with inconsistent UI, improve accessibility, and scale across teams.
To redesign the partner portal and build a global design system to help with inconsistent UI, improve accessibility, and scale across teams.
Problem
Problem
Why was a redesign needed?
A redesign was initiated after the stakeholders noticed a decline of usage from EZ-2, the partner portal for i-PRO. The UX team was tasked with identifying the cause, which revealed it to be major usability issues and not meeting the user needs.
Why was a redesign needed?
A redesign was initiated after the stakeholders noticed a decline of usage from EZ-2, the partner portal for i-PRO. The UX team was tasked with identifying the cause, which revealed it to be major usability issues and not meeting the user needs.
Why was a redesign needed?
A redesign was initiated after the stakeholders noticed a decline of usage from EZ-2, the partner portal for i-PRO. The UX team was tasked with identifying the cause, which revealed it to be major usability issues and not meeting the user needs.
Why was a redesign needed?
A redesign was initiated after the stakeholders noticed a decline of usage from EZ-2, the partner portal for i-PRO. The UX team was tasked with identifying the cause, which revealed it to be major usability issues and not meeting the user needs.
Why was a redesign needed?
A redesign was initiated after the stakeholders noticed a decline of usage from EZ-2, the partner portal for i-PRO. The UX team was tasked with identifying the cause, which revealed it to be major usability issues and not meeting the user needs.
Preview of the marketing site with the design system
Part 1: Redesigning the partner portal
Discover
Why is the existing portal experience failing?
Focusing on the why, not what
How are the users behaving?
Discover
Why is the existing portal experience failing?
Focusing on the why, not what
How are the users behaving?
Discover
Why is the existing portal experience failing?
Focusing on the why, not what
How are the users behaving?
Discover
Why is the existing portal experience failing?
Focusing on the why, not what
How are the users behaving?
Discover
Why is the existing portal experience failing?
Focusing on the why, not what
How are the users behaving?
Define
What are we solving?
Define
What are we solving?
Define
What are we solving?
Define
What are we solving?
Define
What are we solving?
Develop
Refining the experience
Develop
Refining the experience
Develop
Refining the experience
Develop
Refining the experience
Develop
Refining the experience
Deliver
Finalizing the flow
Where do we go next?
Deliver
Finalizing the flow
Where do we go next?
Deliver
Finalizing the flow
Where do we go next?
Deliver
Finalizing the flow
Where do we go next?
Deliver
Finalizing the flow
Where do we go next?
Discover
Why is the existing portal experience failing?
We identified multiple gaps in the user experience that contributed to the decline in the EZ-2 portal. These inconsistencies made it harder for our partners and users to trust and rely on EZ-2. Below are a few screenshots of the existing experience with real user feedback that helped us identify the most urgent usability and workflow challenges.
Discover
Why is the existing portal experience failing?
We identified multiple gaps in the user experience that contributed to the decline in the EZ-2 portal. These inconsistencies made it harder for our partners and users to trust and rely on EZ-2. Below are a few screenshots of the existing experience with real user feedback that helped us identify the most urgent usability and workflow challenges.
Discover
Why is the existing portal experience failing?
We identified multiple gaps in the user experience that contributed to the decline in the EZ-2 portal. These inconsistencies made it harder for our partners and users to trust and rely on EZ-2. Below are a few screenshots of the existing experience with real user feedback that helped us identify the most urgent usability and workflow challenges.
Discover
Why is the existing portal experience failing?
We identified multiple gaps in the user experience that contributed to the decline in the EZ-2 portal. These inconsistencies made it harder for our partners and users to trust and rely on EZ-2. Below are a few screenshots of the existing experience with real user feedback that helped us identify the most urgent usability and workflow challenges.
Discover
Why is the existing portal experience failing?
We identified multiple gaps in the user experience that contributed to the decline in the EZ-2 portal. These inconsistencies made it harder for our partners and users to trust and rely on EZ-2. Below are a few screenshots of the existing experience with real user feedback that helped us identify the most urgent usability and workflow challenges.
Repetitive and unclear navigation
Outdated news
Multiple primary action buttons
Overuse of brand color
Similar products with little information to differentiate
Center alignment is difficult to read
Confusing filters
Lack of conceptual product overview
Unclear if these products are compatiable
Lack of visual aids
Repetitive and unclear navigation
Outdated news
Multiple primary action buttons
Overuse of brand color
Similar products with little information to differentiate
Center alignment is difficult to read
Confusing filters
Lack of conceptual product overview
Unclear if these products are compatiable
Lack of visual aids
Repetitive and unclear navigation
Outdated news
Multiple primary action buttons
Overuse of brand color
Similar products with little information to differentiate
Center alignment is difficult to read
Confusing filters
Lack of conceptual product overview
Unclear if these products are compatiable
Lack of visual aids
Repetitive and unclear navigation
Outdated news
Multiple primary action buttons
Overuse of brand color
Similar products with little information to differentiate
Center alignment is difficult to read
Confusing filters
Lack of conceptual product overview
Unclear if these products are compatiable
Lack of visual aids
Focusing on why, not the what
Focusing on why, not the what
Why do these issues happen?
There were inconsistent information across platforms (EZ-2 vs main i-PRO site) this would lead to loss of trust
A lot of product naming issues, users are unable to differentiate similar products
Unable to build or manage quotes and licenses easily
Documentation is hard to find or easier to use Google
EZ-2 has lack of conceptual product overview on how products relate to each other and what the product can do
Workflow is too complex for onboarding or training new employees
Why do these issues happen?
There were inconsistent information across platforms (EZ-2 vs main i-PRO site) this would lead to loss of trust
A lot of product naming issues, users are unable to differentiate similar products
Unable to build or manage quotes and licenses easily
Documentation is hard to find or easier to use Google
EZ-2 has lack of conceptual product overview on how products relate to each other and what the product can do
Workflow is too complex for onboarding or training new employees
Why do these issues happen?
There were inconsistent information across platforms (EZ-2 vs main i-PRO site) this would lead to loss of trust
A lot of product naming issues, users are unable to differentiate similar products
Unable to build or manage quotes and licenses easily
Documentation is hard to find or easier to use Google
EZ-2 has lack of conceptual product overview on how products relate to each other and what the product can do
Workflow is too complex for onboarding or training new employees
Why do these issues happen?
There were inconsistent information across platforms (EZ-2 vs main i-PRO site) this would lead to loss of trust
A lot of product naming issues, users are unable to differentiate similar products
Unable to build or manage quotes and licenses easily
Documentation is hard to find or easier to use Google
EZ-2 has lack of conceptual product overview on how products relate to each other and what the product can do
Workflow is too complex for onboarding or training new employees
Why do these issues happen?
There were inconsistent information across platforms (EZ-2 vs main i-PRO site) this would lead to loss of trust
A lot of product naming issues, users are unable to differentiate similar products
Unable to build or manage quotes and licenses easily
Documentation is hard to find or easier to use Google
EZ-2 has lack of conceptual product overview on how products relate to each other and what the product can do
Workflow is too complex for onboarding or training new employees
Why are the partners and users aren't satisfied?
Want more visual aids
Don’t want to rely on i-PRO employees to do the next task
Discontinued products appearing
Accessories were sometimes incompatible
Why are the partners and users aren't satisfied?
Want more visual aids
Don’t want to rely on i-PRO employees to do the next task
Discontinued products appearing
Accessories were sometimes incompatible
Why are the partners and users aren't satisfied?
Want more visual aids
Don’t want to rely on i-PRO employees to do the next task
Discontinued products appearing
Accessories were sometimes incompatible
Why are the partners and users aren't satisfied?
Want more visual aids
Don’t want to rely on i-PRO employees to do the next task
Discontinued products appearing
Accessories were sometimes incompatible
Why are the partners and users aren't satisfied?
Want more visual aids
Don’t want to rely on i-PRO employees to do the next task
Discontinued products appearing
Accessories were sometimes incompatible
Search product by SKU
Search product by SKU
Search product by SKU
Product search
Product search
Product search
Quick accessories search
Quick accessories search
Quick accessories search
Search product by SKU
Product search
Quick accessories search
Search product by SKU
Product search
Quick accessories search
Most clicked areas from Hotjar
Product search bar
Product drop down
Quick accessories search
Most clicked areas from Hotjar
Product search bar
Product drop down
Quick accessories search
How are the users behaving?
How are the users behaving?
User's interactions were recorded using Hotjar, to understand key interactions and flows.
Users frequently clicked areas with dealing with product search
Low engagement on features like news, downloads, and adding to quote
Users click on areas that they thought were links
User's interactions were recorded using Hotjar, to understand key interactions and flows.
Users frequently clicked areas with dealing with product search
Low engagement on features like news, downloads, and adding to quote
Users click on areas that they thought were links
User's interactions were recorded using Hotjar, to understand key interactions and flows.
Users frequently clicked areas with dealing with product search
Low engagement on features like news, downloads, and adding to quote
Users click on areas that they thought were links
User's interactions were recorded using Hotjar, to understand key interactions and flows.
Users frequently clicked areas with dealing with product search
Low engagement on features like news, downloads, and adding to quote
Users click on areas that they thought were links
User's interactions were recorded using Hotjar, to understand key interactions and flows.
Users frequently clicked areas with dealing with product search
Low engagement on features like news, downloads, and adding to quote
Users click on areas that they thought were links
Who are we up aganist?
Who are we up aganist?
Competitors
What all these competitors have in common are well-designed applications that are user-friendly. Users have less time being frustrated and more time finishing tasks. While we could have better cameras, we still need up update our softwares.
Verkada
Axis Communications
Hanwha
Competitors
What all these competitors have in common are well-designed applications that are user-friendly. Users have less time being frustrated and more time finishing tasks. While we could have better cameras, we still need up update our softwares.
Verkada
Axis Communications
Hanwha
Competitors
What all these competitors have in common are well-designed applications that are user-friendly. Users have less time being frustrated and more time finishing tasks. While we could have better cameras, we still need up update our softwares.
Verkada
Axis Communications
Hanwha
Competitors
What all these competitors have in common are well-designed applications that are user-friendly. Users have less time being frustrated and more time finishing tasks. While we could have better cameras, we still need up update our softwares.
Verkada
Axis Communications
Hanwha
Competitors
What all these competitors have in common are well-designed applications that are user-friendly. Users have less time being frustrated and more time finishing tasks. While we could have better cameras, we still need up update our softwares.
Verkada
Axis Communications
Hanwha
Define
What are we solving?
Based off of our research and user interviews, we identified key challenges that are affecting the user experience.
Define
What are we solving?
Based off of our research and user interviews, we identified key challenges that are affecting the user experience.
Define
What are we solving?
Based off of our research and user interviews, we identified key challenges that are affecting the user experience.
Define
What are we solving?
Based off of our research and user interviews, we identified key challenges that are affecting the user experience.
Define
What are we solving?
Based off of our research and user interviews, we identified key challenges that are affecting the user experience.
How might we streamline the user experience to improve efficiency for both new and experienced users?
Insight
Experienced users are unable to teach new users their tasks because the workflow isn't efficient with the current UI.
How might we streamline the user experience to improve efficiency for both new and experienced users?
Insight
Experienced users are unable to teach new users their tasks because the workflow isn't efficient with the current UI.
How might we streamline the user experience to improve efficiency for both new and experienced users?
Insight
Experienced users are unable to teach new users their tasks because the workflow isn't efficient with the current UI.
How might we streamline the user experience to improve efficiency for both new and experienced users?
Insight
Experienced users are unable to teach new users their tasks because the workflow isn't efficient with the current UI.
How might we streamline the user experience to improve efficiency for both new and experienced users?
Insight
Experienced users are unable to teach new users their tasks because the workflow isn't efficient with the current UI.
How might we simplify the quote building workflow to reduce manual work and confusion?
Insight
Partners finds the process to build a quote tedious and error prone because it requires multiple tools and platforms.
How might we simplify the quote building workflow to reduce manual work and confusion?
Insight
Partners finds the process to build a quote tedious and error prone because it requires multiple tools and platforms.
How might we simplify the quote building workflow to reduce manual work and confusion?
Insight
Partners finds the process to build a quote tedious and error prone because it requires multiple tools and platforms.
How might we simplify the quote building workflow to reduce manual work and confusion?
Insight
Partners finds the process to build a quote tedious and error prone because it requires multiple tools and platforms.
How might we simplify the quote building workflow to reduce manual work and confusion?
Insight
Partners finds the process to build a quote tedious and error prone because it requires multiple tools and platforms.
How might we make it easier to find the right product and information?
Insight
Finding the accurate information becomes difficult because information is scattered and inconsistent.
How might we make it easier to find the right product and information?
Insight
Finding the accurate information becomes difficult because information is scattered and inconsistent.
How might we make it easier to find the right product and information?
Insight
Finding the accurate information becomes difficult because information is scattered and inconsistent.
How might we make it easier to find the right product and information?
Insight
Finding the accurate information becomes difficult because information is scattered and inconsistent.
How might we make it easier to find the right product and information?
Insight
Finding the accurate information becomes difficult because information is scattered and inconsistent.
Develop
Refining the experience
After continues feedback from users, we went through several rounds of iterations. Here are some key iterations that helped identify what worked, what didn't, and move closer to a better experience.
Develop
Refining the experience
After continues feedback from users, we went through several rounds of iterations. Here are some key iterations that helped identify what worked, what didn't, and move closer to a better experience.
Develop
Refining the experience
After continues feedback from users, we went through several rounds of iterations. Here are some key iterations that helped identify what worked, what didn't, and move closer to a better experience.
Develop
Refining the experience
After continues feedback from users, we went through several rounds of iterations. Here are some key iterations that helped identify what worked, what didn't, and move closer to a better experience.
Develop
Refining the experience
After continues feedback from users, we went through several rounds of iterations. Here are some key iterations that helped identify what worked, what didn't, and move closer to a better experience.
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Dec 2023: First iteration
March 2024: Second iteration
June 2024: Third iteration
Sept 2024: Fourth iteration
Deliver
Finalizing the flow
After multiple iterations and incorporating user and stakeholder feedback, we finalized the prototype flow and submitted it to the developers. This helps the team to begin building the updated experience for layout, flow, and behavior.
Deliver
Finalizing the flow
After multiple iterations and incorporating user and stakeholder feedback, we finalized the prototype flow and submitted it to the developers. This helps the team to begin building the updated experience for layout, flow, and behavior.
Deliver
Finalizing the flow
After multiple iterations and incorporating user and stakeholder feedback, we finalized the prototype flow and submitted it to the developers. This helps the team to begin building the updated experience for layout, flow, and behavior.
Deliver
Finalizing the flow
After multiple iterations and incorporating user and stakeholder feedback, we finalized the prototype flow and submitted it to the developers. This helps the team to begin building the updated experience for layout, flow, and behavior.
Deliver
Finalizing the flow
After multiple iterations and incorporating user and stakeholder feedback, we finalized the prototype flow and submitted it to the developers. This helps the team to begin building the updated experience for layout, flow, and behavior.
Where do we go next?
Where do we go next?
After many iterations, we discovered inconsistencies within the team, this led to the realization that a design system was needed.
I took the initiative to advocate for a design system and pivoted roles to improve team workflows and brand consistency.
After many iterations, we discovered inconsistencies within the team, this led to the realization that a design system was needed.
I took the initiative to advocate for a design system and pivoted roles to improve team workflows and brand consistency.
After many iterations, we discovered inconsistencies within the team, this led to the realization that a design system was needed.
I took the initiative to advocate for a design system and pivoted roles to improve team workflows and brand consistency.
After many iterations, we discovered inconsistencies within the team, this led to the realization that a design system was needed.
I took the initiative to advocate for a design system and pivoted roles to improve team workflows and brand consistency.
After many iterations, we discovered inconsistencies within the team, this led to the realization that a design system was needed.
I took the initiative to advocate for a design system and pivoted roles to improve team workflows and brand consistency.
Part 2: Building the Cosmo design system
Discover
Why are inconsistencies still happening?
Auditing cross platforms
Accessibility and design standards
Discover
Why are inconsistencies still happening?
Auditing cross platforms
Accessibility and design standards
Discover
Why are inconsistencies still happening?
Auditing cross platforms
Accessibility and design standards
Discover
Why are inconsistencies still happening?
Auditing cross platforms
Accessibility and design standards
Discover
Why are inconsistencies still happening?
Auditing cross platforms
Accessibility and design standards
Define
The 5 W's
Outlining the key foundational elements
Define
The 5 W's
Outlining the key foundational elements
Define
The 5 W's
Outlining the key foundational elements
Define
The 5 W's
Outlining the key foundational elements
Define
The 5 W's
Outlining the key foundational elements
Develop
Creating the core component library
Design documentation
Develop
Creating the core component library
Design documentation
Develop
Creating the core component library
Design documentation
Develop
Creating the core component library
Design documentation
Develop
Creating the core component library
Design documentation
Deliver
Updated redesign
Where do we go from here?
Deliver
Updated redesign
Where do we go from here?
Deliver
Updated redesign
Where do we go from here?
Deliver
Updated redesign
Where do we go from here?
Deliver
Updated redesign
Where do we go from here?
Discover
Where and why are inconsistencies still happening?
As I was working on the EZ-2 partner portal with three UX design interns, I discovered there were many inconsistencies happening. There is no clear documentation of brand guidelines, therefore the design and developer team continues to create mistakes. Multiple variables of the same color, 10 of the same button, inconsistent spacing, and more.
Discover
Where and why are inconsistencies still happening?
As I was working on the EZ-2 partner portal with three UX design interns, I discovered there were many inconsistencies happening. There is no clear documentation of brand guidelines, therefore the design and developer team continues to create mistakes. Multiple variables of the same color, 10 of the same button, inconsistent spacing, and more.
Discover
Where and why are inconsistencies still happening?
As I was working on the EZ-2 partner portal with three UX design interns, I discovered there were many inconsistencies happening. There is no clear documentation of brand guidelines, therefore the design and developer team continues to create mistakes. Multiple variables of the same color, 10 of the same button, inconsistent spacing, and more.
Discover
Where and why are inconsistencies still happening?
As I was working on the EZ-2 partner portal with three UX design interns, I discovered there were many inconsistencies happening. There is no clear documentation of brand guidelines, therefore the design and developer team continues to create mistakes. Multiple variables of the same color, 10 of the same button, inconsistent spacing, and more.
Discover
Where and why are inconsistencies still happening?
As I was working on the EZ-2 partner portal with three UX design interns, I discovered there were many inconsistencies happening. There is no clear documentation of brand guidelines, therefore the design and developer team continues to create mistakes. Multiple variables of the same color, 10 of the same button, inconsistent spacing, and more.
Poor accessbility
Poor accessbility
Poor accessbility
Poor accessbility
Links that are similar to text color
Links that are similar to text color
Links that are similar to text color
Links that are similar to text color
Two styles of input
Two styles of input
Two styles of input
Two styles of input
Poor accessbility
Links that are similar to text color
Two styles of input
Multiple variables of the same colors
Multiple variables of the same colors
Multiple variables of the same colors
Multiple variables of the same colors
Multiple variables of the same colors
Poor accessbility
Poor accessbility
Poor accessbility
Poor accessbility
Poor accessbility
Different colors, font style, and button size
Different colors, font style, and button size
Different colors, font style, and button size
Different colors, font style, and button size
Different colors, font style, and button size
Auditing cross platforms
Auditing cross platforms
With multiple platforms i-PRO has to offer, there comes a cost to it
If there is no one maintaining and overseeing the design, inconsistencies happen.
I audited the marketing website and found multiple buttons and cards of different rest and hover styles.
On a different web tool i-PRO offers, they overused the brand color which could cause the user to feel overwhelmed and lost. There is no clear hierarchy which makes it difficult to navigate around.
With multiple platforms i-PRO has to offer, there comes a cost to it
If there is no one maintaining and overseeing the design, inconsistencies happen.
I audited the marketing website and found multiple buttons and cards of different rest and hover styles.
On a different web tool i-PRO offers, they overused the brand color which could cause the user to feel overwhelmed and lost. There is no clear hierarchy which makes it difficult to navigate around.
With multiple platforms i-PRO has to offer, there comes a cost to it
If there is no one maintaining and overseeing the design, inconsistencies happen.
I audited the marketing website and found multiple buttons and cards of different rest and hover styles.
On a different web tool i-PRO offers, they overused the brand color which could cause the user to feel overwhelmed and lost. There is no clear hierarchy which makes it difficult to navigate around.
With multiple platforms i-PRO has to offer, there comes a cost
If there is no one maintaining and overseeing the design, inconsistencies happen.
I audited the marketing website and found multiple buttons and cards of different rest and hover styles.
On a different web tool i-PRO offers, they overused the brand color which could cause the user to feel overwhelmed and lost. There is no clear hierarchy which makes it difficult to navigate around.
With multiple platforms i-PRO has to offer, there comes a cost to it
If there is no one maintaining and overseeing the design, inconsistencies happen.
I audited the marketing website and found multiple buttons and cards of different rest and hover styles.
On a different web tool i-PRO offers, they overused the brand color which could cause the user to feel overwhelmed and lost. There is no clear hierarchy which makes it difficult to navigate around.
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Different rest and hover states for buttons and cards
No hierarchy, contrast, or brand consistency in two web products
Accessibility and design standards
Accessibility and design standards
Gaps in accessibility
There are no clear focus states or keyboard navigation support
No ARIA labels
Inconsistent color contrast ratios across components
Gaps in accessibility
There are no clear focus states or keyboard navigation support
No ARIA labels
Inconsistent color contrast ratios across components
Gaps in accessibility
There are no clear focus states or keyboard navigation support
No ARIA labels
Inconsistent color contrast ratios across components
Gaps in accessibility
There are no clear focus states or keyboard navigation support
No ARIA labels
Inconsistent color contrast ratios across components
Gaps in accessibility
There are no clear focus states or keyboard navigation support
No ARIA labels
Inconsistent color contrast ratios across components
Design inconsistencies
Multiple versions of the same component
Inconsistent spacing, type scales, and layout structures
Designs deviated from the brand look and feel across different products
Design inconsistencies
Multiple versions of the same component
Inconsistent spacing, type scales, and layout structures
Designs deviated from the brand look and feel across different products
Design inconsistencies
Multiple versions of the same component
Inconsistent spacing, type scales, and layout structures
Designs deviated from the brand look and feel across different products
Design inconsistencies
Multiple versions of the same component
Inconsistent spacing, type scales, and layout structures
Designs deviated from the brand look and feel across different products
Design inconsistencies
Multiple versions of the same component
Inconsistent spacing, type scales, and layout structures
Designs deviated from the brand look and feel across different products
Define
The 5 W's
To understand the purpose and scope, I asked five key questions who, what, where, when, and why to define the foundation of the design system to ensure its built to scale and sustainably.
Define
The 5 W's
To understand the purpose and scope, I asked five key questions who, what, where, when, and why to define the foundation of the design system to ensure its built to scale and sustainably.
Define
The 5 W's
To understand the purpose and scope, I asked five key questions who, what, where, when, and why to define the foundation of the design system to ensure its built to scale and sustainably.
Define
The 5 W's
To understand the purpose and scope, I asked five key questions who, what, where, when, and why to define the foundation of the design system to ensure its built to scale and sustainably.
Define
The 5 W's
To understand the purpose and scope, I asked five key questions who, what, where, when, and why to define the foundation of the design system to ensure its built to scale and sustainably.
Who is the design system for?
Who is the design system for?
Who is the design system for?
For the designers and developers across the U.S., Japan, and Europe as well as, internal teams working on other platforms for brand consistency.
What problems is it solving?
What problems is it solving?
What problems is it solving?
Repititve designs in UI components, lack of documentation or standards, slow prototyping and iterations
Where will it be used?
Where will it be used?
Where will it be used?
On multiple platforms like, EZ-2 partner portal, desktop apps (Video Insight, Access Control, and ActiveGuard), main i-PRO marketing website, internal tools used by sales, finance, and support.
When will it be adopted?
When will it be adopted?
When will it be adopted?
Would be adopted incrementally as new features and components are developed. Has a long term rollout planned for global alignment.
Why now?
Why now?
Why now?
Global teams noticed inefficiencies and visual inconsistencies. Having a design system would improve efficiency, hand offs, and reduce dev work.
Develop
Designing for scale
To keep in mind the ecosystem that i-PRO has in web, desktop, and for the future mobile applications. I designed a system with scalability and flexibility in mind. By building for scale from the start, it could ensure a long term efficiency, brand consistency, and ease of implementation across platforms and teams.
Develop
Designing for scale
To keep in mind the ecosystem that i-PRO has in web, desktop, and for the future mobile applications. I designed a system with scalability and flexibility in mind. By building for scale from the start, it could ensure a long term efficiency, brand consistency, and ease of implementation across platforms and teams.
Develop
Designing for scale
To keep in mind the ecosystem that i-PRO has in web, desktop, and for the future mobile applications. I designed a system with scalability and flexibility in mind. By building for scale from the start, it could ensure a long term efficiency, brand consistency, and ease of implementation across platforms and teams.
Develop
Designing for scale
To keep in mind the ecosystem that i-PRO has in web, desktop, and for the future mobile applications. I designed a system with scalability and flexibility in mind. By building for scale from the start, it could ensure a long term efficiency, brand consistency, and ease of implementation across platforms and teams.
Develop
Designing for scale
To keep in mind the ecosystem that i-PRO has in web, desktop, and for the future mobile applications. I designed a system with scalability and flexibility in mind. By building for scale from the start, it could ensure a long term efficiency, brand consistency, and ease of implementation across platforms and teams.
Deliver
Updated redesign
After multiple iterations and incorporating user and stakeholder feedback, we finalized the prototype flow and submitted it to the developers. This helps the team to begin building the updated experience for layout, flow, and behavior.
Deliver
Updated redesign
After multiple iterations and incorporating user and stakeholder feedback, we finalized the prototype flow and submitted it to the developers. This helps the team to begin building the updated experience for layout, flow, and behavior.
Deliver
Updated redesign
After multiple iterations and incorporating user and stakeholder feedback, we finalized the prototype flow and submitted it to the developers. This helps the team to begin building the updated experience for layout, flow, and behavior.
Deliver
Updated redesign
After multiple iterations and incorporating user and stakeholder feedback, we finalized the prototype flow and submitted it to the developers. This helps the team to begin building the updated experience for layout, flow, and behavior.
Deliver
Updated redesign
After multiple iterations and incorporating user and stakeholder feedback, we finalized the prototype flow and submitted it to the developers. This helps the team to begin building the updated experience for layout, flow, and behavior.
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
i-PRO marketing site
Before
After
EZ-2 Partner Portal
Before
After: Applying DS without changing layout
New EZ-2 Dashboard
Light mode
Dark mode
System Design Tool
Before
After
Impact
Impact
Building Cosmos allowed a scalable foundation that empowered teams across i-PRO.
Creating core components, design tokens, and brand standards allowed consistency across global platforms. This reduced duplicated designs by 60%.
Providing documentation helped cross-functional teams-designers, developers, and marketing to be more aligned and shortened the time to final handoff by ~30%.
Building Cosmos allowed a scalable foundation that empowered teams across i-PRO.
Creating core components, design tokens, and brand standards allowed consistency across global platforms. This reduced duplicated designs by 60%.
Providing documentation helped cross-functional teams-designers, developers, and marketing to be more aligned and shortened the time to final handoff by ~30%.
Building Cosmos allowed a scalable foundation that empowered teams across i-PRO.
Creating core components, design tokens, and brand standards allowed consistency across global platforms. This reduced duplicated designs by 60%.
Providing documentation helped cross-functional teams-designers, developers, and marketing to be more aligned and shortened the time to final handoff by ~30%.
Building Cosmos allowed a scalable foundation that empowered teams across i-PRO.
Creating core components, design tokens, and brand standards allowed consistency across global platforms. This reduced duplicated designs by 60%.
Providing documentation helped cross-functional teams-designers, developers, and marketing to be more aligned and shortened the time to final handoff by ~30%.
Building Cosmos allowed a scalable foundation that empowered teams across i-PRO.
Creating core components, design tokens, and brand standards allowed consistency across global platforms. This reduced duplicated designs by 60%.
Providing documentation helped cross-functional teams-designers, developers, and marketing to be more aligned and shortened the time to final handoff by ~30%.
Reflection
Reflection
If I had more time...
I would have components be even more flexible by using design tokens instead making multiple variants of one component. Figma files takes up a lot of memory so the files start to slow down. I wasn't able to fulfill this during my time at i-PRO because I was still in the process of learning design tokens.
I would explored further into applying the design system into other i-PRO applications.
If I had more time...
I would have components be even more flexible by using design tokens instead making multiple variants of one component. Figma files takes up a lot of memory so the files start to slow down. I wasn't able to fulfill this during my time at i-PRO because I was still in the process of learning design tokens.
I would explored further into applying the design system into other i-PRO applications.
If I had more time...
I would have components be even more flexible by using design tokens instead making multiple variants of one component. Figma files takes up a lot of memory so the files start to slow down. I wasn't able to fulfill this during my time at i-PRO because I was still in the process of learning design tokens.
I would explored further into applying the design system into other i-PRO applications.
If I had more time...
I would have components be even more flexible by using design tokens instead making multiple variants of one component. Figma files takes up a lot of memory so the files start to slow down. I wasn't able to fulfill this during my time at i-PRO because I was still in the process of learning design tokens.
I would explored further into applying the design system into other i-PRO applications.
If I had more time...
I would have components be even more flexible by using design tokens instead making multiple variants of one component. Figma files takes up a lot of memory so the files start to slow down. I wasn't able to fulfill this during my time at i-PRO because I was still in the process of learning design tokens.
I would explored further into applying the design system into other i-PRO applications.
Key learnings & takeaways
I started off with knowing nothing about design systems, but doing this project allowed me to understand the importance of having one. Having the consistency, scalability, and collaboration between teams plays big impact.
I enjoyed going deep into the details of a component, making it pixel perfect, finding the right accessibility, and helping others. That's when I discovered that I wanted to specialize in design systems.
I started to take more courses and attend talks to expand my knowledge to apply for future projects.
Key learnings & takeaways
I started off with knowing nothing about design systems, but doing this project allowed me to understand the importance of having one. Having the consistency, scalability, and collaboration between teams plays big impact.
I enjoyed going deep into the details of a component, making it pixel perfect, finding the right accessibility, and helping others. That's when I discovered that I wanted to specialize in design systems.
I started to take more courses and attend talks to expand my knowledge to apply for future projects.
Key learnings & takeaways
I started off with knowing nothing about design systems, but doing this project allowed me to understand the importance of having one. Having the consistency, scalability, and collaboration between teams plays big impact.
I enjoyed going deep into the details of a component, making it pixel perfect, finding the right accessibility, and helping others. That's when I discovered that I wanted to specialize in design systems.
I started to take more courses and attend talks to expand my knowledge to apply for future projects.
Key learnings & takeaways
I started off with knowing nothing about design systems, but doing this project allowed me to understand the importance of having one. Having the consistency, scalability, and collaboration between teams plays big impact.
I enjoyed going deep into the details of a component, making it pixel perfect, finding the right accessibility, and helping others. That's when I discovered that I wanted to specialize in design systems.
I started to take more courses and attend talks to expand my knowledge to apply for future projects.
Key learnings & takeaways
I started off with knowing nothing about design systems, but doing this project allowed me to understand the importance of having one. Having the consistency, scalability, and collaboration between teams plays big impact.
I enjoyed going deep into the details of a component, making it pixel perfect, finding the right accessibility, and helping others. That's when I discovered that I wanted to specialize in design systems.
I started to take more courses and attend talks to expand my knowledge to apply for future projects.
