Interdisciplinary and
Inclusive UX/UI designer

Selected Works


01

DURATION2025-2026
OVERVIEWStreamlining decarbonization data with a single source of truth and transparency.
DELIVERABLESMVP of Decarbonization software
Close up of computer screen showing data on a software.

02

DURATION2 weeks
OVERVIEWA pitch to improve business customers' experience with accessibility at the forefront.
DELIVERABLESAODA Accessibility Audit, Proof of Concept
A laptop on a stand showing Rogers Business reimagined landing page in a room with a white wall and wooden desk.

03

DURATION1.5 months
OVERVIEWIncreasing and retaining app engagement with gameification and marketing promotions.
DELIVERABLESHi-Fi Wireframes, Prototype, User Flow
Close up of a mobile phone screen with a person holding it with both hands in a neutral white background.

04

DURATION1.5 months
OVERVIEWBuilding trust and drive conversions through personalizing industry-specific information on products.
DELIVERABLESProof of Concept
A close up image of a hand holding an iPhone showing the reimagined experience of Juniper's homepage for a new customer.

05

DURATION3 weeks
OVERVIEWA safe digital space to share stories during the holiday season.
DELIVERABLESProof of Concept
A small diorama-like room in the middle of a sea of stars. The room has a wooden table with a stack of paper in the middle and the walls are decorated with fairy lights and clothes pinned letters.

06

DURATION6 months
OVERVIEWAn easier way for consumers to submit medical claims without jumping through hoops.
DELIVERABLESAccessibility Audit, UI, UX + Development, Design System, Wireframes, Prototype
A laptop screen showing a login page to EqualPrice.

07

DURATION4 months
OVERVIEWRevamping health education with short videos to boast confidence for caretakers.
DELIVERABLESDesign System, Wireframes, Prototype
Close up of computer screen showing Understand the Science's homepage

08

DURATION1 month
OVERVIEWConnecting the musician to her fans in the digital age.
DELIVERABLESAccessibility Audit, UI, UX + Development, Design System, Wireframes, Prototype
A laptop screen showing a login page to EqualPrice.

09

DURATION6 months
OVERVIEWUsing machine learning to improve article recommendations for local newsrooms in order to reduce bias.
DELIVERABLESDesign workshop, Product iteration
A laptop screen showing a login page to EqualPrice.

10

DURATION1.5 years
OVERVIEWReinventing the site experience that resulted in 124% increase in user engagement and 50% increase in subscriptions.
DELIVERABLESLive website, Design iteration
A laptop screen showing a login page to EqualPrice.

01

International Beauty Company*

Category

B2B/B2C eCommerce

Role

Senior Product Designer

Duration

10 weeks

A laptop on a stand showing Rogers Business reimagined landing page in a room with a white wall and wooden desk.

Overview


IBC* tasked us with bringing their in-store retail experience to their DTC (SB) and B2B (CP) e-commerce sites to lift engagement and conversions. Through UX audits, redesigns, and IA updates, we delivered a dual-track solution: rapid-fire design wins for immediate testing, and a long-term future-state roadmap.

Key Deliverables


Reimagined Navigation IA, PDP and PLP recommendations, AI assistant use cases and flow

Outcome


The low hanging fruit strategy worked well with the clients and have begun internally testing and applying our suggestions. They really loved our suggestion of working the AI as an enhanced search aid for the B2B site and a beauty assistant on the B2C, similar to what Sephora have done.

The Challenge

  1. At the start of the engagement, the teams were working in silos, resulting in a lack of accountability, doubled up work and overall frustration.

  2. There was a huge disconnect between the in-store experience and online experience for both B2B and B2C customers, like rewards.

  3. They had so much customer data, they didn't know how to best use it.

  4. IBC's team tried to retrofit a B2C experience onto a B2B.

  5. Both customers and internal teams had issues figuring out how to stack deals together without triggering errors.

  6. Marketing jargon sent by brands made SB lose its authentic voice.

  7. We had to work with what Salesforce allowed for both sites.

A Mobile-First Experience

The data the client shared with us showed:

  • Most of their users preferred browsing on their mobile and app (which linked to their website) when shopping, especially for their B2B base.

  • SB has a very big DIY community.

  • They have very useful educational resources on both sites, but are buried.

Working with the UX researcher and strategist, I came up with suggestions for quick wins, ways to highlight their educational content and long-term growth with an AI assistant.

Chain of Command

Three personas were created to verify incoming data, have a digital paper trail and overall improve transparency within teams.Maria is a sustainability manager, the big picture person in decarbonization initiatives to see whether or not a target is on or off trajectory. She often tests the "what ifs" for initiatives.Maria gets her data from Carlos, the Project Lead, who supports and provides relevant information to support Maria's initiatives. He works closely with Dani, a Sector Lead, who is the boots on the ground manager talking to her team and fostering cross collaboration in keeping up to date with the latest data to send to Carlos.She discusses and executes decarb projects with her team based off of initiatives given by Maria, resulting in her creating roadmaps for projects within their budget.The three work together with a collective goal to drive company sustainability performances and demonstrate the impact through KPIs.

Takeaways

Synergy From the Start

The client came ready with what they needed from us and were very communicative with our team. A quote from KPDH may have helped with this. I vibed with their head of UX so well that she felt I was reading her mind at times.

