This is the third part of a mobile web app tutorial where we are building a Meeting Room Booking app that is used to browse an inventory of meeting rooms and reserve rooms for conference calls and other events.
An expanded version of this end-to-end 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 previous installments of this series we designed the screens that will allow users to browse a list of available meeting rooms and book rooms for different events. Here are the links those articles:
- Mobile App Tutorial: The Meeting Room Booking App, Part 1
- Mobile App Tutorial: The Meeting Room Booking App, Part 2
In this article we will design the administration screens. Through these screens administrators will be able to set up rooms and locations in the app. (Remember that rooms belong to a location. For example, you could say that Room 123 is in a location called Building A.)
We will also design the user registration screens and the screen that administrators will use to change users’ roles and active status in the app.
Remember that administrators will be able to designate other administrators. For this scenario to work, when we first deploy the app’s backend we will seed the database with a master user. The master user will be able to grant administrator rights to registered users. From there, administrators will be able to designate other users as administrators as well.
The Administrators’ Menu
Access to the Administrators’ Menu Screen
When a user with administrator rights opens the My Bookings screen (which is the first screen that we will present to a user immediately after signing in), the screen will feature a title bar button that will activate to the Administrators’ Menu screen.
The Administrators’ Menu Screen
This screen presents a menu in the form of a list with the administrative areas of the app.
The Locations button will activate the Locations List screen. Likewise, the Meeting Rooms and Users buttons will activate the Rooms List and Users List screens respectively.
Wireframes for Locations Administration
The Locations List Screen
This screen will render the list of locations stored in the app.
The New button will activate the Edit Location screen, described later in this article. Tapping on any location will activate the Location Details screen.
The Location Details Screen
This screen will render the main attributes of the selected location.
The Edit button will activate the Edit Location screen.
The Edit Location Screen
The Edit Location Screen will become active either when a user taps the New button on the Locations List screen, or the Edit button on the Location Details screen.
The Done button will save the Location’s properties and activate the Location Details screen.
Wireframes for Rooms Administration
The Rooms List Screen
The Meeting Rooms button on the Administrators’ menu screen will activate the Rooms List screen. This screen will render the list of rooms stored in the app.
The New button will activate the Edit Room screen, described later in this article. Tapping on a room will activate the Room Details screen.
The Room Details Screen
The Room Details screen renders the main attributes of a room.
The Edit button will activate the Edit Room screen.
The Edit Room Screen
The Edit Room screen allows the user to edit the room’s attributes.
The Done button will save any changes and take the user back to the Room Details screen.
Wireframes for Users Administration
The Users List Screen
The Users button on the Administrators’ menu screen will activate the Users List screen. This screen will display the list of users of the app.
The New button will activate the Edit User screen. Tapping on a user will activate the User Details screen.
The User Details Screen
This screen displays the user’s attributes.
The Edit button will activate the Edit User screen.
The Edit User Screen
Through this screen administrators will be able to edit a user’s role and active/inactive status, as well as send a password reset email to the user.
We will not allow administrators to change a user’s personal details such as name, email and password. Those can only be changed by the user through the User Profile screen, which we will design in a few minutes.
The Done button activates the User Details screen again.
Wireframes for Signing In and Signing Up
Last, we are going to design the first screens related to the process of either signing in when users already have an account in the app, or signing up when they don’t have an account.
The “Sign In or Sign Up” Screen
This is the screen that allows a user to start the sign in process if she already has an account in the app. It also points the user to the Sign Up screen if she doesn’t have an account.
The Sign Up/User Profile Screen
This screen allows users to enter their personal details so they can create an account in the app. We will only capture name, email and password. A user’s email will be their username in the app.
This screen will also serve as the User Profile screen, allowing users to change their credentials after they have an account in the app. As we said earlier, only a user can change their personal details. Administrators will be limited to changing the user’s role and active/inactive status through the Edit User screen.
The Sing In Screen
Finally and as a reminder because we designed it in the first article of this series, the Sign In screen will look like this:
At this point we have finished the design of the app’s screens. We will very likely refactor these screens as we move forward with the implementation of the app, but the design that we currently have satisfies the requirements we listed in the first article of this series.
In the next article we will start to build the app using the requirements and GUI we just designed as our guide. Stay tuned, you don’t want to miss it.
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.