Classroom Connect

Classroom Connect

May 2023

May 2023

timeline

timeline

3 weeks

3 weeks

designer

designer

role

role

ui/ux design

ui/ux design

skills

skills

figma

procreate

figma

procreate

tools

tools

OVERVIEW

Classroom Connect focuses on creating a user-friendly online hub where parents and students can easily access important class information. 


By integrating a clear and structured interface, ClassConnect offers parents and students a central hub for accessing important updates, sorting messages by topic, and staying informed through an interactive calendar. The goal is to create a seamless digital experience that fosters better communication and engagement between teachers, parents, and students.

RESULTS

Organized Calendar

This allows users to stay up to date with class events, deadlines, activities, and more.

Post questions and concerns

Adding a forum-style section, students and parents can easily ask questions and share ideas which fosters community engagement. Moreover, easy sorting tools will allow users to sort concerns and questions by topic for efficiency.

Access games and resources

Students can easily access resources used in class on their own time to review material, explore educational games, and more in a centralized location.

RESEARCH INSIGHTS

  • Fonts lacked visual appeal, either too narrow or outdated

  • Spacing inconsistencies—headers were often too close to graphics

  • Graphics felt outdated and lacked cohesion

  • Text-heavy layouts made navigation overwhelming, especially for students

  • Fonts lacked visual appeal, either too narrow or outdated

  • Spacing inconsistencies—headers were often too close to graphics

  • Graphics felt outdated and lacked cohesion

  • Text-heavy layouts made navigation overwhelming, especially for students

common issues found

  • High visibility of important links through menus and icon buttons

  • Use of student images to create a playful, welcoming feel

  • Consistent color palette to fit with the school branding

  • High visibility of important links through menus and icon buttons

  • Use of student images to create a playful, welcoming feel

  • Consistent color palette to fit with the school branding

successful design elements

GOALS

How can we improve the classroom experience for our teacher, their students, and their parents?


Introduce a more engaging and student-friendly look while maintaining organization for parents

Prioritize intuitive navigation with clearly categorized buttons and links

Encourage users to learn about and access educational resources, share class activity ideas for students, and have access to class and school-wide agenda and be able to submit own requests.

PROCESS

In the ideation and low-fidelity mockup stages, I focused on creating a spacious and clear layout that would make the site easy to navigate for both parents and students. To create an appealing site for the younger audience while still making it digestible for the parental group, I used rounded shapes and soft edges, which helped introduce a fun, approachable feel without compromising on clarity or usability.

MOBILE LAYOUT

DESKTOP LAYOUT

TAKEAWAY

This project was my first time designing a landing page with Figma and I learned many different things throughout the process.

User research

Before diving straight into design like I was used to, I focused on understanding my hypothetical client — an elementary school teacher — and their needs. This research gave the project purpose, guiding me to create solutions that addressed key challenges

Design Iterations

My design evolved through multiple iterations, incorporating constructive feedback along the way. Some initial concepts were reworked or scrapped, while new ideas emerged through feedback but couldn’t be fully explored due to time constraints. This taught me the importance of balancing creativity with practicality — working towards desired design solutions while adapting to limitations.