SCHOOL

Online Orientation Platform for City Charter High School

A learning management system to support schools, students and parents

CCHS online orientation platform is a learning management system to support high schools in onboarding students and parents at City Charter High School. Designed to support users on both mobile and desktop and in multiple languages, the platform uses gamification in the form of quizzes and progress tracking to encourage students and parents to familiarize themselves with the material so they understand school policies and acts as a centralized repository of information.

Team Structure

Front-end Engineer
Backend Engineer
Project Manager
Program Manager
UI/UX Designer

Project Duration

January 2024 - Present

Technologies

OVERVIEW

Current Problems

1. Difficult for Parents to AttendIn-person orientation requires parents to call out of work, which is not always possible. Additionally, parents have a hard time finding parking and may waste several hours in commute. This makes attending the in person orientation difficult
2. Lack of Multilingual SupportThe orientation is carried out in English, which is difficult for non-native English speakers and people with hearing difficulties as there is no support or way for them to understand the information
3. No Reference MaterialsSince the orientation is in-person or only has recordings, it is very difficult to find specific information - parents and students often rely on peers to verify information as teachers can be difficult to reach, but they are not always aware of the rules and regulations.

How might we

create an online space to support parents and students engage with orientation material, allow administrators to verify engagement by tracking progress, and enhance the learning experience by providing multilingual support?

Solution Demo

Bite-Sized Modules

The LMS consists of bite-sized modules that contain videos and supplementary text information and test the user’s learning through quizzes. The ability to track progress in the app provides encouragement for students and parents to complete the modules, as does the e-certificate they gain at the end of completing all modules.

Orientation Recap

To ensure that users can access information on the go and without needed to go through the modules, we provide an Orientation Recap section which covers key points for quick referencing.

Progress Tracking

To encourage users to complete their modules, we provide progress tracking and certification on the user dashboard as a way for them to measure their progress and see how close they are to achieving completion. On the administrator side, we provide a list of all active users on the app and their progress, as well as the number of users who have completed the modules and are now certified.

Multilingual Support

The app provides support for five different languages - English, Arabic, Russian, Chinese and Spanish. Through G-Translate, we provide the ability for the entire app to be translated into a language of choice, allowing for users to interact with the materials in the language they are most comfortable in.

SOLUTION PREVIEW

01. Understand & Scope

To proactively enhance the user experience, we brainstormed several features and elements that we thought would make the app useful for parents, students and school administrators before we actually began Sprint 1 and conducting user research. We have invited the school director and the technology manager to help us mark their priorities so we could better scope the project.

Considering the complexities involved, our initial suggestion was to integrate a module into Canvas, an existing learning management system. However, Canvas may not offer the user-friendliness desired, potentially requiring significant time for onboarding students and staff. This could pose a hurdle due to the learning curve associated with setting up and navigating modules on Canvas. Given these considerations, we proposed the development of a streamlined learning management system tailored specifically to cater to the needs of in-person orientation. Taking into account the perspectives of various personas, we brainstormed essential features and elements. These include progress tracking for administrators, certification options for parents, and engaging, concise modules for students.

Stakeholders interview

In order to understand how well our brainstorming session captured the needs, pain points and potential solutions for parents and students, we carried out a focus group with 15 CCHS junior-year students and parents who had already gone through the freshman orientation to understand how their experience was and what could have made it better.

Focus Group

Following the focus group, we found that participants find current orientation sessions overwhelming and inaccessible, preferring shorter, interactive digital modules accessible on both mobile and web platforms and available in multiple languages. They desire progress tracking, recognizing the critical importance of orientation to academic success and seeking a centralized repository of resources for ongoing support.

After the interviews and the focus group, we have identified the different needs from different stakeholders. We have created a stakeholder needs board and used it throughout the design and implementation process to make sure we always keep their needs in mind.

Stakeholder Needs

Refined Project Scope

Consolidating key insights from the stakeholder interview, focus group and brainstorming session with our stakeholders, we identified three core elements of the web app and redefined our design goals to align more closely to them.

Online Orientation Modules

To retain engagement, we identified the need for shorter modules that could be easily completed on the go. To support this, we broke down the topics covered in the orientation into smaller sections and gamified them using quizzes, progress tracking and certification to increase completion rates.

Orientation Recap

Understanding the paucity of time, we provided an orientation recap section for when users want to quickly reference information but do not necessarily want to re-watch videos or read whole paragraphs. The key element to the recap section is the use of bullet points, making finding and verifying information a quick and easy process.

Admin Dashboard

To support administrators, we provide an admin dashboard linked to the user dashboard that allows them to see the number of users in the process of completing the modules or the number of users who have completed the modules in order to plan next steps, such as identifying when to send emails requesting parents and students to complete the information.

02. Ideation and Design

Flowchart

At the beginning of this phase, we have built a flowchart to outline the architecture of the application, showing the relationship between different pages and the user flow through the system. This ensured that all components were fully designed and that the team had clear knowledge of each page's content.

Below are the initial wire frames that we used to chart out the actual flow and design of the app. These wire frames formed the foundation of our responsive design approach and were used to provide a proof of concept to the Director of Enrollments and the Lead Technology Manager at City Charter High School. Key elements here include the presence of a progress bar, designs for the home, FAQ and recap page as well as a hamburger menu to reduce visual clutter in the navigation bar.

Wireframes

Final design

Design System

03. Implementation

Agile scrum Process

In line with industry best practices, we used the Agile Process Framework to streamline our design and development work and our client interactions through the integration of scrum ceremonies and processes. Through daily stand-ups, sprint review and planning meetings and sprint retrospectives using JIRA, we fostered a culture of collaboration, innovation and mutual support.

Tech stack

The front-end is built with React.js and integrated with AWS Amplify for data operations, which interacts with a DynamoDB database for storing data. User authentication is handled by AWS Cognito, which manages user credentials and access, ensuring secure authentication tokens for data transactions. Additionally, the right-hand side displays the AWS Amplify admin UI with data modeling and user management panels, indicating the application's capability to define data structures and manage user accounts.

Check Github Repo

04. Usability Test and Iteration

Identifying Key Issues through Beta-Tests

Usability testing identified issues including confusion with sign-out flow due to button visibility, unattractive full-screen video display, and slow photo loading. Furthermore, bugs discovered in beta testing highlighted vocabulary misalignment and lack of automatic scroll reset between pages.

After identifying key issues through beta-testing, we listed the bugs and feature fixes in order of priority with our stakeholders and implemented fixes to ensure that the app was accessible, intuitive and met the need of all users. Key fixes included moving the sign out flow into the navbar, using more neutral or well-known terms and increasing loading speed by decreasing the size of the photos.

Usability Tests

05. Testimonials and Reflection

Testimonials

This project has been a critical milestone in our efforts to become information professionals. Apart from providing us with client experience - including developing key skills such as client communication and documentation, this project pushed all of us past our comfort zone and encouraged us to dabble in new and unfamiliar technologies to come up with solutions for client needs. Over the course of this project, we also developed skills in delegation, prioritization and time management and the ability to provide constructive criticism.

Reflections

Featured Projects

Amazon Redesign

Zero Carbon Village

City High Online Orientation

With Her