Loyal Fanbase = Unfiltered Truths

This project was one of the few where I was able to speak directly with IBC's customers. They were all very helpful with their suggestions, feedback on our design proof of concepts and very straightforward.

Taking The Lead

I took on the principal designer's role after he had an unexpected medical emergency. I worked closely with our strategist, product managers and UX researcher from India. It was a challenging but very fruitful experience. My team was very supportive during this time.

Trust Your Gut

When our client wanted unexpected deliverables a part from of the original agreement, the project manager said not to mind it; my intuition said otherwise. A few weeks later, the PM asked me how long it'd take to create said deliverable; he didn't know I already did 2/3 of the work during sprint downtimes. The remainder was passed onto the UX researcher to flesh out before presenting. The Client Partner rep on our team jokingly said I should predict lottery numbers.

AI Saved Our Butts

The strategist and myself were up to our eyeballs on user interview data. Were it not for Copilot helping us with summarizing common points, suggestions, competitive analysis, and ranking based on urgency, we wouldn't have been able to work as fast as we did.

*Company name has been white labeled due to NDA.

Global Safety Organization

01

Global Safety Organization*

Category

Safety Science

Role

Product Design Lead

Duration

6 months

A laptop on a stand showing Rogers Business reimagined landing page in a room with a white wall and wooden desk.

Overview


As Product Design Lead, I designed an MVP decarbonization product for enterprise clients of a global safety, security, and sustainability leader.

Key Deliverables


MVP of Decarbonization software

Outcome


Though rounds of interviews with project cohorts, design feedback and presenting our results to SMEs and leadership, we received good feedback on the progress.However, due to the annual budget review and renewal, the project was not green lit to launch for MVP and was shelved for future development.

The Challenge

  1. Customers rely on static Excel files, leading to frequent data errors and time-consuming manual follow-ups.

  2. Decentralized files and endless email threads isolate teams and break cross-functional workflows.

  3. Without audit trails or change logs, teams cannot track accountability or verify data integrity.

  4. Calculating Scope emissions across varied sectors like manufacturing and real estate remains inherently complex.

Bringing it all together

The MVP decarbonization software will help users manage and collect their company's carbon footprint data in in one space to gradually wean them off of spreadsheets. An internal AI trained off of a company's data will help expedite manual processes. The platform will help:

  • Trajectory tracking for decarbonization plans.

  • View current initiatives and projects.

  • Importing spreadsheets and other files to expedite data entry.

  • Optimize a blueprint with data-based suggestions from the company's internal AI.

  • Generate downloadable annual/quarterly reports in PDF.

  • Data visualization.

Post-MVP, my team and I began exploring possibilities in how AI can play a role as an assistant in suggested actions for decarb initiatives and how it can be integrated into a carbon calculator that shows savings of CO2 emissions based on the Scope chosen.

Chain of command

Three personas were created to verify incoming data, have a digital paper trail and overall improve transparency within teams.Maria is a sustainability manager, the big picture person in decarbonization initiatives to see whether or not a target is on or off trajectory. She often tests the "what ifs" for initiatives.Maria gets her data from Carlos, the Project Lead, who supports and provides relevant information to support Maria's initiatives. He works closely with Dani, a Sector Lead, who is the boots on the ground manager talking to her team and fostering cross collaboration in keeping up to date with the latest data to send to Carlos.She discusses and executes decarb projects with her team based off of initiatives given by Maria, resulting in her creating roadmaps for projects within their budget.The three work together with a collective goal to drive company sustainability performances and demonstrate the impact through KPIs.

Takeaways

Sustainability is Cool and Vast!

This was a huge learning experience in the sustainability space and how carbon footprint is measured.

Chasing Waterfalls

Before joining this team, they were used to working Waterfall. Most of them understood Agile as a concept and it was hard to find a balance sometimes.

Analysis Paralysis

When I shared the list of interview questions to review, the product owner's replies would either spiral down a rabbit hole or the question was "too broad" to ask. A UX Researcher was brought onto our team to take over this task.

Context is Important

Due to the complexity of sustainability, some necessary information we needed to know were told to us after the fact.

Too Wide A Net Casted

The product owner reached out to anyone and everyone who they thought would be a good fit as a cohort. As a result, it was a scramble to get user interviews scheduled when we barely had responses.

*Company name has been white labeled due to NDA.

Rogers Communications

02

Rogers Communications

Category

Telecommunication (B2B)

Role

Senior UX Designer, Accessibility Designer

Duration

2 weeks

A laptop on a stand showing Rogers Business reimagined landing page in a room with a white wall and wooden desk.

Overview


For Canadian telecom leader Rogers, I led the UX strategy for an RFP to reimagine the Rogers Business portals in identifying key opportunities to empower B2B buyers and vendors to make confident, business-critical decisions.

Key Deliverables


AODA Accessibility Audit, Proof of Concept

Outcome


We delivered three portal POC screens and a navigation overhaul. The strategic vision and constructive critique resonated strongly across Rogers’ analytics and design teams as being "politely criticized in a good way," successfully winning WongDoody the account.

The Challenge

