This is the second part of a mobile development tutorial where we are building a Meeting Room Booking app that allows its users to browse an inventory of meeting rooms and reserve rooms for conference call and other events.
An expanded version of this tutorial will be included in my upcoming Mobile Web Apps Recipes Book, where I will show you how to develop 8 different mobile applications using Ionic, Sencha Touch, Kendo UI Mobile and jQuery Mobile.
In the first part of this series we created the wireframes for the screens that will allow users to book rooms. Here’s the link to the article:
In this article we will continue with the design of the app’s GUI.
Refactoring the “Booking a Room” Wireframes
We will start with a small refactoring of the wireframes of the screens that will allow the user to book a room.
The Booking Details Screen
In our original design, this screen is where the user can review the details of her booking and commit the booking to the app’s database. We designed it as a read/write screen, with the meeting’s title and main attendee fields being editable fields:
We will remove the editable fields and convert this screen to read-only mode:
And we will add an Edit Booking screen where the user will be able to edit the booking. When a user taps on the Edit button of the Booking Details screen, the new Edit Booking screen will become active.
The Edit Booking Screen
The new Edit Booking screen allows the user to edit the booking’s fields:
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 Delete button that allows the user to trigger the deletion of an existing booking. This process was described in the first part of this tutorial.
Note that the Rooms Details screen also described in the first part of this tutorial will activate the Edit Booking screen.
After making these changes, the entire “Book a Room” GUI will look like this:
The “Rooms Browser” Wireframes
The Rooms Browser feature of the app will give access to the inventory of rooms in the system, allowing users to check room details, availability, and book rooms.
The Rooms Browser Screen
This screen will render the list of rooms that are set up in the system. It has a filter that narrows the list by location:
Tapping on a room will activate the Room Details screen.
The Room Details Screen
As described in the first part of this tutorial, this screen will render the relevant attributes of the selected room, such as a photo, name, location and the availability of network outlets and video conferencing equipment.
The Book button on the screen’s navigation bar will activate the Room Availability screen.
The Room Availability Screen
This screen will show the availability of the selected room, in 30-minute increments, for a given date. The screen will have a simple date navigator that will allow users to move to different dates.
Tapping on a time period on the list will activate the either the Booking Details screen or the Edit Booking screen, depending on whether the room is available for the selected time period.
The entire “Rooms Browser” GUI looks like this:
We have completed the GUI design for the “Book a Room” and “Rooms Browser” features of the app. In the next installment of this tutorial we will design the administration GUI that will allow designated users to enter, edit or delete meeting 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 out on the updates! Make sure to sign up for my newsletter so you can get MiamiCoder’s new articles and updates sent free to your inbox.