Vivian H.

Interdisciplinary and Inclusive UX/UI Designer

The Challenge

Despite Rogers being a household name in Canada, their business product dashboards and portals did not reflect this. Key issues found during the experience audit included:

Outcome

We delivered proof-of-concept screens for three of their portal pages and navigation restructure. Rogers said we gave a great overview on the whole process and agreed with a lot of my findings in the pitch; the analytics lead highly aligned with the team's recommended areas for improvement. The product designer who was in charge of the portals remarked he's "never felt politely criticized, in a good way."Since the pitch, WongDoody won the account and engagement has begun.

Process and Content Strategies

Working together with the strategy team, we focused on:

A side-by-side screen comparisons with numbered and highlighted boxes helped show the differences between the client's current experience and the proof of concept.Please click on the images for a larger view.

Navigation and Structure Enhancement

Content and UX Optimization

Tools & Functional Improvements

Simplifying Customer Support

FAQs condensed into accordions showing only most commonly asked questions and have the user interact with it to see the answer may help reduce cognitive load. I highlighted the potential to collaborate with internal customer reps for better tailoring of support content.

Takeaways

The Challenge

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

Outcome

We overdelivered the prototype with 3 use cases to the clients from their original ask. The implementation exploration of the proposed features is set for Q1 in 2025.If I were part of the handoff process and app relaunch, the KPIs I'd focus on are:

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

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 easily read.That insight shaped our pitch’s North Star: “Demand facts, not fluff.”

Outcome

We delivered three clickable prototypes that balanced out the brand's storytelling with a frictionless journey designed around trust and to drive conversions amongst the enterprise level decision-makers and technical analysts.

Content Strategy and Process Highlights

To build trust in Juniper, we used the Gartner Magic Quadrant, major WongDoody clients like Zoom and Verizon as examples, and key innovation milestones reflected in the design. Working closely with strategy ensured everything aligned with broader messaging and business goals.For the user journey design, our team:

User Journey: Collaboration between CTO and SME

B2B purchases often involve both decision-makers and technical experts. The strategy team mapped a realistic journey to show how a CTO (decision-maker) and a Senior Enterprise Architect (practitioner) might collaborate during the buying process.The journey below starts with Matthew, the CTO, perusing the internet for trends in order to guide a business transformation; he shares what he finds with Vihaan, a Senior Enterprise Architect.

Takeaways

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:

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, the KPIs I would look for are:

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.

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.

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. We discovered:

In order for Echo to better connect with her fans and new listeners, I'll have to make her landing page feel more like a personal blog with her insights.

Low fidelity digital sketch of Echo's website

To better personalize her page while making the pre-save on her latest single "Angels" a priority, several features were considered:

While interviewing music fans, a few said they 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 on the page.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.”

They brought up indie artists only update their site when new music and/or tour dates drop, so outdated information can feel embarrassing. As a result, the lounge content was moved 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

Using the Google News Initiative Product workshop I attended as inspiration, the team and I discussed which existing metrics could support scaling the recommendation system. 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?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, raised 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

ExpressionEngine was a powerful CMS, but limiting for us. We realized:

I proposed moving to WordPress to save and earn us money; the CMS have the wants editorial had been asking for: a content paywall and an easier interface for content posts. It would also help fix the constant login problems and exponentially improve the experience.

Outcome

Three months post launch, Google Analytics showed overall site traffic increased 124% with the revised navigation and clarity content structure made for a more immersive experience. The most popular pages were the Restaurants, Wine Reviews and Feature Stories.Improving the subscription process with simplified tiers and perks explanation helped boost subscriptions 50% based on the data we received from our back-end engineer who customized WooCommerce for us.

Analysis and Feature Breakdown

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.

Navigation

Paywalled Content

Feature stories from the print magazine are now behind a paywall on the site, requiring subscribed users to log in or subscribe for access.

Refreshing the Subscription Tiers

The subscription model previously had 6 tiers: print-only and print + digital (a browser-based PDF by a 3rd party company), media subscription, wine industry subscription and a friends and family subscription.When we tested the subscription tiers:

The result of the testing veered us to adopt a 3-tier paid system like our competitors, with a digital-only option to phase out the PDF. A brief description was added to each tier for better clarity on perks. For the users who want access but don't want to fully commit to a subscription, a free membership tier was added.

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:

The testing led to grouping restaurant reviews under “Drink & Eat” by establishment type: bars, restaurants, wine shops, spirits, and recipes. These categories were scattered across different sections previously.We swapped the map for a text cloud showing cities by number of reviews, making the site simpler and unified.

Takeaways

• ‹ Back to Home

Other Design Work

Prior my change to UX, I was a designer of many trades: digital and 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.Below are some samples of my work.Please click on the images below to see them larger in modal.

• ‹ Back to Home

About Vivian

I'm a designer who just wants to make good sh*t.