top of page
MY ROLE
This is my freelance project for Yang Fan Academy Inc, an education company based in San Francisco. The aim was to design and develop their course enrollment system and official site.
Teamed up with 1 UI Developer and 1 Back-end Engineer, I was mainly responsible for interaction design, visual design, branding. I also took part in front-end development and communication with client,
ABOUT THIS PROJECT
KICK-OFF MEETING
Understand Our Objectives
We met with the founder of Yang Fan Academy Inc., from which we knew that Yang Fan offers daily Chinese or Spanish learning to school-aged children from Kindergarten to Eighth Grade. However, students' parents can only use Survey Monkey for course registration, which is both inefficient and inconvenient. Our objectives were to design and develop a course enrollment system with a streamlined process and polished interfaces.
Current course registration form based on Survey Monkey
PART 1: ENROLLMENT SYSTEM
EVALUATION & ANALYSIS
We analyzed current course offering as well as consulted our clients to get a holistic understanding of the course structure and users' frustrations. Basically, users will have a combination of basic camp and elective courses. Elective courses have flexible schdules, which provides flexbility to students. And the attendance can also be very flexible week to week.
^ Sample Course List
USER STORIES
Then we came up with user stories 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
Based on user stories, I was able to structure the holistic user task flow to illustrate the course enroll process. User task flow really helped the whole team think through design before development. We also got this flow back to stakeholders in order to gather valuable feedbacks.
THE CHALLENGE
Collaboration with Developers and Clients
One of the biggest challenge in the project was collaboration among teammates and clients. We were in three different cities of different time zones. Therefore, efficient and effective remote communcation became a big challenge. Also, working backwards 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 and our clients 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 updates about progress, roadblock, and so forth.
^ Github collaboration and client communication
WIREFRAMES
My next step was to visualize the user flow with wireframes. We put major effort in the key interactions and representation of information. Earlier decisions will help the developer predict the upcoming workload, and also provided insights for what front-end framework would be used to build the user interface.
DESIGN ITERATIONS
1. Get Started
Sign Up: By filling out required contact information and student information, users can sign up for the system. From our client we knew that one user will register courses for multiple students, we also added Add Student/ Remove Student button in this process.
Log In & Get Started: Using account created, use can log in to the system. In the Get Started Section, user will be able to select program, child name, and incoming grade. Only courses that are applicable to the child's grade will show to the users, so that there won't be any confusion of whether they are eligible for certain courses.
DESIGN ITERATIONS
2. Flexible Attendance: Verify Through Tests
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. And each week, they can choose different attendance, for example, 5 Full Days for Week 1, then 4 Full Days for Week 2. The flexibility that Yang Fan provides to students, on the other hand, added more difficulties for us when we design the workflow. We explored different approaches, trying to make the workflow simple, and easy to understand.
Iteration 1: Choose Week 1 attendance type (e.g. 4 Full Days) > Choose 4 days for Week 1 > Choose to apply to which weeks > Continue choosing attendance for other weeks.
As we tested the solution with basic HTML/ CSS prototypes with 2 users, we found that
1. Users wanted more information about course schedules and how different attendance types will affect their course enrollment.
2. It was not intuit for users to follow the guidance and figure out what they need to do.
Iteration 2: Based on user feedbacks, we made following changes and it turned out to have better user perfermance:
1. Add introduction of different types of attendance
2. The options of Mon. - Fri. will only show up near the attendance options after user choose one.
3. Changed the wording to "I want to choose (attendance) for the following weeks" to emphasize on the relation between attendance and each week.
DESIGN ITERATIONS
3. Flexible Elective Courses: Understand Technical Constraints
Due to the variety and flexibility of elective courses, users had to select electives week by week. To streamline the process, we thought about different approaches, and showed early wireframes to our back-end developer to evaluate the technical feasibility.
Iteration 1: In this solution, we categorized options by courses, becuase it fitted people's mental model of course selection better. So the process would be like:
Elective 1: Week 1-10 > Elective 2: Week 1-10
While communicating with back-end developers, we found flaws in it - it's not the best way to detect time conflict from the back-end, as well as once there is a time conflict, the reschedule process for users will be inconvenient.
Iteration 2: In this solution, we categorized options by weeks, so the process would be like:
Week 1: Elective 1-4 > Week 2: Elective 1-4...
This way even if there is a time conflict, it would be easier for the back-end to detect, and more convenient for users to make changes within this week, without messing up with other weeks schedule.
VISUAL DESIGN
Following Material Design Guidelines
To try out Material Design, also to keep the interface simple and clean, I adopted Material Design for our UI design, as I was the priamry UI designer in the team. I also paid attention to align the visual design with Yang Fan's branding, as well as showed them UI samples to ask for feedbacks.
FINAL DESIGN
FINAL DESIGN
FINAL DESIGN
PART 2: OFFICIAL SITE
KICK-OFF MEETING
Understand the design goals
We met with the founder of Yang Fan Academy Inc., from which we knew the main visitors of its official websites and course enrollment system are students' parents. And the goals of the redesign are:
Effective Navigation: Allow users to efficiently find the right information.
User-friendly Interface: Simplify the text-heavy interface.
Improve Branding: Communicate Yang Fan's brand image through its website.
EVALUATION
Identify Problems with Current Website
We reviewed current website design, identified areas for improvement.
-
Lack of Call to Action trigger: the main thing we want to direct users to do is to know about the programs Yang Fan offers, and register for it.
-
Poor information achitecture, the most important message - who we are, what we do, testimonials did not stand out, navigation are fragmented.
-
Design is not visually appealing.
NEW SITEMAP
Redesigned Homepage
BRANDING
Yang Fan Logo Redesign
Our client wanted a new look on the logo since the original one is outdated in look, and not eye-attracting. In charge of the visual design, I kept the elements of a sailing and a book, which matches the meaning of "Yang Fan" in Chinese. Different shades of blue were used to provide a clean and modern feel.
Thanks for watching!
Enjoyed it? Next: 1Password Generator Redesign
bottom of page