UX Design for CoderHeroes
CoderHeroes offers virtual coding programs for students to narrow STEM’s education gap.
Background
Technology is reshaping the way we work and learn. Giving underserved people the opportunity to learn coding is increasingly critical to empower the next generation in the digital age. The need is paramount today for educational programs to support creativity, coding, and STEAM programming among underserved youth.
I had the opportunity to research and design for CoderHeroes, a program committed to teaching coding, providing access to computer resources, and educating youth with technological skills. CoderHeroes works in tandem with Code Your Dreams to provide middle and high school students in underserved Chicago communities with free computer science courses, as well as access to laptops, WiFi, and devices needed to create apps through coding. A portion of each virtual CoderHeroes tuition is donated to their partner Code Your Dreams program.
CoderHeroes and Code Your Dreams were created by Brianne Caplan, CEO, founder, and data scientist. Brianne’s mission is to help underserved Chicago households stay engaged with access to computer science and coding resources.
My Role
As a UX Designer / Product Designer, my role was to explore ways to complement and help the CoderHeroes organization through user experience research and user interface product design. Through my initial interviews with founder Brianne Caplan, I was thrilled by her dedication to expanding sustainable access to computer science in schools and increasing participation in STEM by empowering students from underrepresented groups. I worked alongside my esteemed colleague, Sally Haulfmann, to produce research, design, and interface product assets. I committed to using my designs to support and advocate for her mission to inspire the next generation of tech. I was excited for this opportunity to amplify their brand’s online visual identity as well as to foster a hub to connect families and technologists through visual storytelling.
The Opportunity
We were consulted to design during a time when the COVID-19 virus forced schools to close their doors indefinitely. During this time, the Chicago Public School system estimated 115,000 children needed computers, and 271,000 students from low-income families. Brianne Caplan’s mission came to us during a complex time when underserved families were experiencing growth in their search for expanded access to participate in quality computational thinking and problem-solving skills.
The Research
UI Audit
To start the research, I took inventory of different styles of buttons, links, and other elements of the existing website’s design, and spent time comparing features of other tutoring, coding and youth extracurricular landing pages to the current CoderHeroes website.
We identified a number of core skill set values that CoderHeroes wanted to teach and convey through their site — for students to be: Brave, Analytical, Helpful, and Artsy. In addition to coding, these soft skills were absolutely essential to the CoderHeroes ethos and branding.
Market Analysis
To continue the research, I took inventory of different styles of buttons, links, and other elements of the existing website’s design, and spent time comparing features of other tutoring, coding and youth extracurricular landing pages to the current CoderHeroes website.
I noticed a few features that were important similarities among websites looking to reach students through movement and virtual learning:
Instructor Search — I noticed that most of the sites connecting virtual online teachers to students offered a method to view instructors by various facets and backgrounds. Users can browse proven tutors based on ratings or skills.
Find + Book a Tutor — Alongside browsing instructors, users could book sessions based on their availability or program type. Sessions usually could be 1-on-1 or tailored by class.
Fun Feel + Palette — Educational pages tended to trend towards colorful, eye-catching calls-to-action while interspersing professional, cool tones in blues and greens. In contrast, the movement-based yoga pages focused on a more playful, bouncy palette for kids. After considering these two palettes, we wanted to merge these two to provide both a professional and playful look to CoderHeroes brand.
Testimonials — Each of the sites we looked up offered testimonials and review quotes about their services, underscoring the importance of social proof.
Empathy-drawing imagery — Imagery connects and engages users. We noticed that most sites incorporated a visual approach by showing faces of teachers, students, and parents. We wanted to engage students and families with images or students participating in CoderHeroes activities such as CoderCamp, CoderSitters, and CoderYoga. In addition, we were interested in exploring creative abstract imagery such as the fun ben-day halftone dots frequent in comic books, splash stars, playful blobs, and other ways to compellingly reinforce the idea that CoderHeroes helps make coding fun for various ages and experience levels.
Communication — The copy used in most sites tended to give mention to the connections between communication and learning, such as how teachers speak and act with parents and students, and how students might respond. For this reason we wanted to build an in-app messaging feature for CoderHeroes.
Progression and Gamification —An important approach for increasing learners’ motivation and engagement especially among coding and gaming platforms we found was through awarding incentives. Our interviews with parents of Boy/Girl Scouts and instructors at public schools reinforced the beneficial potential of gamification elements to foster motivation and collaboration in education. Our design explores the use of quest badges and journey progression.
Scheduling — We were also interested in streamlining the ability to find a tutor or program, to book a scheduled time, and to complete payment details in an organized and on-demand way to increase ease-of-use.
Proto-Personas and Empathy Maps
To help align stakeholders views, I created a proto-persona of an instructor, and empathy maps of a student and instructor in order to exemplify the target audience during a brainstorming session. These were to be further checked against actual data, and were built based on our collected information to help guide our decisions to be as approachable as possible.
Screener Surveys
The essence of great research is being able to help researchers identify the right people, and one way of doing this is through a questionnaire. We created a thoughtfully crafted screener to identify participants with the attributes and qualities of our target audience. We were interested in identifying, interviewing, and user-testing the following audience: parents of children of a wide range of ages; educators and teachers; coders, developers and STEM enthusiasts.
From among all of our responses, we found that:
- 70% ranked seeking virtual learning experiences over the past 6 months either moderately or very important.
- 62% have either used an online booking platform for academic or extracurricular tutoring, or would be open to trying it.
This data indicated to us that most users were interested in virtual learning experiences. Also, most users had a familiarity and perhaps expectation for online academic booking capabilities.
User Interviews
In order to get to the core of what our users were trying to do and what their needs and problems were, we conducted 5 interviews of adults we identified as primary stakeholders to the CoderHeroes mission from our screener surveys — among them, educators, volunteers, non-profit professionals, and parents of varying age-ranges. These interviews were informal, moderated sessions.
We tended towards asking open-ending questions in order to yield expansive responses about useful features users might want based on the circumstances they currently were experiencing in their own lives. In order to get there, we started interviews with a question like, “What does your organization do and how does your role fit in there?” in order to learn additional details and nuance easy for anyone to answer, and to help make interviewees feel more comfortable. A selection of just a few questions from our overall, methodological list of over 10 questions follows below.
Affinity Mapping
We wrote down quotes and observations from our interviews onto notes, and organized them into groups of similar items to help us analyze trends and categorize qualitative data. Our affinity map included categories such as family dynamics, learning curves in tech, progress reporting, various modes of learning, and rewards and merits. Highlights from our affinity map are pictured below, and presented in even greater detail in the next two images.
Persona
From the synthesis of our user research and proto-persona study, I created a standard persona of a parent to best articulate our target audience, who was in fact, the “parent”. CoderHeroes’ primary UX persona is identified as a parent interested in finding virtual experiences to keep kids engaged, has used online booking platforms to schedule classes, and believes tech is the future and wants their children to learn coding. They are both working remotely and hoping to find remote extracurricular education resources. They value technology, childcare, and the community.
Sketches
During a design studio, we sketched various functions users had mentioned, such as the ability to find instructors by program and availability, being able to sign into a portal, booking instructors, and viewing programs.
User Flow and Site Map
We defined user flows to illustrate how we streamlined navigational tasks for the CoderHeroes user by function, which included logging into personal family accounts, browsing current programming or finding an instructor/tutor, viewing program pages, exploring program calendars, searching by availability or instructor profile, and scheduling sessions in the booking platform.
We also established a site map to convey which pages are critical on the site and to provide a visual dimension of the entire picture, which enables developers and designers to make sure we are on the same page.
Usability Tests
We created our initial prototype using Adobe XD, and held 2 rounds of usability tests. The first usability test consisted of 5 adult participants who were either educators or parents. User testers were asked to complete a series of tasks corresponding to 3 different scenarios — parent, student, and instructor.
The second round of usability tests shifted evaluative focus towards usability heuristics, namely: learnability, efficiency, memorability, usability, error handling, and satisfaction. We also asked users after the tests about their opinions and impressions regarding our prototype’s overall aesthetic and readability.
Interface Design
We created a mood board and style tile to help us define a referenceable and consistent set of aesthetic ideas.
In our mood board, we felt an affinity towards comic books, inspired by the heroic aspect of the name, CoderHeroes. In our mood board and style tile, we explored Ben-Day and halftone dots found frequently in classic comic book art. For example, speech bubbles and dialogue stars are fun and playful graphic elements that both parents and students could appreciate.
In the style tile, our palette includes coral and salmon tones to convey energizing calls-to-action, which used in conjunction with the yellow marigold helps to convey creativity, optimism, and happiness. We also include soothing teal and turquoise, and shades of purple which suggest wisdom. We tended towards sans-serif fonts for readability, as well as an accent font to highlight moments of levity.
Accessibility
As inclusivity is our priority, we performed a contrast check to ensure our colors are accessible with the Large Text AA WCAG Standard. We did this after hearing one user state, “These colors are really fun, but some of this is hard for me to read!” We cross-referenced our colors using the WebAIM accessiblity contrast checker in order to verify whether our font and background combinations conformed to WCAG standards.
Iteration
Based on our usability testing results, we decided to make iterations in our wireframes. User testing showed us the need to make changes pertaining to copy, call-to-action buttons, and the addition of parent testimonials based on our multiple rounds of usability testing.
Results
The Prototype
Stills of our prototype are shown here:
Links to our prototype created in Adobe XD can be explored here:
Instructor User Flow: https://xd.adobe.com/view/04d44ad9-4a62-4a60-8142-01d7755577a0-5187/?fullscreen
Parent/Student User Flows: https://xd.adobe.com/view/a7c39f50-7d8e-4d69-8074-e9d6ebc2e8e3-f290/?fullscreen
Reflections
Next steps would fall into both long-term and short-term categories. In the long term, I would hope to brainstorm more features for virtual peer-to-peer interaction and remote workshopping tools, and we have already explored some existing tools such as Miro, Mural, and Invision. I would be interested in potentially brainstorming instructor lesson portals and lesson/message update notification features. In the short term, I am interested in additional prototype refinement and back-end development.
Ultimately, I found CoderHeroes to be a wonderful organization that teaches coding in a time when STEM is especially of critical importance, and families who pay for CoderHeroes classes are helping to fund Code Your Dreams programs for students in underserved neighborhoods, and it was a pleasure to design with this exemplary non-profit.
Credits:
