Mobile Task Tracker
Client: Shiftgig Responsibilities: Mobile UX and Visual Design
About this project.
This app was developed for the Brand Ambassadors (workers) to use in all stages of their event working experience. They depended on this app to get hired for new events and keep track of upcoming opportunities. This app was always improving with new features. This specific feature was to track various tasks performed by the event worker before, during, and after an event was worked. This was designed as a feature enhancement to the existing check in/out process before and after an event worker has worked their shift. I worked with the mobile developers to design the UI and process flow. The second part of this feature was on the desktop. We needed a way to archive the milestones and responses from the BA’s. I worked with the product and UI teams on the platform side to develop this feature.
Background
The app was primarily used for booking and tracking events. This was a new feature that would be additional to what the user’s were used to working with. It was important to make it easy to transition to using this new feature, especially if the BA was involved with working the event itself while interacting with the app.
Challenges
This feature was designed into the existing mobile and desktop applications.
Visually streamlining the applications for different users.
With no previous UX processes in place, I had to sell the process along with my UX direction.
As part of my collaboration with the product team, I reviewed scope for an MVP and documented use cases. Then, I used the Double Diamond approach to deliver on UX artifacts.
Discover.
I researched other applications that had a similar experience. Using the swiping action to guide the user to the next screen, including already familiar icons within the existing application, and keeping the text to a minimum worked well to view information as the user needed.
I worked with the mobile team on best practices to develop the plan for how we were going to execute the needs of the our client while maintaining the operational features that we had in place.
Assumptions:
The user’s first concern was moving through the event tasks quickly.
The user needed to make sure they knew what was completed or missed.
The information gathered needed to be organized for future events.
Understanding the context
This application worked with a platform database system that tracked the user’s milestones and completed tasks. It was a full circle system, I needed to understand the inner workings of the information architecture to be able to design the new milestone feature. Working with the product team I was able to discover the user’s journey through the Brand Ambassador (BA) app.
Brand Ambassador App Existing User Journey
New and Improved Process
The BookedOut app was for the workers to view and interact with events that needed staffing. The Milestone Tracker is an existing feature of the BookedOut App. Within the current milestones, the user had the ability to:
view the details of the event before committing to working
accept or decline an invitation to an event
after committing to an event, they can interact with all of the milestones as available
Current Milestones:On Your Way
Check In
Check Out
New Milestones (in green):
Before
During
Task List
After
Task List
The MVP was The Task List. This interactive list contained items that the worker would be checking off that would be saved into a database.
Some of these items could be:
Take a photo of your display
Return equipment to a location
Upload photos of the event
This data would be saved and organized in a separate feature on the platform.
Milestone States
The milestone tracker was on a timed system. If a milestone was missed, it would become deactivated and no longer available. For example, if the user did not check in it would not be accessible after the event has started.
I worked with the mobile team to create the UI for these different states. Some of the major points that needed to be worked on were:
enhancing the existing color scheme
designing and managing alert messages
incorporating new icons and symbols
Define.
Working with the product team we defined the scope, use cases, and user stories. I used this information to design the UI to communicate messages to the user that would in turn improve the milestone process.
Tasks were a new feature that the worker was not accustomed to completing in real time.
User Stories
The event manager needs to track worker’s history to
better predict if they should be hired for future events
Worker (user) is working an event and needs to see
completed tasks to track their milestones
A user’s rating is low and they would like to improve
it by tracking their tasks
Use Cases
Worker (user) needs to view incomplete tasks
User has missed check in
User has missed check out
User needs to take a photo of the display
User needs to answer a question after the event has ended
User needs to enter their break time
Develop.
Taking cues from what already existed, I developed a user flow for the milestone categories. The milestone tracker that was in place before this feature was added did not have the before, during, and after subcategories. Using the existing layout with these enhancements, I added these elements in. We continued to develop the screens to include photo uploads, timesheet completion, and check out flows.
Task Tracker Prototypes
Developing the UI
Color coding helped the user to understand what was completed. If a milestone was missed, it would turn gray and be deactivated. If the milestone was green, it was marked as complete. We continued to use shades of green to signify completion of the entire event, the submission of the tasks completed, and the timesheet.
Deliver.
I developed the final designs to deliver to the team. I presented these screens to the mobile development team with detailed direction on the overall flow. Together we ironed out any production issues related to the UI design to ensure the visual components flowed correctly.
Nailing Down a Flow
Using cues from the existing process, we placed the additional categories within the familiar design. I worked with the mobile team to make sure the icons were consistent and made sense to the user.
Taking it to the Platform
Behind the scenes
Task creation happened on the platform side. As part of the event creation process in the Ops Admin web app, the event managers now had the ability to add a new task. This step was done within the event creation section of the Ops Admin web app, which was then communicated to the milestones in the Brand Ambassador’s mobile app.
Design Process
The table itself went through multiple discussions on the best way to present the information. There were many details that depended on other decisions that made the entire process more complicated to design.
Activities included:
Whiteboarding
Card Sorting
UI Design Sessions
We settled on a collapsible table design with the ability to edit inline. This saved space and gave the user the option to create the task outside of the time stamp or directly into it. I worked with our UI developer to utilize what we already were using in the application. This saved hours of work as we did not have the time to create buttons from scratch. This was especially handy for the Actions category on the table as we already had the buttons in place for other areas in the application.
Task Management Screens
These screens were generated on the platform from the mobile app. These screens were extremely important, as it was the only way for the event manager to track the progress of the event in real time. This data was used for future events for several purposes:
Save time - the user is now able to see if there are common tasks that can be used in other areas.
Identify patterns - view the success rate of a task being completed.
Track time stamps - make sure the task is placed in the correct time slot to be completed.
The UI was brought into these screens to keep everything consistent. Even though these applications were used by different user groups I wanted to keep the overall design familiar.
Task Tracker Takeaways
This feature improved the gathering of data to what otherwise was a tedious process. Our client needed to have this feature run smoothly and be delivered quickly. Working with the mobile and platform teams in tandem was vital to making sure the UI was consistent on both ends. Even though there was a different user base for these features, I wanted to make the connection visually on both ends. This was an increase to our timeline that had to be streamlined to ensure that the product would be delivered on time.
Part of the process was having brainstorming sessions and multiple presentations of the UX/UI methods on this feature. This was something new to the product team, and required clear communication and defending of my design decisions. Working together with the platform UI team we enhanced this feature so everything would be cohesive and connected visually.