SparkCognition
Enterprise Software
In collaboration with argodesign, I delivered a unified and much improved visual language and Design System along with crafting novel interactions for more usable tables, filters, and select data visualizations.
Visual Direction
After the initial rounds of stakeholder interviews and comparative analysis, I was tasked with creating component moodboards to help define and establish the visual direction.
Final Moodboards
Opting for more subtle secondary buttons and selection states as well as a cleaner font in DIN Pro, we finalized the visual direction with one last round of moodboards.
Global Navigation
With the general look & feel decided upon, my next task was to take inventory of SparkCognition’s extensive line of applications and design a Global Navigation that would be flexible enough to implement across all products.
User Flows
Having established the navigational framework, selected user flows with known issues were rethought and redesigned at high fidelity. Specifically, we targeted data visualization with a scrubbing interactive component, large complex tables, a filtering mechanism that maintained context for users, and an editable AI generated Work Order task flow.
Design System
The Design System was created concurrently with our UI/UX work. Starting with the basics (grid system, padding, color, typography, etc.) we continued to flesh out novel components as well as skin the most useful components within the Material UI design kit. All styles were tokenized using the “Tokens Studio for Figma” plugin.
Tools
Figma
Material UI
Principle
Tokens Studio
After Effects
Slack
Miro
Jira
Methods
Stakeholder Interviews
Comparative Analysis
Moodboarding
User Flows
Interaction Design
Data Visualization
Design System
Prototyping
Next