Despite Rogers being a household name in Canada, their business product dashboards and portals did not reflect this. Key issues found during the experience audit included:

  1. Inconsistencies in navigation, page design, responsiveness and information architecture.

  2. Redundant and misplaced actions that reflect poorly on Rogers' products and branding for B2B customers.

  3. Long and confusing action names in links and buttons.

  4. Accessibility issues with keyboard navigability of portal sites, such as no focus state to highlight content and skipping chucks of content. Button sizes are too small for touchscreens. Some colors used for text do not pass AA WCAG 2.1 contrast.

  5. Bilingual selector was not working, possibly isolating French Canadians who use Rogers services.

Process and Content Strategies

Working together with the strategy team, we focused on:

  • Hyper-personalization of client portals to drive better tailored internal product and service offers for marketing.

  • Drive reliability and accessibility with intuitive changes to self-service portals.

  • Make Rogers Business products the main characters and relatable to B2B needs.

  • Flex our team's previous telecomm experiences with T-Mobile, Verizon and AT&T products.

A side-by-side screen comparisons with numbered and highlighted boxes helped show the differences between the client's current experience and the proof of concept.

Accessibility Audit

Due to time constraints, I focused the AODA audit on keyboard navigability and WCAG AA color contrast. Key findings revealed significant inconsistencies in keyboard navigation variation across portals (15% to 80%), focus states were either low-contrast or relied on default dotted outlines, and footer gray text failed AA contrast minimums. Given more time, full screen-reader testing (VoiceOver/JAWS) would be a priority.Please click on the images for a larger view.

Navigation and Structure Enhancement

  • Consistent global header and footer implemented across the site to reinforce brand reliability, identity, and user experience.

  • Language and location selectors relocated to the top navigation for improved visibility for French-speaking Canadians and accessibility.

  • Search bar repositioned closer to account info for better functional grouping.

  • Footer accordion removed to show full footer content and improve browsing experience.

Optimized Content, UX, and Functionality

  • B2B product offerings summarized to reduce cognitive load and better communicate purpose.

  • "Small Business Spotlight" links to real customer stories instead of generic placeholders to reflect authenticity and Rogers' positive rapport.

  • Empty landing page areas utilized for marketing promotions and specific product opportunities and inquiries.

  • Quick links added to right rail in Bills and Payments page for faster access to other Rogers products for users.

  • Account number links improves user access to full account details.

  • Download actions grouped under a kebab menu for a cleaner, more intuitive interface.

  • Customizable shortcuts for vendors to navigate more efficiently within the product portal.

Simplifying Customer Support

Layout comparison between Rogers FAQ section to the proof of concept design with a cleaner UI.

FAQs are condensed into accordions showing only most commonly asked questions. Users interact with it to see the answer they want to see help reduce cognitive load. I highlighted to the clients the potential of internal collaborations and workshops with internal customer reps to help better tailor support content.

Takeaways

Accessibility Baked In!

When the project lead told me the client wanted "accessibility first," I was locked in. In previous projects, accessibility was always a sprinkle in and not part of the ingredient list.

Learning from the Past

While drawing up the HiFis, I referred back to the Juniper pitch in simplifying the design and put the spotlight on the products, not the page layout.

Global Safety Organization*

Global Automotive Company*

03

Global Automotive Company*

Category

Automotive

Role

Senior UI Designer

Duration

5 weeks

Close up of a mobile phone screen with a person holding it with both hands in a neutral white background.

Overview


A global automaker’s U.S. branch partnered with us to integrate direct service offers into their iOS apps (MyCar** and MyFancyCar**). The goal was to enhance the in-app experience, boost engagement and brand loyalty, and unlock new revenue streams.

Key Deliverables


Hi-Fi Wireframes, Prototype, User Flow

Outcome


We over delivered with 3 use cases in the prototype. Proposed features were set to be implemented and explored by the client in Q1 2025. Were I part of the handoff and relaunch, I would track downloads, offer conversions, and dealer feedback to steer feature iterations, while piloting dealership onboarding and exploring AI personalization for future releases.

The Challenge

The U.S. automotive team approached us to improve their iOS app’s engagement and loyalty features. When our strategy team interviewed internal stakeholders on current pain points, they noted:

  1. Underutilized marketing data and decentralized dealership systems.

  2. Low awareness and use of the app post-purchase; even those within the company.

  3. Owners of older MyCar models that lacked smart car features were left out.

  4. Disconnected owner experience after initial sale due to missed critical updates like check-up reminders, lease expirations, and subscription renewals.

  5. Drivers only used the app to control their vehicle's temperature and check the location of their vehicle.

"Moments That Matter"

We mapped the ownership journey with:

  • In-app service reminders and seasonal promotions

  • Loyalty points for service visits to apply to future services or accessories

  • Personalized anniversary content (e.g., Spotify Wrapped-style recap)

  • Lease-end notifications with upgrade incentives

My previous experience with the Canadian division of MyCar gave us a head start, allowing us to quickly build on prior insights and assets.

Our persona, David's, journey map as a new owner of a Model-R from MyCar using the MyCar app from onboarding to the end of his lease.

Our persona, David's, journey map as a new owner of a Model-R from MyCar using the MyCar app from onboarding to the end of his lease.

3 mobile screens showing David's driving analytics with his R-Model vehicle to celebrate his 1 year anniversary as a MyCar* owner.

Mobile screens show David's R-Model vehicle analytics to celebrate his 1st anniversary as a MyCar* owner.

