VerdiUI/UX
Redesign
Our vision is to create a unique "engineer beauty" experience for engineers by redesigning the toolbar structure, flattening icons, and extending graphic designs based on different needs scenarios.
By doing so, we aim to enhance brand stickiness and create a better user journey, differentiating debug system from other platforms.
Client
duration
6 month
team
Icon Design : Chloe Tsai
UI/UX : Steven
PM : Zoe Chen/Sherry Wang
Practices
Stakeholder Interview, Design Workshop, UI design, Usability Test
Over view
Over view
Synopsys, the world's leading company in the Electronic Design Automation (EDA) industry, has extensive experience and expertise in electronic design automation, semiconductor chip design, hardware verification, and IC packaging. They offer a range of solutions, including automated debugging systems, circuit simulation, and physical design, which are widely used in fields such as semiconductors, digital circuits, RF, and high-speed transmission.
As Verdi is a product that has been in use for over a decade and is preparing for a system upgrade, the goal of this project is to improve the UI/UX of Verdi's verification and design flow services and prepare for the future application of Qt5.
Synopsys, the world's leading company in the Electronic Design Automation (EDA) industry, has extensive experience and expertise in electronic design automation, semiconductor chip design, hardware verification, and IC packaging. They offer a range of solutions, including automated debugging systems, circuit simulation, and physical design, which are widely used in fields such as semiconductors, digital circuits, RF, and high-speed transmission.
As Verdi is a product that has been in use for over a decade and is preparing for a system upgrade, the goal of this project is to improve the UI/UX of Verdi's verification and design flow services and prepare for the future application of Qt5.
Over view
Over view
Client's is The world's leading company in the Electronic Design Automation (EDA) industry, has extensive experience and expertise in electronic design automation, semiconductor chip design, hardware verification, and IC packaging. They offer a range of solutions, including automated debugging systems, circuit simulation, and physical design, which are widely used in fields such as semiconductors, digital circuits, RF, and high-speed transmission.
As Verdi is a product that has been in use for over a decade and is preparing for a system upgrade, the goal of this project is to improve the UI/UX of Verdi's verification and design flow services and prepare for the future application of Qt5.
Client's is The world's leading company in the Electronic Design Automation (EDA) industry, has extensive experience and expertise in electronic design automation, semiconductor chip design, hardware verification, and IC packaging. They offer a range of solutions, including automated debugging systems, circuit simulation, and physical design, which are widely used in fields such as semiconductors, digital circuits, RF, and high-speed transmission.
As Verdi is a product that has been in use for over a decade and is preparing for a system upgrade, the goal of this project is to improve the UI/UX of Verdi's verification and design flow services and prepare for the future application of Qt5.
Process
Process
Process
I was involved in the entire process from presale to project initiation.
During the presale phase, we conducted industry trend and competitor analysis based on the client's RFP and conducted interviews to understand product strategy and the constraints of iterative development. After the project was initiated, we conducted stakeholder interviews and workshops to gain a better understanding of the EDA industry and automated debugging systems, which were unfamiliar to us before.
I was involved in the entire process from presale to project initiation.
During the presale phase, we conducted industry trend and competitor analysis based on the client's RFP and conducted interviews to understand product strategy and the constraints of iterative development. After the project was initiated, we conducted stakeholder interviews and workshops to gain a better understanding of the EDA industry and automated debugging systems, which were unfamiliar to us before.
I was involved in the entire process from presale to project initiation.
During the presale phase, we conducted industry trend and competitor analysis based on the client's RFP and conducted interviews to understand product strategy and the constraints of iterative development. After the project was initiated, we conducted stakeholder interviews and workshops to gain a better understanding of the EDA industry and automated debugging systems, which were unfamiliar to us before.
Empathize
Empathize
What is the problem?
Define the challenge & explore the human context.
What is the problem?
Define the challenge & explore the human context.
Ideate
Ideate
How do we solve it?
Brainstorm ideas good & bad, don’t stop at the obvious.
How do we solve it?
Brainstorm ideas good & bad, don’t stop at the obvious.
Define
Define
Why is it important?
Research, observe, understand & create a point of view.
Design Concept
Design Concept
Provide Design Concept Slides & Conduct a Brief.
Provide Design Concept Slides & Conduct a Brief.
VerdiUI/UX
Redesign
Our vision is to create a unique "engineer beauty" experience for engineers by redesigning the toolbar structure, flattening icons, and extending graphic designs based on different needs scenarios.
By doing so, we aim to enhance brand stickiness and create a better user journey, differentiating debug system from other platforms.
User Story
User Story
Through stakeholder interviews, we were able to identify the pain points of the product based on user needs, and then translate them into user stories.
Through stakeholder interviews, we were able to identify the pain points of the product based on user needs, and then translate them into user stories.
Daniel
As an IC designer, I want to have a larger window size for the sub-pane, so that I could see more information for debug.
Dann
As a user, I want to see brand-new GUI so that it can increase my productivity and stickiness to Verdi.
Manoj
As a user, I want the position of search bar can be closer to the docking window I use, so that I don’t always move my cursor to right-top side.
Mani
As a user, I want to use App Launcher to launch other Apps so that I can quickly switch between different app.
Current UI
Current UI
Pain Point
Verdi currently has over 1,000 different screens and icons, and the overall system style is outdated, with unclear information presentation. In addition to following a business transformation design strategy, we also considered sustainable operations as a platform provider and redesigned the structure and icons of various toolbars, making the icons flatter and designing graphics based on the existing brand to enhance brand cohesion and provide a unique "engineer's beauty" experience that distinguishes it from other platforms and addresses users' journeys from different needs contexts.
Finally, we identified the following pain points for subsequent design decisions:
The font used in the coding area.
The font used in the coding area.
DejaVu Sans Mono
DejaVu Sans Mono
DejaVu, improved from Bitstream Vera. Set a clear distinguish between l (lowercase L), I (uppercase i ) and 1 (number), 0 (number), o and O
DejaVu, improved from Bitstream Vera. Set a clear distinguish between l (lowercase L), I (uppercase i ) and 1 (number), 0 (number), o and O
Clearer visibility
Clearer visibility
Full character set -> support unicode
Full character set -> support unicode
Appropriate spacing -> remain fixed width with appropriate spacing
Appropriate spacing -> remain fixed width with appropriate spacing
Less confussion -> l (lowercase L), I (uppercase i ) and 1 (number), 0 (number), o and O are easy to distinguish
Less confussion -> l (lowercase L), I (uppercase i ) and 1 (number), 0 (number), o and O are easy to distinguish
English quotation marks -> ` and ' are easy to distinguish and symmetrical
English quotation marks -> ` and ' are easy to distinguish and symmetrical
Clear punctuation -> such as common symbols in programs < > { } [ ]
Clear punctuation -> such as common symbols in programs < > { } [ ]
Our Design Goal
Our Design Goal
Through stakeholder interviews, we were able to identify the pain points of the product based on user needs, and then translate them into user stories.
Through stakeholder interviews, we were able to identify the pain points of the product based on user needs, and then translate them into user stories.
Optimize the interface design, functional experience, and product development strategy of Verdi's verification and design process, and ensure system consistency while improving user recognition and experience.
Optimize the interface design, functional experience, and product development strategy of Verdi's verification and design process, and ensure system consistency while improving user recognition and experience.
Clear & Comfortable
For users who are sensitive to strong light, the dark mode is better to protect users' eyes.
For users who are sensitive to strong light, the dark mode is better to protect users' eyes.
Concentrated & Bright
Light mode helps users who work in bright environments.
Light mode helps users who work in bright environments.
Verdi's interface does not match the corporate image (low user-brand resonance)
Poor experience in using functions and fields (difficult for new users to get started)
Unclear product development strategy (limited scalability and flexibility)
User Story
Through stakeholder interviews, we were able to identify the pain points of the product based on user needs, and then translate them into user stories.
Daniel
As an IC designer, I want to have a larger window size for the sub-pane, so that I could see more information for debug.
Dann
As a user, I want to see brand-new GUI so that it can increase my productivity and stickiness to Verdi.
Manoj
As a user, I want the position of search bar can be closer to the docking window I use, so that I don’t always move my cursor to right-top side.
Mani
As a user, I want to use App Launcher to launch other Apps so that I can quickly switch between different app.
Daniel
As an IC designer, I want to have a larger window size for the sub-pane, so that I could see more information for debug.
Dann
As a user, I want to see brand-new GUI so that it can increase my productivity and stickiness to Verdi.
Manoj
As a user, I want the position of search bar can be closer to the docking window I use, so that I don’t always move my cursor to right-top side.
Mani
As a user, I want to use App Launcher to launch other Apps so that I can quickly switch between different app.
User Story
User Story
Through stakeholder interviews, we were able to identify the pain points of the product based on user needs, and then translate them into user stories.
Through stakeholder interviews, we were able to identify the pain points of the product based on user needs, and then translate them into user stories.
Current UI
Current UI
Pain Point
Verdi currently has over 1,000 different screens and icons, and the overall system style is outdated, with unclear information presentation. In addition to following a business transformation design strategy, we also considered sustainable operations as a platform provider and redesigned the structure and icons of various toolbars, making the icons flatter and designing graphics based on the existing brand to enhance brand cohesion and provide a unique "engineer's beauty" experience that distinguishes it from other platforms and addresses users' journeys from different needs contexts.
Finally, we identified the following pain points for subsequent design decisions:
Verdi's interface does not match the corporate image (low user-brand resonance)
Poor experience in using functions and fields (difficult for new users to get started)
Unclear product development strategy (limited scalability and flexibility)
Pain Point
Pain Point
Verdi currently has over 1,000 different screens and icons, and the overall system style is outdated, with unclear information presentation. In addition to following a business transformation design strategy, we also considered sustainable operations as a platform provider and redesigned the structure and icons of various toolbars, making the icons flatter and designing graphics based on the existing brand to enhance brand cohesion and provide a unique "engineer's beauty" experience that distinguishes it from other platforms and addresses users' journeys from different needs contexts.
Finally, we identified the following pain points for subsequent design decisions:
Verdi currently has over 1,000 different screens and icons, and the overall system style is outdated, with unclear information presentation. In addition to following a business transformation design strategy, we also considered sustainable operations as a platform provider and redesigned the structure and icons of various toolbars, making the icons flatter and designing graphics based on the existing brand to enhance brand cohesion and provide a unique "engineer's beauty" experience that distinguishes it from other platforms and addresses users' journeys from different needs contexts.
Finally, we identified the following pain points for subsequent design decisions:
Verdi's interface does not match the corporate image (low user-brand resonance)
Poor experience in using functions and fields (difficult for new users to get started)
Unclear product development strategy (limited scalability and flexibility)
Verdi's interface does not match the corporate image (low user-brand resonance)
Poor experience in using functions and fields (difficult for new users to get started)
Unclear product development strategy (limited scalability and flexibility)
Our Design Goal
Our Design Goal
Through stakeholder interviews, we were able to identify the pain points of the product based on user needs, and then translate them into user stories.
Through stakeholder interviews, we were able to identify the pain points of the product based on user needs, and then translate them into user stories.
Optimize the interface design, functional experience, and product development strategy of Verdi's verification and design process, and ensure system consistency while improving user recognition and experience.
Optimize the interface design, functional experience, and product development strategy of Verdi's verification and design process, and ensure system consistency while improving user recognition and experience.
Style Proposal
Style Proposal
After clarifying the goals, we followed the customer's requirements and provided a brand mood board and visual style proposals for both Light and Dark themes:
First is "Concentrated & Bright," with the main objective of enhancing recognition and focus. We used a minimalist style with plenty of white space to increase browsing comfort, and incorporated rectangular elements in the layout design to create a professional and stable visual experience.
Next is "Comfortable and Clear," which prioritizes comfort to protect users who are sensitive to strong light and reduce fatigue. We used accessible colors and icons to create a comfortable and clear visual experience.
After clarifying the goals, we followed the customer's requirements and provided a brand mood board and visual style proposals for both Light and Dark themes:
First is "Concentrated & Bright," with the main objective of enhancing recognition and focus. We used a minimalist style with plenty of white space to increase browsing comfort, and incorporated rectangular elements in the layout design to create a professional and stable visual experience.
Next is "Comfortable and Clear," which prioritizes comfort to protect users who are sensitive to strong light and reduce fatigue. We used accessible colors and icons to create a comfortable and clear visual experience.
Look & Feel
The sharp angles and lines represent Client's innovation and technological leadership, highlight the innovative, advanced, and professional nature in the semiconductor design and verification software.
The deep blue color conveys Client's reliability and professionalism in the field of verification applications, while also presents a sense of brand stability and trust.
Colors
Dark Gray
Bright Blue
Feather Light Gray
Light Gray
Fonts
Bitstream Vera Sans
DejaVu Sans Mono
Look & Feel
Look & Feel
The sharp angles and lines represent Client's innovation and technological leadership, highlight the innovative, advanced, and professional nature in the semiconductor design and verification software.
The deep blue color conveys Client's reliability and professionalism in the field of verification applications, while also presents a sense of brand stability and trust.
The sharp angles and lines represent Client's innovation and technological leadership, highlight the innovative, advanced, and professional nature in the semiconductor design and verification software.
The deep blue color conveys Client's reliability and professionalism in the field of verification applications, while also presents a sense of brand stability and trust.
Colors
Colors
Dark Gray
Bright Blue
Feather Light Gray
Light Gray
Fonts
Fonts
Bitstream Vera Sans
DejaVu Sans Mono
Solutions
Solutions
Optimize spacing
Optimize boundaries
Add app launcher
Add Search Panel
Add Search Panel
Add Find Bar
Add Find Bar
Concentrated & Bright
Light mode helps users who work in bright environments.
Light mode helps users who work in bright environments.
Clear & Comfortable
For users who are sensitive to strong light, the dark mode is better to protect users' eyes.
Clear & Comfortable
For users who are sensitive to strong light, the dark mode is better to protect users' eyes.
For users who are sensitive to strong light, the dark mode is better to protect users' eyes.
Style Proposal
Style Proposal
After clarifying the goals, we followed the customer's requirements and provided a brand mood board and visual style proposals for both Light and Dark themes:
First is "Concentrated & Bright," with the main objective of enhancing recognition and focus. We used a minimalist style with plenty of white space to increase browsing comfort, and incorporated rectangular elements in the layout design to create a professional and stable visual experience.
Next is "Comfortable and Clear," which prioritizes comfort to protect users who are sensitive to strong light and reduce fatigue. We used accessible colors and icons to create a comfortable and clear visual experience.
After clarifying the goals, we followed the customer's requirements and provided a brand mood board and visual style proposals for both Light and Dark themes:
First is "Concentrated & Bright," with the main objective of enhancing recognition and focus. We used a minimalist style with plenty of white space to increase browsing comfort, and incorporated rectangular elements in the layout design to create a professional and stable visual experience.
Next is "Comfortable and Clear," which prioritizes comfort to protect users who are sensitive to strong light and reduce fatigue. We used accessible colors and icons to create a comfortable and clear visual experience.
Look & Feel
Look & Feel
The sharp angles and lines represent Client'sinnovation and technological leadership, highlight the innovative, advanced, and professional nature in the semiconductor design and verification software.
The deep blue color conveys Client's reliability and professionalism in the field of verification applications, while also presents a sense of brand stability and trust.
The sharp angles and lines represent Client'sinnovation and technological leadership, highlight the innovative, advanced, and professional nature in the semiconductor design and verification software.
The deep blue color conveys Client's reliability and professionalism in the field of verification applications, while also presents a sense of brand stability and trust.
Colors
Colors
Bright Blue
Feather Light Gray
Dark Gray
Light Gray
Fonts
Fonts
Bitstream Vera Sans
DejaVu Sans Mono
Legibility
Legibility
To ensure recognition and user needs, we followed the specifications of Web Content Accessibility Guidelines (WCAG) and conducted contrast ratio color tests and color blindness tests based on different visual objectives to ensure a good experience for all users.
To ensure recognition and user needs, we followed the specifications of Web Content Accessibility Guidelines (WCAG) and conducted contrast ratio color tests and color blindness tests based on different visual objectives to ensure a good experience for all users.
Legibility
Legibility
To ensure recognition and user needs, we followed the specifications of Web Content Accessibility Guidelines (WCAG) and conducted contrast ratio color tests and color blindness tests based on different visual objectives to ensure a good experience for all users.
To ensure recognition and user needs, we followed the specifications of Web Content Accessibility Guidelines (WCAG) and conducted contrast ratio color tests and color blindness tests based on different visual objectives to ensure a good experience for all users.
Add Find Bar
Add Find Bar
Contrast of each window
Contrast of each window
Contrast of each window
According to the importance of different windows in the product, we adjust the contrast to facilitate accuracy and clear reading for users.
We comply with the accessibility design in WCAG standards to set up the contrast between 4:1 to 7:1.
According to the importance of different windows in the product, we adjust the contrast to facilitate accuracy and clear reading for users.
We comply with the accessibility design in WCAG standards to set up the contrast between 4:1 to 7:1.
According to the importance of different windows in the product, we adjust the contrast to facilitate accuracy and clear reading for users.
We comply with the accessibility design in WCAG standards to set up the contrast between 4:1 to 7:1.
Visually impaired people’s view
Visually impaired people’s view
Visually impaired people’s view
Dark
Dark
Simulating the visual experience of color blindness
Simulating the visual experience of color blindness
Bright
Bright
Simulating the visual experience of color blindness
Simulating the visual experience of color blindness
Simulate the vision of various color blindness
Simulate the vision of various color blindness
Simulate the vision of various color blindness
BRIGHT
BRIGHT
Simulating the visual experience of color blindness
Simulating the visual experience of color blindness
DARK
DARK
Simulating the visual experience of color blindness
Simulating the visual experience of color blindness
Solutions
Solutions
Optimize spacing
Optimize boundaries
Add app launcher
The font used in the coding area.
The font used in the coding area.
DejaVu Sans Mono
DejaVu Sans Mono
DejaVu, improved from Bitstream Vera. Set a clear distinguish between l (lowercase L), I (uppercase i ) and 1 (number), 0 (number), o and O
DejaVu, improved from Bitstream Vera. Set a clear distinguish between l (lowercase L), I (uppercase i ) and 1 (number), 0 (number), o and O
Clearer visibility
Clearer visibility
Full character set -> support unicode
Full character set -> support unicode
Appropriate spacing -> remain fixed width with appropriate spacing
Appropriate spacing -> remain fixed width with appropriate spacing
Less confussion -> l (lowercase L), I (uppercase i ) and 1 (number), 0 (number), o and O are easy to distinguish
Less confussion -> l (lowercase L), I (uppercase i ) and 1 (number), 0 (number), o and O are easy to distinguish
English quotation marks -> ` and ' are easy to distinguish and symmetrical
English quotation marks -> ` and ' are easy to distinguish and symmetrical
Clear punctuation -> such as common symbols in programs < > { } [ ]
Clear punctuation -> such as common symbols in programs < > { } [ ]
Before & After
Before & After
Icons
Icons
Light & Dark
Light & Dark
According to the theme, match the visual comfort and clear color.
According to the theme, match the visual comfort and clear color.
Optimize contrast
Optimize contrast
Matching color theme
Matching color theme
Simplify & Stylize
Simplify & Stylize
Subtract unnecessary shadow effects, stay sharp line and angle shape icon.
Unifying the system icon style to comply with UI and represent Synopsys' brand image.
Subtract unnecessary shadow effects, stay sharp line and angle shape icon.
Unifying the system icon style to comply with UI and represent Synopsys' brand image.
Unified shape
Unified shape
Keep sharp line and angle shape icon.
Keep sharp line and angle shape icon.
Icon Button State
Icon Button State
Each light/dark icon can adapt to different button states with a single image, helping Verdi develop and manage software.
Each light/dark icon can adapt to different button states with a single image, helping Verdi develop and manage software.
Flexible use in different state
Flexible use in different state
Maintain Enable/Disable contrast
Maintain Enable/Disable contrast
UI Library
UI Library
Icons
Icons
Light & Dark
Light & Dark
According to the theme, match the visual comfort and clear color.
According to the theme, match the visual comfort and clear color.
Optimize contrast
Optimize contrast
Matching color theme
Matching color theme
Simplify & Stylize
Simplify & Stylize
Subtract unnecessary shadow effects, stay sharp line and angle shape icon.
Unifying the system icon style to comply with UI and represent Synopsys' brand image.
Subtract unnecessary shadow effects, stay sharp line and angle shape icon.
Unifying the system icon style to comply with UI and represent Synopsys' brand image.
Unified shape
Unified shape
Keep sharp line and angle shape icon.
Keep sharp line and angle shape icon.
Icon Button State
Icon Button State
Each light/dark icon can adapt to different button states with a single image, helping Verdi develop and manage software.
Each light/dark icon can adapt to different button states with a single image, helping Verdi develop and manage software.
Flexible use in different state
Flexible use in different state
Maintain Enable/Disable contrast
Maintain Enable/Disable contrast
UI Library
UI Library