Integrate School
Enhancing website usability: Utilising AI to generate lesson plans in minutes
Background
Integrate School is a tool that custom builds lesson plans for teachers that cater to different students from all grades. This simplifies lesson planning, saving them time so they can focus on the more important things.
Objective
Revamp the existing lesson plan generator tool with a more intuitive design to enhance usability.
ROLE
UI Design
TIMELINE
2 days
TOOL
Figma
Although the current design is functional, there is significant room for visual improvement.
OLD DESIGN
Integrate School's lesson plan tool has been distributed to a lot of schools and districts all over the US with the current functional design. Although it serves its purpose, at first glance there are many things we can improve on to enhance aspects like readability and usability to improve work efficiency among its users. With small tweaks in visual and typographic elements, we can significantly elevate the overall user experience, making the tool more intuitive and user-friendly.
On the right are the base designs for the screens. For this case study, we will be focusing on the following elements:
- Left Bar
- Top Bar
- Pop up for AI Generate Lesson
Chunking information for better readability and focus, adjusting paddings for breathing space
LEFT BAR
The current design appeared cluttered, especially in the lower section without clear sectioning. The start and end dates looked too small compared to other fields, so we increased padding for better spacing.
​
We also improved status indicators by making them more prominent and color-coded according to their status to enhance visibility, as this impacts our teachers' workflows.
​
Additionally, the manage buttons for State Standards and Assignments were easily overlooked. We addressed this by repositioning them next to their titles for improved visibility.
Using familiar iconography and adjusting type hierachy to simplify the top bar
TOP BAR
By replacing the 'AI' label with a sparkle icon, we shift from a technical and straightforward presentation to one that adds a touch of delight. This approach makes the AI feel more approachable and magical to users. The same applies to the share button - instead of spelling it out, the familiar share icon is used instead.
​
By adjusting the type hierarchy in the top bar, we provide a clearer view of what's being generated and its details. Just like in the left bar, the status is given prominence as it affects teachers workflows a lot.
Reducing cognitive load through sections, relayout, and clearer CTA buttons
POP UP (GENERATING LESSON PLAN)
The overall design of the popup lacked proper sectioning, so I chunked it into distinct sections for better organization. I also redesigned the CTA buttons to enhance visibility and encourage user action, such as the sections where they can add standards and offer more customization options. Additionally, the exit/cancel option was replaced with a close button for improved user experience.
