Backbone - Scheduling app for supermarket employees (Responsive)
The problem:
Scheduling employees at a supermarket can be difficult due to the size of the store and the total number of employees. Additionally, creating an accurate schedule requires the supermarket manager to allocate shifts to match customer demand, which can be difficult. Research finds that manual scheduling can be inefficient, as it can take up to 20% of a manager's time, which can cause a strain on the store's resources and also restricts the manager from dedicating more time to another task
The goal:
The project's goal is to create a scheduling tool for managers to save more time scheduling by allowing the manager to complete scheduling for multiple employees simultaneously.
Project duration:
February 2023 to March 2023
My Role:
Research and design
Responsibilities:
We are conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Understanding the user
-
User research
-
Personas
-
Problem statements
-
User journey maps
User research: summary
I conducted interviews and created empathy maps to understand the users I was
designing for and their needs. A primary user group identified through research
was working adults with busy lives.
This user group confirmed initial assumptions about the users, but research
also revealed that time was not the only factor frustrating for the user when they scheduled employees. Other user problems included obligations, interests, or challenges that make it difficult to manage employees.
User research: pain points
1
Time
Long time to manage and schedule large amount of employees
2
Accessibility
Outside of technology there is no way to assist people in communication between employees
3
Flexibility
No ease of access to manage tasks at any place at anytime no flexibility
Persona: Sam
Problem Statement:
Sam is a store manager who needs to schedule multiple employees to save time in his busy life.
User journey map
![_User Journey Map [Schedule App].jpg](https://static.wixstatic.com/media/d53f86_c13907ff2a93431d9255bf09dab1467f~mv2.jpg/v1/fill/w_868,h_488,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/_User%20Journey%20Map%20%5BSchedule%20App%5D.jpg)
The main issue in this journey map shows that saving time is a big concern. Tools like search bar, automation, and filtering can help solve the issue for Sam.
Starting the design
-
Sitemap
-
Paper wireframes
-
Digital wireframes
-
Low-fidelity prototype
-
Usability studies
Sitemap
This is the first sitemap I designed where I would think of all the possible pages I would like to include in the final app. The pathway I took on creating this specific sitemap was to use the user journey map I created before to get some ideas such as the message pages and the pages that are needed for the process of scheduling.
Paper wireframes
Desktop
Mobile
I began with designing for the larger screen first then the smaller one because of content prioritization, where starting with a larger screen, you ensure that the core content and functionality are well-defined and effectively conveyed. As you scale to smaller screens, you can progressively reduce the complexity and prioritize the essential elements for optimal mobile experiences.
My goal is to only create necessary pages for a user flow for creating a schedule with different starting points to show a flexible approach on how a user can create a schedule.
.jpg)
Digital wireframes
Desktop
Mobile
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy.
Low-fidelity prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected with was to create a new schedule for an employee.
Usability study: paramerters
Study type:
Unmoderated usability study
Participants:
5 participants
Location:
United Kingdom, remote
Participants:
5 participants
Usability study: findings
1
Additional search filters
user wanted additonal tags to find a specififc employee such as role, userId email address.
2
Zoom
Users want the zoom/enlarge feature when displaying schedule on mobile app
3
Flexibility
ease fo access buttons requested when changing scheudkes. Also rteqsut tab for schedukle request employees have sumbmitted.
Refining the design
-
Mockups
-
High-fidelity prototype
-
Accessability
Mockups
To make the schedule flow easier, I added an on/off switch button for each day that should also provide familiarity to ios users so users can easily remove and add days for an employee's shift and use previous details of the change if needed.
Before usability studies
After usability studies
Instead of making a button for the user to return to the home screen, I created a button to allow the user to view the new schedule so they can visualize the changes they have just made to a schedule.
Before usability studies
After usability studies
Mockups
Desktop
Mobile
HIgh-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for creating a new schedule for an employee.
Accessibility considerations
1
I used headings with different sized text for clear visual hierarchy
2
Used icons to
help make
navigation easier.
3
high-contrast color scheme to allow people with vision impairments to easily read.
Going forward
-
Takeaways
-
Next Steps
Takeaways
Impact:
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
What I learned:
While designing the backbone app, I learned how to design for different screen sizes while meeting user needs and keeping everything consistent can improve the app's ease of use.
Next steps
1
Conduct follow-up usability testing on the new website
2
Identify any additional areas of need and ideate on new features