IUP rebrand, website and application portal

Background

The Inter-University Program for Chinese Language Studies (IUP) is the premier Chinese language program sponsored by twelve elite North American universities with the mission of raising their students’ Chinese language proficiency to a level at which they can function independently in professional or academic careers. Founded in 1963, Stanford University currently serves as IUP’s coordinator. They came to us because neither the branding nor website had been touched for nearly two decades.

The challenge

From a visual and branding aspect the challenge was to maintain its reputation, authenticity and familiarity through the refresh. IUP is chosen for its reputation not its flash. From a UX and design perspective the sheer amount of content was the biggest challenge.

Goals

1. Improve the website user experience and look and feel to give IUP Chinese Center an elite digital presence that aligns with the high quality programs provided
2. Create an application portal that provides a positive UX for both the applicants and the CMS administrators
3. Improve the website conversions and qualified traffic

User profiles

The target audience was defined by the client. Based on IUP staff interviews and Google analytics, user profiles were created for:

• Potential IUP students
• Current IUP students
• IUP alumni
• IUP staff
• University advisors/ Chinese teachers
• Potential students’ parents

User research

Due to timeline and budget constraints, I conducted the user research for rebranding, website redesign and application portal all at once. I conducted initial 1-on-1 interviews with key staff members, alumni, and prospective students. I then held a focus group with current students in the program.

Visual identity design

Other than a logo, IUP had not done any significant branding work, but with decades of history and a reputable name, we recognized that a brand image already intrinsically existed. The user research was vital in revealing this.  From the user research, we understood the importance of embracing the historical background and the future opportunity.

I created a brief based on the user research and worked with my colleague (logo & brand designer) to simplify the logo and create a visual identity for print and web use. The history of the program and its location (Beijing, China, and Tsinghua University) were embodied with the color palette- think Summer Palace architecture and ink and paper textures. Modern patterns, icons, and color applications portray IUP’s constant evolving growth and impact on its students’ futures. A balance of past and future. Bright environmental photos that focus on student life in and out of the classroom help bring the IUP experience to life. The visual treatment was chosen after extensive industry-related research. I created a photoshoot shot list and directed the photoshoot, on location.

User research portrayed in the design

Throughout the wireframe and web design the user research was kept at the forefront.

“Sophisticated but not fancy.”

The web design aesthetic was driven by simplicity, integrating subtle yet meaningful details such as relevant Chinese “chengyu” (idioms), a menu button that resembles the grids on the paper used to practice character writing and integrated logo marks (which are the shape of a chop stamp).

“Old but not outdated.”

IUP’s prestigious reputation and history is exemplified through the design culmination of old and modern China and through the alumni profiles staff quotes, showcasing IUP’s 55 years of history while simultaneously forward-moving drive of preparing its students for a future relating to China.

“Intellectually curious but not condescending.”

We worked with IUP to curate a photoshoot of live classes, activities, meals and the surrounding Tsinghua campus and Wudaokou neighborhood to bring to life the authentic everyday, and letting this friendly yet intensely focused atmosphere speak for itself.

“Not easygoing, but that’s ok everyone still likes him.”

Every interviewee emphasized, “Don’t be afraid to put a large amount of information, we want to know EVERYTHING.” -and a large amount there is. Ensuring that the information was readable and accessible challenged us to explore new interactions, navigation and ways of strategically breaking up the content to make it easily digestible. Which is a nice segue into the next section, “Information Architecture.”

Information Architecture

The IUP website has a lot of information. Our user research showed that this is a positive, but that there was great opportunity for presenting the information more precisely in both language and design. I worked with the client to reduce redundancy and make the language more concise. I worked with the web designer to create consistent submenus and inner-page navigational elements.

Submenus

