DESIGN
Creating a design system



Our design system met the UT brand guidelines and aligned with the current style applied across the iSchool website, only deviating with the introduction of teal blue for the Skills & Topics tags.

Prototyping and user testing



From our preliminary research, we understood that MSIS students wanted greater clarification of degree requirements and easier course exploration. We addressed our research findings through the following design changes:


  1. Creating a visual aid of the MSIS degree requirements to faciliate comprehension.
  2. Improving the information architecture and navigability by organizing courses into themes through clear menus, visuals, and filters.
  3. Creating a visualization of courses by area of study for quick exploration.
  4. Developing a refined course filtering system to enhance the searching process, with clear descriptions and verified class content to increase students’ trust.
  5. Added a new course characteristic, ‘Deliverables’, to address students’ goals to prioritize or avoid courses with certain deliverables, such as a portfolio project or an exam.


Beginning with low-fi paper prototypes, we iterated on our design through three rounds of user testing. From each round, we applied A/B testing to evaluate our information architecture, usability of features, and visual design. Before arriving at our final prototype, we developed seven iterations of our design, which are shown above.



Our final design consisted of design elements from each round of testing that incorporated our users’ preferences and suggestions for improvement.

Final design




Creating a filter system




We leveraged Figma variables to create a complex filtering system where students could search for courses by the area of study, deliverables, and skills & topics. 

Courses were displayed in a table with information students deemed valuable to the registration process, including the three filters we added, course number, a linked title to the specific course’s site, a linked syllabus, and course description. We also included a searching tool for students to look up specific course information.

Layout of filter system.



To create a functional checkbox filtering system, we used Figma variables and conditional logic for the area of study filters. Below are the components we used to create the filtering system. Our final prototype included content from seven MSIS courses.
Filter variables in Figma.





Due to time constraints and limited technical expertise, we were not able to add this logic to the deliverables and skills & topics filters, instead choosing to use a happy path for our final prototype. Below is a demo of our filtering system, including both the functional logic we implemented and the happy path.

Demo of filtering system.