EDISON DESIGN SYSTEM (EDS)
Company: GE Healthcare
Roles in the project: Staff Visual UX Designer
NOTE: My main responsibility was to work on Edison Design System. You can simply go to the live site and browse the components to get an idea what kind of designs I created. For longer explanation, read below.
It’s challenging to highlight just one thing—or even a handful of things—from my work at GE Healthcare. Firstly, the vast majority of the designs I created were developed under strict NDAs and cannot be publicly shared here. Secondly, my team worked on numerous projects in a fast-paced environment, often conducting usability testing alongside.
However, I can share some of the work that has been published on the Edison Design System website. I contributed to many components, making it impractical to share everything. At times, I focused on specific parts of a component—fixing or adding a new feature to the workflow. Other times, I created guidelines for internationalization or the use of key value pairs, among other tasks.
As one of the design system leads in the Edison Design System team, my role involved leading the design for creating or enhancing components, as well as reviewing and guiding other designers using the Edison Design System. Our primary objective was to enhance the UX quality across the entire GE Healthcare product line. To achieve this, we coached and guided other designers not only in utilizing the design system but also in adhering to best practices and current UX standards.
Below are a couple of examples of my work on the Edison Design System. To view more, visit Edison Design System.
Examples of guidelines I’ve created: International Design and Empty State (404)
DATA GRID
The EDS data grid is a complex component with numerous features and UX patterns, including pagination, checkboxes, search fields, and dropdowns. It's used across various GE Healthcare applications to manage intricate medical and patient data efficiently. While I didn't design it from scratch, I contributed to its development.
For instance, consider the seemingly simple task of multi-selecting data grid rows. This example illustrates how UX patterns can be challenging within a complex component. We had to carefully address behaviors like managing the "select all" checkbox when only some rows are selected, and how row highlighting and borders behave when multiple rows are selected. For the mobile version, see data grid on Edison Design System website.
Another example is the row dragging feature on the data grid. Besides the interaction patterns, it was essential to assess other EDS components to identify those with drag-and-drop functionality. This analysis helped determine whether we could leverage existing patterns or if there were unique requirements specific to this feature. Again for the mobile version, see data grid on Edison Design System website.
Contextual Menu
For my second example, I've chosen the contextual menu. It's a mobile device pattern where we lack hover functionality and have limited space. The main challenges were indicating when there are more menu items than visible (both top and bottom rows) and highlighting a "primary section" in the menu (top row in the examples). This section includes frequently used or recommended items.
Another challenge was deciding which menu options to display without a primary section indicated. Based on testing, users prefer using their thumb for scrolling and selections on mobile devices. Therefore, the menu opens at the lower part of the viewport, allowing users to scroll up for more options.
For more examples, visit Edison Design System.