Project Scope:
User research, user profiles, VI creation, Wireframe, Responsive website design, Custom application portal UX, design and development, Technical specifications, WordPress-based development
User research, user profiles, VI creation, Wireframe, Responsive website design, Custom application portal UX, design and development, Technical specifications, WordPress-based development
Project director/ UX researcher/UX designer, Art director, Brand designer, Web designer, Technical director, Full stack developer
Project director, UX researcher, UX designer
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.
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.
The target audience was defined by the client. Based on IUP staff interviews and Google analytics, user profiles were created for:
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.
I held the “current IUP student” focus group with highly-educated, 20-something-year-olds. It began with them obligatorily humoring the exercise, but as we continued, the shift was palpable as they saw the purpose, and excitedly and conscientiously began discussing and debating until satisfied that I wholly understood IUP.
I asked many open-ended questions about why they chose IUP, how they found out about it, and asked them to recall specific points of contact with IUP before they applied.
I then asked the students to visualize and draw their journey when applying, asking them to make note of specific content they visited and to point out pain points and positives. We then discussed these journeys and finished this section with them listing what they wished they had known.
Even though IUP had not spent significant time on branding, the brand had been developed simply through years of existing. I wanted to discover the internal feeling the focus group had about the brand, both in look and feel. We did a round of quick “this or that” ie. square or round, loud or quiet, etc. to discover some of the more abstract perceptions. The focus group concluded with the participants draw a personification of IUP, giving it personality, look and clothing, and behaviors.
Though it would have been better if the budget and timeline allowed for further replication and expanded research participants, but even so, a lot was learned about the perception of the brand and what was expected in the interactions with the website and application process. Through the interviews and focus group, clear patterns emerged that were vital in creating the design brief and were used extensively when making design, UX, and development decisions throughout the project.
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.
Throughout the wireframe and web design the user research was kept at the forefront.
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).
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.
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.
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.”
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.
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.
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.
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.
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.
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.
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.
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.
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?
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.
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.
“I worked with Dené for almost a full year while she and the team at Flow Asia were working on the website for the language program I was directing. As Dené was the project manager for our website, we had many in person and online meetings, so I feel very qualified to assess her capabilities in project direction, user research, and translating my organization’s needs into website design. She was an excellent, effective, and fun colleague to work with. This was my first time participating in website design and the IUP website hadn’t need redesigned in at least a decade, so she had her work cut out for her. I was very impressed by how thorough she was researching our language program, learning about our potential applicants, current students, and alumni, in order to help design both the appearance and UX of the website. It was really exciting seeing how our program priorities and website needs turned into the website. Dené made this a very enjoyable experience. I’m proud of the website she and Flow Asia produced and she should be too.”
-Brent Haas, Resident Director IUP