I’m Vivian.

I'm a NYC-based UX/UI Designer who enjoys creating usable, accessible and seamless experiences for all.

Latest Work

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

While this project was a short 5-week engagement with the automotive client, my team and I had our work cut out for us.The U.S. branch of the automotive company asked us to:

They wanted the following for each stakeholder group:

All This Data Has to Go Somewhere

In order to marry these challenges into an opportunity, we expanded the use of their data from an in-vehicle to in-app in order to a more connected ecosystem with owning a vehicle from this brand.However, this needed to be done thoughtfully in order to ensure the wants and expectations of their drivers met in a way that impacted the broader engagement with service offers positively.Our team came across a few challenges during the project: The company's marketing team had a huge repository of data and didn’t know how to best use it.The dealerships had their own systems in place within their database to put in locale-based promotion deals e.g. Free oil change, discounted winter tires, etc.The main pain points we heard from interviews were:

The Approach to Moments That Matter

Our Strategy team created an offers-oriented approach that was based off of the types of offers the car company currently has for their customers; this leveraged its purpose, desired impact for stakeholders (owners, dealers and the business) and how it’s communicated to drivers.It helped guide in-app messaging, opportunities and a proof of concept that were based on the company's goal to leverage brand love, predictability, and personalization based on data.Key moments in the ownership journey highlighted in-app offers that range from specific services (e.g. oil change) to other after-sales products (e.g. discounted tires or weather mats) were informed by research and business and dealer goals where priority was given to messaging and in-app manifestations.Having worked with the Canadian branch of this company 2 years prior, I was able to give the team internal knowledge on their design system, brand assets, and summarized what I worked on with the Canada team with relevant notes and files so we could create a working prototype given the tight timeline.I used the design system previously shared from their Canadian branch for a more consistent look and feel in the UI and strengthen their brand identity.Our persona David is the owner of a new MyCar R-Model. While the dealer finalizes his paperwork, he is encouraged to download and install the MyCar app on his phone. He registers, adds his vehicle and agrees to receive notifications.

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.

As his ownership journey continues, David is onboarded via the app, with service benefits being highlighted in order to raise awareness when the time comes. To gameify the journey, our persona earns points to apply to service offerings, accessories, etc. Lastly, as a predictive touchpoint, he receives a notification of an oil change reminder as he nears 30,000 miles on his R-Model.On his 1-year anniversary, a celebratory message is sent to David on the app to congratulate him on his driving experience with a recap of his year with his R-Model, similar to Spotify’s year in review.Interestingly enough, our stakeholders internal marketing team had the same idea in utilizing their user data in this format. This key touchpoint became a natural and organic collaboration between the client and WongDoody.

As David gets near the end of his lease after 2 years and 10 months, 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.

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."Using Miro, we all complied our ideas on the board and then voted on the idea based on tech lift and inclusivity. Some ideas we had were wrapping paper pattern generator, create a holiday song using an AI music sequencer, and bake your own cookie.In the end, we were tied between "Build a snowman/gingerbread house" and "What do the holidays mean to you?" After having a brief discussion, the latter idea won.Spoiler alert: It was my idea 😀I was mainly 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, digital space for people to anonymously share their thoughts about the holidays because everyone's experience around this time of year is a unique and personal narrative, transcending borders, traditions and emotions. By providing the veil of anonymity, we hope the user would feel more at ease writing down their thoughts without the possible backlash, toxic positivity and judgment involved.While myself and a junior UX designer worked on fleshing out the art direction (we're both illustrators) with the use of Photoshop's GenAI of images for inspiration, the leader of our group got on ChatGPT to help her develop code to put on a cloud-based server. To deepen the immersion, I used Soundraw, an AI music generator to create a BGM to go on the site to make it extra warm and inviting.We had about 3 weeks to put all of this together. Thanks to ChatGPT helping our leader with the code, all she had to do was fine tune a few functions while adding in the illustrations one of the other designers created.Even though we didn't win "People's Choice," I'm still proud of what the team achieved and this project and being able to show it off to everyone.Please click on the images below to make larger for viewing.

