I’m Vivian.
A NYC-based UX/UI Designer who enjoys creative problem-solving with usable, accessible and seamless experiences for all.
Currently designing for WongDoody ↗.
A global automotive company has a mobile app called myCar**, which allows their customers to control their vehicle's temperature and check the location of their vehicle.
The Goal
Enhance owner engagement, loyalty and satisfaction while driving revenue growth by including offers within the myCar** and myFancyCar** apps.
Role
Senior UI Designer
Project Type
Lo/Hi-Fi Design
Prototyping
User Flow
Duration
November-December 2024

This project was a short 5-week engagement with the automotive client. The U.S. branch of the automotive company asked us to:
Enhance their in-app experience through the inclusion of services offers directly into their MyCar** and MyFancyCar** apps.
Create new features to improve and enable engagement and brand loyalty to drive their revenue stream.
They wanted the following for each stakeholder group:
For vehicle owners: Drivers seeking easy-access to information about their vehicle and ownership milestones, such as access to dealer offers, services, and personalized app experiences.
For Dealers: Partners who need to maintain long-lasting relationships with drivers and can benefits from streamlined communication and service engagement with customers.
Global Automotive Company: Decision-makers looking to drive revenue through enhancements to the engagement and loyalty lifecycles, often prioritizing a data-driven messaging strategy and innovative experience vision to achieve global impact.
All This Data Has to Go Somewhere
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. 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.While talking with the automotive company's team, some challenges we discovered were:
The huge repository of data the marketing team had and they didn't know how to best use it.
Un-centralized systems and databases with the company's dealerships as each had locale-based promotional deals e.g. free oil changes, discounted winter tires.
The main pain points we found were:
Owners are often left unsupported post-purchase.
The app is very utility-based; the temperature control and schedule remote start features for some newer models were the only incentives to use it. We discovered there were some staff within the company who either don’t use the app or even knew of its existence.
The app only applies to owners of newer models while owners of older MyCar** models are excluded.
Most users do not get notifications on when their check-ups are due, when their lease ends, subscriptions expiring, etc.
The Approach to Moments That Matter
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 notifications.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.

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.
The ownership journey documents his onboarding and acceptance of in-app notifications, with service benefits being highlighted in order to raise awareness when the time comes. Every time he services his car, David earns points that can be applied to service offerings, accessories, etc.On his 1-year anniversary, a celebratory message is sent on the app to congratulate David 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 neared 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
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. I don't think I've seen an app go full utility.
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!
Cars, but make it fun
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.
Juniper Networks
Juniper Networks is a global leader in networking and cybersecurity, known for its high-performance routers, switches, and AI-driven tools like Mist.
The Goal
Reimagine Juniper's web experience to make it more transparent for the buyer with personalization and clarity to build trust, improve engagement and help connect users with relevant content faster.
Role
Senior UI Designer
Project Type
Design Systems
LoFi Sketches
HiFi Design
Prototyping
Proof of Concept
Duration
3 Weeks

"Demand facts, not fluff"
This was part of a larger pitch I worked on with the Product Design Director and the cross-functional team at WongDoody. Given the short engagement of this project, we immediately dissected Juniper's website and found:
Their current site didn't effectively explain the value of their services to potential customers.
Lacked personalization for different buyers in roles and industries.
Too much tech jargon.
The buying journey was misaligned with real-world decision making.
Through stakeholder interviews and competitive analysis, we uncovered their B2B buyers needed more specific information tailored to their industry across every topic, even emerging technologies like AI.Our team found the user journey was a collaborative effort between the decision makers (e.g. CTOs) and practitioners like SME (subject matter experts); the solution not only needed to be a two birds with one stone, but the jargon had to be cut down to simplify things.These findings led to the pitch's North Star: "Demand facts, not fluff."
Simple But Highly Effective
To hammer down the trust factor with Juniper, the inclusion of the Gartner Magic Quadrant, showing major clientele like Zoom and Verizon and industry rankings and innovation milestones were highlighted and reflected in the design. Working closely with the strategy and creative teams through each iteration helped us better align with the broader messaging and marketing.We designed the user journey around how a CTO, a decision maker and SME, an analyst, may collaborate during a purchase decision with simple questioned prompts on type of product interest, the user's industry, and their specialization within the industry.I started approaching it with a "fill in the blank" method to give users a tailored experience in order to boil down to what they're really looking for with Juniper. The original concept a "Mad Libs" approach, but ended up being more complicated than it seemed and ended up pivoting to prompts for clarity, which was the product design director's idea.Please click on the images below to make larger for viewing.
Napkin sketch of Juniper's reimagined experience on the homepage with callouts to some features.
Napkin sketch of an accordion to show customer success stories and word prompts inspired by Typeform's questionnaire format.
Napkin sketch of word selections for the question prompt and loading screen post submitting their choices.
Journey Through the Tech
The principles we aligned with were personalization, clarity on Juniper's capabilities, customer success stories, and demoing products.The journey started with the decision make interacting with the conversational prompt:"What part of your network keeps you up at night?"Here, the user selects common pain points, goals, products and services to tailor their content based on relevance. This was followed by an industry and specialization selectors to give better context to what service they're looking for. To better customize content delivery, we proposed integrating LinkedIn APIs and using AI/ML models to identify visitor roles, industry, location and seniority levels.For the decision maker–in this case, the CTO–would see strategic case studies, product overviews and insights from leadership as their result.For the analyst–the SME–would see detailed technical specs, documentation and hands-on demos for the product.
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.
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.
WongDoody's SVP of Experience Design wanted our internal EX team to engage in an annual hackathon with the inclusion of AI usage.
The Goal
Create an interactive holiday experience that fosters connection between designers across our WongDoody studio locations worldwide. The "digital greeting card" should serve as a cheerful and compelling way for our design community to come together during the holiday season. The greeting card must be accessible on the web via URL.One team will be voted "People's Choice," presented at our internal XD team meeting.
Role
UX/UI Designer
Art Director
Project Type
LoFi Sketches
AI prompt
Art Direction
Style Guide
Duration
3 Weeks

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 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 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.
EqualPrice* is a digital experience where medical patients can get clear information on medical claims, cost estimation tools and resources for navigating claims based on the No Surprises Act.
The Goal
Make the digital platform WCAG AA level compliant, responsive and bilingual in English and Spanish to accommodate members, internal associates, negotiators and providers.
Role
Senior UI Designer
Project Type
Accessibility Audit and Design
Design System
Lo/Hi-Fi Design
Prototyping
Style Tiles
User Interviews
Wireframing
Duration
6 months

