Product Site · Static Commerce Flow · Student Concept
The Keyboard
Board
A student product idea rebuilt into a functional product-site prototype with a clearer story, working cart behavior, and a more credible path from concept to inquiry.
Overview
A product concept about making a keyboard take up less dead space.
The Keyboard Board is a product-site case study for a simple physical idea: a fitted wood cover that rests on the raised body of a keyboard and turns the instrument into usable surface area when it is not being played. The concept is practical, small, and specific, which is why the website needed to feel equally restrained.
The original version had a promising visual direction, but the rebuilt version pushed the site closer to a believable product prototype. The cart works. The finish options have structure. The inquiry path makes sense. The site admits what is still conceptual instead of pretending the product has been fully manufactured.
The idea was never to oversell the object. It was to make the product feel real enough to evaluate.
Core design insightThat distinction matters in a portfolio. A product concept can be speculative and still be presented honestly, as long as the interface makes clear what is designed, what is functional, and what still needs engineering validation.
Brief
The rebuild needed to preserve the calm product identity while fixing the experience.
The assignment was not to redesign the concept into something louder. The warm wood, classical restraint, and minimal product tone were already working. The problem was that the original site behaved more like a visual mockup than a product experience.
A polished student concept with product mood, finish ideas, and a visual identity, but limited functional behavior and an unfinished purchase path.
A lightweight product site where finish selection, cart state, empty-cart behavior, inquiry handoff, and deployment details support the concept.
Product Strategy
The site had to make a small object feel considered.
The product story works because it starts from a real spatial problem. Keyboards take up space. They are too useful to hide, but they become awkward furniture when they are not in use. The Keyboard Board turns that in-between state into the center of the concept.
1. Name the problem
The site frames the keyboard as a surface that already exists in the room but is usually unavailable.
2. Show the object
The product pages organize wood finishes and product variants so the idea reads as a line, not a one-off class mockup.
3. Let users act
The cart-to-contact flow lets a visitor express interest without pretending the site is a full checkout system.
Commerce Flow
The cart is small, but it changes the credibility of the whole site.
A product site with inactive buttons breaks trust immediately. The rebuild treated every product interaction as part of the pitch. Add to Cart buttons update state, the cart remembers choices with localStorage, the empty cart has a real message, and the final inquiry form carries the selected product context forward.
The flow stays honest. It does not invent payment processing, inventory, manufacturing timelines, or shipping infrastructure. It creates a believable next step for a product that is still being presented as a concept.
Visual System
The design language needed to feel handmade without looking unfinished.
The visual direction uses warm wood, quiet typography, restrained spacing, and editorial product pacing. The goal was not a hyperactive e-commerce template. It was closer to a furniture object, a studio product, or a small-batch design page.
Loud sales banners, fake urgency, aggressive discount language, and generic product-card clutter that would make the concept feel cheaper.
A calm product hierarchy: material first, surface function second, cart behavior third, and inquiry language that fits an early-stage object.
The restraint is doing work. Because the product idea is small, the interface has to make the details feel intentional: finish naming, spacing, button states, and the relationship between image, copy, and action.
Build
The technical decisions support the product instead of showing off.
The rebuilt site uses static files, one product-oriented JavaScript layer, and deployment details that make the prototype inspectable. The code is not complex for the sake of complexity. It is just enough behavior to make the concept feel alive.
Evaluation
The strongest part of the project is the honesty of the prototype.
The Keyboard Board works because it does not pretend to be a funded company with finished manufacturing. It presents a product idea in a way that lets a viewer evaluate the object, the site, and the next step without being misled.
Presentation
The case study had to separate product thinking from production claims.
The most important presentation decision was keeping the language precise. The site can show finish systems, product pages, cart behavior, and a contact path, but it should not imply that the object has completed manufacturing, safety testing, weight-rating validation, or final fit engineering.
That honesty makes the project stronger, not weaker. A viewer can see the design intent and the web execution at the same time: the concept has a clear use case, the interface gives it shape, and the prototype creates a believable next step without turning speculation into a false business claim.
The site demonstrates material direction, option structure, shopping behavior, and inquiry logic.
The physical object would still need fabrication testing, fit validation, load considerations, and manufacturing decisions.
Takeaways
A small product site is only convincing when every interaction is specific.
The rebuild shows how much credibility comes from follow-through. A product page can look good, but if the cart does not work, the form is vague, or the site hides the concept’s early-stage status, the viewer stops trusting it.
The strongest design choice was keeping the scale honest. The Keyboard Board does not need a giant platform story. It needs a clear object, a polished material system, and a functional path that makes a viewer believe the idea was considered carefully.
The question this project answers.
How do you make a student product concept feel polished, interactive, and professionally presented without pretending it is more finished than it is?