iTell for textbook education

Role
UX/UI Designer
Graphic Designer
Time
Aug. – Nov. 2024
* Currently in implementation
Skills
Product Design
Branding

This past semester, I had the opportunity to take a UX/UI design class where we collaborated in teams, took on specific roles, and partnered with real-world companies to tackle design challenges throughout the semester. Our team's client was the LEAR Lab, and we helped to improve their product iTELL.

iTELL ("Intelligent Texts for Enhanced Lifelong Learning") is an AI-powered interactive textbook framework designed to enhance learning through real-time feedback and user engagement.

Recap: the old site is functional, but needs improvement

The old site, while functional, lacks usability due to a cluttered interface, overlapping elements like notes and the chatbot, and a small logo and header that fail to establish a clear visual hierarchy.

Diagnosing the issues

The scope of iTELL is large, so we focused our efforts on the textbook interface, as that is the main part of the application users will be interacting with. We then spent time identifying the main issues:

01
Overlapping sections

There are overlapping elements such as notes, headers, and chatbots, which create visual noise and interfere with the user experience.

02
Cluttered, hard-to-read interface

The overall impression of the textbook page is cluttered, with a lack of whitespace and visual separation between content. This overwhelms the user and reduces readability.

03
Various technical issues

The visual styling, alignment, including text sizes, spacing, and color usage, lacks consistency across the interface. Additionally, there are various technical issues throughout.

The Question

How can we improve the iTELL textbook interface to make learning easier?

The Problem

The iTELL textbook platform is outdated and, at times, confusing to navigate. Users struggle with poor navigation, a lack of interactivity, and limited clarity due to the organization of the textbook.

The Solution

Re-design the iTELL textbook interface with a focus on enhancing readability and therefore usability!

Card sorting for clarity

Our team decided to create a suggested website navigation and structure using the card sorting technique. Since the current layout already aligns well with user needs and offers a clear, logical flow, no changes to the navigation are recommended at this time.

Looking at the competition

We next performed a competitive analysis of some top competitors, including TopHat, Cengage, and SmartBook. Within the online textbook market, there has yet to be an application that utilizes AI for interactive textbook content.

Key findings:

  • What makes iTELL unique is its ability to provide real-time automated feedback.
  • All apps incorporate collapsable sidebar/navigation.
  • All apps have inline note taking.
  • Visually: all textbooks feature whitespace surrounding text and colored sidebars for contrast

Interviews

Several interview sessions were conducted throughout the semester with members of the lab.

Interested in reading some interview notes? Click
here!

Maintaining communication

Maintaining communication with our clients and within our own team was one of the most important parts of the process. Therefore, we utilized platforms such as Notion and Piazza throughout the semester.

Additionally, we created Feedback forms that we routinely sent to our clients, keeping them up to date with design changes, proposals, etc.

Personas for the users and the instructors

iTELL has 2 main user groups: students and instructors. Students are the primary end users of iTELL. Their main goal is to enhance their learning through interaction with textbook materials, completing summarization tasks, and receiving feedback on their performance. Instructors form another key user group. Their main goal is to efficiently create, manage, and assess educational content.

User personas were developed to develop a better understanding of the needs of iTELL's users.

Branding

The goal of iTELL is to create an educational, user-friendly platform for students while leveraging new AI technology. With this in mind, I altered the existing color scheme to be more cohesive and aesthetic. Our team opted to eliminate the previous forest green color, as it is not consistent with the other shades of blue that have been used throughout the app.

Additionally, I designed a new logo. The team had stated that they had a sentimental attachment to the original logo, but felt the new logo was refreshed and more polished.

Final designs

The final designs for iTELL reflect a modern user-friendly interface that prioritizes clarity. These designs are the result of multiple iterations, each refining the experience to better meet user needs.

⋆。°✩ New
Old

Collapsible sidebar

The left sidebar was converted into a collapsible sidebar using the existing sidebar component.

Textbook page header

The table of contents functionality was moved from the right side of the textbook page into a newly created header. This header includes components such as the current note count, page progress bar, and current section label, borrowing from other parts of the application.

Learning objectives

At the start of each chapter, a refreshed learning objectives section is included, describing what will be acoomplished during the chapter.

End-of-page summaries

At the end of each chapter, users provide a summary of the content, which is then evaluated by the iTELL AI.

Takeaways and reflection

This work presented a great challenge and an exciting opportunity to delve deeper into the world of UX design.
Throughout the project, I learned the importance of staying adaptable. Adjusting the designs was a given, but I also was required to adjust my way of thinking. Being flexible and open to new ideas proved essential in this project.

Working in a team with clearly defined roles added another layer of learning. It was inspiring to collaborate with individuals who each brought their own skill sets. Moving forward, I would like to explore the broader iTELL application by diving into other sections that were beyond the scope of this project, such as the statistics and dashboard pages.