I’m Vivian.

A NYC-based UX/UI Designer who enjoys creating usable, accessible and seamless experiences for all.
Currently a Senior UI Designer for WongDoody ↗.

Latest Work

• Global Automotive Company
• Juniper Networks
• Hackathon 2023: Holiday Voices
• EqualPrice
• Understand the Science
• Echo
• Local News Lab
• Wine & Spirits Magazine Website

This project was a short 5-week engagement with the global automotive client. The U.S. branch of the automotive company asked us to:

For each stakeholder group, they wanted:

All This Data Has to Go Somewhere

We thoughtfully expanded their data use from in-vehicle to in-app to create a more connected ownership experience. This approach ensured drivers’ expectations were met, enhancing engagement with service offers.In discussions with the automotive team, the challenges we identified were:

Many owners felt unsupported after purchase, with limited app features focused mainly on newer models. Key tools like Remote Start are helpful, but overall engagement is low; even some staff within the company were unaware of the app. Owners of older MyCar** models are excluded, and most users miss critical updates like check-up reminders, lease expirations, and subscription renewals, leading to a disconnected experience.

The Approach to Moments That Matter

The team and I highlighted key moments in the ownership journey, like service reminders and special offers on things like oil changes or weather mats, through in-app messaging and notifications, guided by research and dealer goals.Since I worked with the Canadian team two years earlier, I was able to share helpful insights, brand assets, and notes from that project. This gave our team a head start and helped us build a working prototype quickly with the tight timeline. We also reused the Canadian design system to keep the look and feel consistent for brand recognition.Our persona, David, just bought a new MyCar** R-Model. While his dealer wraps up the paperwork, they suggest he download the MyCar** app to get started.

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’s journey covers his onboarding and how he opts into in-app notifications, which highlight service perks when needed. Each time he 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, like Spotify Wrapped.Interesting enough, the client’s marketing team had a similar idea, leading to a natural collaboration between them and WongDoody.

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.

Press the play button below to view the experience.

Next Steps

The clients expressed how happy they were with our work and ended up overdelivering from their original ask. Upon handing the files and prototypes over to them, their internal team will see what will be feasible to implement into the app, budget pending for their Q1 in 2025.They have also shared our company name internally as a possible live lead for possible new work into our pipeline.

Takeaways

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

"Demand facts, not fluff"

This was part of a client pitch I worked on with the Product Design Director and the cross-functional team at WongDoody. Jumping into Juniper's site, we found:

Through interviews and competitive research, we learned 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 clear, practical, and jargon-free.That insight shaped our pitch’s North Star: “Demand facts, not fluff.”

Simple But Highly Effective

To build trust in Juniper, we highlighted proof points like the Gartner Magic Quadrant, major clients like Zoom and Verizon, and key innovation milestones are all reflected in the design. Working closely with strategy and creative ensured everything aligned with broader messaging.We mapped the user journey around how a CTO and an analyst might collaborate on a purchase, using simple prompts about product interest, industry, and role to guide them.I started with a “fill-in-the-blank” approach for a personalized feel like a Mad Libs, but it got too complex. We pivoted to clearer prompts, thanks to the product design director’s suggestion.

Journey Through the Tech

We focused on personalization, clarity around Juniper’s strengths, real customer stories, and product demos.The journey kicked off with a simple question: "What part of your network keeps you up at night?"
Users picked pain points, goals, and products to get content tailored to them, followed by selecting their industry and role for more context. To take it further, we suggested using LinkedIn APIs and AI/ML to personalize based on role, industry, and location.For a CTO, the experience surfaced strategic case studies and leadership insights. For an analyst, the SME, it focused on technical specs, docs, and hands-on demos.

In the end, we delivered three clickable prototypes that balanced out the brand's storytelling with a frictionless user journey designed around trust and to drive conversions amongst the enterprise level decision-makers and technical analysts.Unfortunately, we did not win this pitch but I learned a lot on how fast I was really able to put together a working prototype.

Press the play button below to view the experience.

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

Our SVP of Experience Design suggested the Product Design Director and I create various types of designs after having the concept solidified by the strategy and copywriting team. While I went the more traditional tech route, 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.

Synergy of Ideas

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."The team 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.

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.Please click on the images below to make larger for viewing.

Our team collaborated with EqualPrice's internal UX team to help make patients make medical claims easier by providing access to clear information on medical claims, cost estimation tools, and resources for navigating the process.Due to the NDA I signed with the client, I am unable to post any designs in order to protect the client's IP.

Tailoring Each Experience

