Vivian H.

UX/UI Designer, Interdisciplinary Designer, and Visualizer

Work

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

• Other Design Work
• Bio

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:

Process and Content Strategies

Working together with the strategy director, we highlighted:

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.

MyBusiness Hub Dashboard

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

Self-Service Bill Payment Page

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

Self-Service Bill Payment Page

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

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

The Challenge

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

Insight and Strategic Direction: "Moments That Matter"

We mapped the ownership journey and introduced key touchpoints like:

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.

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.

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:

Takeaways

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

The Challenge

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

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:

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.

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.

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.

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.

The Challenge

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

The IA-led Process

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

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

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:

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

Takeaways

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:

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

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

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:

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

Challenges

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

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.

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:

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:

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

• ‹ Back to Home

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.

• ‹ Back to Home

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.

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

Origin Story