Ellii's Dynamic Lesson Planner Project
Tools Used
Figma
Roles
User Experience Designer, User Interface Designer, & User Researcher
Timeline
6 weeks
Industry
EdTech
Team:
1 Back-end Developer
1 Front-end Developer
1 Product Designer
1 Front-end Developer
1 Product Designer
CEO
VP of Publishing
CTO
VP of Publishing
CTO
Every great teaching journey starts with solid preparation. But for many educators, that journey is hindered by time constraints and a lack of tools. Sometimes it can seem overwhelming, leading educators to try to steer clear of it. That’s where the Lesson Planner project steps in, our aim is to get educators excited about planning and preparing again by designing an efficient interface to get the job done faster.
The feedback has been nothing short of phenomenal
While I didn’t have access to data to measure the results, the following are testimonials from clients regarding the impact of the lesson planner.
These glowing testimonials showcase the remarkable improvements in managing class content and enhancing student engagement.
16,000 teachers have used the lesson planner!
Let's explore how we got here
The current lesson planning process for educators is overly time-consuming for such a straightforward task. Teachers must choose a lesson to assign, choose a class to assign it to, choose if all students from the class get the assignment, customize the assignment, then finally assign it.
Online surveys proved me right
I never had the opportunity to conduct my own research but through extensive research I found 2 studies that really showcased that the vast majority of teachers.
So who are we designing for?
Knowing who our users are helps us make a product that’s right for them.
Mrs. Wilson is an older lady who is less tech savvy but looking to learn.
Mr. Moore is a young adult who is better with tech but looking for a quicker way to lesson plan.
Stakeholders required a few key features
We designed a solution that met stakeholder objectives while prioritizing educator satisfaction. This approach ensures that our solution meets the needs of both business and educator needs.
1. Craft an intuitive lesson planner tool to aid educators in organizing class content and assignments efficiently.
2. Enhance accessibility for educators, facilitating smooth navigation and interaction with class materials.
3. Enhance content engagement by enabling educators to tag content to specific classes without direct assignment, leading to improved data collection and insights into educator preferences and class characteristics. This data facilitates more accurate machine learning algorithms, enhancing personalization and content recommendations.
4. Ensure that existing class structures seamlessly integrate with the platform, while also incorporating the lesson planner for new classes.
Based on the problem and survey results, we explored 3 possible solutions
While experimenting with potential solutions, we aimed for the best possible scenarios, but soon realized it was challenging to display all types of materials on a single planner. This included lessons, study packs, courses, videos, and flashcards, each needing unique content displays.
Horizontal Lesson Planner
By adding just a few materials, I quickly realized that the scroll becomes excessively long, pushing the rest of the sections out of view.
Horizontal Scrolling Lesson Planner
As you can see, having just one material in this design looks fairly decent, despite the inconvenience of side-scrolling. However, when we add five materials, the cards end up being different heights, which doesn't look good at all.
To tackle this, we asked ourselves: How can we design a tool that helps teachers work faster, easier, and see more materials at once? This question led us to explore the Kanban Board option, offering a flexible solution for organizing diverse educational content.
Kanban Board Lesson Planner
After trying all these horizontal wireframes, I decided to switch things up by implementing a kanban board. With a vertical layout, materials will always align properly as long as the widths are consistent. This approach allows you to view all sections without needing to scroll, creating a simpler and more organized view.
Why our solution dominates
While other options may offer some functionality, they often lack the flexibility needed to accommodate diverse materials effectively. Traditional systems may be too rigid, while general project management tools lack specific features tailored to educators' needs. In contrast, the Kanban board's adaptable framework empowers educators to plan, manage, and deliver engaging materials with ease, seamlessly incorporating various materials into their workflow.
Here’s a few more things I made sure to consider...
Empty states give users a clear idea of what’s going on when there’s nothing to see. They also tell users what they can do next.
Many designers forget about empty states but I make sure to always let the teacher know that they need to add materials.
For teachers unfamiliar with drag-and-drop, we've included a 'Move to' dropdown in the modal.
Creating digital wireframes with a cleaner approach proved effective
Realizing the need for simplicity, I shifted towards a more streamlined wireframe, focusing only on the essential features. Our aim is to alleviate the overwhelm often felt by educators.
And the final product...
Our final design works perfectly on any screen size, whether it's a desktop or a mobile device. Thanks to its flexible layout and responsive design, teachers will enjoy a clear and intuitive experience no matter how they choose to interact.
There is so much more to dive into these designs so check out this prototype to see how everything works!
Despite not being able to gather KPIs, I can illustrate my methods for tackling hypothetical KPI challenges.
Reflecting on a project's journey can provide valuable insights and lessons learned.
What went well?
• While I encountered a brief setback during the solution phase, I bounced back and crafted a great solution.
• Working collaboratively with developers and stakeholders was a seamless process.
• Working collaboratively with developers and stakeholders was a seamless process.
What can I improve on?
• Make the images on the material cards more descriptive, and clearly differentiate between Courses and Study Packs.
• Find a way to incorporate customization but by choice.
What did I learn?
• Consider every situation in your designs. Testing mockups with different materials helped me avoid poor choices.
• Sometimes less is more. Quick adjustments and testing led to a cleaner, more user-friendly design.
• When designing, start with the most content possible so you know that your design works in every case.
What would I do next?
• Offer teachers the option to customize their own courses, including all relevant materials.
• Due to a tight timeframe, user recruitment and testing were limited. However, we were closely monitoring key performance indicators (KPIs) post-launch and are set to conduct user testing informed by these findings.