Our persona, David's, journey map as a new owner of a Model-R from MyCar using the MyCar app from onboarding to the end of his lease.
Our persona, David's, journey map as a new owner of a Model-R from MyCar using the MyCar app from onboarding to the end of his lease.

David is logged into MyCar with a lease ending reminder on the dashboard and messages area.

User Journey: David, an Informed Owner from Start to Finish

Press the play button above to view the experience.

To better understand the consumer's journey post-purchase, we created a journey to reflect how a new MyCar** owner might experience the refreshed app from onboarding to lease renewal.

1. Awareness and Exploration
David purchased a new MyCar** R-Model and downloads the app with the dealer onboarding him with app features. As he clicks around, he opts into in-app notifications, which highlight service perks when needed.
2. Personalized Rewards
Each time David services his car, he earns points to use on accessories or future services. On his 1-year anniversary, the app sends a fun recap of his year with the R-Model.
3. End of Lease
As David neared the end of his 3 year lease, the app sends him a notification 2 months in advance, with an incentive to either extend the lease or purchase a new vehicle, beginning the loyalty cycle anew.

Takeaways

There's such a thing as too useful

I'm all for streamlining and making things to work better, but there's a limit to that.

Visual data nerd unlocked

Full disclosure: I've only started using Spotify last year and got the year in review to see what the fuss was all about. I get it now. Why hoard all that data from your users and not make use of it into something fun like a year in review? Possibilities are endless!

Collecting car points

I'm always up for gameifying basic tasks and getting points. It's just so rewarding. I wish other companies would do that more; they do it with credit cards.

A refreshing, straightforward project

Having worked with this company's Canadian branch 2 years ago, these clients were so easy to work with and voiced their requests clearly. They were such a pleasure.

*Company name has been generalized due to a signed NDA.
**App name has been changed to protect client IP.

Rogers Communications

Juniper Networks

04

Juniper Networks

Category

Enterprise Web (B2B)

Role

Senior UI Designer

Duration

3 Weeks

A close up image of a hand holding an iPhone showing the reimagined experience of Juniper's homepage for a new customer.

Overview


As part of a WongDoody pitch, I partnered with the Product Design Director to reimagine the web experience for Juniper Networks, a global leader in AI-driven networking and cybersecurity. Our goal was to drive trust and conversions by elevating buyer transparency, strategic storytelling, and personalized digital journeys.

Key Deliverables


HiFi Wireframes, Proof of Concept

Outcome


We presented 3 end-to-end prototypes and 2 frictionless user journeys to drive conversions for enterprise level decision-makers and technical analysts. Unfortunately, we did not get the account.

The Challenge

Even though Juniper is a leader in its industry, their website at a glance:

  1. Did not effectively explain the value of their services to potential customers.

  2. Lacked personalization for different buyers in roles and industries.

  3. Too much tech jargon.

  4. The buying journey was misaligned with real-world decision making.

B2B buyers wanted industry-specific info on topics like AI. The journey involved both decision-makers (CTOs) and subject matter experts (SME), so the content had to be practical, and easily read.That insight shaped our pitch’s North Star: “Demand facts, not fluff.”

Content Strategy and Process Highlights

To build trust in Juniper, we used the Gartner Magic Quadrant to find key innovation milestones reflected in the design. We worked closely with the strategy team to ensure everything aligned with broader messaging and business goals.We based the journey design around a collaboration between CTOs and analysts in a B2B buying processes.

  • The experience starts with the prompt: “What part of your network keeps you up at night?”

  • Users selected their pain points, goals, products, industry, and role in order to receive tailored content.

  • We tried a Mad Libs-style fill-in-the-blank interface, but pivoted to clearer prompts based on feedback.

  • Emphasized the mobile site experience over desktop.

Collaboration between CTO and SME

B2B purchases often involve both decision-makers and technical experts. The strategy team mapped a realistic journey to show how a CTO (decision-maker) and a Senior Enterprise Architect (practitioner) might collaborate during the buying process.The journey below starts with Matthew, the CTO, perusing the internet for trends in order to guide a business transformation; he shares what he finds with Vihaan, a Senior Enterprise Architect.

Press the play button below to view the experience.

1. Awareness and Exploration
Matthew scans for trends to guide a business transformation and encounters a thought leadership article by Juniper and clicks through to the website via CTA. He begins exploring the relevant content and interacts with an embedded widget that offers a deeper look into Juniper's potential.
2. Contextual Personalization and SharingAs Matthew continues engaging, the site personalizes content of strategic insights and case studies based on his role and industry. He shares a persistent, unique link of the content to his colleague Vihaan over Microsoft Teams.3. SME EngagementVihaan joins via Matthew’s link, connects through LinkedIn, and uses the chatbot to ask about open architecture. His activity tailors the content to highlight specs and documentation for project scoping.

Takeaways

First time pitching

This was the first time I was involved with a project pitch. It was exciting to see how strategy and our client partner teams worked together with us.

Healthy competition

While I went the more traditional tech route in concept, the director went for a sleeker, more minimalist design. I felt like a toddler doodling non-sensical lines on paper compared to his design. I learned a lot from this experience and realized still how much I have to learn.

Global Automotive Company

Hackathon 2023: Holiday Voices

05

Hackathon 2023: Holiday Voices

Category

AI Prompting

Role

UX/UI Designer, Art Director

Duration

3 Weeks

