Yang Fan Enroll

Yang Fan, Inc is an educational company in San Francisco Bay Area, which provides academic programs beyond regular academic programs for school-aged children from Kindergarten to Eighth Grade. Children from approximately 400 families every year are enrolled in their programs.

In a small team of 2 designers and 1 developer, I led the design efforts in building an interactive course enrollment system from meeting with stakeholders about their expectation to the final presentation of DEMO. I was responsible for research, interaction design, UI design and front-end development for DEMO application.

Here is the DEMO application I made via ReactJS.

The Problem

Since Yang Fan allow students to attend the program very flexibly and offer various courses for different grades, their desperate need of online enrollment system cannot be satisfied by existing enrollment solution. What's worse, the lack of intelligent enrollment system resulted in a great amount of extra time consuming for students and Yang Fan staff. That was why we got contacted by the president of Yang Fan to design and develop web-based enrollment system tailored to characteristics of the company.

The Challenge

The first challenge in the project was collaboration among the teammates. All three of us were in three different cities in different time zones. Therefore, efficient and effective remote communication became a big issue. Also, working backward from a fixed launch date meant that design was subsumed into an engineering-driven process. I spent a lot of effort on getting the developer involved in the design process to save a lot of back-and-forth in early back-end development, and embracing the engineering world like using Github to get first-hand updated about progress, roadblock, and so forth.

The second challenge was to through the little experience about web application development and low budget that was available. Actually, none of us had previous experience of developing the web application. For myself, I self-learned Facebook's javascript library ReactJS for building the user interface. Given low budget, our research will be based on any source that we could gather to deliver a great product.

Research

We tried to stay focused on the research, by making it short and effective. The primary goal of the research is to define an intuitive user flow. It was more urgent than usual since the developer would design the database based on the user flow. We gathered as much as data as possible from kick-off meaning and email communication with stakeholders as well as evaluation for current resgistration form in Survey Monkey. What we want to know was:

  • What is the current course structure?
  • What part of enrollment current frustrates users?

Visualizing the findings from our research facilitated the communication among teammates. Here's an example of how I visualized the course structure of summer camp.

User STORY

User stories were part of our lean approach that helped us to shift focus from writing about requirements to talking about them. They included a sentence or two, and more importantly, series of conversations about the desired functionality.

User Task Flow

User task flow helped the whole team think through design before development. We also got this flow back to stakeholders to gather valuable feedbacks.

Wireframe

My next step was to visualize the user flow. We focused on the main task flow since the most content would be displayed in this part. In this way, we could put more effort in the key interactions and representation of information. Earlier decisions will help the developer predict the upcoming work more efficiently, and also provided insights into what front-end framework would be used to build the user interface.

Key Decision point

Select Electives Weekly

The area that was most debated is about how users would select and attend their elective courses and enrichment activities.

In the early concept, we categorized options by courses, then let users make selection for each week, becuase we assumed that it should agree with people's mental model of course selection. However, we decided to change this flow because:

  • After communicating with the developer, we found that time conflict detection algorithm would be much more complex when the result of selection will need to be compared with all previous selections for the whole semester.
  • After testing the static HTML prototype, extra frustration was observed when users needed to fix their selection in the previous course in response to the time conflict.

In the new solution, we categorized options by weeks, so the process would be like: Week 1: Elective 1-4 > Week 2: Elective 1-4. The feedback for time conflict would be given after users finished selection for one week.

Key Interactions

Attendance Settings

The focus of interaction design was around how users will set their attendance. Users have 5 options for attendance each week: 5 Full days, 4 Full Days, 3 Full Days, 5 Mornings, and 5 Afternoons for each week. In original surveymonkey system, users needed to set attendence week by week. We explored concepts to simiplify this step.

Since it's a summer camp and the regislation would be normally one month before the beginning of summer camp, we made assumptions that attendance would be generally the same for all summer weeks. Therefore, our primary concept was to create an attendance pattern, and copy this attendance type to other weeks.

As we tested the solution with basic HTML/ CSS prototypes with 2 users, we found that

  • Users wanted more information about different attendance types.
  • The options of Mon. - Fri. redundant when they chose 5 full days or 5 mornings/ afternoons.
  • It was not intuitive for users to follow the guidance and figure out what they need to do.

Based on user feedbacks, we made following changes and it turned out to bring better user performance:

  • Add introduction of different types of attendance, and put options of Mon. - Fri. below the selected type of attendance.
  • The options of Mon. - Fri. will be automatically checked.
  • Add steps for different actions to guide users.
Front-end Development

Using Facebook React.JS

The next step would be to select front-end framework in order to implement the design. This step was put before creating high-fidelity mock-up and visual design because I want to save more time for learning the framework so that the constraint for design execution would less. Early consideration was given to AngularJS and Node.JS due to their long-term popularity. However, after analysis, we chose facebook's Javascript Library ReactJS because:

  • It's one-way interactive data flow support all data binding need in Yang Fan Enroll.
  • Its concept of reusable components would make the implementation much easier and efficient.
  • Its concept of virtual DOM would make it simple to translate the static HTML into Dynamic.

The Design

Yang Fan is a company dedicating to provide high-quality education service, and the meaning of “Yang Fan” in Chinese is sailing. With that said, the design should be simple, clear, clean, lightweight, and engaging, and matches the vision of the company. In the new logo, different shades of blue were used to provide a clean and modern feel.