Sawyer's schedules page is where children's activity providers create and manage their educational offerings. The updated page radically improves the management experience, making activities efficient to find, easy to digest, and quick to make edits.
User research, problem definition, scoping, design, testing, handoff
This project took place over 4 sprints between Jan 4, 2020 – Feb 26, 2020
Accommodating larger schedules
Sawyer's schedules page is where activity providers create and manage their educational offerings. Initially, the page was built to accommodate the needs of "mom & pop" shops, but as our customers' business grew and Sawyer took on larger franchises, the app was beginning to hit its limit.
The page rendered hundreds of scheduled activities on load, requiring multiple database calls per activity to fetch relevant information.
Our primary goal was to improve page performance, but our team had an opportunity to incorporate some much needed design fixes to one of the most integral sections of the app.
The old schedules page disobeyed basic design principles. It lacked hierarchy and proximity between related objects, making it difficult to glean relevant activity information or find what you were looking for. Key actions such as "create" or "edit" were hard to find and time consuming to execute.
What human problem do we want to solve?
Rebuilding the page presented an opportunity to fix some long overdue design bugs 🐛🐜🐞. But how were we to focus our efforts to maximize impact?
Through research, we identified a number of pain points and split them up into distinct user contexts.
Onboarding for the first time
Setting up schedules
Making edits to schedules
We created a standardized template to bucket the most common pain points.
📌 While context, provider's face problem, which causes pain point.
After analyzing our results, we decided to focus on managing because the majority of (and most pressing) pain points fell within this context.
Design now had a focus: If we were to be successful, the new schedules page would make the experience of managing precise, easy, and quick.
Expandable containers & search
The majority of activity providers have between 4–8 schedule blocks running at a given time—enough to fit on a single page. By collapsing these schedules by default, we gave users a "higher-level" starting point to find what they're looking for without needing to scroll through countless activities. This layout also better communicated the file folder structure Sawyer's schedules are build upon.
The collapsed state has only relevant information to the semester, a few key actions, and activity "dots" that give visibility to the "shape" of the schedule without needing to look inside it.
The old designs made use of filters, but during our research, we discovered that most users didn't even know filters existed! Instead they were using the browser's search (⌘+F) to find activities and make edits.
The new design addressed the way users naturally search for activities. We removed filters and added a search bar that couldn't be missed. The search results page highlighted keywords to cut through the dense data, allowing users to find and make edits with precision.
Activity detail cards
Many users mentioned "difficulty scanning activities" as a pain point during our interviews. They wanted to see activity details at a glance so they could validate whether a change needed to be made.
The old activity cards were difficult to scan because they stacked data without hierarchy or purpose.
The updated UI makes use of contrast, visual cues, alignment, and grouping all while matching the sequence they were created in.
Most users make edits to their activities for the same reasons:
1) They update the capacity when activities overbook
2) They update the price when demand increases
Editing an activity, however, required trudging through the "edit activity flow," clicking through a stepper to find a specific field, saving, then returning to the index page. Whew!
To combat this tireless effort, we introduced a way to make edits on the index page, skipping the aforementioned odyssey altogether.