A small diorama-like room in the middle of a sea of stars. The room has a wooden table with a stack of paper in the middle and the walls are decorated with fairy lights and clothes pinned letters.

Overview


WongDoody's SVP of Experience Design wanted our internal EX team to engage in an annual hackathon with the inclusion of AI usage. We were asked to create a fun, interactive holiday experience to bring WongDoody designers together across studios worldwide that's web-based, and easy to share. One team will be crowned “People’s Choice” at our internal XD team meeting.

Key Deliverables


Proof of Concept

Team Process

Our respective internal team was randomized; mine comprised of the designers out of the NYC office. Home field advantage, let's go! Since the hackathon was holiday themed, our team names had to reflect that; we decided on "The Silent Knights."We complied ideas on a Miro board and voted based on tech lift and inclusivity. Some ideas we had included a wrapping paper pattern generator, create a holiday song using an AI music sequencer, and bake your own cookie.We tied between "Build a snowman/gingerbread house" and "What do the holidays mean to you?" and ultimately chose the latter.Spoiler alert: It was my idea 😀I was inspired by three things: an online game called Kind Words, a traveling art installation called Strangers Project, and Humans of New York.We called ours Holiday Voices.Please click on the images below to make larger for viewing.

A Cozy Digital Pocket

We wanted to create a safe, anonymous digital space where people could share their unique holiday experiences without fear of judgment or toxic positivity. To bring this to life, a junior UX designer and I worked on the art direction using Photoshop’s GenAI, while our team lead used ChatGPT to help build the site on a cloud server. I also added warm, inviting background music with AI-generated tunes.We pulled it all together in about three weeks, with our lead fine-tuning the code and adding illustrations from another designer. While we didn’t win “People’s Choice,” I’m really proud of what the team accomplished and loved sharing the project with everyone.

Juniper Networks

EqualPrice*

06

EqualPrice*

Category

Healthcare Insurance

Role

Senior UI Designer

Duration

6 months

Back of a female's head looking at a computer screen showing a login page.

Overview


EqualPrice* is a healthcare platform built around the No Surprises Act, helping patients navigate medical claims and estimate costs. Partnering with their internal UX team, we simplified the claims experience through clear data visualization and self-serve resources. The portal was designed from the ground up to be responsive, WCAG 2.1 AA accessible, and bilingual (English/Spanish) for members, providers, associates, and negotiators.

Key Deliverables


Accessibility Audit, UI, UX + Development, Design System, Wireframes, Prototype

Outcome


Three user journeys were created, with 2 newly added personas and journeys for iteration. Due to the project scope and budget constraints, extra phases were cut. The site was launched in Q4 of 2023.

The Challenge

Before the No Surprises Act, many patients had to jump through hoops in order for their medical claims to be submitted and confirmed. The fractured system created friction and frustration between patients, insurance companies and medical offices due to miscommunications and important information falling to the wayside and; this was the case for those who did not speak English.To resolve this, we needed to:

  1. Fully understand each persona and journey created by EqualPrice's internal UX team.

  2. Simply the process of submitting a claim for patients.

  3. Have a way for the patients to track their referral progress.

  4. Ensure the website is bilingual in English and Spanish.

Tailoring the Experience

To translate complex medical claims into a seamless, responsive product, we partnered closely with EqualPrice’s UX team and SMEs. Building on their initial research and journey maps, we aligned the project around three key personas: Members, Providers, and Negotiators. This directly shaped our three-phase roadmap.The resulting workflow mirrors debt consolidation: a Member submits a claim, and a Negotiator works directly with the Provider using the EqualPrice Editor to calculate a fair, agreed-upon settlement.

Accessibility Baked In

I made the style guide and design system based off of the color palette of EqualPrice's logo while keeping at front of mind that the product needed to be WCAG 2.1 AA compliant. Using tools like WebAIM, ContrastChecker, and Stark for color contrast and font sizing, I made a design guideline with dos and don'ts with font usage and styling.

Due to the NDA I signed with the client, I am unable to post any designs to protect the their IP.

*Company name has been generalized due to NDA.

Hackathon 2023: Holiday Voices

Understand the Science

07

Understand the Science

Category

Healthcare Education

Role

Senior UI Designer

Duration

4 months

Close up of computer screen showing Understand the Science's homepage

Overview


Understand the Science (UTS) is a non-profit dedicated to demystifying complex medical topics through scientist-led, sub-two-minute videos and a real-time IBM watsonx AI assistant. To support their growing media footprint, our team was brought in to elevate the overall user experience, design an accessible medical content hub, and establish a scalable design system.

Key Deliverables


Design System, Wireframes, Prototype

Outcome


Launched in early 2024, the platform integrates cited medical content, a WCAG-compliant design system, and an interactive IBM watsonx AI assistant.

The Challenge

  • Their original site was a proof-of-concept that only focused on opioid abuse video content.

  • Accessibility issues with video player like lack of media controls and close captioning.

  • Information architecture was limited and couldn't scale for growth.

An IA-led Process

By prioritizing video content over dense text blocks, we helped UTS with:

  • Grow their digestible video content to be shareable to other social media (e.g. TikTok).

  • Developed a design system that's compatible with Bootstrap, meeting WCAG 2.1 AA level.

  • Created cross-linked content architecture for related topics (e.g. diagnoses & treatments).

  • Introduced multiple discovery paths: chatbot, menus, and library for varied user behaviors.

  • Helped leadership and board to define long-term IA strategy and flexible content modules.

  • Explored AI capabilities of watsonx beyond Q&A, like dynamic user flows and interactive learning.

