top of page
Shift Worker App Redesign
Client: Arcascope
Shift Worker App Redesign
Client: Arcascope
Shift worker app redesign
Client: Arcashift
.png)
.png)
Overview
The company
The Arcashift app was designed to guide shift workers in aligning their circadian rhythms with their shift schedule so that they could feel their best.
The challenge
The team tasked me with updating the visuals of the app to make it feel more "fun" and "friendly". The team was open to additional UX/UI improvements for better usability. The emphasis of the project was the the app's home page, as it was the most frequently visited section.
My role
I was the sole and lead Product Designer on the project but was supported by the company's CEO who contributed beautiful illustrations to go with my designs.
The team
I worked with the team of engineers, scientists, and the CEO of Arcashift to bring the designs to life.​
Previous designs​
The App was built in Flutter and used material design components. The page consisted of 3 main elements:
1. The schedule - featuring personalized time recommendations for activities such as "get bright light," "avoid bright light," "stop drinking coffee," and "sleep time".
2. The stat tiles - providing shift workers a way to view how they are progressing towards syncing their circadian rhythm and schedule. The tiles include metrics such as weekly sleep averages, along with percentages indicating their "readiness" and "alignment".
3. Wake up time and intensity chips - offering users a way to adjusted their schedule based on their goals. This included their wake time goal (preferred waking time on schedule-free days) and intensity level (degree of flexibility in sacrificing sleep for schedule and circadian rhythm alignment).
.png)
Visual updates
In previous working sessions, the team had explored several color palette options. I selected one that seemed the most promising for making the app more "fun" and "friendly."I then expanded upon the palette, adding additional colors required for the redesign.
Schedule
I started off with the schedule, using the new more fun palette to add splashes of color to list items. I maintained the height of the existing list component as the team had received feedback from users that they preferred having the schedule condensed so they could see it all on one page without having to scroll.
%20(1).png)
Stat tiles
I updated the stat tiles to full width - rather than half as in the current design - to allow for more impact, and to avoid unevenness if there were ever an uneven number of these tiles. I also introduced a data visualization element not only to infuse an element of "fun" but also to provide users with a quick, glanceable way to assess their performance in that specific metric.
The team requested that the tiles to each have their own unique data viz, so I explored different styles incorporating progress rings, gauges, and other common dashboard visualizations.
%20(4).png)
Schedule cards
I transformed the filter chips, originally serving as entry points for users to update their wake time goal and intensity, into cards. After discussions with the team, I discovered that users were unclear about the functionality of these filter chips and how they influenced their schedule. By using cards, I was able to utilize the space to offer more context and incorporate delightful illustrations created by the CEO.
The section was labeled "Impacting Your Schedule," and in collaboration with the team, I introduced additional cards revealing elements such as "sleepiness levels" and "body clock timezone," all of which influenced the recommended timings in the schedule.
The overarching goal was to provide users with a clearer understanding of how their schedule was personalized to them by introducing these additional cards.
%20(3).png)
Header design
The team requested a visual for the top banner to provide even more visual delight and give the app it's own branded feel. We saw that as a good opportunity to lean into the different times of day with the visuals. I explored some different options but landed on illustration of a rolling hill with a sun or a moon to highlight the current time of day.
Dark mode
Given the app's emphasis on light, it was important to offer both dark and light mode versions. I adapted the different elements of the page to also work in dark mode.
%20(7).png)
%20(6).png)
.png)
%20(5).png)
Final designs
The designs were finalized and are in the process of being built out by the engineering team.
Light mode
%20(11).png)
%20(10).png)
.png)
Dark mode
%20(3).png)
%20(2).png)
.png)
Final designs
Text.
bottom of page