Mahdi Rahman UX Portfolio

Scheduling employees in a supermarket environment is often time-consuming and inefficient, especially in larger stores with many staff members. Managers need to align shift coverage with changing customer demand, which adds pressure and complexity. In many cases, this process is done manually using paper rosters or spreadsheets, and it can take up to 20 percent of a manager’s time. This reduces productivity and limits the manager’s ability to focus on other important tasks in the store.

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.

Research

Methods Used

To understand the real-world scheduling challenges faced by supermarket managers and staff, I conducted a mix of qualitative and secondary research:

1:1 interviews with 5 staff members at Marks & Spencer (including supervisors and managers)
Informal observations of shift planning processes
Light competitor analysis of existing employee scheduling tools: Microsoft Teams Shifts

While most of my interviews were conducted with colleagues, supervisors, and managers at my workplace (Marks & Spencer), I made sure to interview participants across different roles. This provided first-hand insight into the real pain points of shift scheduling in a fast-paced retail environment.

✅ Note: While this sample group is not fully representative of all supermarkets, it offered highly relevant insights based on actual job responsibilities.

“It takes too long to copy shifts for employees who work the same time every week. I wish I could just bulk-assign them.”

— Operations Manager, Marks & Spencer

User Pain Points

Hard to tell employees apart when they have similar names

No way to assign one shift to multiple employees

Repeating shift entry manually is time-consuming

No toggle for alternating shifts

Copying a schedule is too broad, lacks per-user control

Struggling to Understand Arabic

“Understanding the meanings of Arabic words was hard.”

Confusion with Steps and Structure

“A video or animation showing how to pray would’ve helped.”

Inconsistency & Motivation

“A Salah tracker with streaks and rewards would motivate me.”

Lack of Reliable, Engaging Resources

Lack of Customisation

Competitive analysis: Microsoft Teams Shifts

At the time of the project, my workplace (Marks & Spencer) used Microsoft Teams Shifts for employee scheduling. While the tool was functional for basic rota creation, several pain points emerged during daily use by managers and staff:

🔎 Key Drawbacks Identified:

No bulk shift assignment
Many employees had identical shifts (e.g. 4 AM – 12 PM), yet there was no way to assign one shift to multiple users at once. Instead, shifts had to be manually entered one by one, which was highly inefficient.
Difficult to identify employees with common names
In stores with many staff sharing names like "Muhammad," it became hard to differentiate between users during scheduling. Teams Shifts lacks unique identifiers like employee IDs, increasing the risk of assigning shifts to the wrong person.
Inflexible copying options
While it's possible to copy an entire day’s schedule, it affects all employees. There’s no option to duplicate shifts for a single individual, limiting flexibility for personalised adjustments.
No toggle for alternating shift patterns
Some employees had rotating schedules (e.g. working Wednesdays one week and Saturdays the next). Teams Shifts offered no way to automate this — requiring manual toggling every week, which added unnecessary complexity.

🔎 Key Drawbacks Identified:

No bulk shift assignment
Many employees had identical shifts (e.g. 4 AM – 12 PM), yet there was no way to assign one shift to multiple users at once. Instead, shifts had to be manually entered one by one, which was highly inefficient.
Difficult to identify employees with common names
In stores with many staff sharing names like "Muhammad," it became hard to differentiate between users during scheduling. Teams Shifts lacks unique identifiers like employee IDs, increasing the risk of assigning shifts to the wrong person.
Inflexible copying options
While it's possible to copy an entire day’s schedule, it affects all employees. There’s no option to duplicate shifts for a single individual, limiting flexibility for personalised adjustments.
No toggle for alternating shift patterns
Some employees had rotating schedules (e.g. working Wednesdays one week and Saturdays the next). Teams Shifts offered no way to automate this — requiring manual toggling every week, which added unnecessary complexity.

Affinity Diagram

Limited options for bulk assignments

Bulk Scheduling Limits

Limited options for bulk assignments

It takes too long to input the same shift for 10 people