Our team's goal was to collaborate 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.
Understand the Science (UTS) is a non-profit company who provide easy-to-understand education on crucial medical topics for empowering healthcare decisions. They are backed by AdMed Inc., with board members from Comcast and Chase.
The Goal
Reimagine their website through optimizing their UX and create a scalable medical content destination as UTS continues to expand their video collection.
Role
Senior UI Designer
Project Type
Competitive Analysis
Design System
Lo/Hi-Fi Design
Prototyping
Style Tiles
Wireframing
Duration
4 months

I was brought onto this project halfway in and received a quick brief on the deliverables. UTS 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 on crucial healthcare topics more understandable and accessible to everyone via:
Short-form (under 2 minutes) videos that are written and narrated by expert scientists.
A trained AI assistant to answer questions in real time, using natural language understanding with IBM watsonx AI chatbot.
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.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
While creating style tiles, I created a design system for the developers to use alongside a WCAG 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.

Their original site was a proof-of-concept, designed with videos on opioid abuse. AdMed lent its video production capabilities and scientific experts to support a video-first strategy.Solid IA and navigation were crucial and access to a chatbot offered 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.
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 IA.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.
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 through two userflows: one through being shared by someone (this can be seen below); the second from a search engine result.Post design and asset delivery, 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.
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 fact the design will be seen by everyone around the world. It's humbling, exciting and nerve-wracking all at once.
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.
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 the AI to analyze player stats, play challenges and more.
Weaving Accessibility In, But Don't Complicate It With Words
The short of it was I overexplained things when going over level AA and AAA to the board of directors while pointing out areas of improvement on their media content. Thankfully, the principal designer was there to help explain my ramblings. He really saved my butt there.
Echo is an artist who has written Grammy-award music and is ready to be in the spotlight for her moment and wants to prove she is here to stay. This was a mini-bootcamp project done with Elizé Presents as a UX/UI Designer involved with this real-world inspired project with RCA Records as a partner.
The Goal
Create an engaging desktop website experience that enhances Echo's deepened connection with her fans who are active music lovers and concert goers. A pre-save option for her upcoming single, "Angels" was one of the must-have requirements.
Role
UX/UI Designer
User Research & Interview
Project Type
Lo/Hi-Fi Design
Proof of Concept
Prototype
Web Design
Duration
1 month

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 were:
Pre-saving her latest single, “Angels” was top priority, as this action affects the song’s charting position on the billboard.
Build a strong connection between Echo and her fans while staying true to her vision.
Make the fans feel they’re on top of the latest Echo news.
Create a secure place for fans to get tickets and merchandise.
Forming the Echo Chamber
Habits consuming media have changed with modern technology. User interviews revealed majority of music lovers only browsed musician websites for staying up to date on tour dates or latest releases. They 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 current mainstream artists' websites aren't very informative for fans; their landing page only serves as a bulletin board on 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
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 to balance out RCA's business needs and expressing Echo's artistry.A QR code was provided for Echo’s fans to interact with each other 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. I found some overseas musicians and artists have fan-only sections where they pay an annual fee to gain access to blogs, photos, and fan club exclusive concerts.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.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 casuals to fans.
Takeaways
Pre-save is trying to be a thing.
Even though most of the people I interviewed never pre-saved music, some managed to click through some CTAs leading to the pre-save during the prototype 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; it’s a find what you need on tour dates and merch and leave. Fans surprisingly 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 one of those programs where 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 of a project when Elizé was selecting people to present to the RCA Records stakeholders. All of my bad speaking habits came out and 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 next.
Local News Lab (LNL) is a non-profit team under The Brown Institute for Media Innovation at Columbia University who create open-source products that help support local newsrooms and their businesses.
The Goal
Create an iterative process for LNL’s recommendation system for cohort partners, The Philadelphia Inquirer and The Texas Tribune.
Role
Product Designer
Project Type
Product iteration
User research
User interview
Duration
6 months

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:
What applications of rec systems have you seen in the wild you think are exciting/interesting and what might it bring to your website?
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.
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
First time for everything.
This was the first contract position I got since changing my design path into 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.
This was my first time creating and leading a workshop and the Community Lead was there with me every step on the way to provide insight and moral support. It was a very worthwhile challenge as I learned how to structure one and to make it fun as time went on.
Be more explicit and transparent.
Since this was the first time LNL had done a cohort, there were a lot of things we were figuring out as we went along, such as aligning our roadmap with our partners in order to achieve our goals.
Less visual design, more design process.
Even though I knew ahead of time the position was more research heavy, I was secretly hoping 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.
While I was creating the iterative process for this cohort sprint and workshops, 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 in responses.
Wine & Spirits’ website is a digital version of the magazine with a wine search feature.
The Goal
Improve overall experience, navigation, subscription checkout process, and create a paywall for longform features for trade professionals in the food and beverage industry and consumers interested in learning about wine regions and events.
Role
Lead UX/UI Designer
Front-End Developer
Project Type
UX/UI design
Visual design
Web design
Design iteration
Duration
1.5 years

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:
Needing to pay for an expensive paywall plugin for longform feature stories.
Needing to pay for EE license upgrade in order to use pay-to-play plugins by 3rd party developers.
Multiple log in sessions users needed to do in order to manage their subscriptions and checkout process.
Lack of structure for content sorting.
While upgrading ExpressionEngine was an option, it wasn't cost or time effective for a small company like ours; the new version of the software deprecated 2/3 of the code used on the site. Despite the piling issues, the ultimate goal was to improve our user experience, expand our internet presence 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 features had follow-up stories to keep the reader engaged on the site; they also separated industry and wine news apart. 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. Navigation structure, archives and the content readability were high priorities based on feedback from the team via Slack during the quarantine.After several rounds of going back and forth, 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 and was removed. 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, the 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.The former version of the subscribe page only offered 2-tiers: a print and print and digital, 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
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 my mind.
Prioritize features better
I’m generally a people pleaser and wanted to fit every feature pitched. And that was a very big problem.
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 greens). 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.
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, five of those focused in UX/UI design.You can view my full skill set on LinkedIn.
My core design values
Useful
Impactful
Accessible
I've always been a curiosity driven problem-solver and do my best to see the potentials in projects. While I can work independently, being in a collaborative team is where I thrive with the best ideas and strategies, resulting in meaningful connections and products. I like being intentional with every design decision that's sustainable, scalable and cross-functional. I’m always learning, improving, and growing as a person and designer in order to be 1% better than I was yesterday.
My Skillset
Accessibility Auditing
Accessibility Design
UX Design
UI Design
Interface Design
Interaction Design
Visual Design
Design Systems
Web Design
Web Development
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.
Origin Story
2007

