Context
Biscuit Bistro is an in-house coffee shop that serves an array of delicious drinks, sandwiches, and snacks to employees of Dynematica, a small gaming company.
Biscuit Bistro is the only cafeteria in the building, and it ships hundreds of orders every day. It has proven to be a popular option, with lines piling up and waits that seem like a lifetime, especially in the morning.
The challenge
Design a digital solution so employees can order their drinks and snacks in advance, to help with social distance and wait times.
Analyzing the problem
Foundational Research
First, foundational research can try to find out if there is a way to solve the problem, which is easier than building an entire app.
We already have 2 clear problems which are the long line at the Bistro and social distancing measures, but we will still do some research to find out:
- If there is an easier way to solve these problems.
- If there is some other hidden problem
An analysis of what is already on the market would also be interesting research to do. There may be some applications already on the market that have solved a similar problem.
A competitive analysis may be a good idea in cases like this.
User Research
The first part of our research will focus on outlining the problem, the context, the users involved, and the resources available.
Methodology
The most appropriate methodology for the case is a qualitative moderated user interview because we are in an early stage of development and need to know what to build.
Also, the user base is limited in number (Dynematica office employees) so it will not be too expensive to have moderate one-on-one interviews with few employees.
Actions will be:
- Customer side: Moderated interviews
- Bistro side: Moderated interviews
- Bistro side: Task analysis
Research can also benefit from a quick observation of the work dynamics of the Biscuit Bistro. Watching them work in real life can reveal unexpected insights for our research.
A survey may supplement the data retrieved from interviews, but in this particular case it is not critical.
Participants
I would divide the users into two main categories, CLIENT SIDE users, which are the employees who need to order from the Bistro, and BISTROT SIDE, the Bistro workers who will be using the server side of the system we are designing.
So 5 to 10 interviewee (client-side) should be enough to have enough information about the needs of the users and the dynamics of the office, and 2 Bistro-side users to understand the dynamics, timing, and workload behind the Bistro counter.
Characteristics of the participants are quite uniform, due to the context of our problem, the office of a young company.
KPIs
To measure the effectiveness of the system we’re about to build, it may be a good idea to set some KPIs in advance. We can set up some key performance indicators to measure the improvement in the quality of life of employees during the coffee break.
Some KPIs for this case study might be
- Customer side: time actually spent enjoying the coffee break
- Customer side: office social life quality
- Bistro side: number of coffees served per day
- Dynematica side: more productivity due to an improved work/life balance for the employees
Measuring these values before the system is implemented can provide a good resource for further iterations of the project
Interview questions
The questions are wrote so to understand the problem and to avoid as much bias as we can, both from the interviewee and from the interviewer.
Client Side
Office Dynamics
- Is the coffee break in Dynematica a SOCIAL activity where people get together and spend most of the time together, or is it more of an individual activity that people do on their own time? (This is to understand how central the social part of the app needs to be).
- Can you describe how the coffee break usually happens?
- How do you usually spend your coffee break?
Timing
- Is the coffee break always at the same time or does it happen whenever someone suggests it?
Payment
- Does someone still have to pay in cash?
Bistrot Side
- Is the peak hour a confusing time or do people know how to politely flow through the process of buying a coffee?
- Are employees tech savvy enough to handle orders efficiently on a computer?
- Do you have an over-the-counter delivery service?
Resulting insights from the interviews
- Coffee breaks are a SOCIAL activity at Dynematica. Employees want to share relaxation time with their colleagues and friends. They rarely take a break alone.
- Everyone has at least one digital payment service to pay without cash
- There is no set time to take a coffee break, they have the freedom to take it when they need it.
- There is a common space in the office where they can relax in the comfort of a couch.
- Biscuits Bistro does not have a delivery service.
User Persona
Because of the constraints given, the Personas are fairly uniform (Dynematica employees who need a coffee), so we can simplify the definition of User Personas by avoiding making assumptions about aspects not relevant such as Personality, Bio, Social Status, Tech-Savviness, etc.
We can frame one Personas for each side of the app.
Client Side
Marta Alonso
Age: 32 y/o
Dynematica developer
Motivation
Spend the (limited) coffee break time chatting comfortably seated in the living room of the office instead of standing in line in a noisy and crowded Bistrot.
What she says “I would like to enjoy my coffee break together with other colleagues”
Bistrot Side
Antonio Martinez
Age: 25 y/o
Biscuit Bistrot worker
Motivation
Be able to organize his job with a clear methodology instead of having to improvise in a crowded cafeteria on the peak time.
What he says: “My ideal client is the one who take multiple orders at once”
Pain Points
Client side (employees)
- The coffee break takes too long because of the waiting time at the Bistrot
- A crowded cafeteria during the peak hours is a scenario to avoid during a Covid-19 pandemic
- It’s almost impossible to spend the coffee break chilling in group, because it takes too long due to the logistics of a group and the order time of each person
Bistrot side (BB workers)
- During the peak time there’s so much crowd that we lose our efficiency and consequently we lose orders.
A small project management note
Analysis of a real project would involve making assumptions about the business aspects. But since this project is fictional, we will skip this part.
However, there is one aspect worth mentioning to justify some choices.
In real life there is a budget for a project. This budget comes from the customer, so most of the effort must be directed at solving the customer’s needs.
My solution of listening to both the employees and the Bistro workers to design a solution that solves the problems of both is noble, but it’s not always applicable to a real project with a real budget, because the needs of the employees and the needs of the Bistro can conflict at some point.
So, for this case study, let’s pretend that both the employees and the Bistro Biscuit jointly funded the project, so we need to address both of their situations
Ideation
The ideation starts from the work we did during the research that can be summarized with the following statements
Problem Statements (client side)
Marta is a Dynematica employee who doesn’t want to waste her coffee break in line at the Bistrot
Problem Statements (Bistrot side)
Antonio is a Biscuit Bistrot worker who doesn’t like to work with in a crowded shop
Goal Statement
We propose Breakify, a solution that will allow colleagues in the same office to group their orders from their phones to avoid spending time in line at the cafeteria.
Such a solution will also help the Biscuit Bistros to better organize their workload and avoid confusing peak hours.
The use of Breakify will benefit Biscuit Bistro customers and workers by channeling orders through the app and saving groups of employees from physically moving to the Bistro to order one by one.
Solution provided
This solution allows users to organize a coffee break with other colleagues and send orders to the Biscuit Bistro through Breakify – Biscuit Bistro Queue Manager.
We will address the person organizing the coffee break as the BreakStarter.
- The BreakStarter will use the app to launch the coffee break proposal to as many colleagues as he/she wants to
- Colleagues accept, order, and pay with their phones, without leaving their desks
- After an X amount of time set by BreakStarter (called The Guillotine), the full order is sent to the Bistro
- Once the order has been fully prepared by the Bistro, all colleagues receive a notification on their phone
- Only one of them physically goes to the Bistro to pick up the order
- Employees will all leave their workstations only when their snacks are ready in the common area of the office, with no waiting time at the cafeteria
Queue Management
Every time you open the App, the system checks the length of the queue at the Bistro in real time and displays it on the bottom bar.
This way, the BreakStarter can better decide when the time is right to launch the break.
Once the group’s order has been submitted and a position in the queue has been secured, the app’s Order Tracking page will show real-time progress of the queue and the preparation of your order.
The Guillotine
Before the BreakStarter sends the invitation it will have to set a timer by which all invited colleagues must place their order.
This measure seems a bit anxiogenic, but it is meant to prevent one of the invited people from slowing down or preventing the group order from being sent. When the time runs out, the group order will be automatically sent to the Bistro with the individual order placed at that time
Deliverables
A number of diagrams were prepared to provide an effective presentation to the team and stakeholders to better understand the idea and the entire design process
Information Architecture
User Flow
Detailed User Flow
User journey
Comparing the user journey before and after the app rollout, we can clearly see the two improvements.
- Coffee break lifts employee mood much more than before
- Employees spend more available break time enjoying coffee with other colleagues
Before
After
Design
Designing starts with filling sheets of paper with many different ideas on how to implement the solution we designed
I used some techniques like crazy eights to throw ideas on the table and progressively improve, merge, remove and refine what was on the table to reach one final concept
Early stage user testing
I decided to make a small low-fidelity prototype to test with a few users the flow, layout and interactions of the app
Hi Fidelity mockup
Hi Fidelity mockup is intended to move the development one step closer to the final version of the design. I used the provided Style guide (color palette and Typefaces) and created the screen layout following the wireframe and information architecture developed earlier.
Having a mockup at this stage makes User Testing more reliable because users are exposed to a product that is more realistic than a wireframe and closer to the final version.
The BreakStarter starts a break
The journey starts when the BreakStarter launches the Coffee Break from his/her phone, inviting the colleagues s/he wants
Placing the order
If the employee wants to participate in the group order he/she only has to place the order within the time given by The Guillotine. Payment will be processed by all common networks.
Once you’ve placed your order, you just have to wait for Bistro to prepare it.
But this magical app allows you to track your order through all 3 phases
The Order Tracker shows users information about the status of the queue and order preparation
STATUS: In line
STATUS: Preparation
STATUS: Ready
Endgame
When the order is ready to be picked up, a notification will pop up on everyone’s phone to find a volunteer to physically go to the Bistro to pick up snacks for everyone else.
In addition, we can use a little GAMIFICATION to incentivize lazy employees to go pick up the shared order.
A little weekly competition among the usual participants can guarantee the winner a free coffee paid for by everyone else
Working Figma Prototype
What is missing in this project
In the development of this fictitious project, you will not find some studies, practices, and activities that were not required by the exercise and that the time available (3 days) would not have allowed you to add
- Usability Study of the Hi-Fidelity prototype
- A study on the color palette (+ a style guide)
- The accessibility study
- Competitive Analysis
I have a confession to make
The logo is stolen. I would say 80% of the logo comes from a design I found online that fits this concept incredibly well.
I didn’t want to spend too much time on the logo design since it wasn’t relevant to the exercise, so I just took the logo and adapted it to my project.