Please click on the images below to view in a larger format.

Color Contrast Test for the Design System

UTS' brand colors were around Bootstrap. While the base semantic colors were there, the palette itself is very neutral. We also introduced a new shade of blue for functional use on category chips, a secondary button color, and so on.With every shade we tried, I made sure to run it across Stark and WebAIM to make sure it passed contrast. And because I'm an overachiever, I specifically chose shades of blue that passed AAA.

User Journey: Finding UTS Through Social Media

We created two user journeys. The video below shows the website is shared via social media to our user from their friend, Jaclyn.

Press the play button below to view the experience.

Takeaways

Oh God. It's Out There.

Whenever I work on something, my brain subconsciously blocks out the design will be seen and used by everyone around the world. It's humbling, exciting and nerve-wracking all at once.

This AI Won't Take My Job

This was my very early interactions with AI just as genAI were up and coming. I heard of IBM's watsonx from years ago while watching the French Open, where they used it to analyze player stats, play challenges and more.

Pushing the Envelope

When first approached with this project, UTS' website was extremely bare bones. We were able to approach this with a blue-sky while stress testing the AI.

Hackathon 2023: Holiday Voices

Echo

08

Echo

Category

Sole Proprietorship, ECommerce

Role

UX/UI Designer

Duration

1 month

Person using a laptop with Echo's mockup website on screen.

Overview


Echo is a Grammy-winning songwriter stepping into the spotlight as a solo artist. In a bootcamp design sprint with Elizé Presents and RCA Records, I designed an engaging desktop website to deepen her connection with fans and drive pre-saves for her debut single, "Angels."

Key Deliverables


Proof of Concept, Prototype

The Challenge

From our interview with RCA Records, they want Echo’s fans to connect with her more easily through her website and social media. The must-haves were:

  1. Pre-save on her latest single, “Angels” was top priority. This affects the song’s charting position on the billboard.

  2. Build a strong connection between Echo and her fans while staying true to her vision.

  3. Make the fans feel they’re on top of the latest Echo news.

  4. Create a secure place for fans to get tickets and merchandise.

Echo Chamber

Social media has changed how we consume digital content and music. We discovered:

  1. Most music fans visit artist sites to check tour dates and new releases.

  2. Fans rarely pre-save releases since most use streaming platforms like Spotify.

  3. Artist sites act more like bulletin boards with bare-bones info on their releases, tours and merch.

In order for Echo to better connect with her fans and new listeners, her landing page needs to feel more like a personal blog.

Low fidelity digital sketch of Echo's website

Low fidelity digital sketch of Echo's website

To better personalize her page while making the pre-save on her latest single "Angels" a priority, several features were considered:

  1. Adding her tour dates and merch below the pre-save splash image.

  2. Include Echo's bio and musical background to balance out RCA's goals to get her more well-known while appealing to her intimacy and artistry.

  3. Adding a QR code for fans to connect on TikTok using a special filter as "fansclusive" content.

  4. Introduce "Echo Lounge," where fans can stay engaged with the artist and each other with behind-the-scenes videos, unseen interviews and livestreams.

While interviewing music fans, a few said they didn’t like being taken to a separate page and preferred all content to be on the main page. One also said they wouldn’t have clicked on the Lounge if it wasn’t mentioned on the page.In promoting fan events on artist sites, an interviewee said:

“The thing I always think of when I see those sort of things is how out of date they usually end up being before they get updated.”

The clean design and easy navigation made for a great user experience with Echo’s logo, album art, and timeline helping turn casual visitors into fans.

Interviewees brought up indie artists only update their site when new music and/or tour dates drop, so outdated information can feel embarrassing. As a result, the lounge content was moved to the main page.

Takeaways

Pre-save is trying

Most of the people I interviewed never pre-saved music, but some managed to click through some CTAs leading to the pre-save during testing. When asked how likely they were to pre-save Echo’s single, the answer averaged 5 out of 10 on a scale of 1-10 (1: No way; 10: Smashing button hard now).

Through the looking glass

A lot of artist websites don’t provide much of an experience nowadays. I was surprised to learn fans want to learn more about the artist and build a more intimate connection.

Achievement unlocked

I finally got to try out Adobe Xd. It was a software I was constantly putting off to use because I had no reason to until now.

The group dynamic

Having worked in smaller teams at my last two positions, I really missed that collaborative energy between designers and mentors.

Presentation jitters

It’s been a minute since I had to do a proper presentation when Elizé was selecting people to present to the RCA Records stakeholders. All of my bad speaking habits came out; I cringed so hard after hearing the recording🤦 Even though I wasn’t selected, it was still a good experience and I know what I need to work on.

Understand the Science

Local News Lab

09

Local News Lab

Category

Journalism, Machine Learning

Role

Product Designer

Duration

6 months

Close up of computer screen showing data on a software.

Overview


Local News Lab (LNL) , an open-source initiative by Columbia University's Brown Institute for Media Innovation, builds tools to sustain local newsrooms. I was brought in to refine LNL’s content recommendation engine for pilot partners The Philadelphia Inquirer and The Texas Tribune.

