Vivian H.

UX/UI Designer, Interdisciplinary Designer, and Visualizer

Work

Rogers Communications

Telecommunication (B2B)

Overview

Rogers is a Canadian based telecommunications company who provides mobile phone, internet and telecommunication products and services to consumers and businesses. I was brought onto this larger pitch to reimagine the Rogers Business portal product experiences.

The Goal

Our task was to identify points of opportunity to improve customer experience across all Rogers Business portals with future-state designs and accessible experiences their B2B buyers and vendors can confidently use to make business-impacting decisions.

Role

Senior UX Designer, Accessibility Designer


Project Type

Accessibility Audit
Proof of Concept
RFP


Duration

2 weeks

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

The Challenge

Despite Rogers being a household name in Canada, their business product dashboards and portals did not effectively help new and existing vendors and businesses find what they needed quickly. Key issues found during the experience audit included:

  1. Navigation and footer inconsistencies in design 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. Inconsistent content hierarchy and responsive experiences.

  5. Accessibility issues with keyboard navigability of portal sites, no focus state highlight and CTA button sizes too small for touchscreens.

  6. Bilingual selector was not working that may lead to isolating French Canadians.

Process and Content Strategies

Working together with the strategy director, we highlighted:

  • Hyper-personalization of client portals to drive better consistency in customer experience with a structured content hierarchy and tailored product offers.

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

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

  • Internal product and service marketing opportunities on the Business Hub landing page.

  • Utilized our previous telecomm experiences with T-Mobile, Verizon and AT&T products.

Placing the screens in a side-by-side comparison helped the clients see the highlighted differences between their current and future experiences better.Please click on the images for a larger view.

MyBusiness Hub Landing Page

Screen comparison between Rogers Business' current landing page to the proof of concept design with highlighted changes with numerical pairing.

Screen comparison between Rogers Business' current landing page to the proof of concept design with highlighted changes with numerical pairing.

  1. Consistent global header and footer strengthens brand reliability, identity and experience.

  2. Stronger header image with log in CTA shows stronger content hierarchy.

  3. Small Business Spotlight can be better emphasized by linking the feature story rather than a generic title and byline.

  4. Support aka "FAQs" can be condensed into accordions with most asked questions by customers to reduce cognitive load. This can be explored with Rogers' customer reps.

  5. Remove accordion capability on footer to give users more than one way to explore the website.

  6. Space on the landing page make for product marketing promotions and opportunities.

MyBusiness Hub Dashboard

Screen comparison between Rogers Business' MyBusiness Hub dashboard page to the proof of concept design with highlighted changes with numerical pairing.

Screen comparison between Rogers Business' MyBusiness Hub dashboard page to the proof of concept design with highlighted changes with numerical pairing.

  1. Consistent global header and footer strengthens brand reliability, identity and experience.

  2. Move service promotion banners below to make Rogers' products shine more.

  3. Highlight Rogers' B2B products to show its purpose and reduce cognitive overload.

  4. Show footer for better browsing experience.

  5. Language and location selectors moved to top navigation for stronger visibility.

Self-Service Bill Payment Page

Screen comparison between Rogers Billing page to the proof of concept design with highlighted changes with numerical pairing.

Screen comparison between Rogers Billing page to the proof of concept design with highlighted changes with numerical pairing.

  1. Consistent global header and footer strengthens brand reliability, identity and experience.

  2. Pop up toast for "did you knows" to get information in front of user faster.

  3. Moving search feature down close to the account information makes for stronger relation of the function.

  4. Quick links on the right rail help users go to other Rogers' products easier.

  5. Linking account number to see full account information allows ease of full detail access.

  6. Download can be combined under "More Actions" kebab menu for cleaner UI.

  7. Customizable shortcuts for vendors to get where they need to quickly within product portal.

Self-Service Bill Payment Page

Navigation comparisons between Rogers current state to the proof of concept redesign.

Navigation comparisons between Rogers current state to the proof of concept redesign.

UX Opportunities
Inconsistent design and navigation hierarchy leaves a very disjointed product, experience, and brand impression on customers and business on the end-to-end integration.

UX Solutions
By providing a consistency in design, usage and content hierarchy, this unites the products to build a stronger brand recognition and reliability. Discovery and exploration on the IA can better optimize experiences across all product pages.

Outcome

We delivered proof-of-concept screen for three of their portal pages and navigation restructure. Rogers said we gave a great overview on the whole process; the product designer remarked he'd been "politely criticized on the current state of an application" but agreed with a lot of my findings in the pitch; the analytics lead highly aligned with the team's recommended areas for improvement. Since the pitch, WongDoody won the account and are now in the process in finalizing the engagement.

Takeaways

Finally! 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, not 2/3 of the cake.

Team Support Goes a Long Way

My team was extremely helpful in calming my nerves as I did box breathing in front of my computer screen before the Teams call. Speaking in front of clients is still something I'm working on, even with a script. Somehow, I was able to get through it coherently.

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 Automotive Company*

Global Automotive Company*

