Quickstaff is a web app for event managers to schedule staff for their events. Event managers rely on it to send out work requests to their staff and confirm their availability. But staff are not always quick to respond. Together with a team of three other designers, I designed a mobile version of the app to improve the experience for staff and managers.
My Role
UX Team & Research Lead, UX Designer
UX Team & Research Lead, UX Designer
Tools
Otter.ai, Zoom, Calendly, Slack, Trello, Google Suite, Miro, Figma, Adobe XD, Keynote
Otter.ai, Zoom, Calendly, Slack, Trello, Google Suite, Miro, Figma, Adobe XD, Keynote
Team
Gordon Cains, Priya Renganathasamy, Mike Brobbey
Gordon Cains, Priya Renganathasamy, Mike Brobbey
Timeframe
3 weeks (2019)
3 weeks (2019)
Quickstaff came to us with a lot of ideas and possible directions. They wanted a forward-looking mobile-design that would address key feature requests from their customers. But what this should look like was unclear. Our challenge was identifying what additions we needed to focus on without losing sight of the functionality that users rely on.
Who are our users?
I led the research during the sprint: writing and deploying an online survey, interviewing current customers, performing contextual inquiry, and conducting competitive analysis.
We tapped into Quickstaff's existing customer base, but we also needed to understand the needs of those they had yet to reach. To target our survey, I identified groups and organizations around event management and specific event types. We collected 183 responses and used affinity diagrams to organize the data.
It became clear that staff and event managers have different goals, motivations, and frustrations. Staff are mostly part-time, while event managers are primarily full-time. Events are much more serious for managers than they are for staff.
I spoke with Quickstaff customers about their work and how they use the app. I also performed contextual inquiries with 3 customers who walked me through their usage of the existing app. Speaking with them explained the value of Quickstaff: managers value the high-level view they get from Quickstaff, enabling them to stay on top of their many events.
I spoke with Quickstaff customers about their work and how they use the app. I also performed contextual inquiries with 3 customers who walked me through their usage of the existing app. Speaking with them explained the value of Quickstaff: managers value the high-level view they get from Quickstaff, enabling them to stay on top of their many events.
We learned that managers were sending out texts and phone calls to staff leading up to events. A big frustration for them was that staff were often unresponsive. This informed our approach for the rest of the sprint: rather than focusing on what the managers were asking for, we needed to focus on the needs of the staff. Getting the staff to be more responsive would ease a lot of the frustration that managers experience.
Envisioning a more intuitive design
I performed competitive and comparative analysis, looking at staffing and scheduling apps as well as those focused more generally on project management.
My design approach incorporated three basic principles:
Focus on the main thing
It's not only okay but necessary to ignore anything that isn't solving the core problem. It was a balancing act to determine what was in scope and what was not.
Design Everything Around a Flow
This helped immensely in thinking about the design process. I kept side considerations out of my mind when I couldn’t see them as part of the flow I was working on.
Trust Your Design Intuition
I invested a lot of time looking at other apps in similar and adjacent categories. However, in the end, I had to trust the patterns that made sense to me as a user.
Low-fidelity sketches
Mid-fidelity wireframes
Chat
We identified chat as a feature with clear value to staff and event managers. Introducing chat changes the way event invitations are handled. Rather than receiving an email, staff get a push notification and can immediately respond.
To bring more value to staff and increase engagement, we made chat event-wide, enabling staff to share information.
Events
We introduced a page for events. This page was new for staff, who previously didn’t have a way of seeing relevant event information in one place.
We brought over the event creation flow from the web app, streamlining it as much as possible.
Availability
In the web app, staff are meant to set when they are unavailable to work by blocking out those dates. Because most staff are part-time, they found this process unintuitive. With the mobile design, staff are asked to set their availability, with blockout dates being the exception to the rule.
Iterating based on feedback
I recruited current customers for multiple rounds of usability testing. We watched them interact with our prototypes and listened to detailed explanations of their thoughts and expectations around the designs as they used them. Testing informed updates to the calendar, availability, and invitations.
Problem
The various calendar view options led to visual clutter. Users failed to find the availability option stacked underneath action buttons.
The various calendar view options led to visual clutter. Users failed to find the availability option stacked underneath action buttons.
Solution
We reduced the number of view options only to what users felt was essential. We used the vertical space below the adjusted calendar to show contextual information, including availability.
We reduced the number of view options only to what users felt was essential. We used the vertical space below the adjusted calendar to show contextual information, including availability.
Problem
The event invitation card contained too much irrelevant information. The transition to the event chat was also too abrupt for users to understand what was happening.
The event invitation card contained too much irrelevant information. The transition to the event chat was also too abrupt for users to understand what was happening.
Solution
The card was simplified, with staff able to see multiple shifts in one place. The locked event chat was indicated with a blurred overlay behind the invitation.
The card was simplified, with staff able to see multiple shifts in one place. The locked event chat was indicated with a blurred overlay behind the invitation.
Managing the process
I took the lead on interacting with the client and managing the UX tasks. I wanted to empower the designers by giving ownership to different parts of the process. While this led to some great design work, it also hindered collaboration in some places. I discovered that understanding your team members is key in establishing a management approach.
Takeaways
Quickstaff is currently implementing our designs as they move forward on the mobile app. I am grateful to Quickstaff for the opportunity to work on their product and excited to see where things go.
During this sprint, I experienced the value of using strong research to inform design. Speaking with existing customers revealed not only what was most valuable about Quickstaff, but also the direction we needed to take the design. Instead of focusing on the feature requests of managers, we pivoted our approach to better benefit the staff. I learned the importance of time-boxing, as we ran up against the clock in this process. Some parts of our research and planning phases should have been compressed to allow for more time on the design. I also learned a lot about bridging the gap between research and design.
Want more details? Read my writeup on Medium
Open source illustrations on this page from undraw.co (Katerina Limpitsouni) and opendoodles.com (Pablo Stanley)