ROB IS A SALES REPRESENTATIVE that works for the waste hauling company Green Trucks. Every day, Rob goes down his long list of phone numbers to cold call. When he runs out, he needs to search on Google to find new prospects.

This is very time consuming. In order to find leads more effectively, Rob needs to:

Know who is most likely to buy today
Understand why an account is worth contacting
Walk into conversations with relevant talking points
Spend more time selling, not researching or dialing

Founding of Commander

Our CEO recognized these needs while working in sales within the waste management industry, so he built Commander.

Commander is an AI-powered sales intelligence platform built specifically for waste haulers. It helps teams manage leads, discover new prospects, and understand when and why a prospect is worth pursuing.

Find your next prospect on heatmap

Emails that write themselves

Keep track of your hottest leads

Market intelligence to help you sell

My role as Founding Product Designer

Rapidly prototype interactive experiences that leverage ML/AI models
Build and enforce a scalable design system across web and mobile
Collaborate with executives to define product requirements and strategy
Conduct research in ambiguous problem spaces and translated insights into product decisions
Propose and execute new product ideas that shape long-term product strategy
Graphic design, branding, video editing

Commander Prospect Manager

Initial Product

When I joined, the product focused on delivering 10 prospects per day and automating email outreach. Customers evaluated success based on email replies and closed deals, outcomes we could not control. This misalignment led to 85% churn.

Previous Design

My Design

This led us to the ambiguous problem:

How might we maximize a customer’s likelihood of closing a deal without over-promising outcomes?

New homepage ideation

To tackle this problem, I sat down with the CEO and CTO to brainstormed some ideas on how we can restructure the prospect manager page and redefine our value proposition.

Conclusion from brainstorm

The core shift was redefining our value from “helping you close deals” to “providing high-quality prospects.” At the end of the day, it is up the customer to give the lead the final push to close.

Show the user why a prospect is a good lead

After a quick round of lofis, I jumped into the hifis to reflect our new emphasis on the quality of leads provided.

Prospect list improvements

Right-aligned lead statuses for faster scanning
Displayed selected ICP metric, such as revenue, with each prospect’s match score
Moved delete into a kebab menu to prevent accidental clicks

Current iteration of the prospects page

Page was very long -> split into 3 tabs
Improved visual hierarchy (sizing of header text)
Improved visual clarity

Impact

Reduced churn 85% -> 50%

I designed the entire platform in light & dark mode

A scalable dark mode system, accounting for elevation behavior, contrast accessibility standards, and contextual color token mapping between light and dark themes.

Available on mobile

Commander Design System

Built from scratch

A peek into the design system I built. Expanding the color palette, refining typography, and scaling the component library significantly elevated the product’s visual maturity and cohesion. I’m now evolving it by merging our system with shadcn components to build faster without sacrificing consistency.

team commander 🫡

This case study is under construction.

This is a speculative design proposal project.

A speculative design project explores possible futures by creating scenarios, artifacts, or prototypes that imagine and provoke discussion around alternative realities. Unlike traditional design, which often focuses on solving immediate problems, speculative design invites audiences to reflect on broader "what if" questions and the ethical, social, or environmental implications of future technologies, systems, or cultural shifts.

‍

The theme of this project is Design for Transitions. Our goal is to create an experience, a tool, or an environment that critically synthesizes our research on the future of work, the future of creativity, and extended reality (XR).

‍

Now, let's get into it

Our research started off by building a futures wheel which lead to a central theme around the problem of rising obesity, diabetes and related health issues in today’s youth.

Our focus points

Health and wellness
Making healthier choices
Convenience
Reduction in carbon emissions
Need for nutrition education and awareness

This lead us to formulate our research question:

Highlights from research

In 2022...

Where does our food waste come from?

Greenhouse gas emissions and waste

Projected Trends

The obesity projections for 2030, which is just 6 years from now, is quite concerning. If we extrapolate further, the obesity problem will completely take over the world by 2050 if there are no successful interventions in this field.

Introducing...

Our audience

Primary audience: health-conscious individuals
Secondary audience: chefs and food enthusiasts

Palate Infomercial. Filmed on GoPro MAX 360° camera.

Palate patented technology

Palate uses a patented nutritional slurry that contains all the macros in the proportions you would need for a healthy body. This slurry is fed into a 3D printer and crafted into familiar food shapes, like burgers and pizza slices, such that the texture and color of the product resembles the original.

