Holiday booking web app

Hol 1Hol 1

The task was to design a web-app that allows users to book time off work, and for admins to set up auto-approval/rejection of requests. The project was a proof-of-concept that took 3 days, so not all edge cases were designed. 

The initial brief was a list of logic and functionality, so the first thing to do was a little research and create proto personas. Meet Amit and Sophie:

Proto personas

Note: A user can be both an approver (admin) and a requestee.

How might we...

After collecting data and research from both the user's and businesse's needs, the information is formatted in 'how might we...' questions to reflect the insights.

How might we allow Amit to...

  1. See all requests assign to him
  2. Set up 'workflows' that can automaticall approve or reject requests based on chosen logic
  3. Aprove or reject requests manually
  4. Leave comments when rejecting requests
  5. Assign multiple approvers in sequence


How might we allow Sophie to...

  1. See the status of requests she has made
  2. Get feedback if her requests are rejected
  3. Be notified when her request is approved/rejected 

Responsive, progressive web app

As usage would likely be on various devices, I decided to design the web app as a responsive site and as a progressive web app to enable instant notifications on all devices. It also allows the site to load instantly, repospond quickly and feel native.

Screen flows

Sophie: Submitting a new request 

Hol 4Hol 4

Amit: Rejecting a request and creating a workflow

Hol 5Hol 5

Technical considerations

An approver needs:

  • Account status (logged in/out)
  • Email address (for notifictions)
  • *Progressive web app allows for push notifications


A requestee need:

  • Account status (logged in/out)
  • Name
  • Department
  • Email address (for notifictions)


A request needs:

  • Approvers assigned to it (min of 1)
  • Approval type (any, all or sequence of approval sign-off)
  • Number of days
  • Date range
  • Requestee id
  • Status (pending, approved, rejected)
  • Comments (optional)

Note: Requests should show in order of starting soonest. Where two requests start on the same date the they show in order of who requested first.


Workflows need:

  • Conditions based on requestee variables
  • Conditions based on days or dates
  • Functions of assign, approve, reject, approval type


Workflow logic:

  • Requests eual or less than 3 days are automatically approved
  • Requests greater than 3 days and less or equal to 10 need approval by their line manager
  • Requests greater than 10 days or equal or less than 30 need approval from their lin manager and director
  • Requests greater than 30 days are automatically rejected


Notification settings:

  • Schedule reminders for pending requests (round up notification)
  • Reminders of pending requests waiting for long periods
Hol 6Hol 6

Work examples

Yayzy App
Take the stress out of borrowing
Specialist training platform
Why the double diamond isn’t enough
Happy productive teams
Holiday Booking Web App
Detailed Personas
Personalisation Strategy
In-App Notifications
UNiDAYS Support