Key Deliverables


Design workshop, Product iteration

The Challenge

Inspired by the Google News Initiative Product workshop, I explored scalable metrics for the recommendation system. Rather than introducing new metrics that would burden engineering, I pivoted to leverage existing data to drive our 6-month growth plan. Using Notion, we mapped out a design roadmap grounded in technical constraints. Throughout the cohort, LNL and partner newsrooms held bi-weekly Zoom syncs with prep-circulated agendas to ensure cross-functional alignment, address blockers, and maintain steady momentum.

Hopes, Dreams and Reality

The Community Lead and I created two workshops in order to better understand our cohorts’ pain points: one talking about their ideal rec model; the other a realistic model closer to LNL’s current one. Itineraries and presentation materials for each workshop were shared 1 week prior to each workshop in order to prepare our partners and resolve any document permission issues the day of. While drafting out the structure of each workshop, I consulted with my Product Design Advisor the best direction to take each one.During the ideal rec model workshop round table discussion I co-lead with the Community Lead, we asked:

  1. What applications of rec systems have you seen in the wild you think are exciting/interesting and what might it bring to your website?

  2. Where have you encountered difficulties using other rec models (on your own website or in the wild)?

The prompt we used for the Miro board exercise was “What features would you include in your ideal rec model?” The partners were given time to fill in stickies with their responses, followed with a brief discussion of each sticky. The cohorts were then asked to rank each of the features written on their stickies on an impact scale.

For the realistic model workshop, I was given the reigns to solo lead this time. The Engineering Lead gave our cohort partners a quick rundown on how the Lab’s rec system worked before we jumped into the Miro board. This time, we asked:What features would you add to the rec model with LNL’s constraints in mind?They then put down their features on the stickies before positioning them on the Impact/Effort Matrix, explaining each feature and placement.While we got a lot of new ideas from our cohorts and we left more time for a brainstorming session, the example I used for this workshop could have been better in clarifying the objective; specifically, one that played on the Lab’s rec system metrics.Due to the NDA I signed with the Lab, I am unable to post screenshots of the Miro board findings.

Takeaways

First time for everything

This was the first opportunity in testing my mettle in UX/UI. It was uncomfortable, nerve-wracking, and challenged my brain to re-wire itself in redefining what “design” is and can be; it was amazing.

Running workshops are hard

Leading my first workshop was a pivotal challenge and was grounded by our Community Lead’s guidance. While I learned how to build an engaging session, my biggest lesson was the need for restraint. Overfilling the itinerary crowded out organic pauses showed me that leaving room for open discussion is just as crucial as the content itself.

Be more transparent

This was the first time LNL had done a cohort like this and there were a lot of things we were figuring out as we went along, like roadmap alignment with our partners.

Discomfort = Growth

Even though I knew ahead of time the position was more research heavy, I secretly hoped to flex more of my Figma skills for this role, but I ended up learning Miro in the process. Little blessings in disguise.

Ask better questions

I often found myself asking similar questions that were worded differently. Were it not for the Product Advisor and Community Lead imparting me with their nuggets of knowledge, I’m sure the workshops wouldn’t have been as fruitful.

Wine & Spirits Magazine Website

10

Wine & Spirits Magazine Website

Category

Publication, eCommerce

Role

Lead UX/UI Designer, Front-End Developer

Duration

1.5 years

Person's hands using a laptop visiting Wine & Spirits' website at a coffee shop.

Overview


Wine & Spirits’ site originated as legacy .ASP files before migrating to ExpressionEngine (EE) in 2014. Despite EE's functional limitations, we were locked in by existing licensing. I led a ground-up redesign, prioritizing navigation, checkout flows, and paywalled longform content tailored to both industry professionals and wine enthusiasts.

Key Deliverables


UX/UI and development, Live website, Design iteration

Outcome


The website saw a 124% increase in site traffic 3 months post launch. Digital subscriptions increased 50% based on WooCommerce data.

The Challenge

ExpressionEngine was a powerful CMS, but limiting. Pain points included:

  1. Inefficient spending for expensive paywall plugins and required license tiers consumed too much of our limited budget relative to the return.

  2. Login friction and checkout errors across our custom portal directly led to lost revenue and abandoned sign-ups for subscriptions.

  3. The site lacked a clear organizational structure to effectively categorize and surface content.

I proposed moving to WordPress to save and earn us money as the CMS has a content paywall plugin editorial had been asking for. This would also fix the constant login problems and provide necessary quality of life in the experience.

Analysis and Feature Breakdown

I prioritized competitive research on similar publications, like Wine Spectator, Decanter, and Robert Parker’s Wine Advocate, subscription tiers, and paywalls. A key finding was their use of follow-up stories and prominent placement of wine reviews in navigation and homepage features to keep readers engaged.While I focused on improving the site’s navigation, the developer worked on the subscription checkout.

Navigation

  • The original navigation was organized by content (wine, spirits, food), but overlapping posts made it ineffective.

  • The team prioritized clearer navigation, better archive access, and improved readability.

  • While discussing this with the team, an editor's comment about preferring casual language (“eat” vs. “dine”) inspired a shift to action-based labels: “Read, Eat, Drink.”

  • “Shop” was added but caused confusion since the site doesn’t sell wine; it was later removed, even after testing “Browse” as an alternative.

Paywalled Content

