top of page

FlowBook

Taking the chaos out of scheduling

Component 107 – 5.png
Rectangle (10).png

The Challenge
Make it easier for businesses that struggle with disorganized and inefficient scheduling to manage their workforce.

The Solution
FlowBook focuses on providing users with a streamlined & transparent scheduling flow for web.

Role 
Sole UX/UI Designer

Process 
User research and qualitative analysis
Sketching & Ideations
UI Designing & Prototyping
Usability Testing & Synthesizing
Redesigning

Tools
Adobe XD
Miro

M

Discovery

Ideation

Design

Test

Reflection

1-Discovery

1.1 Secondary Research

I compiled secondary research from industry experts to:

  • Understand industry standard processes in place for scheduling software

  • Identify common user behaviors and experiences with the scheduling

  • Understand user needs and frustrations as they relate to scheduling

Flowbook - secondary research .png

1.2 Interviews

"I'd like to be able to organize my schedule in advance so I can be prepared for the week"
- Leah

"I appreciate products that help me stay more organized and manage my time"
- Neelam

"I want to increase efficiency in my scheduling and business administration"
- Carlos

"I'm trying to save up money for a bootcamp and I want to save time so I can balance work and my goals"
- Elliot

1.3 User Pain Points

From the user interviews and secondary research, I defined key user pain points.

user pain points - flowbook.png

1.4 Empathy Mapping

After the user interviews, I was able to identify two unique types of users from empathy maps.

empathy map ezra - flowbook.png

Ezra - the employee 

Camille- the manager/owner

screenshot of empathy map flowbook.png

1.5 Personas

Camille- the manager/owner

And after a deeper look into both empathy maps & user research, I created two personas.

persona flowbook camille.png

Ezra - the employee 

flowbook persona.png

2-IDeation

2.1 How might we?

Writing HMWs helped to generate creative solutions while keeping me focused on the right problems to solve.

1. HMW use employees collective organization to create a transparent scheduling flow?

2. HMW remove the stress out of scheduling?

3. HMW help employees stay organized while saving time?


3

4. HMW make staying organized and efficient fun?

5. HMW leverage the chaos of running late to increase efficiency?

6. HMW get employees to schedule themselves?


3

2.2 Brainstorm

All the research and synthesis provided me with enough insights to start sketching to generate ideas and establish concepts to tackle users' problems.

20230301_171250_edited.jpg
20230301_171245_edited.jpg
20230301_171315_edited.jpg

2.3 Sitemap

I identified and mapped out key features that my web app needed to include. The sitemap also made sure that the information, function, features, and screens were in line.

sitemap flowbook.png

3-Design

3.1 Digital Wireframes

After considering ways a user could navigate through the web app, I began refining the initial sketches into low-fidelity wireframes in Adobe XD. I made sure to base screen designs on findings from the user research.

3.2 Iterations & Design Decisions

As the design phase continued, screen designs were iterated on based on findings from user research.

digital wireframe 1 flowbook.png

Navigation cues like buttons were key to enabling users to complete core scheduling tasks.

digital wireframe 2 flowboo.png

3.3 Style Guide & Design System

To ensure consistency across the different screens, I developed a style guide for FlowBook. This made it easier for me to design colors, fonts and sizing for components. The design system was essential to creating repeatable designs on screens.

4-Test

4.1 Prototype

Using AdobeXD I developed a Lo Fidelity prototype of the FlowBook web app while focusing on the manual and automated scheduling processes. This prototype was used in the usability studies I conducted.

prototype.png

4.2 Usability Study

Before finalizing the designs, I wanted to ensure I was addressing specific challenges users face when interacting with the prototype. I conducted a moderated usability study on 5 participants and aimed to address the following:

Objectives
1. Can users complete core scheduling tasks?
2. Are users able to navigate the website easily?
3. What can we learn from the way users interact with the scheduling flow?

Tasks
Scenario 1
Schedule a shift for an employee

Remove the shift

Scenario 2
Accept an employee's PTO request

Scenario 3
Create an automated schedule & publish


 

4.3 Insights

Overall, participants had some difficulty completing Scenario 1 and were able to complete all other core tasks with ease. I pulled major insights from the studies that helped me pivot my final designs to cater to user needs better.

usability findings flowbook.png

4.4 Synthesize & Redesign

The user error rate was high when interacting with the forecast. I removed the forecast function from the schedule page and moved it to the navigation menu as an "optional" element. 

before and after flowbook usability study.png
flowbook usability study 2 before and after.png

3 out of 5 participants expected to see different views of the calendar. I added a daily and monthly view while also setting the monthly view as the default.

4.5 High Fidelity Mockups