Coding Champs
Empowering remote educators to seamlessly manage their classroom.
UX Research & Design • EdTech • SaaS • B2B • Enterprise • Web-App/Browser
Team
Me
Evan Watanabe
Kyle Lutzowe
My Role
Lead Product
Design Intern
Tools
Timeline
May 14, 2024 -
June 21, 2024
Overview
The Problem
Coding Champs Canada is a remote education company that teaches children programming skills. It can get hectic for admins and teachers to keep track of scheduling, progress, and attendance. Currently teachers take notes on their classes through spreadsheets, but it is difficult to find and synthesize information used to report progress to parents and understand when admins should take action or view student progress.
The Solution
We designed a web platform with the goals to allow teachers to:
Fluidly view and input information on their students.
Have a high level overview of student progress and job-related tasks.
Efficiently generate progress reports for parents to view the status of their children.
Jump to the High Fidelity phase by clicking here.
Note: If the GIF beneath the section title is not showing, please refresh the page.
Kicking Off
Project Brief
In our team's first meeting, we went through the project brief and discovered that the client needed a platform that allowed teachers and administrators to:
Login
View job-related tasks and information in a dashboard format
Manage student attendance
Take notes on student classes
Track student progress
Generate student progress reports
We also strategized our approach for our first client meeting, aligning on questions we wanted to ask in order to hone in on the proper deliverables. Our resource budget included 150 hours split among three designers, including myself. In addition to confirming the client needs, we kept some principles in mind to create a better product for the longevity of Coding Champs, including:
Avoiding creating excessive design debt.
Preventing scope creep.
Gathering Data
User Interviews & Observational Research
To get a better understanding of the information that teachers use in their tasks, I crafted a plan to gain more user insight via:
Semi-structured user interviews
Observational research
Heuristic & competitive analysis
A couple of key observations I obtained during the user research phase are:
Staff do not have a way of visually displaying all of their upcoming tasks at a glance.
Google Sheets can make it difficult to quickly digest and find information.
Staff may forget to input data (like class notes) when not completing them immediately after a class.
Below, you can see an example of the method that teachers use to track student progress.
Competitive Analysis
To seek out inspiration with minimal hourly investment, we looked to existing solutions in the EdTech and Operations space.
Likes
Schedule displays are typically the primary driver for teachers to view their upcoming and past classes.
Successful high level overviews display avenues to tackle different user jobs without being overwhelming.
Reports are easily exportable via PDF.
Dislikes
Overviews are designed for classrooms, not private classes.
Data visualizations might look good, but can end up being non-functional and distracting.
Individual assignment lists do not match the lesson structure that Coding Champs staff use.
Synthesizing the Data
Affinity Mapping
After our research phase, we took the data notes to FigJam and sorted it thematically.
Some key findings were:
Users need a high level overview for teacher and admin related tasks.
The majority of informational input lies in teachers completing their class information after classes .
Student progress needs to be easily synthesized to track their performance and create progress reports.
Progress reports need to be easily digestible for both staff and parents.
The primary platform is to be a browser application.
User Flows
User Flows were created from the synthesis data. Utilizing User Flows helped inform the journeys that we were designing for and allowed us to anchor our designs to real steps taken by the user. The flows that we focused on are:
Teacher/admin login
Post-lesson notes and attendance
Generating a student progress report
Creating a student profile and assigning classes
Ideating
Sketches
At this point, it was time to rapidly ideate via sketching out ideas. Each team member took to pen and paper (or tablet in my case) to get our ideas out. Next, we met to align on our ideas, combine and critique them, and discuss how we wanted to move forward.
Low-Fidelity Prototypes
Next, we took our ideas to Figma to turn them into low-fidelity prototypes.
Stakeholder Feedback & Testing
We met with our key stakeholders (including a developer) and conducted user testing to validate our design direction and gain feedback on the user journeys and development feasibility. Some key insights we learned were to:
Reduce dashboard content to maintain user focus.
Ensure feasibility of flows by incorporating precursory tasks.
Such as creating a student profile in order to have students in the database.
Give staff more control by allowing certain content fields to be both additive and editable.
Building the interface
Implementing our Foundation
I brought up the idea of using the Material Design system to the team and stakeholders for a few key reasons:
The product would feel comfortable and familiar.
It would save time on creating components and branding.
The sacrifice in customizable branding was negligible.
Since the product is not client facing.
This was received positively, so we used the Material Design builder to generate a baseline design system.
High-Fidelity Flows
To build out the higher fidelity screens, I took on the flows of:
Logging in.
Creating a student profile.
Generating a student progress report.
The other team members were in charge of completing class information after a class is held and assigning students their schedules.
Login & Landing
The login page was a straightforward flow to design. I used inspiration from common login flows and applied the coding champs aesthetic and palette to it. This flow also allowed me to showcase the landing page that I designed, coming from the converging ideas of the team and stakeholders.
Note: If the GIF is not showing below, please refresh the page.
Creating a Student Profile
In order for users to schedule their students, they needed a profile for the student to be assigned.
When presented with this flow, the stakeholders were happy with the result, insisting that it has all the pieces needed for teachers to succeed.
Note: The GIF below is playing at 1.5x speed. If it is not showing, please refresh the page.
View Student Profile & Generate Progress Report
In order to keep parents updated on their child's progress, teachers and admins had to generate progress reports based on the student's performance. A challenge that I had here was being able to give teachers the full context and control over the profile without cluttering the screen. To tackle this, I utilized:
Iconography
Expanding list items
Tooltips
This gave the staff enough context and control to be able to quickly visualize student progress with the ability to dive deeper if needed.
Note: The GIF below is playing at 1.5x speed. If it is not showing, please refresh the page.
Outcomes
Handing Off
In our final meeting, we presented the full design system and journeys that we created. Here, I delivered:
Organized Figma files with prototypes.
Introduction to Material design and design guidelines.
Education on Figma developer mode.
Suggestions for the Future
Since we were creating a product from the ground up, I found it important to illustrate some next steps to move towards a finished platform. These steps included:
Expanding the design system.
Designing secondary and outlier user flows.
Validating the designs through more extensive user testing with success metrics.
Scaling down to tablet and mobile breakpoints to give staff more options for completing their tasks.
Client Feedback
"This is a great start for Coding Champs and the deliverables will make development so much smoother."
Our client had a very positive reception of the final deliverables. Some feedback we received was:
Everything was well organized, useful, and presented well.
The organization and rationale will greatly help ease the job of the developers
These flows and design system are a great start for their company and they are excited to continue building it up.
Their genuine enthusiasm for the designs also led to an offer to work with them on future projects!
In Conclusion
This was a great collaborative working experience, where I learned skills like working with a design system and managing stakeholder expectations. The collaboration our team and our stakeholders had was vital to the end product, and it was a blast to bounce ideas off of each other to hone in on the best experience for our target users. The final deliverables are a reflection of the hard work we put in, and I feel fortunate to say that our product is a success!