I often confuse employees who have the same first name

Rewriting the same shift 10 times wastes time

Limited options for bulk assignments

Bulk Scheduling Limits

Limited options for bulk assignments

It takes too long to input the same shift for 10 people

I often confuse employees who have the same first name

Rewriting the same shift 10 times wastes time

Bulk Scheduling Limits

Limited options for bulk assignments

It takes too long to input the same shift for 10 people

I often confuse employees who have the same first name

Rewriting the same shift 10 times wastes time

Hard to tell employees apart with similar names

User Identification Issues

I often confuse employees who have the same name

We had 5 employees named Muhammad – it was hard to tell them apart

Hard to tell employees apart with similar names

User Identification Issues

I often confuse employees who have the same name

We had 5 employees named Muhammad – it was hard to tell them apart

Hard to tell employees apart

with similar names

User Identification Issues

I often confuse employees who have the same name

We had 5 employees named Muhammad – it was hard to tell them apart

Alternating Schedule Needs

No way to accommodate rotating shifts

Shift patterns alternate weekly – there’s no easy way to handle that

There’s no support for custom recurring rules

Alternating Schedule Needs

No way to accommodate rotating shifts

Shift patterns alternate weekly – there’s no easy way to handle that

There’s no support for custom recurring rules

Alternating Schedule Needs

No way to accommodate rotating shifts

Shift patterns alternate weekly – there’s no easy way to handle that

There’s no support for custom recurring rules

Bulk Scheduling Limits

Limited options for bulk assignments

Sometimes I don’t find out about a rota change until I arrive at work

The mobile version is slow and hard to use

Sometimes I don’t find out about a rota change until I arrive at work

The mobile version is slow and hard to use

Bulk Scheduling Limits

Limited options for bulk assignments

Sometimes I don’t find out about a rota change until I arrive at work

The mobile version is slow and hard to use

Sometimes I don’t find out about a rota change until I arrive at work

The mobile version is slow and hard to use

Bulk Scheduling Limits

Limited options for bulk assignments

Sometimes I don’t find out about a rota change until I arrive at work

The mobile version is slow and hard to use

Sometimes I don’t find out about a rota change until I arrive at work

The mobile version is slow and hard to use

Ideation & Wireframes

Design Goals (based on research)

Based on the insights gathered from the affinity diagram, I defined four primary design goals:

Reduce repetitive scheduling work by allowing bulk assignment of identical shifts to multiple employees.
Improve visibility for staff by enabling mobile-friendly shift views and clear notifications for any rota changes.
Handle alternating schedules through toggles and smarter recurring shift logic.
Make staff identification easier by displaying employee IDs alongside names, reducing errors when assigning shifts.

These goals directly addressed pain points uncovered in the research phase and guided every design decision moving forward.

Design Goals (based on research)

Based on the insights gathered from the affinity diagram, I defined four primary design goals:

Reduce repetitive scheduling work by allowing bulk assignment of identical shifts to multiple employees.
Improve visibility for staff by enabling mobile-friendly shift views and clear notifications for any rota changes.
Handle alternating schedules through toggles and smarter recurring shift logic.
Make staff identification easier by displaying employee IDs alongside names, reducing errors when assigning shifts.

These goals directly addressed pain points uncovered in the research phase and guided every design decision moving forward.

Feature Ideas

To address the scheduling challenges discovered during research, I prioritised the following features:

✅ Daily Shift Toggle: Each day in a shift pattern includes an on/off toggle. This allows managers to activate or deactivate specific days without deleting the shift. Inactive days appear greyed out for easy visibility and can be reactivated with a single click.
→ Solves the issue of manually editing rotating weekly shifts.
🆔 Employee ID Display: Employee IDs are shown beside names to prevent confusion with common first names like "Muhammad."
→ Improves clarity and reduces scheduling errors.
📋 Bulk Shift Assignment: Enables managers to select multiple employees and assign the same shift in one step.
→ Reduces time spent on repetitive input.
📱 Mobile-Friendly Staff View: A clean mobile view for employees to check upcoming shifts and receive change alerts.
→ Improves visibility and access for staff.
🔔 Shift Change Notifications: Sends alerts to staff when a shift is changed or updated.
→ Minimises miscommunication and missed shifts.

