Gold Star
a student motivation tool
OVERVIEW
Gold Star was created as a way to help teachers navigate an already challenging situation as the COVID-19 pandemic expedited the use of technology in the classroom. With a common pain point of students not completing assignments, Gold Star was designed as a way to motivate students to complete coursework. It allows teachers to assign “star” amounts per assignments that students earn simply by completing assignments. Completely separate from their grade, Gold Star aims to build positive reinforcement for student to turn in completed work. It also solves the additional pain point of teachers needing to spend money out of their own pocket to provide enticing rewards for their students. With the ability to use pre-made digital rewards along with creating unique physical rewards (for those students who are only motivated by candy), Gold Star can help to reduce the out of pocket cost teachers have when supplying their classroom.
ROLES
UX Researcher/Designer
UI Designer
TOOLS
Figma
Mural
Zoom
PROJECT DURATION
April 2022 - August 2022
4 months
Challenges/Problem Statement
CHALLENGES
The COVID-19 pandemic upended education in the United States and across the globe. As school districts adapted to the new normal technology began to play a larger and larger role in the classroom. With this came particular challenges:
Every student having a device-while ultimately beneficial-allowed for greater opportunities for distraction.
Teachers struggled monitoring student activity while on their devices.
With the surplus of digital resources for teachers, those without strong digital literacy felt overwhelmed having to learning new tools on top of their curriculum.
These insights led to the following HMW statement to guide the design process:
How might we help teachers to motivate their students to complete coursework?
Goals
To create a tool that is simple and easy for a teacher to learn & use.
To alleviate the financial burden that teachers take on when trying to motivate students. (eg. spending money out of pocket on rewards such as candy, stickers, etc.)
The ability to complete all tasks quickly so that the product doesn’t become a burden for the teacher to use regularly.
Throughout this project I had the following goals:
Research & Analysis
OVERVIEW
During the inital research phase of the project, I conducted a series of user interview. I had researched through secondary resources how districts implemented technology into the classroom during the pandemic, and I live with a teacher so I was hearing directly how it was going in a specific classroom, but I wanted to understand more deeply. I interviewed 6 former and current elementary school teachers along with parents with elementary school-aged children to better understand:
How technology was used before the pandemic began, how it evolved during the fully remote or hybrid school year, and how they continue to utilize technology now that schools are fully in person again.
What teachers look for when choosing digital tools. How much of that choice is up to the teacher and what is implemented at a school-wide and district-wide level.
The challenges they’ve noticed surfacing with their students when it comes to using technology.
While, initially I interviewed people on both sides of the problem, the teacher side and the student side, I wanted to focus solely on the teachers for the first iteration of this project. One thing I learned through my interviews:
If a program is great for students but is a hassel for the teacher to actually use, why would they impliment it in the classroom?
screenshot from a user interview with a second grade teacher in California.
Affinity map created after the completion of user interview. Made in Mural.
Persona
Students not submitting their work.
Needing to use multiple programs durin ghte course of a school day.
The desire to create a positive learning environment.
To spend less time navigating digital tools and more time working with students.
OVERVIEW
Based on the user interviews I created the persona of Jillian Davis to guide the design process. Her pain points and goals as a teacher are:
Findings & Implementations
Brainstorm of possible approaches to a HMW question.
User stories to develop the MVP features.
User flow of the “New Assignment” red route.
OVERVIEW
Now that I better understand the user’s needs, I began brainstorming solutions. The overarching idea was to figure out what would be useful to have in a Classroom Management Interface that didn’t already exist. This included itegrating a rewards system, filters and redirects to prevent studetns from getting distracted by other websites, and a pop-up screen that appears when no activity has be detected to prompt them to continue working. While the vision was large, I decided to narrow my focus onto one aspect- the rewards system.
From there, I developed user stories and continued to narrow down until I developed my MVP features. I then broke down each feature into their red routes.
RED ROUTES
Students not submitting their work.
Needing to use multiple programs during the course of a school day.
The desire to create a positive learning environment.
To spend less time navigating digital tools and more time working with students.
FEATURES
Point-“star”-system associated with assignments.
Assignment importing from other classroom management programs (eg. Google Classroom).
Digital rewards for teachers to enable for their students to spend stars on (eg. digital stickers, avatars, etc).
The ability to set up physical rewards in the system (eg. candy, trinkets, couch time, etc).
A ranking system to track student’s star totals.
NOTE: the ranking system would only be visible on the teacher interface so they can keep and eye on who may be under performing and know where to focus their attention
The ability to see what rewards students are buying to make sure the rewards are enticing.
Sketches & Guerilla Usability Test
OVERVIEW
Once I had my direction I began working on sketching out the screens. My goals were:
To create a home page dashboard so the user could complete everything necessary from home in needed.
To have information displayed in a clean and intuitive manner.
After completing sketches for all my screens, I put them into Figma and created a clickable prototype to take out and guerilla test. I conducted 5 tests and had the following insights:
Sketch of the assignments page.
Sketch of the home page.
After these tests I decided to add a new red route, a new feature, and remove a feature based on feedback.
Icons for the different pages are confusing without labels (labels were added in after the first 2 tests).
Users wanted the ability to give out special rewards for students who have been performing well in the classroom.
Multiple users didn’t feel it was necessary to call out what rewards students have purchased recently.
They wanted to see more analytics on the student pages. How does the amount of stars they’ve earned translate to their grade?
ADDITIONAL RED ROUTES
Awarding a reward to a student.
NEW FEATURE
Adding a placeholder for the analytics.
NOTE: Though there is a placeholder for analytics in the MVP design, the feature itself is not a part of the initial launch. Further research is needed to build out this feature in a way that is not redundant with the rest of the programs teachers use in the classroom.
REMOVED FEATURE
The activity feed on the student’s page was removed based on user feedback.
Wireframes
OVERVIEW
After the initial round of feedback from the sketches I got to work on the wireframes and wireflows. Again the goals here are:
Simple navigation and intuitive interface.
Reduction of clutter.
Allowing multiple routes to complete the same task to allow the user to utilize shortcuts when crunched for time.
Give stars flow.
Award reward flow.
Create rewards flow.
Create assignment flow.
Branding & Design
High-fidelity designs.
Now that the basic structure is in place, it’s time for my favorite part- the visual design. At this point I named the program, created the moodboard, and settled on a direction for the interface design.
The name “Gold Star” is a callback to classic classroom rewards- stickers.
The colors are clean with a break away from traditional primary colors typically seen in children’s branding.
Even though this is a teacher interface, I still wanted the design to be fun and inspiring.
Interface Design
To goal of the visual design for Gold Star is to create an interface that is fun, while maintaining a clean and clear display
Gold Star style guide.
Color is used to evoke a sense of joy, with the pastel green backgrounds and pops of orange as accents.
Color is also used to label subjects for the teacher to easily identify.
Note: After conducting an accessibility audit, icons were added along with the color coding to help with identification for those with color blindness.
Stars pop-up window.
POP-UP WINDOWS
Instead of taking you to a new page, when you click on a button to complete a task, it appears as a pop-up window.
Keeping users on the same page when completing a task prevents them from getting lost on the site.
Home page with the F.A.B selected.
FLOATING ACTION BUTTON
The F.A.B is a way to give users a shortcut so they don’t need to leave the homepage to complete tasks.
Its bold color stands out against the background.
The hover state was added after the 1st round of usability tests to help entice users to explore this function.
Research Validation/Feedback
FEEDBACK FROM ROUND 1 OF USABILITY TESTS
After the high-fidelity prototype was complete, I conducted 6 usability sessions over zoom with current and former elementary school teachers.
I TESTED
How easy are users able to complete tasks?
What areas in the design are causing friction for the user?
Will users utilize the F.A.B as a shortcut to complete tasks?
BASED ON THE USABILITY TESTS, I OBSERVED
Not a single users attempted to explore the F.A.B.
When asked they assumed it would add a student based on it’s proximity to the student panel.
The calendar on the assignment page caused confusion.
Most were reading it as a month view instead of the week view it was supposed to be.
Most users attempted to access the student page through clicking the name they saw visible on the home page.
Their task was to give Melinda stars, but her name wasn’t prototyped to take you to her page from the home screen, just the classroom page.
Rainbow Spreadsheet via Tomer Sharon from Smashing Magazine to capture usability test notes.
FEEDBACK FROM ROUND 2 OF USABILITY TESTS
After the high-fidelity prototype was complete, I conducted 6 usability sessions over zoom with current and former elementary school teachers.
BETWEEN ROUND 1 AND ROUND 2 OF MY USABILITY TESTS I MADE THE FOLLOWING UPDATES
Adjusted the placement of the F.A.B and added a tool tip visible on hover to see if that would entice users to explore it.
Added more clarification to the calendar on the assignments page but creating more space between the days, adding the date range at the top, and a subtle background color to the columns to enhance the grouping more.
I made sure to prototype the design so you could click on Melinda’s name on the home page to go directly to her page.
The original prototype had a lot of placeholder information that confused users, so I adding more clarity to the prototype so users weren’t distracted by placeholder information and images.
Reflections
FINAL THOUGHTS
Now that this project has reached its end, I have the following reflections:
Though user’s didn’t intuitvely know to use the F.A.B shortcut for tasks, all of them said that once they were aware of it, they would use it moving forward.
If this project continues, I will continue to test the best way to make the F.A.B shortcut more enticing, though I learned that it’s not a game changer if there’s a bit of a learning curve there.
How will the student interface fit with the teachers?
The majority of users said they would be interested in seeing this implemented in their classroom. What does the full program look like then?
If this project were to continue, does it live as just a one off motivation tool? Or could it expand into a full classroom management system with features for analytics, grades, curriculum, etc?
Thank you for reading this far! If you’re interested in learning more, email me at hello@jamiekepko.com and if you want to check out the Figma prototype, head over to the link here: https://bit.ly/3SEgeOl