Case Study for Custom Educational Web App

The Challenge

Before the development of Uushihtimaasutaau, educators specializing in the Cree language faced significant obstacles. There was a noticeable absence of platforms specifically designed to cater to their unique requirements. This made accessing, sharing, and creating educational resources a challenging and often limited process. The Cree language education community was in dire need of a centralized hub to streamline collaboration and facilitate the development of resources. The lack of such a platform impeded the effective preservation and propagation of the Cree language, making it difficult for educators to engage students and create impactful learning experiences.

The Solution

To address these challenges, DigiBenders developed Uushihtimaasutaau, an integrated platform tailored to the specific needs of Cree language educators. The platform features a user-friendly graphical editor, enabling educators to create engaging and interactive content with ease using a drag-and-drop interface. It serves as a unified hub where educators can upload and manage various media types, including documents, images, and videos, for educational purposes.

Furthermore, Uushihtimaasutaau fosters collaboration among educators, allowing them to share lesson plans and materials, and build upon templates created by others. This collaborative environment not only streamlines the resource development process but also encourages the sharing of best practices and innovative teaching methods. By providing a comprehensive and accessible platform, It has empowered Cree language educators to preserve and promote their language more effectively, ensuring a richer and more engaging learning experience for students.

The architecture of Uushihtimaasutaau is engineered for flexibility, scalability, and user engagement. The front-end is developed with Next.js, capitalizing on server-side rendering for enhanced performance and SEO. The back-end relies on Laravel, offering a sturdy and secure base for complex data handling and user management.

Key Features

Graphical Editor: Empowered by fabric.js, the graphical editor provides a rich drag-and-drop interface for educators to craft interactive and visually engaging content, supporting diverse multimedia formats.

Read-Along Capabilities: A custom-developed feature that synchronizes text highlighting with audio playback, facilitating language learning and pronunciation.

Smart Board Integration: Ensures compatibility with smart boards, enhancing classroom interaction by enabling direct lesson presentation from the platform.

Admin Interface: Offers a comprehensive suite of tools for content, user, and community management, ensuring a well-regulated and productive environment.

Technical Approach

Modular Design: The platform's structure is divided into distinct modules, each handling specific functionalities, which simplifies maintenance and paves the way for future enhancements.

API-Driven Architecture: A RESTful API bridges the front-end and back-end, enabling smooth data exchange and integration with external services.

Security and Scalability: Emphasizes robust security measures like secure user authentication and access controls, alongside a scalable infrastructure to accommodate an increasing user base.

Deployment and DevOps

Continuous Integration/Deployment: Utilizes automated pipelines for efficient and error-free deployments across multiple environments, including staging, development, and production.

Infrastructure Management: Focuses on strong infrastructure management practices, including environment setup, server configuration, and resource allocation, to bolster the platform's performance and scalability.

Wireframes

For Uushihtimaasutaau, our approach involved using a landing page as a gateway to access the app, offering a brief overview and a prominent button for users to log in or sign up. Then we created two sets of screens to cater to the needs of both admins and users. The admin screens were designed to empower administrators, providing them with tools to manage key aspects of the system, such as the glossary, landing page builder, user management, public gallery, and assets. Conversely, the user screens were tailored to enhance the user experience, offering easy access to templates, resources, My Invites, and a forum. By creating distinct yet cohesive sets of screens, we ensured that Uushihtimaasutaau delivers an intuitive and efficient platform for both administrators and users.

Design System

A design system was needed before starting the UI design for Uushihtimaasutaau to ensure consistency, efficiency, and scalability across the platform. It provided standardized design elements like colors, typography, icons, and components, ensuring a cohesive and intuitive user experience. This approach streamlined the design process, saving time and effort, and allowed for easy scalability for future updates and expansions of the platform.

Colors
When developing the color palette for Uushihtimaasutaau, we aimed to incorporate their existing brand colors. However, the logo's color range was limited, so we expanded the palette for the UI screens. We extracted three shades of green and teal, creating four shades of each hue. Additionally, we included two gradients of green and teal with darker versions. After applying these choices to a sample UI screen, we sought feedback from the team through two rounds. Based on the feedback, we finalized a palette of six shades of green and teal mixtures, along with two gradients. This comprehensive palette allows for greater flexibility and visual richness in the platform's design.

App Icon
The logo was made with multiple elements, including trees. To ensure scalability for small sizes, we simplified it to an icon featuring a single tree with three core colors.

Font
Inter was chosen as the UI font for Uushihtimaasutaau due to its excellent readability and versatility. Inter offers a modern and clean aesthetic that aligns well with the platform's educational focus. Its wide range of weights and styles allows for flexible and engaging typography, enhancing the overall user experience. Additionally, Inter's open-source nature and extensive language support make it an ideal choice for a platform designed to cater to diverse audiences.

Buttons and Icons
In Uushihtimaasutaau, having buttons and icons properly designed in a design system is crucial for consistent user interaction and visual language. Buttons with different states (such as hover and active) provide clear feedback to users, while well-designed icons enhance navigation and visual hierarchy, contributing to a cohesive and user-friendly experience. We ensured cohesive visual elements that speak a unified design language.

Landing Page
Uushihtimaasutaau's landing page provides a concise introduction and a glimpse of its core features. Visitors can access publicly available resources and conveniently log in or register directly from the landing page.

UI Screens
Uushihtimaasutaau's UI screens were designed to be visually cohesive and intuitive for easy navigation. This balance was crucial to ensure users could easily understand and interact with the app. Interaction design played a key role in enhancing usability and guiding users through the platform seamlessly.

Admin UI Screens