Feature stories from the print magazine are now behind a paywall on the site, requiring subscribed users to log in or subscribe for access.

Subscription Tiers Refresh

The subscription model had 6 tiers: print-only and print + digital (a browser-based PDF by a 3rd party company), media subscription, wine industry subscription and a friends and family subscription.While testing:

  • 86% of users were confused about the amount of subscription tiers available and what each tier would offer when we A/B tested the 6-tier system vs. the 3-tier system.

  • 36.4% of testers said the checkout process was moderately smooth in beta testing.

We updated our subscriptions to match standard industry pricing, rolling out a three-tier setup with a digital-only plan to replace our old PDFs. To make sign-ups easier, we clarified the perks for every level and introduced a free tier so new readers can easily get started.

Archives

Inspired by The New Yorker and Roads & Kingdoms, I moved away from the classic list-style archives for a more engaging experience.

While A/B testing, I found:

  • 73% of users said the old lists were overwhelming and many disliked clicking through the pagination to find what they needed.

  • 85% of in-house testers loved when the featured stories were grouped by topic, saying it was easier to use.

Grouping restaurant reviews under “Drink & Eat” by establishment type helped connect the content better.We swapped the map for a text cloud showing cities by number of reviews, making the site simpler and unified.

Takeaways

Take each issue one at a time

This was my first real-world UX/UI project. The amount of feedback I received was overwhelming at times being the sole designer. My brain would split into three different directions with endless questions and theory crafting.

The devil was the details

I was so focused on how the UI would affect certain elements on the page from a coding standpoint, I briefly lost sight of how the user flow should be. The web developer had to reel me back to take a breath and reset.

Happy accidents

While adjusting hex colors on the site post-launch, I accidentally made it color-blind friendly (one of our editors can’t see red and green). This was way before I knew what accessibility design was a thing.

The last page

As of May 2024, the magazine has ended its print publication. Everything from hereon would be published via the website, tasting notes and all.

Local News Lab

Other Design Work

Other Design Work

Prior my change to UX, I was a designer of many trades: digital and graphic design, print design, branding, web design/development; you name it, I most likely have done it. Except for screen printing; I still want to try that.Below are some samples of my work.Please click on the images below to see them larger in modal.

About

I'm a designer who wants to make good sh*t.

What makes up Viv's Experience?

6 years and counting

UX/UI and Product Design

16 years

Graphic and Digital Design, Responsive Design
and Web Development

My core design values

Useful

Accessible

Impactful

My experience has given me key roles in shaping experiences around subscriptions, design systems, complex B2B and B2C products and accessibility.My curiosity drives me to learn from various disciplines; it helps keep perspectives and biases in check for critical design decisions that impact both business and user needs. I'm constantly learning new things to adapt to my workflow for better efficency.In a previous life, I was a production director for a wine magazine where we geeked out over terroir and the like, hosted wine tasting events in SF, LA and NYC, did email marketing (not very fun, honestly), freelanced for a minute with some cool clientele and a junior designer at Marvel Entertainment.

Life Outside Work and Design

Social Media: LinkedIn

Experience

CompanyJob TitleDurationLocation
WongDoodySr. UI Designer, PX2021-PresentNew York, NY
Local News LabProduct Designer2021-2022New York, NY
Career BreakTransition into UX/UI design2020-2021 
Wine & Spirits magazineProduction Director2018-2020New York, NY

Production Manager2013-2017New York, NY
Zeta GlobalGraphic Manager2011-2013New York, NY
PP List ManagementGraphic and Web Designer2008-2011New York, NY
Marvel EntertainmentWeb Production Assistant2007-2008New York, NY
vivdesignsDesign Consultant/Freelancer2004-2022New York, NY

Certifications & Education

Degree/Certificate NameIssuerYear
Into Design Systems ConferenceAdvanced Design Systems2025
Infosys Accessibility Centre of ExcellenceCertificate in Digital Accessibility with Live Accessibility Audits2023
General AssemblyCertificate in User Experience Design2019
CUNY Baruch CollegeCertificate in Web Development with Open Standards2013
CUNY Baruch CollegeB.A. Graphic Communications; Japanese minor2006

Skill Set and Expertise

  • Accessibility Audit (WCAG 2.1/2.2)

  • Component Libraries

  • Cross-platform UI

  • Design Systems

  • Mobile App Design

  • Prototyping

  • Visual Hierarchy

  • Micro-interactions

  • User Workshops

  • Usability testing

Research and Analysis

  • Competitive Analysis

  • Personas and Journey Maps

  • Information Architecture

  • Research Synthesis

Design Tools

  • Adobe Creative Cloud

  • AI tools (Microsoft Copilot, ChatGPT, Claude, Google Gemini)

  • AxeTools

  • Figma (Make, FigJam, Design Agent)

  • Framer

  • Google Lighthouse

  • Miro

  • Notion

  • ProtoPie

  • Sketch

  • WordPress

  • SquareSpace

  • Stark

  • VoiceOver

  • Webflow

Coding

  • HTML5/CSS3

  • PHP (Working knowledge)

  • JavaScript (Working knowledge)

  • React.js (Basic knowledge)

  • WAI-ARIA

Spoken Languages

  • English (Native)

  • Cantonese Chinese (Native)

  • Japanese (Conversational)

  • Korean (Beginner)