App UI: Study Room Booking

A colleague and I worked to develop a paper prototype for the purpose of filming. The idea was to re-imaging a study room booking website. After we finished, I decided to work on my own and design it as mobile app.

  • During the project we collaborated on what the app would look like, I did all the filming and editing for the final paper prototype video
  • I sketched out and wireframed ideas for an app version
  • Developed a high-fidelity app prototype using principles of UI design

Tools used for this project:
  • SLR camera and a tripod to film paper prototype
  • iMovieto edit footage and create a narrative for paper prototype in use
  • Figma to create wireframes and high-fidelity prototype

A Prototype in Paper
The genesis of this project was a paper prototype a colleague and I developed. The original idea was to re-imagine the mobile website for the already existing room-booking website, which we felt could be a better experience. We storyboarded a new idea, developed a paper prototype, and then shot some video using an SLR camera. I edited the video together using iMovie, to show the story of how our prototype worked.

Re-thinking as an App

On my own, I decided to bring this to a high-fidelity design. While I kept a lot of ideas from the original paper prototype, I wanted to make some changes such as having an onboarding screen, and having room confirmation and cancellation occur within the app itself, rather than having to rely on e-mail confirmation as the website does now.

I started by sketching out some of the new ideas in pencil and I used Figma to develop some low fidelity wireframes.

High-fidelity Design

I decided on a simple colour palette using the school colours as a base, and decided to use avenir next as the typeface.

Some of the considerations I had when designing this UI:

  • Discoverability, a student will likely use this multiple times during their tenure at school, but it won't be used as much as say a messaging app. I wanted the options to be easy to find. This is why the tab/navigation bar at the bottom gives the user access to all the major parts of the app. I don't want to hide options in a hamburger menu.
  • I try to make sure that a user has access to all the necessary information at all times to complete the task at hand.
  • Accessibility, I use high contrast text but I also use shapes on the coloured time selectors for users with colour blindness.
  • Generally I try to keep things simple and consistent from one section to the next.
  • I consider Fitt's Law, and try to make the selectors easy to use with fingers on a touch screen.
The first screen that greets a new user. Students at the college already have system logins assigned, no need to create a new one.
Also as part of the onboarding process, the user can pick the one of two campuses they attend. This can be changed later.
The main colours and font weights are used to indicate hierarchy. Familiar cues such as the chevrons are used to indicate possible user action.
The selectable time-slots use colour as well as shapes to indicate availability. This is done for accessibility purposes. Also, other rooms at this point are made more transparent to indicate they cannot be selected.
Option to cancel is easily discoverable. The colour red and the "X" icon is used to indicate it's a destructive option.
The building icon ties this option to the option on the room selector screen. The green check indicates the active campus.
Confirmation of a booking is acknowledged by the system with an overlay that has to be dismissed.
A map shows the user where the room is located in the real world—they can "X" out of this view.