We had to understand the complexity of medical claims and build the strategy around this in order to weave everything together as a responsive experience.Working together with EqualPrice's internal UX team and SMEs, this ensured we fully understood the needs across all persona groups. Their internal team shared all they've done with user interviews, personas and journey mapping, to which we used to create the visual experience.Three personas for Member, Provider and Negotiator were scoped into the project and made it easy to divide it into 3 phases.The journey starts with the Member submitting a claim, with the Negotiator taking it to discuss with the Provider on the most cost-effective pricing through the use of the EqualPrice Editor**, a calculator that helps total up a reasonable and payable amount for the Member to the Provider. The process is similar to a credit debt consolidation in steps.

Accessibility Baked In Designs

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 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 scope of the project and budget constraints, extra phases had to be cut out. My team and I delivered all the screens for the projected personas and extra screens for a systems admin for future state.The website has since launched and is live for consumers to use.

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

I joined the project halfway through and quickly learned that UTS didn’t want to be like WebMD or Mayo Clinic; they weren’t interested in self-diagnosis or specific treatments. Their mission is to make important healthcare info easy to understand and accessible to everyone with:

Think of it like "Bill Nye the Science Guy" but more health and medical science leaning.By creating this video content first model, they already separated themselves from other medical websites which require too much reading and have you constantly questioning your mortality.Their leadership emphasized how critical it is for UTS to be seen as trustworthy and credible to the public, to which we added a citations and references section to increase their medical transparency and fact-checking.

Power of AI and Adding Accessibility In

While making style tiles, I also put together a design system for the developers, using colors that met WCAG AA level based on their existing Bootstrap setup. During a client meeting, I pointed out that their videos needed things like captions and clear pause/play buttons to meet those accessibility requirements.

Their original site was a proof-of-concept focused on videos about opioid abuse.Having clear navigation and information architecture was key. Plus, adding a chatbot opened up cool possibilities since some users come looking for specific info, while others are just browsing either for themselves or as caretakers.Since topics like cancer diagnosis and treatments are closely related, they needed to be linked across the site instead of a simple, one-way hierarchy. AdMed’s IBM cloud gave us access to the watsonx AI chatbot, and the Principal Product Designer found it could do a lot more than just basic virtual assistant tasks.

An IA-Based Approach and Solution

We did a deep dive on how they're different from other medical websites and leaned in on that. Working directly with their board of directors, our team provided a long-term vision for their scope of topics and explored different and flexible approaches to their growing info architecture.Modules were created to be integrated into the site over time as their category library grows via style tiles. Remember watsonx? Our team researched various way to leverage it to create a more dynamic and interactive experience that span beyond a simple Q&A with time-based pop quizzes, facts and more.Please click on the images below to view in a larger format.

Users can explore the site in different ways via menus, a library, or a chatbot, making it easy for people with different comfort levels with AI. The chatbot plays a big role and is paired with the video player instead of just sitting in the corner.We showed how the chatbot can interact with the page, like giving quizzes or asking for feedback, using two user flows: one when a link is shared, and another from a search engine.After delivering the designs and assets, development started, and the site launched in early 2024.Chase led the development of the first version, while AdMed’s writers and producers are creating new content starting with prostate cancer. They’re also training the watsonx chatbot to handle more features.

Understand the Science high fidelity wires for the desktop version of their website.

Press the play button below to view the experience.

Takeaways

Proving Echo is Here to Stay

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

Forming the Echo Chamber

Media habits have changed; nowadays, most music fans visit artist websites just to check tour dates or new releases, and rarely pre-save songs since they use platforms like Spotify.When asked about discovering new artists, many said there’s not enough info about their background or influences.We also saw that most artist sites act like bulletin boards with bare-bones information on releases, tours, and merch. For Echo, we made sure her landing page would give fans more personal insight to help new listeners connect.

Low fidelity digital sketch of Echo's website

I focused the sites' pre-saving “Angels,” tour dates, and merch, with Echo’s musical background as a nice balance between RCA’s goals and her artistry.We added a QR code for fans to connect on TikTok using a special camera filter as "fansclusive" content.To keep fans engaged, we created the “Echo Lounge” with behind-the-scenes videos, interviews, and livestreams. Some artists even have paid fan-only sections with exclusive content. However, a few users 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.There was an interesting note about promoting fan events on artist sites:

“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.”

Indie artists usually only update their website when new music and/or tour dates drop, so outdated information can feel embarrassing. This was why we moved all the Lounge content to the main page.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.

Takeaways

What do the newsrooms want and what are their pain points?

While thinking about how to scale the rec system, I was suggested to watch the Google News Initiative (GNI) Product Workshop to help me get more ideas by the Community Lead and discussed what usable key metrics we have to do this after watching it. My thought process first went to changing the metrics for this iteration, but was concerned whether or not this would make more work for the Engineering team.The question then became “What sets of data do we already have to utilize in scaling the rec module within 6 months?”With the GNI information fresh in my head, we mapped out the design process on Notion while keeping the Engineering Team’s non-negotiables and main touchpoints in the iterative proposal. Once the cohort began, the newsroom partners and LNL met in bi-weekly check-ins via Zoom with updates as to what each team have been working on, addressing concerns and questions in a stand-up format. Meeting itineraries were created in Notion and shared ahead of time to streamline the meeting and be considerate of everyone’s time.

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:

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.