Automotive

Overview

A global automotive company has a mobile app called myCar** that allows their new and existing customers to control their vehicle's temperature and check the location of their vehicle. The U.S. branch of this company asked us to enhance their in-app experience through the inclusion of services offers directly into their MyCar** and MyFancyCar** apps and create new features to improve and enable engagement and brand loyalty to drive their revenue stream.

The Goal

Enhance and improve new and existing 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

5 weeks

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

The Challenge

The U.S. automotive team approached us to improve their app’s engagement and loyalty features. Key problems included:

  • Underutilized marketing data and decentralized dealership systems.

  • Low awareness and use of the app post-purchase, especially for older models that lacked smart car features.

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

Insight and Strategic Direction: "Moments That Matter"

We mapped the ownership journey and introduced key touchpoints like:

  • 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 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.

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

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

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

Press the play button above to view the experience.

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.

Outcome

We overdelivered the prototype with 3 use cases to the clients from their original ask. They expressed how happy they were with our work and got internal referrals for future work. The implementation exploration of the proposed features is set for Q1 in 2025.If I were part of the handoff process and app relaunch, I would focus on:

  1. Tracking download rates via app stores.

  2. Train a selected amount of dealership teams to soft launch an onboarding process for customers and promote app features.

  3. Monitor KPIs to guide future iterations and feature improvements.

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.

Rogers Communications

Juniper Networks

Juniper Networks

Enterprise Web (B2B)

Overview

Juniper Networks is a global leader in networking and cybersecurity, known for its high-performance routers, switches, and AI-driven tools like Mist. As part of a larger pitch at WongDoody, I assisted the product design director to reimagine Juniper’s web experience.

The Goal

Build trust and drive conversions by highlighting Juniper’s strengths through personalization, storytelling, and make it more transparent for the buyer.

Role

Senior UI Designer


Project Type

Design Systems
LoFi Sketches
HiFi Design
Prototyping
Proof of Concept


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.

The Challenge

Despite Juniper being a leader in its industry, we found their current website:

  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.

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

Content Strategy and Process Highlights

To build trust in Juniper, we highlighted proof points like the Gartner Magic Quadrant, major WongDoody 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.For the user journey design, our team:

  • Designed around collaboration between CTOs and analysts in B2B buying processes.

  • Experience began with the prompt: “What part of your network keeps you up at night?”

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

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

User Journey: Collaboration between CTO and SME

B2B purchases often involve both decision-makers and technical experts. We mapped a realistic journey to show how a CTO (decision-maker) and a Senior Enterprise Architect (practitioner) might collaborate during the buying process.The user journey below starts with Matthew, the CTO, perusing the internet for trends to guide a business transformation; he eventually 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.

Outcome

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.

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.

Global Automotive Company

Hackathon 2023: Holiday Voices

Hackathon 2023: Holiday Voices

AI Prompts

Overview

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

Role

UX/UI Designer
Art Director


Project Type

LoFi Sketches
AI prompt
Art Direction
Style Guide


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.

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.

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.

Juniper Networks

Understand the Science

EqualPrice*

Healthcare Insurance

Overview

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. Our team collaborated with their 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.

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

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

Please note: 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.

Hackathon 2023: Holiday Voices

Understand the Science

Understand the Science

Healthcare Education

Overview

Understand the Science (UTS) is a non-profit company who provide easy-to-understand education on crucial medical topics for empowering healthcare decisions. Their mission is to make important healthcare info easy to understand and accessible with short-form (under 2 minutes) videos written and narrated by expert scientists and a trained AI assistant to answer questions in real time, using natural language understanding with IBM watsonx AI chatbot.

The Goal

Improve the site’s user experience and build a scalable medical content hub that can grow as UTS adds more videos.

Role

Senior UI Designer


Project Type

Competitive Analysis
Design System
Lo/Hi-Fi Design
Prototyping
Style Tiles
Wireframing


Duration

4 months

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

The Challenge

At a glance, their website had many issues, including:

  • Their original site was a proof-of-concept focused on videos about opioid abuse.

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

  • Lack of information architecture for future content.

The IA-led Process

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

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

  • Developing a design system compatible with their Bootstrap setup, meeting WCAG 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.

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

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

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.

Outcome

Development on the site started in early 2024 having delivered the designs and assets. We provided an experience that:

  1. Improved trust and transparency through citations and references for all medical content.

  2. Flexible navigation with AI-powered chatbot, video modules, and a menu/library structure to suit different user needs.

  3. A scalable system with WCAG-compliant design system and modular IA to support ongoing content growth.

  4. Innovation with watsonx AI chatbot paired with video content to deliver quizzes, gather feedback and personalize experiences.

If our team continued with the AdMed team post-launch, I would look for:

  1. Look at conversion rates via analytics programs.

  2. Hotspots on content.

  3. How effective the AI is with keeping the user engaged.

  4. Ways to train watsonx to optimize usefulness and 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.

Hackathon 2023: Holiday Voices

Echo

Echo

Sole Proprietorship, ECommerce

