Nik

Bobbary

About

Makerspace

Resume

Make a Move

Nik

Bobbary

Design system & rebuild of a mental health platform

In preparation for PlaySpace's market launch, the product, design and dev team was tasked with rebuilding the platform from the ground up. As the sole product designer, I re-designed the platform, updated the information architecture, fixed core UX issues, and refreshed the visual language.

ROLE

Product Designer

TEAM

2 Product Managers
3 Developers
1 QA
3 Clinical Advisors

DURATION

2 months

SKILLS

Design Systems
Figma Variables
UI/UX
User Research
Prototyping

Impact

20 pages and 18 features redesigned
6 pages and 19 features introduced
Refreshed visual language

Before vs. After

Components

User Journey

User Research

AI Experimentation

Tradeoffs

Customization

Reflection

Before vs. After

Before vs. After

Lack of design foundation

The existing tech stack was built on hard-coded styles, an incomplete component library, and a visual language that didn't match the broader brand identity — creating a disconnected user experience and unscalable system.

Unclear information architecture

Navigation and organization made existing features hard to discover, while we simultaneously had to account for new features being added without a clear roadmap.

Leveraging an open-source component library

Given our time constraints and a highly ambiguous roadmap, the dev team and I researched customizable open-source component libraries that would allow us to start working from the same source immediately. We landed on shadcn/ui for its clean design — which worked great for healthcare — and matching code and Figma files with built-in variables.

Leveraging an open-source component library

Given our time constraints and a highly ambiguous roadmap, the dev team and I researched customizable open-source component libraries that would allow us to start working from the same source immediately. We landed on shadcn/ui for its clean design — which worked great for healthcare — and matching code and Figma files with built-in variables.

Atoms

Primitive

→

→

Molecules

Semantic

→

→

Organisms

Components

Design System Structure

Atoms

Primitive

→

→

Molecules

Semantic

→

→

Organisms

Components

Design System Structure

Components

User Journey

I intentionally kept customization minimal and used the library's default components to maintain consistency with development. With the roadmap still taking shape, over-customizing the UI would have been premature. Instead, I focused on user journeys and mapping out the information architecture, knowing we could customize when the product direction was more defined.

User Journey

I intentionally kept customization minimal and used the library's default components to maintain consistency with development. With the roadmap still taking shape, over-customizing the UI would have been premature. Instead, I focused on user journeys and mapping out the information architecture, knowing we could customize when the product direction was more defined.

Leading with user research

I interviewed several practicing clinical advisors to identify quick wins for usability improvements and features that were less used. These findings helped the product team prioritize scope:

  • 5 core features improved

  • 7 features dropped

Leading with user research

I interviewed several practicing clinical advisors to identify quick wins for usability improvements and features that were less used. These findings helped the product team prioritize scope:

  • 5 core features improved

  • 7 features dropped

Example of practitioner feedback for the Playrooms overview & editor

Experimenting with AI for additional support

To stay competitive with the market by the time of launch, we needed to add new features while rebuilding existing ones. With limited design resources, the dev team and I explored AI tools to support our process:

Experimenting with AI for additional support

To stay competitive with the market by the time of launch, we needed to add new features while rebuilding existing ones. With limited design resources, the dev team and I explored AI tools to support our process:

I used UXPilot, Lovable and Figma Make to help visualize early concepts and prototype simple flows and interactions.

Final designs were refined in Figma and mapped back to components and variables before developer handoff to maintain quality and consistency.

The developers leveraged Figma MCP, Claude, and Cursor to accelerate development time.

Tradeoffs

Tradeoffs

Based on customer surveys showing majority desktop/tablet usage, we deprioritized manual mobile designs. Instead, the dev team used AI to generate responsive layouts from my desktop designs, which proved effective enough given our tight timeline.

Customizing components and variables

One week before launch, I received feedback that the platform needed a stronger brand presence. However, shadcn's library was dense and hard to navigate, and any changes would need code updates as well.

Since the product was more defined, I had a clearer sense of which components were actually being used. I developed colour ramps based off the brand colours, and worked with the marketing designer to test doable component colours and radius options on a couple of pages before finally landing on an approved direction.

Customizing components and variables

One week before launch, I received feedback that the platform needed a stronger brand presence. However, shadcn's library was dense and hard to navigate, and any changes would need code updates as well.

Since the product was more defined, I had a clearer sense of which components were actually being used. I developed colour ramps based off the brand colours, and worked with the marketing designer to test doable component colours and radius options on a couple of pages before finally landing on an approved direction.

Before

Before

After

After

At the same time, I brought the developers together to align on the plan. I would modify the original tokens, adjust their application on components in order to match the updated visual direction, and simplify the overall component library so the developers could prioritize updates.

Once the master Figma file was finalized, the developers once again leveraged Figma MCP, Claude, and Cursor to update the customized components, variants and tokens one by one in the original codebase library. Here is where we landed with the finalized first version of the design system:

Typography styles with usage guidelines

A complete colour ramp with functional and illustrative colour

Colour tokens with descriptions

Spacing rules and examples

Reflection

The tradeoff between speed and fit

Using an established component library let us move incredibly fast, but it's hard to know what system will actually fit your needs without a defined product. Knowing what I know about the product now, I may have looked for a simpler system than shadcn to build off of.

The tradeoff between speed and fit

Using an established component library let us move incredibly fast, but it's hard to know what system will actually fit your needs without a defined product. Knowing what I know about the product now, I may have looked for a simpler system than shadcn to build off of.

Lessons in scalability

Customizing and defining a design system takes significant time and resources, and I can see significant areas where this one could be improved for proper scalability and long-term use. I've since been practicing those skills on my own — contact me to learn more!

Lessons in scalability

Customizing and defining a design system takes significant time and resources, and I can see significant areas where this one could be improved for proper scalability and long-term use. I've since been practicing those skills on my own — contact me to learn more!

Maintaining sync between design & code

At this stage, the design system would need regular manual syncs with the devs in order to maintain consistency across design and code. I would look into tools like Storybook and Zeroheight to implement an automatic sync system to make this alignment easier.

Maintaining sync between design & code

At this stage, the design system would need regular manual syncs with the devs in order to maintain consistency across design and code. I would look into tools like Storybook and Zeroheight to implement an automatic sync system to make this alignment easier.

Let’s make your next release unmistakably better.

You’re a lean team with big ambitions, early users to impress, fires to put out, and zero time for a slow designer. I ship fast, and make your product feel alive, lovable, usable, and make it shareable.

You’re a lean team with big ambitions, early users to impress, fires to put out, and zero time for a slow designer. I ship fast, and make your product feel alive, lovable, usable, and make it shareable.

You’re a lean team with big ambitions, early users to impress, fires to put out, and zero time for a slow designer. I ship fast, and make your product feel alive, lovable, usable, and make it shareable.

Let's move fast

Let's move fast

Make a Move