WJ - Pineapple Lab Web Design

Intro.

UX Research

Design Focus

The Design

Pineapple Lab

Pineapple Lab is a custom keyboard design company who aims to make the custom keyboard community more accessible and affordable. Their focus is to be the most inviting brand to the new comers in the community and provide enthusiast level quality with entry level pricing.

Responsibilities

As the first designer of Pineapple Lab, my role was to establish the brand language and creating an web user experience.

Skills

Brand design, Graphic Design, CAD modeling, Photo-Realistic Rendering, UI & UX design, UX Research, Usability testing, Mock-ups

Date

September 2022 - August 2023

The Problem

No Interactive Visualization

Buying a custom keyboard online means making a lot of decisions: size, color, materials, sound profile. All without being able to see or feel any of it. Most platforms gave users static images and a spec list. That was it.

If you wanted to know how your keyboard would actually look, sound, or feel before buying, you were on your own. Searching through forums, YouTube videos, and third-party sources that were often inconsistent and unreliable.

This gap between expectation and reality was the core problem. And it worked directly against what Pineapple Lab was trying to be: the most accessible entry point into the hobby for newcomers.

Elevating Online Shopping Experience

Research

Interviews

Total of 8 participants between the age of 21 to 32 years old were interviewed, selected from custom keyboard communities. These are users who frequently shop for custom keyboards.

75%

Purchase keyboards online from an online platform.
The others 25% from major distributors or online marketplace communities.

Out of those 75% (6 out of 8),

75%

Found customizing keyboards on a website frustrating

50%

Received a keyboard that didn't match their expectations.

I found the users are lacking information to visualize the keyboard: size, color, sound, weight, and materials of each parts of the keyboard. It was also revealed this forces users to do intensive research from 3rd party sources which can be confusing and unreliable.

Competitive Benchmarking

Upon analyzing some of the major the platforms the users were using, I found that most of them do not support interactive UI of the customization nor information on the sound. In addition, 3 of the 4 competitors researched had similar UI elements which many e-commerce websites use for ease of development.

User Journey Map

Frustration roots from the disconnect with their expectation and actual products.

Persona

Main Persona

Online Shopper

Order online purchasing has been frustrating because the websites experiences are limiting their visualization of how their keyboards might look, sound, and feel like.

Secondary Persona

Marketplace Shopper

They want to easily find accurate information to visualize the product before purchasing from other enthusiasts from the used keyboard market.

Design Focus

From research to design decisions

The research pointed to a clear problem: users couldn't visualize what they were buying. Size, color, sound, materials — all of it required intensive research across third-party sources that were often inconsistent or unreliable. Every design decision I made was aimed at closing that gap.

The visual direction — warm, accessible, community-forward — came directly from the brand positioning. Pineapple Lab was targeting newcomers to the custom keyboard hobby, not enthusiasts. That meant avoiding the dark, technical aesthetic most competitors used, and building something that felt genuinely welcoming.

The Designs

Design #1

Keeping it Simple & Easy

Homepage

Design #2

Browsing Products with Ease

Product Catalogue

Design #3

Improved Customization Experience

Product Details

The gallery now shows updated visual elements of the product such as colors, materials, and parts. The users can also spin the product around for the full view, and see the part they select appear on the screen.

Interaction Animations

These are examples of how the product preview would interact with the user's customization

Design #4

Streamlined Check-Out

Check-Out Process

Following a traditional check-out process, the designs are kept simple and intuitive.

Design #5

Corporate Off-site & Group Orders

The group order feature emerged from a combination of research insights and stakeholder input. Interviews revealed that corporate gifting and team-building events were an underserved use case — groups wanted to customize keyboards together but had no coordinated way to do it online. The stakeholders saw this as a growth opportunity, and the research validated the need. The flow needed to serve two distinct users: a host managing the logistics, and participants making individual customization choices — so I designed both sides of that experience separately.

Host: Class Sign-up

The host registers the class with details of their group, desired packaged based on the budget, and date. Then the host would schedule a virtual meeting with a team at Pineapple Lab and receives a URL link or a QR code that can be sent to the rest of the team.

Participants: Creating Custom Order

Accessing the given QR code or link, the participants are led to a screen to customize their keyboards, reducing rate of error and work load for the host from having to check-in with everyone's preferences.

The Process

Sitemap

Sketches

Wireframes

Homepage & Products

Checkout Process

Community Forum

Hi-fi Prototype

Conclusion

Learnings

This project pushed me to think about how to see traditional method of information presentation in different ways. Through feedback and critiques from usability tests, I learned that visual animation and feedback can take user engagement and satisfaction to a different level.

It also reinforced something I carry into every project now: the most impactful design decisions aren't about aesthetics — they're about understanding exactly where users lose confidence, and removing that friction.

Measuring impact

The designs were validated through hi-fi prototype testing with 8 participants — the same cohort from the original research. Purchase intent improved by approximately 30% compared to participants' experiences with existing platforms, and self-reported frustration with the customization process dropped by around 20%. These were informal measures from prototype testing rather than live data, but they directionally validated that closing the visualization gap was the right problem to solve.

When the website launches, the metrics I'd track to confirm this at scale: conversion rates on the product customization flow, drop-off points in the checkout process, and post-delivery satisfaction scores — particularly whether customers felt the product matched their expectations. That last one maps directly back to the research finding that 50% of users had received keyboards that didn't match what they'd imagined.

Whats Next?

The immediate next step is developer handoff and launch. Post-launch I'd prioritize two things: a dedicated mobile experience, and a usability study specifically focused on the group order flow — it's the most complex interaction in the product and the one with the least testing time given the project timeline.

Defining the Brand

Inspired by the name Pineapple Lab and their industry, custom keyboards. Keycaps are one of the mandatory part of a custom keyboard which they can express their uniqueness with its designs. I took a literal way of expressing the pineapple. The body is represented by keycaps, and the leaves that resembles of a pineapple.

Fonts & Colors

Pastel colors were selected to create a warm welcoming tone to the users, making the brand seem more accessible and friendly. This selection was made since the company is targeting low to mid budget clients, like those who are just being introduced to the community.

pantone 367 C

#7BAF3F

pantone 7499 C

#FAE99E

pantone cool grey C

#DAD9D9

Branding Use