I was brought onto this project halfway in and received a quick brief on the deliverables. Over all, UTS stated they did not want to be another WebMD or Mayo Clinic site nor did they want to get into anything which involved self-diagnosis or specific drugs/treatments.Their mission is to make information about crucial healthcare topics more understandable and accessible to everyone via:

Think of it like "Bill Nye the Science Guy" but more health and medical science leaning.By creating this video content first model, they have 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 suggested by providing citations and references to increase their medical transparency and fact-checking.At this time, their core audience is solely U.S.-based, with their videos only available in English for now.

Power of AI and Adding Accessibility In

We needed to find a way to carve out this video based content niche in a crowded space while designing to support their growth over time. Their original site was a proof-of-concept, designed only for one topic; opioid abuse. AdMed is lending its video production capabilities and scientific experts to support a video-first strategy.Solid IA and navigation are crucial and access to a chatbot offers interesting possibilities since there are some users who look for specific information while others are browsing a topic out of curiosity; some for themselves and some as caretakers.The topics themselves are often related (e.g. cancer diagnosis, cancer treatments like chemo and radiation) and need to be cross-linked, so a one-dimensional hierarchy wouldn't work here. And including AdMed's IBM cloud gives us access to the watsonx AI chatbot; the Principal Product Designer dove into watsonx's full capabilities and discovered it can do far more than be a simple virtual assistant.

While the discovery above were found, one nearly missed point was accessibility; since they wanted their content to be available to all, why not really lean on that prospect? While creating style tiles, we created a design system for the developers to use alongside a AA level-friendly color system that was built off of what they already had in Bootstrap. During one of our assessment meetings with the client, I noted their video content needed certain requirements in order to pass AA, like captions and pause/play buttons being visible.

An IA-Based Approach and Solution

We had to understand and dive deep on how they're different from other medical websites and lean in on that. Working directly with their board of directors, we provided a long-term vision for their scope of topics and explored different and flexible approaches to their growing IA.Modules were created so it could 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.

Using the IA as our foundation, we were able to create a way where info seekers and explorers can navigate and engage with the website in multiple ways via menus, a library and a chat to support visitors with varying levels of comfort with AI. The chatbot was extremely integral to the experience by pairing it with the video player rather than it being at the lower right corner.We demonstrated how the chatbot can respond to actions on the page, which enabled greater interaction via timely quizzes, requests for feedback and more.Upon delivering the final design, development on the site was underway and was expected to launch in Q1 of 2024; it has since launched and is now live.Chase provided the development time and talent to build out the first version of the new site while AdMed writers and producers are cranking out new content, which started with prostate cancer; they're also hard at work in training the watsonx chatbot to perform the expanded functions.

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

Takeaways

Proving Echo is Here to Stay

From the initial interview done with RCA Records’ stakeholder, they want Echo’s fans to find avenues in better connecting with her via her website and socials. The key takeaways we got were:

While brainstorming possible site ideas with the team, the question that kept popping up in my head was "How might we better connect Echo’s fanbase to her story and releases?"

Forming the Echo Chamber

With modern technology accessible at our fingertips, habits consuming media have changed with it. Our user research team found majority of music lovers only browse musician websites for staying up to date on tour dates or latest releases and rarely or never pre-saved new releases from their favorite artists due to its availability on music platforms like Spotify and YouTube.When asked what challenges they faced when trying to learn about a new artist, most answered the lack of information on their origin story and what influences them on a personal level.We also noticed a majority of mainstream artists' websites aren't very informative for fans as their landing page only serves as a bulletin board on their latest releases, tour dates and merchandise. We saw this as a disadvantage to new fans who want to learn more about the artist and decided this would be a must-have for Echo's landing page.

Low fidelity digital sketch of Echo's website

