![](data:image/svg+xml,<svg display="block" id="889684998" role="presentation" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M 5.855 0 C 6.472 0 7.053 0.281 7.445 0.771 L 8.984 2.686 L 15.881 2.686 C 16.784 2.686 17.515 3.443 17.515 4.367 L 17.515 5.495 L 18.177 5.495 C 18.736 5.495 19.257 5.755 19.603 6.203 L 19.603 6.204 C 19.951 6.654 20.078 7.233 19.953 7.792 L 18.161 15.841 C 17.97 16.696 17.24 17.297 16.383 17.298 L 1.633 17.298 C 0.73 17.298 0 16.541 0 15.617 L 0 1.681 C -0.001 0.757 0.729 0 1.633 0 Z M 1.633 0.691 C 1.107 0.691 0.676 1.132 0.676 1.681 L 0.676 15.617 C 0.676 16.166 1.108 16.607 1.633 16.607 L 2.547 16.607 L 4.698 6.953 C 4.889 6.097 5.619 5.496 6.477 5.496 L 16.841 5.496 L 16.841 4.368 C 16.841 3.819 16.408 3.377 15.882 3.377 L 8.828 3.377 C 8.726 3.377 8.63 3.33 8.566 3.251 L 6.927 1.209 C 6.667 0.882 6.273 0.691 5.855 0.691 Z M 6.476 6.187 C 5.938 6.187 5.478 6.563 5.357 7.107 L 3.238 16.606 L 16.383 16.606 C 16.92 16.606 17.381 16.231 17.502 15.687 L 19.297 7.639 C 19.376 7.288 19.294 6.92 19.074 6.635 L 19.074 6.634 C 18.861 6.353 18.529 6.188 18.177 6.188 L 6.477 6.188 Z" fill="rgb(28, 27, 31)" height="17.29829408574501px" id="gY7j5PK5Z" stroke-dasharray="" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="0.18" stroke="rgb(28, 27, 31)" transform="translate(0 1.35)" width="20px"/></svg>)
![](data:image/svg+xml,<svg display="block" id="3165882279" role="presentation" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="transparent" height="19.599429945629137px" id="pGi1Wf5mk" width="19.599206569765503px"><g fill="transparent" height="19.599429945629137px" id="oSha2Wneg" width="19.599206569765503px"><path d="M 9.8 0 C 11.157 0 12.43 0.257 13.62 0.77 C 14.782 1.264 15.839 1.975 16.734 2.866 C 17.625 3.761 18.336 4.818 18.829 5.98 C 19.343 7.17 19.599 8.443 19.599 9.8 C 19.599 11.157 19.343 12.43 18.829 13.62 C 18.336 14.782 17.625 15.839 16.734 16.734 C 15.839 17.625 14.782 18.336 13.62 18.829 C 12.413 19.346 11.113 19.608 9.8 19.599 C 8.487 19.608 7.187 19.346 5.98 18.829 C 4.818 18.336 3.761 17.625 2.866 16.734 C 1.976 15.839 1.265 14.782 0.771 13.62 C 0.254 12.414 -0.008 11.113 0 9.8 C 0 8.443 0.256 7.17 0.77 5.98 C 1.264 4.818 1.975 3.761 2.865 2.866 C 3.76 1.976 4.818 1.265 5.98 0.771 C 7.187 0.254 8.487 -0.008 9.8 0 Z M 9.8 1.6 C 7.515 1.6 5.572 2.395 3.984 3.984 C 2.395 5.572 1.6 7.514 1.6 9.8 C 1.6 12.085 2.395 14.028 3.984 15.616 C 5.572 17.205 7.514 18 9.8 18 C 12.085 18 14.028 17.205 15.616 15.616 C 17.205 14.028 18 12.086 18 9.8 C 18 7.515 17.205 5.572 15.616 3.984 C 14.028 2.395 12.086 1.6 9.8 1.6 Z M 6.24 12 C 6.607 12.591 7.112 13.083 7.711 13.435 C 8.351 13.812 9.048 14 9.8 14 C 10.552 14 11.25 13.812 11.889 13.435 C 12.488 13.083 12.993 12.591 13.359 12 L 14.594 12 C 14.198 12.877 13.568 13.629 12.774 14.173 C 11.904 14.785 10.864 15.109 9.8 15.1 C 8.736 15.109 7.696 14.785 6.826 14.173 C 6.032 13.629 5.403 12.877 5.006 12 Z M 6.3 6 C 6.664 6 6.967 6.125 7.22 6.38 C 7.475 6.633 7.6 6.936 7.6 7.3 C 7.6 7.664 7.475 7.967 7.22 8.22 C 6.98 8.469 6.646 8.607 6.3 8.6 C 5.954 8.608 5.62 8.47 5.38 8.22 C 5.131 7.98 4.994 7.646 5 7.3 C 5 6.936 5.125 6.633 5.38 6.38 C 5.62 6.131 5.954 5.993 6.3 6 Z M 13.3 6 C 13.664 6 13.967 6.125 14.22 6.38 C 14.475 6.633 14.6 6.936 14.6 7.3 C 14.6 7.664 14.475 7.967 14.22 8.22 C 13.98 8.469 13.646 8.607 13.3 8.6 C 12.954 8.608 12.62 8.47 12.38 8.22 C 12.131 7.98 11.994 7.646 12 7.3 C 12 6.936 12.125 6.633 12.38 6.38 C 12.62 6.131 12.954 5.993 13.3 6 Z" fill="rgb(28, 27, 31)" height="19.599429945629137px" id="gznmL3Ir3" stroke-dasharray="" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="0.4" stroke="rgb(250, 250, 250)" width="19.599206569765503px"/></g></g></svg>)
![](data:image/svg+xml,<svg display="block" id="464526433" role="presentation" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="transparent" height="20px" id="UyD4vX2u8" transform="translate(3.06 0)" width="13.878687516764664px"><path d="M 1.837 0 L 8.138 0 C 8.619 -0.001 9.081 0.188 9.422 0.528 L 13.351 4.456 C 13.69 4.797 13.88 5.26 13.878 5.741 L 13.878 18.163 C 13.886 18.652 13.69 19.121 13.338 19.46 C 12.999 19.812 12.529 20.007 12.041 20 L 1.837 20 C 1.33 20 0.901 19.822 0.54 19.46 C 0.188 19.121 -0.007 18.652 0 18.163 L 0 1.837 C 0 1.33 0.178 0.901 0.54 0.54 C 0.879 0.188 1.348 -0.007 1.837 0 Z M 1.633 18.367 L 12.245 18.367 L 12.245 7.755 L 8.98 7.755 C 8.184 7.755 7.512 7.479 6.956 6.921 C 6.41 6.392 6.108 5.659 6.123 4.898 L 6.123 1.633 L 1.633 1.633 Z M 4.898 15.306 L 6.939 15.306 C 7.177 15.306 7.366 15.384 7.521 15.54 C 7.677 15.693 7.762 15.904 7.755 16.122 C 7.762 16.341 7.677 16.552 7.521 16.705 C 7.368 16.861 7.157 16.945 6.939 16.939 L 4.898 16.939 C 4.68 16.945 4.469 16.861 4.315 16.705 C 4.16 16.552 4.075 16.341 4.082 16.122 C 4.082 15.885 4.159 15.695 4.315 15.54 C 4.469 15.384 4.68 15.299 4.898 15.306 Z M 4.898 11.224 L 8.98 11.224 C 9.217 11.224 9.407 11.302 9.562 11.458 C 9.718 11.611 9.803 11.822 9.796 12.041 C 9.803 12.259 9.718 12.47 9.562 12.623 C 9.409 12.779 9.198 12.864 8.98 12.857 L 4.898 12.857 C 4.68 12.864 4.469 12.779 4.315 12.623 C 4.16 12.47 4.075 12.259 4.082 12.041 C 4.082 11.803 4.159 11.613 4.315 11.458 C 4.469 11.302 4.68 11.218 4.898 11.224 Z M 12.245 5.655 L 8.222 1.633 L 7.755 1.633 L 7.755 4.898 C 7.755 5.239 7.872 5.533 8.108 5.769 C 8.344 6.004 8.639 6.123 8.98 6.123 L 12.245 6.123 Z" fill="rgb(28, 27, 31)" height="20px" id="Dgi7TNAuD" stroke-dasharray="" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-width="0.41" stroke="rgb(250, 250, 250)" width="13.878687516764664px"/></g></svg>)
Overview
📌Project Overview
The Shri Ram School is built on the philosophy of creating an environment where children want to learn. My task was to transition their traditional yearbook into a modern, interactive e-magazine that serves students from Pre-Primary to 5th Grade. The goal was to move beyond a static PDF and create a living "activity corner" that showcases every student’s voice.
Timeline
2 Months
Toolkit
Figma, Adobe Photoshop, Adobe Illustrator
Deliverables
User Research, Wireframes, Interactive UI Components, Design System
PROBLEM
🚨Problem Statement
The existing school website presented content in a complicated, non-intuitive, and unattractive manner, making it difficult for students and parents to find relevant activities or student work. This lack of engagement failed to reflect the school’s vibrant and child-centric culture.
INSIGHTS
🔍 Research & Insights
To build a tool that children would actually use, I conducted workshops with teachers and gathered insights from students.
Teacher's Insights: They needed a sustainable way to display high volumes of student work (art, poems, videos) without the limitations of physical printing.
Student's Insights: Children wanted "fun" over "function." They were looking for interactive elements, bright colors, and a sense of ownership over their digital space.
Key Discovery: Navigational patterns for a 5-year-old differ significantly from those of an adult; the UI needed to be visual-first rather than text-heavy.
USER JOURNEY
🧐 Empathy: User Journey Map
I mapped the user journey to ensure that the transition from a physical to a digital yearbook remained an emotional and engaging experience. By identifying potential friction points in the 'Exploration' phase, I was able to simplify the Information Architecture, ensuring that even a 5-year-old could navigate to their own work with minimal assistance
Process
🛠️The Design Process
With the pain points identified, I restructured the site’s logic to ensure a 'Two-Click' path to any student's work.
Simplified Information Architecture & User flow
I restructured the navigation to be "flat." By reducing deep menus, I ensured that a child could find their class or the activity corner in just two clicks, minimizing frustration.
Sketching & Wireframing
After brainstorming the solutions based on the user’s needs and insights, created low-fidelity wireframes to focus on layout, functionality, and user flow without the distraction of color.
Visual-First UI (Design for Children)
Typography Style:
Bold, rounded fonts (modern and legible) to ensure readability for early readers.
Color Palette:
A vibrant, high-contrast palette was chosen to maintain high energy and accessibility.
Iconography
Large, tactile icons were designed to be "tappable" for smaller hands on tablets and desktops.
Illustration Style
Used playful, puzzle-piece motifs and friendly character illustrations to make the site feel like a digital playground.
Buttons & Navigation:
Designed oversized buttons with clear hover and active states to provide immediate visual feedback to young users.
🖼️ Final Design
UI Design is the process of creating the visual elements of a website. Our task is to create a design direction, which demonstrates the basic principles of user interaction.
📈 Outcomes & Learnings
What I learned:
Increased Engagement: A minimalist, visual-centric design reduced the time spent searching and increased the time spent viewing student work.
Celebration of Culture: Successfully digitized the school’s atmosphere, showcasing poems, music, and art in a gallery format that felt personal to every student.
Key Learnings:
Stakeholder Communication: Managing the expectations of both teachers (administrators) and students (end-users) required a balanced approach to UX.
User-Centric Questioning: I learned that the quality of the design is directly linked to the quality of the questions asked during the research phase.
Interactive Feedback: For younger audiences, every action needs a reaction. Visual feedback (animations/color shifts) is crucial for keeping children engaged.