Meeting room management is a common facilities management need for different kinds of businesses. The mobile app tutorial that we are starting with this article is a Meeting Room Booking app that allows its users to reserve rooms for meetings and other types of events. The app will also have an administration feature through which designated users can enter, edit or delete meeting rooms.
All the versions of the app will be available in my upcoming Mobile Web Apps Recipes Book.
Functional Requirements of the Meeting Room Booking App
We will model this app after a real-world Meeting Room Manager with which I am very familiar. Here’s the list of high-level functional requirements that we will focus on. The app and its backend must:
- Authenticate and authorize a user.
- Store a number of data records describing a collection of meeting rooms. Each record will hold the following attributes:
- Room number
- Room name
- Room location (Building A, Building B, and so on)
- Room capacity (number of seats)
- Room picture
- Room has network connection (yes/no)
- Room has conference phone (yes/no)
- Room has video screen or projector (yes/no)
- Room has wireless internet access (yes/no)
- Room is active in the system (yes/no)
- Allow users to search for available meeting rooms by entering the desired meeting date and time, duration, location and other room attributes, and produce a list of available rooms that satisfy the criteria.
- Allow users to reserve a room that is open for reservation during a given time span.
- Allow users to review the meeting room reservations that they have made for a given date.
- Allow users to browse the meeting rooms that are active (reserved or not) for a given location and date.
- Allow administrators to browse the meeting rooms that are set up in the system.
- Allow administrators to add meeting rooms to the system.
- Allow administrators to change the attributes of an existing room.
- As well, allow administrators to remove an existing room from the system.
Designing the User Interface
Based on these functional requirements, let’s now work on a set of wireframes for the screens that we will use in the app. First, we are going to model the screens that will allow the user to book a room.
The Sign In Screen
We will use this screen to capture the user’s credentials and initiate the authentication and authorization process.
The My Bookings Screen
After signing in, we want to take the user to a landing screen where she can initiate the process of booking a meeting room. This page will also serve as the place where the user can see her current bookings.
This screen features the New button on its navigation bar. Tapping on this button will activate the Room Finder screen.
The Room Finder Screen
The Room Finder screen is basically a form where the user will enter the booking start and end times, as well all the attributes that she is looking for in a room, such as the building where the room should be located, the number of attendees, and the availability of network outlets and video conferencing equipment.
Once she has entered the search parameters, the user will tap on the Search button, which will initiate the search and activate the Rooms List screen.
The Rooms List Screen
The Rooms List screen will render a list of the rooms that fit the criteria entered in the Room Finder.
Each listing on this screen will feature a button that will allow the user to open the Room Details screen, described next, where she can review the room’s details and proceed to book it.
The Room Details Screen
This screen will render all the significant attributes of the selected room, such as a picture of the room, name, location and the availability of network outlets and video conferencing equipment.
The Book button on the screen’s navigation bar will activate the Booking Details screen.
The Booking Details Screen
This is where the user can review the details of her booking and commit the booking to the app’s database.
When the user taps the Done button on the screen’s navigation bar, the booking will be saved and the My Bookings screen will become active.
The Bookings Details screen will also serve to review existing bookings, therefore we will set up a footer area containing a Delete button that will allow the user to trigger the deletion of an existing booking.
When the user taps the Delete button, we will activate an alert that will inform her that deletions are permanent.
If she chooses to go ahead and delete, we will remove the booking from the app’s database, and activate the My Bookings screen.
This will be our first iteration of the UI for the “book a meeting room” use case of the app.
In the next part of this tutorial we will design the UI for the “meeting room browser” use case of the app, which is the feature that allows users to explore the meeting rooms in the system and see their availability for any given date. We will also design the UI that administrators will use to add, edit and delete rooms.
All the Chapters of this Series
You can find all the published parts of this series here: The Meeting Room Booking App Tutorial.
Don’t miss the next article. Get my updates by signing up for MiamiCoder’s Newsletter.