Web App Redesign

ShiftGen is a company and web-based application for workplace management. The core base of clients of the B2B tool are healthcare facilities across the United States. Users at these healthcare facilities are comprised of management and their staff. 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 UI desperately needed redesigning to meet industry standards for visual design, usability, and contemporary web-interaction patterns. The new UI designs that I would create needed to improve the user experience without disrupting users’ current workflows. The design framework that we would develop required component methodology while also being mindful of the front-end frameworks that our developers would use in production.

The highest priority that ShiftGen presented to us was to update the ShiftGen UI to align with today’s industry standards. As is common in the design process, we quickly uncovered tangential problems soon after starting. During the development of the web app, design solutions were often created in a “one-off” fashion. Similar controls and actions were presented uniquely in each context. 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. Our research also concerned the application’s information hierarchy, but due to the project’s scope, we were directed to preserve the existing user flows between pages.

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.

For this project, we decided to use a component-based architecture in both the software development and the design approach. We felt it wasn’t necessary to build an entire design system from scratch as the client’s needs and budget didn’t quite match the investment required for a design system product. However, we recognized the value of unifying the styling and micro-interactions of controls and the trust built by establishing larger-scale common patterns across the application.
This approach led us to develop a “schedule” pattern that would be central to each view where users would create or modify a shift schedule. The pattern is inspired by a traditional calendar, which is essentially a table, where each day is represented by a table cell. But in our model, the days would become “stacks,” and the table cells would become “shift cells.” Each shift cell represents a single shift of a single worker.

Once we had worked out this core mental model, the rest of the challenges began to fall into place. How do we include all of the action controls required for each shift in each view while maintaining cohesion? How do we style the UI to include the existing brand color palette without overwhelming or giving the wrong signals to users? How can we make the entire user experience more intuitive and simple? The visual design approach became crucial for addressing many of these challenges.

One of the most important goals I had identified for the ShiftGen app in my design process was to minimize the visual noise created by the dense grid of worker shifts as much as possible. Our final design chooses only to show controls for each shift when the user hovers over the shift cell for more than a few moments, or when it is selected. We also found ways to separate layers of information. The design of the user highlighting and filtering features encourages the user to enable those features when needed and to disable them if, for example, the additional information becomes overwhelming. The design also includes a feature for hiding additional indicators, such as warning labels.

With the core schedule pattern unifying each schedule view, I further unified the web app’s UI by ensuring a consistent experience utilizing the 90+ design components I created. In total, 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. Work on this project is ongoing, as the first round of core view designs is currently in production.