KneatingROLE
UI/UX
Identity
Web Design
DESCRIPTION
Kneating is a learning companion website that teaches knitting through guided patterns, step-by-step lessons, and progress tracking. Its Knit Navigator tool uses a foot pedal for hands-free row navigation, helping users practice, track projects, and build confidence over time.
The logo design was inspired by the shape of yarn knitting, incorporating the visual relationship between yarn and needles. The letters “K” and “G” are connected through needle-like forms, subtly revealing the brand’s connection to knitting through both direct and indirect visual cues.
Site Map:
UX Strategy:By analyzing user and client requirements, I defined the project goals and UX strategy.
I developed user personas, key scenarios, and user flows, and created the sitemap and wireframes to establish the foundation for a user-centered experience design.
Homepage:The homepage functions as an “About” section, introducing what the website is, how to navigate it, and the services and experiences it offers.
Pattern Library:Pattern Library is a page where visitors can explore knitting patterns by filtering through difficulty level, needle type, item category, and technique. The advanced search feature allows users to find patterns more efficiently based on their specific preferences and needs.
Brief Information:When users select a piece from the Pattern Library, this page provides brief information about the item and introduces the knitting process. It then asks, “Do you want to knit this piece?” By clicking the “Commit” button, users can proceed to the next steps.
The Instruction Page and Knit Navigator are separated into two tabs within the same page, allowing users to easily switch between learning and practicing features. While the Instruction Page provides step-by-step guidance through images and descriptions, the Knit Navigator offers a more practical tool for knitters.
Instruction:The first tab, Instruction Page, provides a step-by-step knitting guide using visual images and descriptions, allowing users to easily follow each stage of the process. At the end of the page, an upward arrow button enables users to instantly return to the top, eliminating the need to manually scroll back through the instructions.
Before starting the project, the progress is displayed as 0%. By clicking the info icon, users can view instructions on how to use the Knit Navigator feature.By pressing the right pedal, users activate the Knit Navigator. As they advance through the pattern, the progress bar and row instructions update automatically with each completed row.
If users wish to stop at any time, they can scroll down to find the question “Done for Today?” and click the “Save Progress” button. This action takes them to the login page, where they can save their current progress and resume their knitting session at a later time.
Knit Navigator:The second tab, Knit Navigator, provides a practical tool for tracking their progress within a pattern. Connected to a foot pedal, it allows users to advance each row hands-free while knitting. Each pedal press records the current row, displays what step the user is on, and provides written instructions for what needs to be completed in that row. This feature helps knitters maintain their progress and easily continue their work in future sessions without manually counting rows.
My Archive:Users sign in to record their progress. First-time visitors can create an account, while returning users can log in and access My Archive, where they can view their current projects and previously liked projects and navigate directly to them. The platform also allows users to upload photos and maintain detailed progress logs.
The mobile version was designed to closely reflect the look and functionality of the website, providing a consistent user experience across devices.
Through the Pane
@2026
Dain YoonGraphic Designer