- UX Research
- Design System
Pineapple Lab
End-to-end UX and brand design for a custom keyboard e-commerce startup
Custom keyboards ask buyers to make a dozen decisions they can't see the results of. I rebuilt the buying experience around showing them.
Role
Founding designer: research, UX, brand
Timeline
Sept 2022 – Aug 2023
Team
Solo designer, working with the founders
Tools
Figma, CAD, photo-realistic rendering
~30%
Lift in purchase intent
Prototype testing, 8 participants
~20%
Drop in reported frustration
Same cohort, pre/post comparison
8
Participants interviewed
Ages 21–32
Overview
Pineapple Lab wanted to be the easiest way into a hobby that is famously hard to enter. The website was doing the opposite.
I joined as the first designer, which meant there was no brand and no product to inherit, just a founding team, a category they knew well, and a stated mission to be the most accessible entry point into custom keyboards for newcomers.
I owned the whole arc: user research, the brand language, the shopping and customization experience, and the handoff to development. This case study follows that order, because that's the order the decisions actually happened in.
Buying a keyboard you can't picture
A custom keyboard is not one purchase. It's a stack of them: case, plate, switches, keycaps, stabilisers, mounting style. Each one changes how the finished thing looks, feels and sounds.
Almost every retailer in the category presents those choices the same way: a static image and a spec list. That works if you already know what a gasket mount sounds like. If you don't, the spec list is noise.
So buyers went elsewhere to fill the gap: forums, YouTube videos, third-party reviews. They came back with information that was inconsistent, out of date, or about a different build entirely. The research surfaced the cost of that directly.
- Found customization frustrating
- 75%Found customization frustrating
- Received a keyboard that didn't match expectations
- 50%Received a keyboard that didn't match expectations
- Bought through online platforms
- 75%Bought through online platforms
Where the confidence actually breaks
Eight interviews, a four-competitor audit, and a journey map, aimed at one question: at what exact moment does a buyer stop trusting the purchase?
Interviews: 8 participants, ages 21–32
Recruited from keyboard communities, mixing first-time buyers with people several builds in. I asked them to walk me through their most recent purchase rather than describe their preferences in the abstract, which is where the expectation gap showed up.
Competitive benchmarking: 4 retailers
I audited how each competitor handled configuration and sound information. Most had no interactive customization at all, and none communicated sound in a way a newcomer could use.
Journey mapping
Mapping the purchase end-to-end located the failure point precisely: the drop-off wasn't at checkout, it was at configuration, the moment the buyer had to commit to a combination they couldn't preview.
The specific missing information was consistent across participants: size, colour, sound, weight and material. Five properties, four of which are physical and none of which survive a product photograph.
The gap was sensory, not informational
“The most impactful design decisions aren't about aesthetics. They're about understanding exactly where users lose confidence, and removing that friction.”
Adding more specs would not have fixed this. Participants weren't short of data; they were short of a way to experience the data before paying for it. That reframed the design problem from 'present information better' to 'let people rehearse the outcome'.
It also set the brand direction. The category's visual default is dark and technical, which reads as expertise to insiders and as a locked door to everyone else. If the mission was accessibility for newcomers, the brand had to argue the opposite.
A warmer way in
I built the identity around a pineapple constructed from keycaps: the product making the mark, rather than a logo applied on top of it.
The palette moved deliberately away from the category norm. Where competitors go dark and technical, this goes soft: a green, a warm yellow, a neutral grey, aimed squarely at the low-to-mid budget newcomer the company wanted to serve.
Green
#7BAF3F
Yellow
#FAE99E
Grey
#DAD9D9
Building a way in
Interactive product gallery
A rotatable preview that updates colour and material in real time. This is the direct answer to the visualization gap. The buyer sees the specific combination they're configuring, not a representative photo.
Selections that stay visible
Chosen parts render on screen as they're picked, so the configuration is always legible as a whole rather than as a list of separate dropdown states.
A deliberately ordinary checkout
The novelty budget went into configuration. Checkout follows the conventional pattern buyers already know, because that's not where the confidence problem was.
Group orders
Community group buys are how a lot of this hobby actually works. I designed a dual flow: a host sets up the order, participants join by QR code or link and configure their own board inside it.
What testing showed
- Improvement in purchase intent
- ~30%Improvement in purchase intentVersus existing platforms, self-reported
- Reduction in reported frustration
- ~20%Reduction in reported frustrationSelf-reported, same 8 participants
What I'd do next
The clearest lesson was about feedback: testers responded to motion and real-time response far more strongly than I expected. The preview updating as they changed a switch did more for their confidence than any amount of supporting copy.
The honest weak point is the group order flow. It's the most complex interaction in the product and it got the least testing, because it was the last thing built. That's the first thing I'd put in front of users.
Beyond that: developer handoff and launch, then a dedicated mobile experience. The current work is responsive, but a configuration tool this visual deserves to be designed for a phone rather than adapted to one.