CSOAF App

UX\UI Case Study
How might we develop an app that gamifies learning, making it engaging and enjoyable for students, while also providing teachers with valuable insights into student progress and performance?

Project Overview

Timeline

April 2024 - July 2024

Team

Rania Tirari, Jasmine Li, Zilla Tofte, Colette Nguyen, Sydneigh Vitlen, Liz Martinez

Deliverables

Conducted User Research
Industry/Competitive Analyses
Conducted Usability and Accessibility testing
Constructed Personas
Developed User Flows, User Journey
Designed Wireframes
Built Prototype 
Delivered Design Brief, Design Handoff

My Role

End-to-end product design 
Research + design + usability testing
 Involved in all parts of the end-to-end design process, from secondary research, user interviews, interactive mid-fi prototyping, to usability testing. hi-fi design + IOS UI Kit

Background

A mobile app is needed to complement the newly developed website and dashboards, addressing challenges faced by students and teachers, such as staying updated on courses, tracking progress, and managing behaviour and mental well-being.

Aim

The goal is to create an innovative app that improves learning for students and teachers. The app should integrate with the existing website and dashboard, adding features to address identified challenges.

Context

The Problem

Lack of progress tracking for CSOAF students hinders their academic performance and emotional well-being, making it challenging for teachers to engage students and provide tailored feedback. This can also impact student attendance and teacher retention.

The Solution

Our innovative solution uses cutting-edge technology and an intuitive interface to empower CSOAF students to access personalized learning materials, earn rewards for individual and team work, and enjoy a gamified experience.

Why Does It Matter?

By addressing the needs of CSOAF students and teachers, our app ensures a more effective learning experience, improved academic outcomes, and enhanced overall well being, ultimately leading to better educational attainment and a more supportive learning environment.

Research

To better understand our target audience, we established open communication channels through Discovery calls and surveys, gathering feedback on pain points, goals, and needs from our Must-Have, Should-Have, Nice to Have Survey.

Discovery Call on April 16, 2024 Link to the Recording: Click Here.

Our Research Questions

● What are some common challenges you encounter in your teaching role that you believe could be alleviated to better support your students?
● How do you typically onboard new students and what does their integration process involve?
● In what ways do you think an app could enhance your teaching experience and connecting with your students?

Industry Analysis

Our app is designed to support CSOAF students' academic success by tracking progress, improving performance, and providing real-time teacher feedback, aligning with current EdTech trends such as personalisation, gamification, and real-time feedback. By incorporating these trends, our platform aims to provide an engaging and effective learning experience that addresses the unique needs of CSOAF students and helps them achieve their academic goals.
‍
Key Competitors in the Learning Space:
● Khan Academy
● Coursera
● Live School
● Canvas

MVP

Through a comprehensive analysis of our competitors, discovery calls, and surveys that gathered feedback on pain points, goals, and needs from our stakeholders, we distilled the Must-Have, Should-Have, and Nice to Have requirements into a clear set of essential features for our MVP. Our MVP includes three core features that cater to the needs of CSOAF students and teachers:
● CSOAF Rewards, a gamification feature that allows users to earn points and rewards for individual and team work.
● Feedback feature, enables real-time chat functionality between students and teachers.
● Progress Tracking, a comprehensive tool that streamlines homework tasks and course enrolment processes.

MVP Maze Survey

Ideation

Based on our research and interview quotes, we created user personas and then synthesized these personas to inform our design approach.

To further refine our approach, we defined user tasks and flows aligned with our personas' needs and mapped out the most effective user journey. We then created wireframes and low-fidelity designs in Figma to visualise potential app designs, and collaborated with front-end developers through regular stand-up meetings to refine our design solutions.

Surveys

To gather insight into user experiences with dashboards, we conducted in-depth Zoom interviews and administered Maze surveys to a group of participants from Los Angeles and New York, all of whom had experience with EdTech SaaS applications.Our participants shared with us their concern about our Lo-Wi and Mid -Fi prototypes design. We concluded that before we started designing the Hi-Fi prototype, we needed to update the design according to the feedback.

Analysing the user flows: what is our design solution?

To further validate our design approach, we segmented the student user flow into six distinct sections and created six corresponding Maze surveys to test usability and accessibility. For a visual representation of our design solution, I invite you to explore the following screens, which showcase the key features of our MVP.

Wireframes

We developed a series of wireframes, including Sketches, Low-Fidelity, and Mid-Fidelity designs, carefully aligning them with user flows and adhering to iOS design guidelines.In addition, we thoroughly assessed and evaluated each screen for technical feasibility, incorporating feedback from developers to ensure that our design solution was both functional and viable.

Iteration

With mid-fidelity wireframes as our starting point, we initiated an iterative design cycle, seeking user feedback and thoughtfully considering their input to inform our design decisions. This process allowed us to refine our design solutions in a continuous loop.We developed a series of wireframes, including Sketches, Low-Fidelity, and Mid-Fidelity designs, carefully aligning them with user flows and adhering to iOS design guidelines.In addition, we thoroughly assessed and evaluated each screen for technical feasibility, incorporating feedback from developers to ensure that our design solution was both functional and viable.

Usability and Accessibility Testing

We conducted usability, accessibility testing by defining objectives and methodology, designing Maze surveys to guide the test, conducting remote testing with participants, and making design changes based on user interactions and analysis of recorded sessions.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Deliverables

Our comprehensive deliverables included a range of design artifacts, including user personas, user flows, wireframes, prototypes, and visual designs. These materials enabled seamless communication, collaboration, and evaluation of the user experience and interface, ultimately driving project success.

MVP Deliverables (Q2- April 2024)

Finished Deliverables

Conducted User

Research Conducted

User Interviews

Constructed Personas

Designed Wireframes

Built App Prototype

Delivered Design Handoff, Design Brief

What’s next?

Having completed the design process, we are confident that our final prototypes successfully meet the objectives that guided our work from the outset.

I am thrilled to recommend Sydneigh, our Senior UX/UI Designer, for any future design opportunities. During her tenure at CSOAF, Sydneigh has consistently demonstrated exceptional skills in delivering high-quality, user-centered designs that have had a significant impact for our users.Under Sydneigh's design leadership, we have seen a notable increase in customer engagement and conversion rates across our SaaS products. Her expertise in end-to-end product design has allowed us to streamline our development process, reducing the time-to-market for new features by an average of 30%. Her ability to manage and organize cross-functional teams has also improved collaboration and reduced project timelines by an average of 25%.Sydneigh's commitment to usability and accessibility has been instrumental in ensuring that our products are not only visually appealing but also easy to use and accessible to all users. Her thorough usability testing and incorporation of feedback have resulted in a 20% increase in customer satisfaction ratings.I can confidently attest to her exceptional design skills, technical expertise, and outstanding communication abilities.
‍
‍Antony Villacis, Executive Director @ CSOAF

Takeaways and what we’d do differently with CSOAF App

While working on this project and going through iteration cycles we understood the importance of thinking intentionally about every element of the design and making our target users’ needs a priority at every stage. Working fully through this project taught us the importance of trying to think intentionally about every element of the project and how it can contribute to the end result.

CSOAF App

Thank you!Want to work together?

Thank you!

Want to work together?