From Outdated to Outstanding: Modernizing the 220 Leadership Educational Platform

Challenge:

220 Leadership‘s primary goal was to modernize their educational app, which appeared outdated and not engaging. It lacked vibrant visuals and compelling layouts, making it less appealing to users. They aimed for better, more modern designs that were both functional and visually engaging.

The primary challenge was the platform’s inherent limitations, which required innovative solutions to balance usability with aesthetics. The client had also recently updated their branding, introducing new colors, shapes, font styles, and card layouts. These elements served as a foundation, but integrating them seamlessly into a limited platform demanded creativity.

Solution:

We started by incorporating the updated branding elements into the platform. This included leveraging the new color palette, typography, and design shapes. The current dashboard was uninspired and plain, so we focused on creating designs that aligned with the modern branding while making the interface both useful and visually appealing.

The Design Process:

Design Kickoff: The process began with a discovery call where 220 Leadership shared their preferences and provided inspirational concepts. Using their input and new branding as a starting point, we developed several design variations for their review.

Dashboard Refinement: Once the client selected their preferred design, we refined the teacher and student dashboards. The focus was on maintaining visual cohesion while adapting to the specific requirements of each user type.

Bold Design Selection: We provided several design options, ranging from bold and dynamic to softer and lighter tones. 220 Leadership ultimately chose a bolder, more vibrant option. From there, we worked on two key dashboards: one for teachers and another for students. While maintaining a consistent layout for consistency, we tailored the content and functionality to meet the distinct needs of each user group.

Class Overview Design: After finalizing the dashboards, we moved on to other critical sections, such as the class overview page. Throughout the process, we balanced bold aesthetics with user-centric functionality to deliver a modernized, engaging platform. For the class overview page, which was more content-heavy, we applied the bold design principles strategically. This ensured the page was visually striking but still easy to read and navigate.

“FYC Labs was able to help us bring our vision to life with technical expertise we don’t have in-house. They were willing to learn a new platform and use custom APIs and design to bring a modern design to our education platform.”

Matthew Moheban

220 Youth Leadership

The Development Process:

Client Background: 220 Leadership was undergoing a brand refresh during the project, with some brand elements like colors and logos being finalized mid-project.
Platform Challenges and Limitations: The client’s platform was not widely used, which presented a unique challenge, requiring us to work with unfamiliar software. It served as a gatekeeper, requiring us to find creative workarounds to deliver the desired functionality.
Custom Page Development: Created custom pages on the platform using standard code, integrating API calls to customize functionality.
Student Class View: Developed personalized student dashboards, pulling data through API calls to tailor content for each user.
Teacher Class Views: In addition to student dashboards, created a custom class view for teachers to improve usability and management.

Results:

The redesign of 220 Leadership’s educational app successfully transformed it into a modern, engaging platform that aligns with their updated branding. By overcoming platform limitations and focusing on user-centric design, we enhanced both aesthetics and functionality. The revamped dashboards and class overview pages now offer intuitive navigation and visually appealing interfaces, catering to the specific needs of teachers and students. This modernization has significantly improved user engagement and satisfaction, positioning 220 Leadership as a forward-thinking leader in youth development.