Skip to content

Aaron Yang | UI/UX Designer, User Researcher, Website Developer

Simple Booking

Print this Page

MY ROLE:

  • UI/UX Design
    • Wireframe
    • Low- and high-Fidelity Prototype
    • Interaction Design
    • Visual Design
  • Web App Development
    • System Design
    • Front-end Development

TIME:

August 2019 – Present

TECHNOLOGIES:

  • HTML/JavaScript/CSS
  • ReactJS
  • Firebase Realtime Database
  • Bootstrap

1. Introduction

This project started with a minimum viable product to reduce the spread of the virus during the COVID-19 pandemic. At the beginning, we wanted to find an existing product that met our initial requirements. However, we tried twelve existing products but didn’t find anything that met our needs. Therefore, I created Simple Booking. While creating the program, I developed an engineering mindset that was integrated into my design and teaching:

  • Thinking in systems
  • Designing in Constraints
  • Discovering the structure under the surface
  • Creating reusable modules

The first version has been available for students since 2019. In the past two years, it has been used by SoDAA students and faculty more than one thousand times. After two years of use, more needs were revealed from the user groups. So, in the second iteration of the project, my goal is to improve the functionalities and design to meet the growing needs.

This project was used as the case study in my UI/UX design course that demonstrated the user-centered design approach.

Basic Concepts

A. Login-Free

The users only need to enter their name and email address the first time. The next time they open the system with the same device, the system will skip the name and email input. This feature can be turned off for public devices.

B. Easy Access

The system provides flexible booking options to make bookings more accessible. Users can reserve a space with the following methods:

Open a URL on Web Browser

Scanning a QR code

Tap an NFC tag

C. Sustainability

The current system does not allow users to update the space information or create a new space. To make any changes, the developer needs to edit the database and code directly, which is not sustainable as a system. For the new version, I will add user interfaces for the space managers and the top-level administrators.

User Groups

My goal for this project is to build a management system that includes the front page, management dashboard, and system administration. So, the project has three user groups: end users, space managers, and system administrators.

End Users

  • schedule a facility with their NDSU email.
  • view their reservation history.
  • cancel a reservation.

Space Managers

  • set up training requirements
  • add end users to the list.
  • enable/disable the space
  • update the weekly schedule.
  • view the reservations of the facility.

System Administrators

  • create a new facility/space.
  • do everything that the space managers can.

I have finished the design for the front page of end users. In the next steps, I will complete the design and development for the space management and system administration.


2. User Research

Survey

To collect the user feedback on the old version and their expectations for the next version, an online survey was sent out to about one hundred students across three departments. As a result, fifteen completed responses were recorded.

Survey Responses, Click to view the full-size images.

Based on the responses to the survey, most users make schedules on computers. The participants also provided their comments on the open-ended questions. To find the use needs and the design requirements, I used an affinity diagram to categorize the topics.

Affinity Diagram

Affinity Diagram
Click to view the full-size images.

Value Proposition

Based on the categorized themes on the survey analysis, the following value proposition was created that lists the expected features for the system.

  1. Make a reservation
  2. Check space information and current status
  3. View reservation history
  4. Receive email notification
  5. View space announcement
  6. Add the reservation page to mobile phone home screen
  7. Scan a QR code to open the reservation page

3. Low-Fidelity Design

Sketching is my way of thinking. When the functionalities were confirmed, I started to explore elements and the interactions with a pen and paper. This helped me quickly produce the various solutions and document the design process.

simple booking ideation
Partial sketches during the design process

Digital Wireframes

From the sketches, I selected the ideas that best met the design requirements and started to build the digital wireframe with Adobe XD. In this step, few details were considered so that I could test and iterate the design rapidly.

4. High-Fidelity Design

After some iterations on the low-fidelity design, I started to think about more details of the interactions and visual design.

Interactive Prototype

If the prototype is no loaded, please go to https://xd.adobe.com/view/008f7a57-7e17-4405-b009-bd37a01da70c-55dc/?fullscreen&hints=off.

Visual Design

5. Reusable Design Components

The reusable design components, or a design system, can help a team quickly extend the project and keep a consistent design language. At the end of the design, I created the color scheme and the basic UI elements, such as cards, buttons, and navigation. The creation of the design components also made the development more manageable and maintainable.

6. Implementation

The system is being implemented with ReactJS, which is a UI-component-based framework. I have finished the major functionalities of the reservation page. I am applying visual design to the system. A demo project has been deployed on a web server. This is an incremental development. I will continue completing the manager and admin pages.

The development the new system

7. Future Work

Currently, Simple Booking has been proven to be successful by a small group that has about one hundred users in a design school. In the future, I plan to further optimize the system design and make Simple Booking a product that meets the needs of bigger user groups. The following tasks will be done:

  • Conduct marketing research and extend the user scenarios.
  • Create marketing positioning map and discover more benefit of Simple Booking over existing products
  • Complete the system documentation and user manual to ease the maintenance.

Interested in a demo?

Please use the following information to try the system:

email: [email protected] | username: Demo User

or use the following link:

simple-booking.pages.dev


Other Featured Projects

ADL 1-2-3 Device

A gamified system that saves young patients’ lives by finishing daily hygiene activities.

eFargo: Energy-Saving Game

An interactive game that helps reduce energy use to fight climate change.

SoDAA Alumni Map

An interactive map that shows the alumni network of NDSU School of Design, Architecture, and Art.

scroll to top