Chip technology

Palate manipulates the taste and smell of the nutritious 3D printed food, through a chip the size of a rice grain, implanted behind the ear. The chip interacts with neurons, neurotransmitters that control taste and smell to simulate the experience of a specific flavor.

Information flow

We have a Flavor Store to buy flavors, a Food Store to order the physical 3D printed food, Restaurant section where premium flavors and food items are published, a Subscription page to manage orders and subscriptions, and finally we have How to use Palate, which contains information about Palate and the food sold by Palate.

Logo & color

Marketing materials

LIVER TRANSPLANT PATIENTS and their families are faced with challenging questions when considering a liver transplant:

What are the eligibility criteria for receiving a liver transplant?
What are the risks and complications associated with the surgery?
How do I prepare for a liver transplant surgery?
What does recovery look like?

LIVING LIVER DONORS and their families have similar concerns:

What are the criteria for becoming a living donor?
How will donating a part of my liver affect my health in the long term?
How do I prepare for a liver transplant surgery?
How soon can I return to my normal activities?

There must be something out there

We searched the web and spoke with professionals who deal closely with liver transplant processes and found a lack of available guides to inform users about the living liver donation process. Sources like the living liver donation guidebook from UW Medicine exist that provides helpful information about the process, but is daunting due to its size, jargon, and general wordy-ness, and focus on special circumstances.

‍

Kicking off

Liver transplant surgery is a life-changing and emotional journey for both the patient and donor. We wanted to approach our solution with as much empathy and practicality as possible, knowing the details can get complex and overwhelming.

‍

How can we best support the shared decision-making process between the patient, donor, their families, and caretakers?
How can we ensure donors feel cared for as they take this significant risk to help another?
What can we do to support patients throughout their journey?
And, how can we provide meaningful assistance despite our limited access to information?

Flow chart of liver transplant patient journey

Solution 1 — A personalized guidebook

The guidebook caters to recipients, donors, and caregivers by allowing recipients to add users to their group who can help review donor statistics. New users join via a link, creating profiles with specific details that personalize metrics across the platform. This setup supports a data-informed shared decision-making process.

Multi-user system

The guidebook caters to recipients, donors, and caregivers by allowing recipients to add users to their group who can help review donor statistics. New users join via a link, creating profiles with specific details that personalize metrics across the platform. This setup supports a data-informed shared decision-making process.

Probability of qualification

Since the donor and recipient are deciding whether to proceed together to have this surgery, we offer a quantifiable way to view their personal data and help them make this a challenging decision.

Reflection questions

To help donors make a well-informed decision, we’ve highlighted key questions for them to consider.

Solution 2 — A medical narrative

We created a medical narrative to help patients and visitors acclimate to new environments, set appointment expectations, and provide clear, understandable explanations for procedures and treatments. This approach makes complex medical information more accessible and guides patients through unfamiliar experiences.

How we address user needs

01

Holistic care

Emphasizing the implementation of holistic care in healthcare. An approach that considers the whole person, rather than focusing symptoms.
Aims to understand and address all aspects of a person’s well-being: physical, mental, emotional, social, and spiritual.

02

Medical narrative

Providing a shared framework for understanding and communication. Usable by all and aims to make navigating the medical environment easier and less daunting.

03

Personalization

Personalization emphasizes a patient-centered approach rather than a one-size fits all solution.
Personalized readings can reduce cognitive overload from redundant information.

04

Multimodal media

Combining multiple modes and forms of communication to convey information, and tell stories. Allows information to be relayed in diverse and engaging ways.
Hoping to provide a rich and dynamic way for users to learn about medical information and processes.

Next Steps

01

Expand narrative to caretakers

Caretakers can utilize medical narratives to understand what will be needed to take care of their patient or loved one.
Consists of a comprehensive overview of the patient, their current condition, treatment plan, medications, and other essential information.

02

Resources for living donors

It is crucial to remember that the living donor will need information, support, and guidance for factors outside of their medical life.
Resources will lead to aid for: lost wage reimbursement, travel and dependent care, legal and social support, and more.

03

Doctors as active participants

