Web App Redesign

The core base of clients of ShiftGen’s B2B tool are healthcare facilities across the United States. One primary feature of the ShiftGen app allows managers to create site-wide schedules and manage the workers assigned to those schedules at scale. ShiftGen’s web app desperately needed a user interface redesign to meet industry standards for visual design, usability, and contemporary web interaction patterns.

The highest priority given by ShiftGen was to update the product’s user interface to align with industry standards. However, as is common in the design process, we quickly uncovered tangential problems that needed to be addressed. During the development of the web app, the visual styling of front-end solutions was often created in a “one-off” fashion. This development approach led to a disjointed and confusing experience for users. Our mission then became to bring unity and predictability to the application to bring users a sense of reliability and trust.

‍

Research during this project was focused primarily on the most common user workflows, the features of each separate app context, and identifying patterns across contexts.
We returned to research multiple times throughout the project, specifically after we had created wireframes and early visual prototypes. Working closely with the developer on this project and interviewing one of the founders of ShiftGen, we uncovered the specific micro-interactions of the controls in each view to identify opportunities to bring unity across the application.

We decided to use a component-based architecture in this project's software development and design approach.
This approach led us to develop a “schedule” pattern central to each view where users create or modify a shift schedule. The pattern is inspired by a traditional calendar, essentially a table, where each day is represented by a table cell. But in our model, the days would become “stacks,” filled with smaller cells corresponding to those days, “shift cells.” Each shift cell represents a single shift of a single worker.

Once we had worked out this core mental model, the visual design approach could address the remaining challenges.

One of the most important goals I identified in my visual design approach was to minimize the noise created by the dense grid of worker shifts with corresponding visual indicators and controls. We accomplished this by configuring the shift cells to only show controls when the user hovers over the shift cell for more than a few moments or when it is selected. Another approach to minimize visual noise was the design of toggle interactions, which encourage the user to enable layers of information when needed and to disable them if the additional information becomes overwhelming.

With the core schedule pattern unifying each schedule view, I enabled further consistency in the web application’s user interface by creating 90+ design components. Using those components, I redesigned nine app views that included unique app functions, such as scheduling time off, and entirely different views with data tables for reviewing shift coverage at scale.
We presented the designs to stakeholders and received overwhelmingly positive feedback. This project is ongoing, as the first round of core view designs is currently in production.