My Role
Discovery • Ideation • Sketching • Wireframes
The Problem
The CSS framework Tailwind is one of the most popular ways that CSS is practiced today. Codepip offers an extensive library of coding games that teach CSS, JavaScript, and other web development topics, but a title about Tailwind is lacking. This is an opportunity to fill a gap in Codepip’s offerings.
The Solution
I was responsible for the 0 → 1 design of a new game called Tailwind Trainer. As the name suggests, in this game players learn the syntax and semantics of Tailwind’s many utility classes, and strengthen their knowledge through practice lessons.
Background
Research was conducted to identify the most significant pain points of Tailwind for newcomers. The findings suggest that while Tailwind’s tooling makes it easy to integrate within a project and the utility-class approach simplifies applying styles to a component, one of the downsides of the developer experience is the need to remember hundreds of Tailwind-specific class names.
This includes static class names like text-sm and bg-fuschia-500, variants that indicates different states like hover:decoration-solid and md:w-32, and syntax for interpolating custom values like font-[Open_Sans]. Some of these Tailwind class names relate closely to their CSS property counterparts and are easy to remember. But others are more difficult to recall and require practice.
Process
The work described in this case includes the first three stages of my user-centered design process
Throughout the process, Trello was used to track everything from background research to the game’s high concepts, mood board, mechanics and loops, and level design.
User flows were represented in a flow chart.
Wireframes
Low-fidelity wireframes were made by sketching with pen and paper. This step explored potential features of the game and possible layouts. The major features identified were an overview mode where users can navigate different levels grouped by unit, and lesson mode where Tailwind classes are described in terms of function and generated CSS code, and the player must input the correct class name.
Figma was used to create high-fidelity wireframes based on these sketches. Variables and components were used to maintain a consistent design system. Responsive design accounted for usage on tablet and mobile.
By iterating through the low and high-fidelity wireframes, mechanics were further crystallized. For example, when a player skips a problem or makes an error, the correct answer is revealed. The missed problem is repeated at the end of the lesson for reinforcement. Overall progress is measured by completing levels, culminating with the final level of each unit that synthesizes everything introduced up to that point. Achievements are earned by unlocking these final unit levels.
Despite the quiz-like nature of the game, efforts were taken to make the user experience as approachable and engaging as possible. The interface is minimal, a vivid color palette and rounded shapes are adopted, and Lottie animations provide a more playful atmosphere.
Next Steps
This case describes the initial discovery, ideation, and wireframing steps for the design of a new Tailwind coding game. Work is ongoing. Next steps include the development of a functional prototype that includes the main game loops, and play-testing it with target users.
After addressing the findings from the play-test in the design, the release version will be implemented and deployed. At this stage, evaluation will focus on measuring engagement through factors like play count and play duration using analytics data.