UCSB Website
It is a website redesign project for the Instructional Development Department of UC Santa Barbara, which transforms the website to make it serve teaching assistants, faculty and students better.
My Contributions
In the research phase, I worked on the UX research with a focus on students and International TAs, and delivered key personas that informed the design decisions.
In the design and building phase, I contributed to optimize the flow design and information architecture in response to the user pain points. I also optimized the interface design and enriched the media to make the content more appealing to users.
Outcomes
The website was successfully launched at the end of May 2022 and has been serving faculty, TAs and students across UC Santa Barbara since then. It received positive feedback from the director and employees of the department as well as the users. Now it has the potential to benefit around 27,000 of students and faculty across UCSB.
Context
Instructional Development(ID) is a one-stop shop that provides help on almost every aspect of teaching and learning. The target users are teaching assistants, faculty and students. It provides, for example, workshops for teaching assistants who want to learn how to teach better, helps instructors to design their course, as well as provides classroom and event services including the reservation of space and technical support.
However, a problem they were facing was that their website did not look good and it was more a site introducing ID and its achievement rather than for service, which was not aligned with their mission, so the project manager gave me the initial prompt of redesigning the website.
INITIAL PROMPT
Redesign the Instructional Development website to make it serve people better.
DISCOVERY
13 Interviews & Think Aloud: Length of Time & Unappealing UI Troubled TAs & Students
Because the initial prompt was broad and ambiguous, so I started to do user research to understand the problem. I conducted role play, think-aloud protocol, and semi-constructed interviews. I interviewed 5 TAs and 8 students. Then, with all the data collected, the team came together to integrate and analyze the data with affinity mapping. The result was summarized through personas and we found some pain points that really stood out.
Persona & Journey Map
Pain Points & Product Requirements
Through the analysis with personas and journey maps, we found that the two major factors that caused frustrating and tiring experience of using the old ID website were the length of time and unappealing interface.
Through think-aloud protocol, I broke the two major pain points down to more detailed pain points and came up with product requirements for redesigning the website.
DEFINE
How might we reduce the time for locating the target resource on the Instructional Development website as well as make it more appealing to faculty, TAs and students?
IDEATION & PROTOTYPING
Aligned with The Mental Model
One thing that lengthened the time it took to navigate the website was the failure of aligning with the mental model of the users. As described in the personas, besides the ID website, our target users browse other UCSB websites a lot and they got used to the structure of these websites, so their mental model was more aligned with the structure of other UCSB websites. All of the participants of our user research mentioned they “felt lost” immediately when they got onto the ID website and did not know where to start because it looked nothing like other UCSB websites. Therefore, I proposed to change the structure of the website to be the same as other UCSB websites - that is, having quick links and search tool on the upper right, and entrances to each major sections at the main navigation bar.
Optimized Information Architecture & User Flow
Through thinking aloud testing and role play, I found one important reason why it took a long time for users to get their job done on the website was because it took so many steps. For example, if they wanted to learn about TA workshops and register for it, which was the most common job to be done, they had to take at least 9 actions to get it done, not to mention the name of the entrance - “consultation” - was not self explanatory at all.
Version 1.1
I first referred to many websites of other school and companies to come up with the first solution. I ideated to have “About | Services | News | Events” on the main navigation bar, but this route was still long and there were many subsections under “Services”. The director of the department also gave a feedback that “News” and “Events” could be moved under about because there was no much news and events to be featured for this department.
Version 1.2
Another version I ideated was to set up entrances for each of our three main target users. However, as I tested it with some users, I soon realized it was problematic because the services should not be assigned to a certain group of users. A professor, for example, might also want to request support for events even if it’s not common.
Version 2.1
With the feedback on the previous versions, I ideated the next version that listed all the main services provided at the main navigation bar. The team and department liked this proposal, and the only feedback was that “About” could be moved to the quick links to leave more room for the services rather than the introduction of the department.
Final Version
The routes of going from home page to resource pages were cut short by around 30%. With the quick links on the upper right and links in pages, there were more diverse routes to get to a page. The names of the links were more self explanatory.
Embedded Forms for Easy Support
One step that greatly lengthened the time for users to get their job done was that they had to click a link and go to another website or have to find the website themselves in order to fill a form to register for events or request support. I realized that if we could this problem could be solved if we found a way to allow them to fill the form in the website so that they did not need to move to any other place.
I communicated this goal with the programmer and collaborated to work on the front end and back end to see if it was possible. At the end, it worked, and so users could see the most up-to-date information about workshops, availability of equipments, as well as filled the form in the website. Besides, we added a “Help” button so that users could have live chat or send quick messages to the department if they met any problems.
Accessible & Appealing Interface
Matching UCSB Branding Guidelines
The design system was fully aligned with UCSB branding guidelines, which not only showed ID’s identity of being a department in the UCSB system, but also added more dynamics to the visual by avoiding only using green colors as the old website.
Different Colors Distinguishing Different Sections
In the old website, the background of a page was in one color and there was no clear signs indicating different sections. This caused confusion when users tried to read and understand the content.
Therefore, I decided to use background of different colors to distinguish major sections. At the same time, all the contrast between text and background were checked with the WCAG AAA standard to ensure the accessibility.
Images & Videos Accompanying The Text
The old website hardly had any images and videos that illustrated the text content. Many of the participants of our research mentioned the content looked “very dry” and was not attractive to them. This made the experience browsing through the website very tiring.
Therefore, I and my fellow designer made some videos and found images to go with the text, which made the reading experience more interesting.
Reflection
In this project, I find it important to frame a broad and ambiguous prompt into a problem statement that can be taken actions upon. At the same time, I realize such UI/UX design project is limited by the system we use to build the final product at the end. In this particular case, we used the content management system(CMS) of UCSB, which had limited features and thus did not allow much freedom on the design of the interface. If I have more time, I wish I could work with engineers to improve the CMS to allow more subtle adjustment and more engaging features to be built in the website.