CTAT Web Redesign
Project Description
CTAT is a tool designed and developed by researchers from Carnegie Mellon University. It has been in use for over 15 years, providing shortcuts for authors to generate K-12 academic problem sets and exercises. As Professor Aleven’s lab started to envision the future of cognitive tools, our team began to explore the possibility of launching a new, completely online version of CTAT. The current version of CTAT requires a certain level of expertise in coding and debugging which are skills not everyone possesses.
How can we make the CTAT software available as a web-based tool for non-programmers? As a designer and HCI researcher, my responsibility is to reimagine the layout of CTAT’s interfaces without sacrificing the efficiency and functionality of the tool.
Role
UX Designer
Design Researcher
HCI Research Assistant
Timeline
Summer 2022
12 weeks
Problem Space
As I begin my study, issues with the old interface of the CTAT tool which I picked up include:
- unorganized default setting
- lack of colour contrast
- lack of structure to the graph
As a designer and HCI researcher, my responsibility is to reimagine the layout of CTAT’s interfaces without sacrificing efficiency and functionality of the tool.
.gif)
Solution Overview
By the end of my research internship, my team and I were able to propose several design changes including a new graph organization system, improved dropdown menu options, and a style sheet that can be used for future design changes.
Research
My process began by analyzing the existing structure of the CTAT application. To create an authoring tutor, the old CTAT tool required the user to go through several steps, using several tools and the process can be rather painful. While the new tool significantly reduced the number of steps required to develop a tutor, the combination of functionalities made the system interface very hard to navigate and the user flow confusing to remember.
I contacted 6 CTAT users and conducted thinkaloud user testing sessions with them. These 6 users all came from different backgrounds, two were high school teachers, three were students at CMU, and the last was an exchange scholar from Switzerland, and have different levels of experiences using CTAT. I asked my interviewees to describe to me their process and experience of using the CTAT tool.
Data Analysis
Based on the data I gathered from the interviews I was then able to create this persona, Laura, who is a master's student studying educational technology and is eager to use CTAT to create problem sets for elementary students to work on. Her user journey represents common problems a CTAT user would face.
Following her journey, it’s obvious that the usability problem with CTAT is there because of a gulf between the user’s and the system designer’s mental models. In other words, at the engagement stage, different factors such as lack of direction, need for specialized commands, and confusing UI are all making it hard for users to manipulate the system at their will.
Ideation
My next step was to create low-fi prototypes, and in this case, sketches of the system. These sketches allowed me to conduct quick lab testing sessions to gather feedback from peers and make quick changes to my design. After narrowing down all the different ideas, I then moved on to using Figma to create simple mid-fi mockups. Lastly, after my proposals were approved, we were able to test out the implemented parts of my design to gather further feedback from people not familiar with the system.
We hosted a week-long summer workshop with scholars from all over the world (China, India, Mexico…). After their tutor creation exercises I again conducted interviews and with my team, performed post-mortem analysis to better understand what are the other problems we need to work on fixing.
Prototyping
After undergoing several rounds of critiques and redesigns, the final design proposals I made include: reorganizing the tree structure, unifying the types, colours, and components used by CTAT. These changes were then implemented by members of the engineering team to the frontend of the tool.
.gif)
Solution
In addition to the updated UIs I was also able to propose a new stylesheet proposal to give clear guidelines and instructions for colour uses.
Key UI updates:
