Emberex: Goal Setting Challenge, Goal Setting Web App
MomMoodBooster

Goal Setting Challenge

GOAL SETTING WEB APP FOR HIGH SCHOOL STUDENTS

Product
Responsive Web app for high school students to aid in setting and achieving goals.

Project roles
Web App Development
UI/UX Design
Data Visualization
Gamification
Illustration & Animation
Quality Assurance

THE CHALLENGE
The Goal Setting Challenge app teaches high school students with mild to moderate disabilities about the Self-Determined Learning Model of Instruction (SDLMI). In the process, students identify areas in their life that may need improvement, determine ways to make those improvements, and take steps that move them toward accomplishing their goals. They monitor their progress and refer back to critical components of the app to help them make decisions in future lessons.

THE PROCESS
Emberex was delighted to begin the project with well-designed content and branding from our client. Using that as a starting point, we worked through an iterative wireframe process, making adjustments along the way until we landed on a seamless user experience. From there, we created full-color designs and built interactive prototypes, simulating the experience of moving through the application. As the designs were finalized and approved, the development and QA teams built and tested each piece, working closely with the client to ensure the final product was ready for the end users.

gsc-process-scsgsc-process-scs

PROGRESS TRACKING & REPORTING
As students work through the Goal Setting Challenge experience, they learn not only about setting goals, but also about monitoring progress towards those goals. In order to facilitate that learning, we created pages that allow students to revisit current and past goals, see their progress throughout the lessons, and even print a detailed report they can give to an advisor or counselor.

progress-reports-gscprogress-reports-gsc

ILLUSTRATION
To keep students engaged throughout the cyclical process of goal setting, we featured a group of characters that would aid in the learning process. A teacher and four students guide users through unique and interactive activities designed to reinforce the lessons featured in the application.

Additionally, we included icons throughout as a visual representation of the concepts being introduced, making it easy for students to recognize when new information is related to a topic they have learned about in a previous lesson.

ANIMATION
To increase the level of user engagement, the teacher and student characters are animated whenever they are shown to the student. CSS animations with pseudorandomized rotation simulate natural movement of the eyes and extremities. When characters speak to the students to present lesson content, their mouths are animated using an integration with the
Amazon Polly API. The script of the spoken text is sent to Polly, which responds with the audio sentences, triggers, visemes and timestamps. Our application then processes this information and uses it to animate the character's mouth in sync with the lesson script audio.

GAMIFICATION
We used elements of gamification and high levels of interactivity as part of our strategy to keep students motivated as they progress through the various activities within the app. Drag and drop responses, speech bubbles providing encouragement and congratulations from the featured characters, sounds and imagery denoting correct or incorrect responses, and progress bars are just some of the ways we livened things up for the users.

gamification-gsc-scgamification-gsc-sc

HEY! DON'T FORGET THE ADMIN SITE!
Teachers and administrators need to be able to monitor each student’s progress and view data in various forms, in order to effectively guide students through their individual experiences with The Goal Setting Challenge app. We built admin pages that allow viewing of data on the site, as well as the ability to print different types of reports based on specific needs and requirements.

gsc-admin-site-scsgsc-admin-site-scs

THE RESULTS
The Goal Setting Challenge app was designed and developed to be fully accessible and has been tested thoroughly by our QA analysts to ensure it is
WCAG 2.1 AA compliant. The result is a robust application that truly helps high school students with mild to moderate disabilities to set and achieve goals while allowing teachers and administrators to closely monitor each student’s progress. And of course, happy clients.

Technology
Node, React, Next.js, PostgreSQL, Amazon Polly, Google Cloud Speech-to-Text