Doctors play a central role in healthcare decision-making, acting as facilitators, guides, advocates, and collaborators.
Expand upon materials to be used by doctors within the field.
Can be used to aid in informing and explaining conditions and terminology to patients.

Kiosk screen redesign

I was highly motivated to update the kiosk screen to align with current design trends. Collaborating closely with one of the principal designers and incorporating feedback from the rest of the design team, I developed a sleek, clean redesign with increased contrast and modern visual design elements.

Current Design

New Proposed Design

Icon redesign

I redesigned 134 icons in the Waters HPLC design system. The new design addresses inconsistencies in size, style, and weight that I noticed while working in XD.

Icon redesign process

Designed to pixel perfection.

What is high performance liquid chromatography?

One of the joys of being a product designer is the chance to gain knowledge across a wide range of fields. In short, HPLC is an analytical chemistry technique that separates, identifies, and measures the components of a solution.

Here is a video on HPLC and mass spectrometry

HANNAH IS TRAVELING IN JAPAN and checks out of her hotel at 10 am; her flight is at 8 pm. With a few hours to explore, Hannah struggles to find somewhere to store her belongings. Hannah lugs her suitcases through the city.

Frustrated with this inconvenience, Hannah founds Boxy, a flexible short-term storage service offering hourly, daily, and monthly rentals. Currently, Boxy operates in Boston, Massachusetts, connecting city residents with extra space in their homes to college students and tourists. Our team designed a fully functional website and brand identity for Boxy.

Make a reservation

Browse through listings --> choose dates --> describe & upload images of items --> payment info --> complete reservation!

Create a listing

Address --> availability --> amenities --> storage space description --> item & size description --> images --> personal identification --> review responses --> submit listing!

Manage your reservations

Host: View upcoming, ongoing, and past reservations, approve requests, and edit listings!
Stasher: View upcoming, ongoing, past and pending reservations!

Edit your listing

Easily edit your listing with our simple interface!

My role as design lead

Scope out project goals + timeline, plan sprints, assign tickets
Direct design critique sessions, provide guiding resources
Communicate progress with client + Project and Technical Leads

UX design process

Competitive research

To understand the existing competitors in storage services, we conducted competitive research on Uhaul, Neighbor, Public Storage, Clutter, Storage Squad, and Cubiq. For each service, we analyzed what their website is doing well, what it isn’t doing well, and what aspects of the site could influence Boxy.

Information architecture and user flows

Map of system structure and hierarchy and traces specific user paths and decision-making processes.

Low fidelity wireframes

We created these wireframes to quickly articulate the general layout, flow, and components of the website.

Usability testing on lo-fis

We chose one task within each of the six flows to test, identified its usability heuristic, and three research goals. Sample size: 10 users

Useberry usability testing

Heatmap: click tracking

Issue 01: navigation difficulty

Users struggled to navigate between host to stasher views while accessing key features such as 'Create a Listing.'

Solution 01: two tabs + hamburger menu

The nav bar went through three iterations, resulting in the "Browse" and "Create a Listing" tabs and a hoverable drop-down menu for other features, including "Switch to Stashing/Hosting." Hover effects (grey background and bold text) indicate clickability. Usability testing validated this design in the high-fidelity stage.

Issue 02: how many steps are left?

User progresses through the ‘create a listing’ multi-step task and is uncertain how long the flow is. Users might drop the task if there is no end in sight.

Solution 02: progressing bottom bar

Add a bottom bar split up into the number of steps in the flow, progressing as each step is completed.
‍

High fidelity prototype

Interactive on Figma

Highlights

Brand design process

Brand voice

As a start-up with a small user base, I wanted to portray a warm and trustworthy brand identity to ensure users feel valued and secure while interacting with our platform. With these values in mind, we began broadly moodboarding, then narrowed in on specific elements to create two final brand concept candidates.

Design strategy

We developed three design strategies: one inspired by the warm and trustworthy mood board and two from the sleek and modern board. Each strategy included a concept, description, color palette, illustration style, UI design, typography, and a UX mockup. Building on the client’s vision, we focused on refining shades of teal, accent colors, and illustration styles to align with Boxy’s goals.

Final design strategy

Designing the logo

To design Boxy’s new logo, we started with rapid sketching on post-its, inviting the client to join in brainstorming and narrowing down the most promising concepts. After voting, we chose six initial designs, which the team then iterated on weekly, gradually refining them to higher fidelity. We reached a unanimous decision through rounds of feedback and voting with the client. However, Boxy will temporarily keep its original logo due to legal issues.

