Design System Designer, Product Designer
Alchemy a new internal team member product at Neudesic, needed a customized design system that was scalable and easily managed.
A clean & clear visual design language. The ability for designers and developers move quickly. Components that create the optimal experience for users that meets branding & business unit approval.
Clean, Clear, & Accessible
- Because this design system supports a team member related product it has to be easy and clear to use.
- We knew from the start that accessibility was important to us, and we wanted to meet the highest standard possible.
Inviting & Delightful
- User need to be delighted to use this product the first time and need to be equally excited to come back again.
Easy to Iterate and Implement
- The design and implementation needs to be easy to for the design team and developers.
How To Start
Defined Roles & Processes
- Defined who is involved in the design system from both a designer and developer.
- Planned processes for implementing new elements and how to make adjustments.
- What UI frameworks are being used? In our case it was Flutter with the intention of moving to React.
- Where is data being stored and moved?
- How are we managing work?
Access & Technical Needs
- Created Figma files and a Github repo for all who needed it.
Bringing in Existing Elements
- We brought in existing patterns, components, and documentation we liked such as, Material, IBM Carbon, & the Designership.
Building on Previous Knowledge
- We also made a point to lean on previous knowledge the team had.
Brand Colors made into Tokens
- Take the main branding colors and create complimentary colors to use on them.
- Included background & surface colors.
- Color contrasts were made to be as accesible as possible.
- Designed for maximum flexibility and includes more than needed. This was done with the intention of removing later.
- Users search for products based on number of performers, length, pedagogy, and word of mouth
- Customized grid with fixed side nav bar was created
- Made to accommodate the smallest plausible mobile screen.
- To icon components were used, a 283 library component used for iterating and a more focused that is used for development.
Click to view more foundation details
Buttons, Input Fields, Toggles, etc.
- In tandem with the designs, we created basic molecules and organisms we know would be needed in an application like Alchemy.
- This was all of the simple things like, buttons, alerts, toggles, and input fields
Modals, Accordions, & Product Specific
- Once designs were more developed and validated, more complex components were added to the design system.
- This included components with a lot of other nested components, and product specific elements.
Connecting to Code
- Connecting foundations and components to code
- Connecting to Github repo.
From Design to Dev
- New addition is introduced to team
- Design is iterated on
- Reviewed by team
- Implemented into Figma File
- Implemented into Github Repo
- Pushed in next release