UX Design Internship
Collaborative work to enhance visual consistency and promote accessibility within the Ansys Discovery Software
Design Systems
Accessibility User Research
Desktop
ABOUT ANSYS
Ansys specializes in developing multi-physics engineering simulation software for 3D product design, testing, and operations like Ansys Fluent, Mechanical, and Discovery. Read more
Images: Ansys Fluent and Discovery
INTERNSHIP OVERVIEW
At Ansys, I participated in the UX team's collaborative initiative to unify User Experience across different software applications. I specifically contributed to enhancing the Discovery product, an enterprise software that empowers design engineers through efficient 3D modeling and simulation tasks
Role
UX Design Intern
Time
9 months
Tools
Figma . Adobe XD . Adobe Illustrator
. Visual Studio. MS Office
PROJECTS
Design Systems
Accessibility User Research
Side Projects
PROJECT TIMELINE ('22 to '23)
TEAM
The 13-member UX team; 3 interns (including myself), 5 designers, 1 manager, 3 developers, 1 project manager, and 1 director, fostered an environment that supported questions, growth, and learning from professionals across the organization, enhancing my UX skills
Images: Ansys UX team after I cracked my hilarious joke on a weekly standup
MY TAKEAWAYS
Bring discipline to work
Never be afraid to ask questions
Collaborate with different teams
PROJECTS
.png)
Internal tools
To bring visual consistency in Ansys products, the UX team had built certain tools before I joined as an intern
EXISTING TOOLS BUILT BY THE ANSYS UX TEAM
Design tokens
Named entities on Figma of design values for color and fonts used in the Discovery software
Ansys Design Library (ADL)
A comprehensive list of all Discovery components and their functionalities
Toolkit
A repository of icons used in Ansys software
Solution
Utilize the existing tools built by the UX team to create a design system in Figma and document these components to improve the design tokens
WHAT
Build a design system mimicking all the controls from the Discovery software and simultaneously update the design tokens
WHY
Scalable design components between designers and developers to maintain visual consistency within the Ansys Discovery Software
Process (with an example)
A step-by-step process of designing components and simultaneous documentation with constant iterations and review by stakeholders to guarantee consistency and prevent any oversights
STEP 1: RESEARCH
To align with the UX team's vision for the design system, I familiarized myself with Ansys Discovery software, its interactions, Ansys Design Library, and design tokens in Figma
Font library
Color library
Discovery software
STEP 2: DOCUMENT
Created a Figma list with separate pages for each component to be designed, ensuring fair distribution of tasks between myself and the other intern (Images blurred out)
The example used henceforth to explain the process:
Stage Navigator
It allows the user to switch between stages. Stages contain tools and functions focused on a specific aspect of the process that the product supports.
STEP 3: SKETCH
For each component, I created a sketch and a flowchart which helped identify its atomic and molecular controls along with their interactions which served as a guide for creating the component on Figma
STEP 4: ATOMIC CONTROLS WITH INTERACTIONS
Using the sketch, flowchart, design tokens, ADL, and the toolkit, I designed atomic controls on Figma with different states as properties and added prototype interactions to show the transition between each state
Selected
Hover
Input box
STEP 5: MOLECULAR CONTROLS
Using the atomic controls, I built the high-level molecular controls which contained nested (atomic) and molecular control properties and interactions
STEP 6: INTERACTIONS
Added prototype interactions to replicate component interactions in the Discovery software
STEP 7: DUPLICATE
Ansys products have two distinct themes: Dark and Light. I replicated the entire control set and adjusted the colors to align with the alternate theme
STEP 8: FEEDBACK, ITERATE, AND UPDATE DESIGN TOKENS
After designing a component, I documented design token issues and met weekly with my manager for adjustments. I also coordinated with the other intern for consistency
Font library
Color library
Challenges
The tools developed by the UX team for bringing visual consistency were scattered and incomplete
ISSUES WITH THE TOOLS
Design tokens
-
Lacked information about layout (rounding, border, spacing, height), animation (style and speed)
-
Inconsistency in certain fonts and colors used
Ansys Design Library (ADL)
The documentation had text and screenshots about the functions of Discovery components, which didn't scale well between teams
Toolkit
It couldn't establish clear design guidelines for when, how, and why to use them
Outcome
I, along with my manager and co-worker, identified and documented inconsistencies in design tokens and ADL, creating a cohesive design system.
COMPONENTS DESIGNED
15
DESIGN INCONSISTENCIES IDENTIFIED
7
Next steps
My internship ended in April '23, and a few tasks remained before finalizing the project for adoption by developers and designers
WORK LEFT TO BE DONE
Design
Design the remaining controls and update the design tokens on Figma
Tokenize
Identify and document layout and animation aspects of the design token
Iterate
Test and make iterations to the design system to make it more cohesive and consistent
Not a smooth ride
While my case study makes it seem like this project work happened smoothly, it didn’t
CHALLENGES I ENCOUNTERED
Learning Figma
Early on, I had to frequently modify the finished components I designed as I learned more about Figma
Communication
Sometimes, my co-worker and I lacked precise communication, resulting in inconsistencies that prompted updates
Updating too soon
Early on, I updated the design token without consulting my lead, causing inconsistencies that prompted us to backtrack and remove changes
Identify all interactions
Document and categorize all the types of components in Discovery to prevent back and forth for creating consistency
Design tokens
Identify and document layout and animations for a more comprehensive visual consistency
WHAT WE COULD HAVE DONE DIFFERENTLY
Design systems
Develop a design system that helps designers and developers work together smoothly and create consistent Ansys products in dark and light themes
Team
2 UX design interns
& 1 UX Manager
Time
6 months
Tool
Figma
15 min read
My learnings
Working with design systems at Ansys deepened my understanding of the distinction between a good and an exceptional user experience
Consistency
Important for a streamlined development
Guidelines
Guidelines and standards help develop a good user experience
Collaboration
Necessary for building cohesive products
Design systems
Develop a design system that helps designers and developers work together smoothly and create consistent Ansys products in dark and light themes
Team
2 UX design interns
& 1 UX Manager
Time
6 months
Tool
Figma
15 min read
DESIGN SYSTEMS
ACCESSIBILITY USER RESEARCH
SIDE PROJECTS
.png)
ACCESSIBILITY USER RESEARCH
SIDE PROJECTS
DESIGN SYSTEMS
PROJECTS
