Introduction

This project is the redesign of the websites of the School of Design, Architecture, and Art and its three departments when the school was migrating the websites to a new CMS template. I created the visual design language for the new websites.

Exploration of the patterns

Try more random patterns.

Typography

Website Banners

Design for Social Media

Home Page Design

https://www.ndsu.edu/sodaa/

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!

Hi-Fi Prototype

Please try the prototyp:

Or open in a new window: https://xd.adobe.com/view/295fdd02-157f-4fc0-88ea-ac21254fb403-7c0c/?fullscreen.

Visual Design

Introduction

Medlist is a tool that helps medical caregivers track, manage their patients’ medication during the treatment.

The children with complex chronic conditions usually need to take dozens of different medications via multiple routes during the treatment. So it is quite possible to forget or make mistakes, which sometimes is dangers. A well-organized medication administration tool can help manage the medication easier and prevent medication errors. 

A Caregiver’s Missions on Medication:

• Reading the label and following the instructions for each medication
• Watching for side-effects, such as confusion or dizziness, and calling the doctor or home care nurse with any changes in the patient’s condition
• Reminding the patient to take the medications at the right time and in the right dose
• Help patients to take medication through different route, like oral, G-tube and subcutaneous.
• Add notes, and track patients’ conditions.

​

The Tasks of the Interaction

• Add medication
• Add notes (Note, Measurement)
• Store the medication information.
• Remind users to take the medication.
• Direct user to do certain tasks.
• Display the information: how to give medicine, name of the medication…

An Example of Medication List

The staff of CCHMC provided us with a medication list for a young chronic patient. The list includes the name, taking time, frequency and other instructions of each medication. There are nine medicines on the list with three different given routes: oral, gastrostomy tube(G-tube) and subcutaneous.

Medications Categorized by the Routes of Administration

Ideation

The following diagram shows the main features of the concept.

Wireframe

Micro interaction and Animation

High-Fidelity Prototype

http://dh8caz.axshare.com/#c=2

This project is part of my thesis, “A Meal Service Design and Marketing Strategy Based on Cooperation and Persuasion Theories,” for the Master of Design degree at University of Cincinnati. For more information, please view the thesis poster: /wp-content/uploads/2023/01/CoCook-poster.pdf.

CoCook is a meal kit service for college students that helps them save time on cooking with an affordable solution.

Prototype: https://cm2w2e.axshare.com/home.html

1. Introduction

This idea came from my personal experience as a graduate student who lived in an apartment with a roommate three years ago. With limited support, I had to cook most of my meals. But, since I took six courses in a semester, I did not have enough time to cook every day. A good solution is to make a big meal during the weekend and eat for several days. As a result, most of my lunches and dinners were not fresh. I started thinking other students might also have the same problems. Maybe, I could solve this problem by design. So, I conducted a survey among some college students and got some feedback. Here is the summary about their meals:

For many students:

• Dining out is expensive.
• They don’t have too much time to cook.
• Many of them are not good at cooking.
• Their meals lack variety.

2. Research

By doing online research, I arrived at a list of solutions for meals. Then I put them into a marketing positioning map with the matrix of expense and effort.

Marketing Positioning Map

3. Proposed Solution

After research, I realized that meal kit service and cooking coop might be the potential solution.

Meal Kit Services

During 2016 to 2018, meal kit services were popular. You can order meals online. Instead of sending you the pre-cooled meals, the service will deliver the prepared materials and the cooking instructions. Then the users cook with the received materials, following the instruction.  According to the introduction on their website, anyone could make delicious meals for the family in forty minutes. The cost is lower than dining out.

I tried one of the popular meal kit services with a friend. Here is how we felt. 

Cooking Coop

I also found some articles describing a collaborative way of cooking, cooking coop. In that way, people or families banded together, and each of them takes turns to cook for the group.

The combination of the two might be a workable solution for my problems. The following is my proposal. I call it “CoCook.”

1. A group of students order meal plans on CoCook online store.
2. They receive the prepared materials and cooking instructions from CoCook;
3. Each member takes a turn to make the CoCook meals for the group.

Pilot Testing

Following this approach, I invited two friends to join my CoCook group and started a test. I prepared three meals. Each meal has three serves. According to our schedules, each of the group members prepared lunches in three days with the meal kits I prepared. To evaluate the experience of preparing and eating the meals, I conducted a follow-up survey. 

To evaluate the experience of preparing and eating the meals, I conducted a follow-up survey. 

As shown in following diagram (1= bad, 5 = good), the score of “difficulty”, “time benefit” and “enjoyment” were increased. So, compared to cooking alone, CoCook makes cooking easier, helps user save a lot of time, and brings more enjoyment.

4. User Scenarios

To represent user models and service usage scenarios, I created three personas, a story board, and a customer journey map.

Personas

A persona is a typical representation of an ideal user of a product. To know my users better, I interviewed ten college students. After analyzing their personalities and daily routines, I generated one primary persona and two secondary personas. 

Storyboard

Customer Journey Map

The customer journey map demonstrates the users’ behavior and feelings on each stage of their relationship with CoCook. Then, I found the design opportunities for all the stages, which were translated into product design requirements later.

5. Wireframing

For the design process, I followed an event-driven approach, which was inspired by the same concept in software engineering. 

Major User Tasks

According to the customer journey map, I found four major tasks that the users need to do in this service:

• Make a group
• Create an account
• Order meals
• Mange cooking

Purchase Flows

To meet each design requirement, following user flows were created:

Information Architecture

Information architecture represents the top-level structure of a website. It shows the map of the web navigation and who should a user find certain information easily.

Wireframes

Low Fidelity Prototype and Usability Testing

To test the proposed system, a low-fidelity prototype was created based on the wireframes. Five participants were invited to the graduate studio to complete six tasks on the prototype, which includes:

1. View the information on the home page
2. Login to the platform and view the available meals
3. Add three meals to the order
4. Add two members to the cooking group
5. Finish the order and finish payment
6. View group information

The testing process of each participant was recorded for further analysis. Most participants can finish all the tasks without difficulty. Based on their feedback, I refined the user interface design and started to create the high-fidelity design.

6. Visual Design

Thank you!