Write the html code of a web page with a large title saying “My Design Statement” in the header. Also, the header should use this image as the background: “/…/2022/12/MG_5529-copy-930×620.jpg.” The header is 600px in height and has no margins. The large title is white and in the middle of the header.

Then add a new section called “design-statemen”. The width of this section should be 90% and not wider than 900px. In the “design-statement” section, write a designer’s personal statement about his mission on graphic design and teaching. The block of “design-statement” section should be center-aligned, and the text inside the block should be left-aligned. Make this easy to read. For the font family of the page, I want to use Montserrat.

And this is what it created:

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.

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.

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

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.

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.

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.

1. Introduction

eFargo is an interactive game for public schools to help reduce carbon emissions and energy use to fight climate change. The students learn about energy consumption and complete awarded tasks to decrease energy waste in practice. My responsibility in this project was advising overall user experience, and user interface design, as well as prototype development with JavaScript and Unity. The project received the R+D Award offered by Architect Magazine, a top architecture design journal in the U.S. As the representative of NDSU, I was invited to the ceremony event at the Architect Live conference in Washington, D.C.

2. Design Advising

During the COVID-19 pandemic, the team worked together remotely. We hold weekly meetings at Zoom to get design updates and give feedback. In addition to real-time communications, we also used collaboration tools like Miro board and Google Drive to share ideas and files.

Game UI Design

A senior architecture student joined us as the UI designer. We worked closely on the design and communicated frequently.

Examples of game UI, designed by Java Nyamjav, advised by Aaron Yang

Interactive Prototype

To test our design and communicate the design with the developer, we created an interactive prototype in Adobe XD. The prototype simulates the animation and interactions on game onboarding, space construction, challenge, and rewarding. I instructed the designer on the prototype making and software use. For key interactions, I recorded video demos to help her understand better. She learned very fast and did an excellent job.

3. Game Development

Considering the future maintenance and expending of the game, we selected Unity as the game engine because it is the most popular software and well documented. I helped the team recruit a game developer from the Department of Computer Science at NDSU. After interviewing five candidates, we accepted a senior student, Erick Bickler, who later joined Amazon AWS group. I designed the higher-level system and supervised his work by viewing the code and providing feedback.

4. Future Work

Currently, a small-scale testing has been finished with the hi-fi prototype, and the game in Unity is still under development. In the future, we will expand this game from a fixed design to a customizable platform that a teacher can configure the game challenges and awards for the students, which will benefit more schools.

Map UI Design

Responsive Design

User Profile

Related Projects

Thank you!

The following projects were my experiments and practices on interactive media. Please click on the images to try them in a new tab.

AI created webpage

Read the Story

Other Coding Projects

For more coding projects, please visit https://github.com/hua3467.

Background

At the beginning of COVID-19 pandemic, NDSU School of Design, Architecture, and Art (SoDAA) decided to manage and monitor space/facility usage with a scheduling system for the new semester, which means the students need to schedule a space online before they use it. At the beginning, we just wanted to find an existing product that meets our initial requirements.

1. The user can select a space from a list of 29 and make a reservation.
2. The user can delete their reservations.
3. The user should be able to select a seat number for the reservation.
4. All the spaces and facilities can be imported to the system easily.

However, we tried 20 existing tools but didn’t find one that is easy to set up for our scenario. Therefore, we decided to create our own system.

Minimum Viable Product (MVP)

After analyzing the user flow of the booking process, I decided to create our own system. But the time is limited. I only have a week to create something usable. Several days later, I showed a minimum viable product (MVP) to the department head, Michael. It was a simple form with the basic functions. The students can only reserve a place by entering their names, selecting a studio, picking a date and time. The only way to reschedule and cancel is to update the database by myself. But Michael was excited because at least we could have something to use be the beginning of the semester, and it was highly customized for the school.

Design 1.0

After deploying the MVP, the school had a usable system to monitor the facilities and limit the number of people in a space. So, I got more time to design the user interface and optimize user experience. Four weeks later, a full system for the students was online. In this version, all the requirements were met. In addition, I set up an SMTP server to send the notifications to the user and created a cancellation function.

Currently, a newer version is under development. Please read the story here or at the following link: /simple-booking/.

Thank you!