Component Design / Predix Design System

UX, UI / GE Digital

During my internship at GE Digital, my team was responsible for the creation of GE's Predix Design System. One of the larger components that I worked on was a mobile date and time picker. Though the concept of a date and time picker is relatively simple, a lot of thought had to go into the extensibility and reusability of this component. The design system is used by designers and developers across GE's many different businesses, and each component has to be flexible enough to meet these extremely different use cases. 

P R O C E S S 

01 / Design Iterations

These iterations represent just some of the many explorations I did at the beginning of this project. A desktop component had already been created so I wanted to maintain a similar look and feel while optimizing the space available on a mobile screen. I started with one of the more complicated use cases for this component: a user needing to select start date, start time, end date, and end time. Two of the key changes explored in order to optimize this component for mobile were increasing the hit spaces for the days and allowing the component to take up the full screen.

02 / Design Refinement

This final design was based on feedback from both my design team and stakeholders who had expressed the need for this component in their applications. The screens above demonstrate some of the flexibility of this component: it can be used to choose a single date, a range of dates, a range of dates and times, and it can take advantage of preset options. The design system also contains both light and dark color schemes for all components, so I had to take this into consideration when finalizing the design.  

03 / Specifications

After the component had been fully designed and was ready for development, I created a detailed specification guide. This guide was used by the developers creating the reusable component code.