top of page

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


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



Long time to manage and schedule large amount of employees



Outside of technology there is no way to assist people in communication  between employees



No ease of access to manage tasks at any place at anytime no flexibility

Persona: Sam

Persona Sam and Katie.jpg

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

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



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


backbone desktop 1.jpg
backbone dektop 2.jpg


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.

backbone mobile 1.jpg
PHOTO-2023-07-08-21-06-53 (2).jpg

Digital wireframes




Screenshot 2023-06-16 044933.jpg

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



5 participants



United Kingdom, remote



5 participants

Usability study: findings


Additional search filters

user wanted additonal tags to find a specififc employee such as role, userId email address.



Users want the zoom/enlarge feature when displaying schedule on mobile app



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


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

Schedule – 3.png

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

Schedule – 4.png
Web 1920 – 10.jpg



Web 1920 – 8.png
Web 1920 – 1.png
Web 1920 – 10.png


iPhone 14, 13, 12 – 1.png

HIgh-fidelity prototype

The final high-fidelity prototype presented cleaner user flows for creating a new schedule for an employee.

Accessibility considerations


I used headings with different sized text for clear visual hierarchy 


Used icons to
help make
navigation easier.


high-contrast color scheme to allow people with vision impairments to easily read.

Going forward

  • Takeaways

  • Next Steps



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


Conduct follow-up usability testing on the new website


Identify any additional areas of need and ideate on new features

Let’s connect!

Thank you for your time reviewing my work on the SNAX app! If you’d like to
see more or get in touch, my contact information is provided below.

bottom of page