Leukocyte-Lab ─ Brand Website Design & Build
Project Duration
About 2 weeks (2024.09)
Development Process
Agile
Company
Leukocyte-Lab Inc.
Role
UI/UX Designer
Responsibilities
- Mockups (incl. responsive layouts)
- Prototype
- Built the site on a no-code platform
Tools Used
Figma, Framer, Adobe Illustrator
Background & Problem
Background
The old site had been improvised from a trade-show landing page — its content and structure were stuck serving that one-off event, and it couldn't hold up as the foundation for an ongoing brand site. As plans to expand into overseas markets moved forward, the company decided to rebuild the site from scratch. But a two-week timeline, scattered source material, and requirements that kept shifting were all realities I had to juggle at the same time.
Role & Output
Teamwork
This project was a two-person collaboration between me and the Design Lead. After the Design Lead planned the information architecture, I pulled together leadership's requirements and the scattered content material, turned that structure into a complete visual language, produced desktop and mobile mockups and prototypes, and finally built and shipped the site solo in Framer.
Existing Problems
Focus on Problems
01｜Product value was hard to convey through text alone
The old site described product features in plain text — users struggled to concretely understand what the product could do or what problems it solved, and couldn't tell whether it fit their needs.
02｜The site lacked a coherent brand positioning long-term
The old site never had systematic information planning — its content stayed boxed into the framework of a single event, unable to clearly convey the company's product positioning or brand image.
Page Walkthrough
Page Display
Homepage
Product Overview
About Us
Interactive Scenario Illustrations
*This reflects the site as it actually shipped from 2024.09 to 2025.12.
The current site was later rebuilt quickly on a GitHub template due to a shift in business strategy (styling still handled by me) — this case study focuses on the design and build of the first version.
Results
Results
Letting product value come across fully to the outside world
The new site became the brand's first complete public showcase — on top of a customer-acquisition model that had mostly relied on personal networks, the site's content now conveys product value directly.
Learnings & Reflections
Takeaways
An incomplete tool evaluation affected results down the line
When choosing a build tool, the evaluation focused mainly on price and surface-level features — it didn't dig into SEO support or ongoing maintenance needs. After launching on Framer, SEO performance fell short of expectations, and the new site's visibility stayed limited. Going forward, I'll weigh more dimensions upfront before making that kind of tool decision.