In the initial ideas phase, I decided to put the most visual emphasis on “Angels” pre-save, tour dates, and merchandise, with Echo’s musical background as a secondary priority. My mindset here was finding the balance between meeting RCA's business needs and expressing Echo's artistry with the site.A QR code was also provided for Echo’s fans to interact with more more on social media, specifically on TikTok, with a camera/video filter for them to use as “fansclusive” content.To keep fans on the site longer, “Echo Lounge” was created to house more of the musician’s content with behind the scenes videos, interviews, listening party and livestream Q&A promotions. However, a few users didn’t like how the Lounge took them to another page; most felt their immersion was ruined and preferred the content to live on the landing page instead. One brought up that he wouldn’t have clicked on Echo Lounge if it wasn’t mentioned to them. There was one interesting note regarding promoting fan events on artist websites:

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

Since indie artists tend not have a dedicated person to update their site on a regular basis compared to their social accounts, the only time it is updated is when new tour dates get posted. Having outdated information on a professional artists’ site is kind of embarrassing. As a result, the content in the Lounge all got moved into the main landing page.Over all, the clean layout and ease of navigation of the site made their experience a positive one. Echo’s logo, album art and timeline layout were the main visual draw to convert them into a fan.

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 for this long due to the license the owner of the magazine bought before my tenure here. The main issues were:

We did consider upgrading the CMS, but the documentation the developers of EE released deprecated 2/3 of the coding snippets used on the site and it wasn’t cost or time effective for a small company like ours. While there were other issues to deal with on the site, I decided to make the points above my top priority while thinking about ways in improving our user experience and increase profits for the magazine.I believed by migrating to WordPress, I would be able save the company money, put up a content paywall, resolve the multiple log-in issue and create a streamlined content creation system with this CMS.

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.Comparing their content to W&S’, their feature content had follow-up stories to keep the reader engaged on the site. They also separated industry and wine news apart from their articles. The most obvious one was highlighting their wine reviews either in the navigation or as part of the homepage content.

Sorting Out the Navigation

While the developer was researching on how to customize the subscription checkout process with a plugin, I started on the front end of the site with the navigation hierarchy.In its previous reincarnation, it was good to see the navigation separated based on its content matter (wine, spirits, food), but the posts weren’t a one-size, fits all category as they overlapped. The navigation structure, archives and the readability of content were my high priorities based on feedback from the team via Slack during the COVID-19 quarantine.After several rounds of going back and forth with the team, the turning point was when an editor remarked on how much he hated the word “dining” as he “… never go out to dine. I go out to eat.”Taking this discovery, I renamed the navigation with action verbs like “Read, Eat, Drink, Shop.” Another editor pointed out “Shop” was confusing since we do not sell wine (it only pointed to retail shops that do) and removed it in the final version. We played around with “Browse” to replace “Shop” but ultimately did away with it.

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, which are longform content from the magazine’s print issues, are now behind a paywall. In order for someone to see it, they will have to log into their subscriber account or subscribe to read it.This was one of the must haves for the site's MVP.The former version of the subscribe page only offered 2-tiers: a print and print and digital (which is an interactive PDF eBook accessible via browser). After the 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

Taking inspiration from several websites like The New Yorker, Roads & Kingdoms, and The Wine Advocate, I stepped away from the classic-styled listed posts in archive pages.73% of users disliked the listed structure, stating the amount of content was overwhelming. Most were frustrated they had to click on the pagination numbers repeatedly in order to find what they wanted to read.The redesign separated feature stories by its subject matter (i.e. Best New Sommeliers, Restaurant Poll interviews). Not only was this more visually appealing, 85% of in-house testers found the page much easier to use.Using the dining reviews page as an example because it was one of the higher ranked content our users read, I put the reviews under “Drink & Eat” by establishment: Bars, Restaurants, Wine Shops, Spirits Reviews and Recipes. In the old structure, “Wine Shops” and “Wine Bars” were under the “Wine” section and “Spirits Reviews” was under “Spirits.”By combining this under one section, the information architecture made more sense and unifies the content. The map was removed in new version and replaced with a text cloud of cities ranging from the most to least restaurant 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 a multi-disciplinary designer, but really, I just wanna make good sh*t.

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

My core design values

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.

Origins