Ansys UX Internship
Improving the experience of 3D product design and simulation software
.png)
Background
In summer 2020, I worked at Ansys as a UX Design Intern. Ansys builds multi-physics engineering simulation softwares for 3D product design, testing and operations. I worked on Discovery product—an enterprise software for 3D modeling and simulation to help engineers explore ideas, iterate and innovate with better speed, accuracy and overall experience.
Achievement
Ansys sponsored my ongoing one-year capstone project and provided the opportunity to explore AR/VR/MR technology for Discovery.
.png)
During internship, I worked in a cross-functional team of product managers, designers, developers with two fellow interns. Ansys UX team practices agile process for software development where the project plans are broken down into small design tasks to respond to changes.
I worked on 7 mini projects that had different goals and required different approaches. Out of those seven, I will briefly describe three interesting ones that I worked on:
1. Discovery Style Guide
2. User flow improvements
3. Message box re-design
It is difficult for product designers and developers to implement and confirm the design paradigms in the product. It can lead to a lack of design consistency. How might we establish a shared understanding within the team that can guide them to achieve consistency and collaborate efficiently?
Designed a living product—Discovery Style Guide—a website that dictates how each design component looks, how it can be reused, and how it shapes the overall user experience, improving the product design and development process.
We defined the goals and identified constraints from the discussions with stakeholders.
I collaborated with fellow UX interns—Lai Jiang and Lawrence Liu on this task. After receiving the project brief, we laid out the software building blocks that need to be included. Because of the time limitations we decided to focus on three basic design elements (or 'atoms' as Brad Frost would put it) as a starting point: Buttons, Typography and Colors. Out of these, I worked on the Buttons page. Also, out of two primary user segments of developers and designers, we focused on the needs of designers due to time constraints.
Why a Style Guide?
The preparation started with the UI audit and I created an Interface Inventory for buttons.
I audited and analyzed the software UI, and compiled various buttons and their interaction states in a Figma document that served as an inventory. I classified them into several categories: Button states, tabs, toggles/radio buttons, slideshow buttons, buttons with icons, buttons with dropdown menu and selection buttons.
.png)
.png)
.png)
.png)
We took inspiration from other popular design systems.
I watched several talks about the design systems, attended webinars and analyzed 20+ style guides and design systems built by other companies to get a better understanding of the design systems world. Also, we audited the existing internal resource: The Toolkit, that is currently being used by both designers and developers to manage and test UI components.
.png)
This is an ongoing project. It helped me discover my interest in the design systems. I learned how to build a design system. Discovery Style Guide is now published internally for Ansys UX team. I'm honored that my Home and Buttons page design proposals were picked up and adopted by the UX team for further development. This project sparked the discussion of the need of Ansys Design System to unify multiple products in future.
The two features—1. Online Help and 2. Parameters Table can be accessed and discovered in multiple ways. Also, the placement of these two features is not aligned with the user's expectations. This affects the mental model of the user and decreases the learnability of the product. Evaluate these features and provide recommendations to improve their discoverability and accessibility.
1. How might we minimize the steps to reach the Online Help?
We studied how users are using Online Help feature through multiple access points (see the pictures below). To make it easily discoverable and accessible, we provided an in-context search bar at the top right corner of the software. It minimized the number of clicks to reach the online help option. I prototyped the flow that got approved and will be implemented in the next software release.
.png)
2. How might we modify the Driving Dimensions and Parameters manager tables to make them more connected, discoverable and intuitive?
We found that the current placement of Driving Dimensions inside the advanced selection menu is not very intuitive. Also, two different tables to manage the same entity 'groups' causes a disconnection in the data and that is unexpected for the users. I optimized the interaction by relocating and combining the Driving Dimensions and Parameters table strategically, making it more seamless and cohesive.
.png)
Dialog boxes communicate the software feedback to the user. Currently they are not consistent with the visual style of the product. How might we re-design the dialog boxes to make them consistent with the visual style, standardized for different types of messages and reusable for other products?
Redesigned the dialog box for three message types: information, warning and error, three themes: dark, medium and, light and three button states: hover, tabbed and default. We made it consistent in visual style with other modals without losing the legibility.
We collaborated on this task and started our work by studying the current dialog box design and themes from the Discovery Toolkit. Our goal was to create a dialog box that is consistent in visual style with the current software UI.
Initial sketches
After gathering the basic requirements, I brainstormed some initial ideas and explored some layouts. These rough sketches led to the questions such as - 'what are the different types of messages?', 'what colors to use to show them?', 'what changes can we make to the information and layout?', etc.
Iterations and explorations
I translated those sketches into medium-fidelity mockups to get a better understanding of colors, UI themes and dimensions. At this stage, we presented our concepts to manager and other lead designers, and sought feedback.
Based on the feedback received from our team, we identified key attributes of the Discovery visual style and made our designs more consistent with them. Some of the design attributes we focused on are outline, background gradient, colored bar, background pattern and icon style.
Below are the three dialog box alternatives that I came up with:
We iterated on each other's concepts and combined some of the ideas to align them with Discovery design paradigms. We presented our final designs to the team in the context of the software UI.
We created multiple variants of message boxes for different text lengths and heights, themes, message types and button states and presented them to the team. Also, we discussed if there are any technical challenges that might occur during the implementation.
.svg){kind=small}
.svg)