Web Production Assistant
Fresh out of college with big goals, I got hired by Marvel after my internship ended with them.
2008

The logo I rocked for 12 years.
Web & Graphic Designer
I freelanced while looking for my next full-time job. Some of my clients included belly dancers, an actress who made jewelry on the side, a giant publishing company, and a local Japanese radio station specializing in J-Pop and anime culture.
2011

Graphic Manager
Formerly known as XL Marketing, we worked on a few cool projects with a very resourceful team, but I gradually got bored with email design.
2013

Production Manager to Production Director
I went back to my design roots and reignited my love for print. The editor in chief entrusted me with growing the magazine's digital presence with a redesign of their website, promotion materials and eNewsletters.
2018

Path to UX/UI
Wanting to learn something new and expand my arsenal, I attended a free intro into UX/UI Design at General Assembly to see if it were any interest; it turns out, there were things within the process I'd applied to my designs already. I took a 3 month certification course while working at W&S and completed it in January 2019.
2020
Full Reset
I was burnt out and took a break to plan my transition into UX/UI. I went to various Zoom Q&A lectures from pros in the field and joined UX groups on LinkedIn and Discord to connect while rebuilding my portfolio from scratch; I enrolled into Elize Presents UX Bootcamp to beef up my case studies.I learned brute forcing through applications wasn't the way and was reminded of how much my networking skills needed to improve. 0/10 would recommend.
2021

Product Designer
After many rejections, this was my first step in. I learned so much during these 6 months and made me rethink the design process as more of a strategy. Also, training a recommendations module with machine learning is complicated.
2022

Senior UI Designer 🤘
It was a long and tough journey, but I made it 🎉
The UX team and I have worked with many cool clients, from creating a scalable design system to prototyping new features that include company promos, improving a medical video content site and more. I received a certification of accessibility and auditing from Infosys, our parent company and have been spreading the gospel in making our designs more accessible.