We chose to create multi-layered submenus through the UI rather than a multi-tiered hamburger menu. This decision was made based on the UX research in walkthroughs, information discovery and goal achievement. Users often did not now the exact information they were seeking, but rather broader categories. By providing them information breakdowns visually, they were able to discover information more naturally. For those looking for more specific information, the inner pages were clearly accessible from the “landing” pages, giving access within 2-3 clicks maximum.

Content treatment and inner page navigation

Each page of the IUP website had a lot of written content. In order for this content to be easily digestible for the user, we spent a lot of time creating custom designs for specific content types. The challenge here was to not over-customize and thus create a static website that was difficult to edit, but instead create many varieties of content blocks that could be applied for similar content types. We created a detailed Design System Guide and trained the client how to apply content blocks with consistency and meaning.

One of my favorite elements (seen below) is the ability to “filter by letter” on the teacher page. Because Chinese family names don’t utilize the whole Latin alphabet, we were able to lay out all necessary letters in a horizontal navigation bar. The user can view all available letters and select one to find the teacher they are seeking.

Application portal

IUP’s custom application portal required many outputs and inputs and required that many user profiles be taken into consideration. We not only needed to create a user friendly frontend, but also a backend that was user friendly for the various types of admins that need to use it during each students application process. We had to take into account forms, letters of recommendation, payments, official transcripts and a booking system for students/ teachers to schedule video interviews.

User flows

Based on the user research, I created user flows for multiple scenarios for both the frontend applicant user and for the administrative CMS users. These user flows went through multiple ideations as I tested them through walkthroughs, and listened to the “unexpected” scenarios that the staff encountered each application season.

Notifications

Once the user flow of the frontend and CMS was mapped, the notification layer was added. This flow was developed to automate the notifications both for the applicant and the admin. The notifications (delivered through email) were triggered upon certain completion points, such as application submission with email confirmation of receipt to applicant and notification of new application to review to admin.

Wireframe

I tested various university and study abroad application portals and forms in lead-up to designing the IUP application portal. The first wireframe iteration was closely modeled to that of a university, but it was quickly realized that this was overly complex for the needs of IUP’s application process. The wireframe for the dashboard was redesigned to give the applicant a quick overview of their application status, visualized by a progress bar at top and a checklist style main body.

Frontend: Information presented as needed

Within the main “checklist,” the applicant can expand each step to find additional details. It was important to emphasize the steps that were already completed and give applicant clear status indicators for all steps upon landing. This put the active choice of click in the users’ hands- dependent on what information they were seeking in the moment- not driven by looking at the status of each step. Instead of each section taking the user to another page, this self-contained checklist simplified the process and gave clear indication of the status.

Making forms less painful

As with most applications, at least one form is necessary. We performed extensive research in form design. With a clear progression indicator at top, short steps- for the satisfaction of completion, visible choices rather than dropdown menus, and buildable content blocks to add/remove multiple items we worked to make the form as painless as possible, maybe even a little fun?

Backend: Give full control, automate where possible

This CMS replaced a completely manual email-based application process for IUP. We worked to automate where possible, automatically posting submission dates and populating information that the applicant submitted such as education, contact info, etc to avoid duplicated. It was important to the client to have full control. We created a CMS in WordPress that creates profiles for each applicant, and lays out the information based on the way the admin needs to view it rather than in the same steps that the applicant fills it out. The admin can export the application and easily print it if necessary. The super admin has full editing power, while other members of the application process have assigned roles such as language interviewer that allows them to edit calendar availability, view applicants information and input interview score, but not edit the applicants profile.

Conclusion and further opportunity for refinement

Beta testing was crucial to work out the user flow. As many theoretical walkthroughs that were conducted during the design and development, nothing compares to having fresh eyes and real users. If given the opportunity, I would like to conduct further eye-tracking, unmoderated recording and a focus group similar to the pre-production with the students that used the website and application portal. One of my biggest regrets is the menu of the website. It is conceptually very cool, but in practice it is cumbersome to use. I am most proud of the information architecture and UX of the instructor, calendar and application portal.