Final Logo

Boxy brand book

Next steps

The design team completed all deliverables, including reach goals. We wrapped up with a 2nd usability test of the high-fidelity prototype, allowing for potential future improvements based on direct feedback from Boxy users.

01 Messaging

Expand to messaging platform that allows stashers to directly contact hosts and vice versa.

02 Adapting to change

Unexpected challenges, such as legal issues, may arise. Pivot quickly and maintain frequent contact with client.

03 Advice to a new designer

Design boldly!
If a flow remains unsuccessful after multiple iterations, it is okay to step back, reframe the problem, and explore a new approach.

team boxy, signing off 🤟

Waters™ Alliance iS HPLC

I am proud to present the marketing website for CommanderAI designed in Figma and built in Framer by me 🙂

SHOWCASE

Process

Ideation -> HiFis (2.5 weeks)

Map of system structure and hierarchy and traces specific user paths and decision-making processes.

Building + coding in Framer (5 weeks)

Check out commanderai.com to see animations and interactions!

Founding of Commander

Our CEO recognized these needs while working in sales within the waste management industry, so he built Commander.

Find your next prospect on heatmap

Emails that write themselves

Keep track of your hottest leads

Market intelligence to help you sell

My role as Founding Product Designer

Commander Prospect Manager

Initial Product

When I joined, the product focused on delivering 10 prospects per day and automating email outreach. Customers evaluated success based on email replies and closed deals, outcomes we could not control. This misalignment led to 85% churn.

This led us to the ambiguous problem:

New homepage ideation

To tackle this problem, I sat down with the CEO and CTO to brainstormed some ideas on how we can restructure the prospect manager page and redefine our value proposition.

Conclusion from brainstorm

The core shift was redefining our value from “helping you close deals” to “providing high-quality prospects.” At the end of the day, it is up the customer to give the lead the final push to close.

Show the user why a prospect is a good lead

After a quick round of lofis, I jumped into the hifis to reflect our new emphasis on the quality of leads provided.

Prospect list improvements

Current iteration of the prospects page

Impact

I designed the entire platform in light & dark mode

A scalable dark mode system, accounting for elevation behavior, contrast accessibility standards, and contextual color token mapping between light and dark themes.

Available on mobile

Commander Design System

Built from scratch

This case study is under construction.

This case study is under construction.

This is a speculative design proposal project.

Now, let's get into it

Our research started off by building a futures wheel which lead to a central theme around the problem of rising obesity, diabetes and related health issues in today’s youth.

Our focus points

This lead us to formulate our research question:

Highlights from research

In 2022...

Where does our food waste come from?

Greenhouse gas emissions and waste

Projected Trends

The obesity projections for 2030, which is just 6 years from now, is quite concerning. If we extrapolate further, the obesity problem will completely take over the world by 2050 if there are no successful interventions in this field.

Introducing...

Our audience

Primary audience: health-conscious individualsSecondary audience: chefs and food enthusiasts

Palate patented technology

Chip technology

Palate manipulates the taste and smell of the nutritious 3D printed food, through a chip the size of a rice grain, implanted behind the ear. The chip interacts with neurons, neurotransmitters that control taste and smell to simulate the experience of a specific flavor.

Information flow

Logo & color

Marketing materials

There must be something out there

Kicking off

Solution 1 — A personalized guidebook

Multi-user system

Probability of qualification

Since the donor and recipient are deciding whether to proceed together to have this surgery, we offer a quantifiable way to view their personal data and help them make this a challenging decision.

Reflection questions

To help donors make a well-informed decision, we’ve highlighted key questions for them to consider.

Solution 2 — A medical narrative

How we address user needs

01

Holistic care

02

Medical narrative

03

Personalization

04

Multimodal media

Next Steps

01

Expand narrative to caretakers

02

Resources for living donors

03

Doctors as active participants

Primary audience: health-conscious individuals
Secondary audience: chefs and food enthusiasts

Host: View upcoming, ongoing, and past reservations, approve requests, and edit listings!
Stasher: View upcoming, ongoing, past and pending reservations!

Add a bottom bar split up into the number of steps in the flow, progressing as each step is completed.
‍