Enable AI Styling Design
Enable AI Styling Design
Responsibility
Responsibility
Designer
Product Designer
Designer
Duration
Duration
4 weeks
4 weeks
4 weeks
Team
Team
1 Designer, 1PM, 2 Devs
1 UXR, 2 PMs, 1 DA, 8 Devs
1 Designer, 1PM, 2 Devs
I designed the UI of Enable AI, which worked cohesively with Enable's new and legacy products with distinct visualities and limitations. I also created two sets of modular component libraries integrated into the design systems.
I designed the UI of Enable AI, which worked cohesively with Enable's new and legacy products with distinct visualities and limitations. I also created two sets of modular component libraries integrated into the design systems.
Project background
Project background
Project background
Enable was implementing AI on both its legacy product and new products, and I was in charge of defining the AI styling.
Enable was implementing AI on both its legacy product and new products, and I was in charge of defining the AI styling.
Enable was implementing AI on both its legacy product and new products, and I was in charge of defining the AI styling.
The process
The process
The process
4 steps to end deliverables
4 steps to end deliverables
4 steps to end deliverables
01 - Functionality alignment
01 - Functionality alignment
01 - Functionality alignment
Collecting requirement from Design, PM & Eng: what functionalities would Enable AI support?
Method: online meeting and async documentation
Collecting requirement from Design, PM & Eng: what functionalities would Enable AI support?
Method: online meeting and async documentation
02 - Desk research & style alignment
02 - Desk research & style alignment
02 - Desk research & style alignment
Collecting design examples of AI front-runners;
Create UI recommendations for Enable AI;
Present recommended styling state by state to cross-functional team and collect visual and feasibility feedback
Collecting design examples of AI front-runners;
Create UI recommendations for Enable AI;
Present recommended styling state by state to cross-functional team and collect visual and feasibility feedback
03 - Create Figma component and iteration
03 - Create Figma component and iteration
03 - Create Figma component and iteration
3 levels of components: Atoms, molecules, organisms
3 levels of components: Atoms, molecules, organisms
Components - Rebrand style
Components - Rebrand style
Components - legacy style
Components - legacy style
04 - Handoff documentation
04 - Handoff documentation
04 - Handoff documentation
Showcase different functional states with annotation
Showcase different functional states with annotation
Example: Prompt input states
Example: Prompt input states
End outcome
End outcome
Two sets of distinct visuals for Enable legacy & new products, and reusable Figma component
Two sets of distinct visuals for Enable legacy & new products, and reusable Figma component
Example: Thinking process comparison, old vs rebrand UI
Example: Thinking process comparison, old vs rebrand UI
Want to learn more details? DM cds19970711@gmail.com
Website design owned by © Danshi Chen
Website owned by © Danshi Chen
End outcome
End outcome
Two sets of distinct visuals for Enable legacy & new products, and reusable Figma component
Two sets of distinct visuals for Enable legacy & new products, and reusable Figma component
Example: Thinking process comparison, old vs rebrand UI
Example: Thinking process comparison, old vs rebrand UI
Want to learn more details?
DM cds19970711@gmail.com