To address the scheduling challenges discovered during research, I prioritised the following features:

✅ Daily Shift Toggle: Each day in a shift pattern includes an on/off toggle. This allows managers to activate or deactivate specific days without deleting the shift. Inactive days appear greyed out for easy visibility and can be reactivated with a single click.
→ Solves the issue of manually editing rotating weekly shifts.
🆔 Employee ID Display: Employee IDs are shown beside names to prevent confusion with common first names like "Muhammad."
→ Improves clarity and reduces scheduling errors.
📋 Bulk Shift Assignment: Enables managers to select multiple employees and assign the same shift in one step.
→ Reduces time spent on repetitive input.
📱 Mobile-Friendly Staff View: A clean mobile view for employees to check upcoming shifts and receive change alerts.
→ Improves visibility and access for staff.
🔔 Shift Change Notifications: Sends alerts to staff when a shift is changed or updated.
→ Minimises miscommunication and missed shifts.

Wireframes

I explored low-fidelity wireframes to quickly test layout ideas and validate key features before moving into high-fidelity design.

Wireframes

I explored low-fidelity wireframes to quickly test layout ideas and validate key features before moving into high-fidelity design.

High fidelty Design

After validating ideas through user research and wireframes, I brought the final UI to life. The focus was on clarity, spiritual warmth, and accessible design. I ensured the experience was visually engaging, informative, and motivating.

Daily shift Toggle

Managers can activate or deactivate shifts for specific days. Greyed-out days remain visible to preserve context and enable quick reactivation.
Solves the issue of rotating weekly shift patterns without manual re-entry.

Shift Assignment

Managers can assign one shift to multiple employees at once, significantly reducing time spent on repetitive scheduling tasks.

Mobile Employee View

Layout for staff to check their shifts clearly on mobile. Improves visibility and reduces missed updates through clearer UI and hierarchy.

UI Consideratrions

I used clear visual hierarchy with varying text sizes to help users scan content more easily.

Icons were added to assist navigation and improve at-a-glance usability.
Applied a high-contrast colour scheme to support accessibility for users with visual impairments.

I used clear visual hierarchy with varying text sizes to help users scan content more easily.

Icons were added to assist navigation and improve at-a-glance usability.
Applied a high-contrast colour scheme to support accessibility for users with visual impairments.

Reflections & Outcomes

What I learned

Transformed real-world problems into actionable design features

Balanced speed and clarity under time and tooling constraints
Gained confidence in aligning user insights with practical UI solutions

Transformed real-world problems into actionable design features

Balanced speed and clarity under time and tooling constraints
Gained confidence in aligning user insights with practical UI solutions

Transformed real-world problems into actionable design features

Balanced speed and clarity under time and tooling constraints
Gained confidence in aligning user insights with practical UI solutions

What I’d Do Differently

Interview more participants outside my immediate workplace

Usability test the flow with real managers and staff
Design with accessibility in mind earlier in the process
Use Figma from the beginning to avoid tool-related setbacks

Interview more participants outside my immediate workplace

Usability test the flow with real managers and staff
Design with accessibility in mind earlier in the process
Use Figma from the beginning to avoid tool-related setbacks

Interview more participants outside my immediate workplace

Usability test the flow with real managers and staff
Design with accessibility in mind earlier in the process
Use Figma from the beginning to avoid tool-related setbacks

Final Thoughts

Backbone was a focused but high-impact project that challenged me to solve everyday UX problems using real insights, constraint-driven thinking, and clarity-first UI design.

Mahdi Rahman

Mahdi

mahdirahman321@gmail.com

Mahdi Rahman

Mahdi

mahdirahman321@gmail.com

Mahdi Rahman

Mahdi

mahdirahman321@gmail.com