Justin Shimokochi

Project Details

---

Defining the Problem

The problem we identified is that many middle school students lack access to adequate resources to learn HTML, CSS, and design. This is particularly true for middle school girls, who face significant barriers in learning STEM subjects.

---

Competitive/Comparative Analysis

For our competitive/comparative analysis we looked at five websites and two apps. One app and one website were comparative analyses as their subject matter was not directly related to coding or design.

Brianda and I did this part together, with me choosing 4 websites/apps and her choosing 3 websites/apps.

Findings

• Subject difficulty: Of the apps/websites which did teach HTML or CSS, many did not teach at a level we felt middle schoolers could understand. Many delved into more advanced topics like flexbox which can seem abstract to new learners.

• Gamification: The level of gamification varied depending on the app/website, though gamification elements were most often paired with hands-on learning activities, which we felt was optimal for our application.

• Coding mechanics: Some websites with gamified experiences tended to gravitate towards the user writing each line of code, but we found the fill in the blanks method of writing lines (similar to Duolingo) to be more approachable and more viable on mobile devices.

• Aesthetics: Designs which incorporated more vibrant colors and fun icons felt more approachable for all ages. More sleak designs felt modern but did not reflect the “fun” qualities of the app/website.

---

User Surveys

I made surveys collecting qualitative data from middle school teachers, and surveys collecting quantitative data from middle school students. Survey questions were brainstormed using Claude, which I then refined.

There was two responses from middle school teachers and six responses from students.

I analyzed the data and came up with 3 main insights.

Insight One: Video Game Preferences

• Summary: Middle school students primarily enjoy creative/building video games. Most students enjoy a healthy amount of competition with friends, though a game being too competitive could make them want to quit.

• Supporting data:
  • 66.7% of students answered that their favorite type of video games are building/creative video games.
  • 40% of students answered that playing against friends would be the number one feature that makes them want to play a video game again (not counting those who said they did not really play video games).
  • 40% of students answered that a game being too competitive would be the main reason they stop playing a game (not counting those who said they did not really play video games).

• Design decisions:
  • Activities in the app revolve around building or creation.
  • There are in-app portfolios where users can choose to share their creations with their friends (voluntary friendly competition).
  • Trophies (achievements) are visible to friends on a user’s profile.

Insight Two: Perceptions of Web Design and Coding

• Summary: Middle school students tend to find the concepts of coding and web design to be cool, fun, and interesting. They do not feel that web design or coding would be easy.

• Supporting data:
  • Words that come to mind when students think of web design: interesting (80%), fun (60%), cool (60%).
  • Words that come to mind when students think of coding: interesting (75%), fun (75%), cool (60%).
  • 0% of students answered that they think of coding or web design as easy.

• Design decisions:
  • Students tap on snippets of code to write lines instead of having to remember and type exact syntax.

Insight Three: Learning Preferences

• Summary: Middle school students benefit from taking a break and changing things up during lessons to maintain their interest.

• Supporting data:
  • “When my students lose focus on a topic, I change it up by having them move around or take a brain break. It is hard to sit and focus for a long period of time so movement is necessary” (Middle School Teacher).
  • “Either we do a quick brain break or game, or we change a rule slightly to what we were doing” (Middle School Teacher).

• Design decisions:
  • Lessons don’t focus on the same subject back-to-back (example: CSS lesson on type follows lesson on color).

---

Personas

---

Site Map

---

User Flows

User flow for Ellen:

User flow for Ashley:

---

Sketches

---

Mid-Fidelity Prototype

This is where I established the layouts which would be followed once screens became more developed.

---

High Fidelity Prototype

I worked on styling the lesson/game screens, while Brianda worked on styling the core app screens (log in/sign up, learn, profile, portfolio).

Brianda established how the brand identity would translate onto the core app screens first by adding colors and typefaces to the layout I had established, and I followed suit and applied the style to the lesson/game screens. All background patterns were designed by Brianda.

Screens I designed:

---

App/Game Assets

The character/mascot I used in some of the assets was designed by Brianda.

Icons:

Lesson thumbnails:

Lesson assets (Layout/content taken from existing lessons made by our advisor/client):

HTML game assets:

---

Final High Fidelity Prototype

Prototype Link

In addition to other interface design tweaks, I made color changes to Brianda’s screens and my screens as color contrast was not sufficient to meet WCAG guidelines in several places.

Screens where I made color changes and other interface changes:

Screens where I changed colors for contrast:

---

Loading Screen Motion Graphics

Loading screen motion graphics were made to help clarify system feedback when navigating through the app. Logo and pattern designed by Brianda, I designed the loading bars and motion in After Effects.

---

Reflection

• Learnings:
  • Design thinking is different when designing for kids, potential differences in mental models and attention span should be considered
  • Designing learning platforms involves balancing fun, usability, and being effectively informative
• Challenges/Limitations:
  • Only 8 participants in the user surveys
  • Time constraints made usability testing unfeasible
  • We crafted the visual design of the app before considering usability
  • Integrating the brand identity into the app mid-project required extra coordination, as Brianda had not been working on the Figma files until that point
• What I would do differently:
  • Prioritize usability testing and getting more survey responses rather than focusing too much on visual design
  • Recognize accessibility requirements earlier, ideally before moving on to high-fidelity
  • Organize and label the Figma file better so it can be picked up by anyone on the team, and/or develop a concrete style guide or design system for the app early on so that extra coordination does not slow down our workflows