Overview

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 site that strengthens Echo’s connection with her music-loving fans, including a pre-save option for her upcoming single, "Angels."

Role

UX/UI Designer
User Research & Interview


Project Type

Lo/Hi-Fi Design
Proof of Concept
Prototype
Web Design


Duration

1 month

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

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:

  1. Pre-saving her latest single, “Angels” was top priority, as this action 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.

The Process: 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

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, “Echo Lounge” with behind-the-scenes videos, interviews, and livestreams was created. This was inspired by music artists in Japan who have paid fan-only sections with exclusive content, like blogs and photo galleries. 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.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.”

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

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.

Understand the Science

Local News Lab

Local News Lab

Journalism, Machine Learning

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

Close up of computer screen showing data on a software.

Overview

We discussed which existing metrics could support scaling the recommendation system using Google News Initiative Product workshops as inspiration. I considered changing the metrics for this iteration but was cautious about adding more work for Engineering.That led us to me asking, “What data do we already have that can help us scale the rec module in the next 6 months?”With the GNI workshop still top of mind, we mapped out a design plan in Notion that factored in Engineering’s key constraints and priorities. Once the cohort kicked off, the newsroom partners and LNL met every other week via Zoom to share progress, raise questions, and stay aligned. Agendas were prepped in Notion and shared in advance to keep meetings focused and efficient.

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.

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 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 Magazine Website

Wine & Spirits Magazine Website

Publication, eCommerce

Overview

Wine & Spirits’ website is a digital version of the magazine with a wine search feature. The site started as individual .ASP files and was migrated to ExpressionEngine's (EE) as its CMS around 2014. After using it for 8 months, we realized its limitations after using it for 8 months. We stayed with EE due to the purchased license before my tenure.

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

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

Challenges

After realizing EE's limitations, we found the main issues were:

  1. Paying for an expensive paywall plugin for longform feature stories.

  2. Paying for an EE license upgrade in order to use pay-to-play plugins by 3rd party developers.

  3. Multiple log in sessions users needed to do in order to manage their subscriptions and checkout process.

  4. Lack of structure for content sorting.

Upgrading ExpressionEngine wasn’t feasible as it was too costly and time-consuming; most of the site’s snippet codes won't work in the new version.I proposed moving to WordPress would save and earn us money with a content paywall, fix login problems, make content creation easier with a smoother system and overall exponentially improve the experience.

Analysis and Breaking Down Features

Due to budget and time constraints, I prioritized competitive research over user research, focusing on how similar publications, like Wine Spectator, Decanter, and Robert Parker’s Wine Advocate, present content, structure subscriptions, and use 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.

  • 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.

  • 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.

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

Feature stories from the print magazine are now behind a paywall on the site, requiring users to log in or subscribe for access.Previously, the subscription model had two tiers: print-only and print + digital (a browser-based PDF). After the site migration, we adopted a 3-tier system like competitors, adding a digital-only option and phasing out the PDF.When we tested the subscription tiers:

  • 86% of users were confused about the amount of subscription tiers available (there were 6 at the time) and what each tier would offer.

  • 36.4% of testers said the process was moderately smooth.

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

Archive Pages

I took inspiration from The New Yorker and Roads & Kingdoms in order to move away from the classic list-style archives. While testing:

  • 73% of users said the old lists were overwhelming, and many hated clicking through pages to find what they wanted.

  • 85% of in-house testers loved when the featured stories were grouped by topic, 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.

Outcome

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.

Local News Lab

Other Design Work

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'm just a designer who wants to 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

My goal has always been to be 1% better than I was yesterday as a person and designer. My curiosity has driven me to learn from various disciplines; it helps keep my perspectives and biases in check in order to be more intentional with design decisions.

Some of My Skillsets


  • Accessibility Auditing

  • Accessibility Design

  • Design Systems

  • Interface Design

  • Interaction Design

  • UX Design

  • UI Design

  • Visual Design

  • Web Design

  • Web Development

When not designing, I am:

✏️ Improving on my illustrations, 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 and passing better as a libero.🐕 Spending time with my dog and spouse.

Certifications

  • June 2025: Into Design Systems Conference 2025 Certification

  • Aug 2023: Accessibility Centre of Excellence Digital Accessibility with Live Accessibility Audits Certification

  • Jan 2019: General Assemble User Experience Design Certification

  • May 2013: CUNY Baruch College Web Development with Open Standards Certification

Origin Story

2007

Logo of Marvel Entertainment

Web Production Assistant

Marvel Entertainment

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

2008

Former logo of vivdesigns, with a stylus pen making up the "i" and the structure of "d"

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

Logo of Zeta Interactive

Graphic Manager

Zeta Global

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

Logo of Wine & Spirits

Production Manager to Production Director

Wine & Spirits Magazine

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

Logo of General Assembly

Path to UX/UI

General Assembly

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

Logo of Local News Lab

Product Designer

Local News Lab

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

Logo of Wongdoody

Senior UI Designer 🤘

WongDoody

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.