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

A 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

UI screen flow

Screen Shot 2018-06-11 at 18.06.26Screen Shot 2018-06-11 at 18.06.26
[unex_ce_button id="content_lhn449b37" button_text_color="#000000" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#50e3c2" button_padding="15px 60px 15px 60px" button_border_width="2px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="https://overflow.io/s/WSVZVT/" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]Open screen flow[/ce_button]

Work examples