Miro board of digital post-its were placed by cohorts, showing their ideal features and how much an impact it'd make on their sites.

While planning the workshop, I was concerned about dead air during and filled the itinerary to the brim with topics. It wasn’t after the fact we realized we crammed too many things to cover and didn’t leave room for free discussion.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

Giving Wine & Spirits Another Digital Makeover

When the website migrated to ExpressionEngine (EE) from individual .ASP files around 2014, we realized the CMS’ limitations after using it for 8 months. We stayed with EE due to the purchased license before my tenure here. The main issues were:

Upgrading ExpressionEngine wasn’t a good fit for our small company as it was too costly and time-consuming, especially since most of our site’s code wouldn’t work with the new version. Despite these challenges, our goal was to improve user experience, grow our online presence, and boost magazine profits.I thought moving to WordPress would save money and earn money with a content paywall, fix login problems, and make content creation easier with a smoother system.

Learning from the Competition

With budget and time constraints for this project, I focused more on competitive research over user research. I wanted to see how our competitors presented their content, what were behind and in front of their paywalls and how they structured their subscriptions system. Publications like Wine Spectator, Decanter, and Robert Parker’s Wine Advocate all report similar content as Wine & Spirits.Our competitors' features had follow-up stories to keep the reader engaged. The most obvious one was highlighting their wine reviews either in the navigation or as feature content on the homepage.

Sorting Out the Navigation

While the developer worked on customizing the subscription checkout, I focused on improving the site’s navigation.The old navigation was split by content (wine, spirits, food), but lots of posts overlapped, so it wasn’t a perfect fit. Based on team feedback, we made navigation, archives, and readability top priorities.The game-changer was when an editor said he hated the word “dining” because he “goes out to eat,” not to dine. So, I switched to action words like “Read, Eat, Drink, Shop.” But “Shop” confused people since we don’t sell wine, so we dropped it after trying “Browse.”

Post-its showing the the process of re-organizing Wine & Spirits site navigation. Click on the images to enlarge them.

Words to Earn Online Subscriptions and to Pay the Bills

Top image: A scrolling interaction showing the paywall to featured content; Revised subscription tiers.

Features stories, the longform content from the magazine’s print issues, are now behind a paywall. Users will now have to log into their subscriber account or subscribe to read it.The former version of the subscribe page offered 2-tiers: a print and print and digital, an interactive PDF eBook accessible via browser. Post site migration, we switched to a 3-tier system like our competitors, offering a digital-only sub tier for the website’s paywall.During the subscriptions testing phase, 86% of users were confused about the amount of tiers available (there were 6) and what each tier would offer.Despite the setback, 36.4% of testers replied the process was moderately smooth.

Archive Pages

Inspired by sites like The New Yorker and Roads & Kingdoms, I moved away from the classic list-style archives.73% of users said the old lists were overwhelming, and many hated clicking through pages to find what they wanted.The redesign grouped featured stories by topic (like Best New Sommeliers or Restaurant Polls), making it more visually appealing. 85% of in-house testers loved it, remarking it was easier to use.Dining reviews were all grouped under “Drink & Eat” by establishment: bars, restaurants, wine shops, spirits, and recipes. Before, these were scattered across different sections.This made the site simpler and more unified. We also swapped the map for a text cloud showing cities by number of reviews.

From wireframe sketches to low to high fidelity designs of W&S' website refresh. Click on the images to see larger versions.

By focusing on the navigation structure, improving on content structure and the subscription checkout process, the website’s user engagement increased by approximately 124%; subscriptions signups increased by 50%.

Takeaways

Other Design Work

Prior my change to UX, I was a designer of many trades in a past life: 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.Here's some samples of what I made back then.Please click on the images below to see them larger in modal.

I call myself an interdisciplinary designer, but really, I just wanna make good sh*t.

My background in design spans over 20 years, five of those focused in UX/UI design.You can view my full skill set on LinkedIn.

When I'm not designing, I am:

✏️ Improving on ways to be a better illustrator, having been self-taught for most of my life. Those references books I bought need to be used.✨Dabbling in various hobbies, like gaming, streaming, knitting, belly dancing and world music. My current obsession is volleyball, where I've been working on my overhand float serve.🐕 Spending time with my dog and spouse.📚 Finding ways to improve my skill sets; I'm currently learning React to expand my creative arsenal.

Origin Story