OVERVIEW
At Sid Lee, my team worked on an internal project to digitize the cafeteria payment system. The goal was to keep track of cash flow more accurately and speed up the long wait lines. My role was to consider all the edge scenarios and devise a solution that would be resilient under any circumstances.
MY ROLE
UX Designer
RESPONSIBILITIES
Designing a new system architecture, wireframes, prototyping interactions and conducting usability tests.
TEAM
Annie Desrochers
Max-André Hubert
Sarah Barone
THE CHALLENGE
Solve for edge scenarios
During my time at Sid Lee, my team was developing a seamless payment application for the office cafeteria. After testing the beta for a week, I discovered several edge scenarios that needed to be considered.
THE SOLUTION
A system fallback that accepts cash
I developed a cash payment system that would work seamlessly within the existing product architecture. A fallback system that accepts cash payments would solve for the majority of edge scenarios including: freelance contractors, guests, clients and employees without a credit card.
PROBLEM DEFINITION
Identify edge scenarios
I identified several potential problems that the beta missed and grouped them into two categories: Free Lunches and Edge Scenarios. Free lunches could be solved within the app with some backend magic; however, the edge scenarios required some system restructuring.
Free Lunches
- Partners who eat for free
- Free birthday lunches
- New employee’s first lunch
- Lunch and learn
Edge Scenarios
- Freelance contracts
- Guests friends
- Employees without a credit card
- Employees without the app
- A black out
- No WiFi
- System failure
SYSTEM ARCHITECTURE
Designing for resilience
I designed a new architecture that would work within the existing app framework. Edge users could preregister for lunch through a web portal which would eliminate the need to download the app or use a Sid Lee email address.
At lunch time, users enter the cafeteria and confront the receptionist where they confirm their identity and pay in cash. After the payment is received, the receptionist would assign the user’s product ID to a paper QR code. The user would then take the paper code to the bistro and scan their QR code at the food counter. After the scanner validates the code, the user would proceed to take their lunch.
I then created a high-level journey map to visualize the key steps a user would take under this new system.
ASSET CREATION
Screens and new behaviours
The new system required a custom tablet interface for the receptionist. I created a feature list and prioritized each feature based on level of importance.
Prioritized Feature List
1. Show registered list
2. Search for user's name
3. Assign user to QR code
4. Show total cash payment
5. Cancel payment
6. Return payment
Once I identified the core features, I sketched some wireframes. The interface needed to be intuitive and match the receptionist's existing mental model, ie. the Sitecore interface upon which the app was built.
The Sitecore interface receptionists used to manually add attendees.
Sketches of initial concept wireframes.
I then created a task flow to capture the ideal sequence of events that the receptionist needed to perform.
VALIDATION
Prototypes and usability tests
Finally, I created a prototype of the core the interaction, created props (cards and a scanner) and tested the app’s usability on all 4 receptionists.
I first asked if they knew what the interface was and if they knew what to do. Then I asked them to perform a set of tasks including: selecting a user, assigning a user to a QR code, cancelling a payment, and conducting a refund.
The initial wireframes lacked clarity in two areas. Some of the receptionists didn’t know that the registered list was scrollable. Additionally, I witnessed a few mistakes during the refund task. The final design incorporated changes in these two areas.
