https://raelynthompson.com Portfolio Tue, 17 Sep 2019 17:50:53 +0000 https://raelynthompson.com en https://raelynthompson.com/Slideshow Mon, 05 Aug 2019 20:50:27 +0000 Portfolio https://raelynthompson.com/Slideshow Hello! My name is Raelyn and I’m a product designer living in Portland, OR. I’m currently working at Charles River Labs as a Product Designer. 🔬 https://raelynthompson.com/Featured-Projects Mon, 05 Aug 2019 20:50:27 +0000 Portfolio https://raelynthompson.com/Featured-Projects Aflac Testing ProgramA/B testing, usability testing, user research, jouney mapping <img width="3685" height="2598" width_o="3685" height_o="2598" data-src="https://freight.cargo.site/t/original/i/966846da24b4430a62ec871dd37817f7cc07bd84dc3177dbff8373e2262ebaae/Artboard-Copy.png" data-mid="50307371" border="0" src="https://freight.cargo.site/w/1000/i/966846da24b4430a62ec871dd37817f7cc07bd84dc3177dbff8373e2262ebaae/Artboard-Copy.png" /> MoPOP Purchase Funnel AuditJourney mapping, mockups, UX audit <img width="1895" height="1330" width_o="1895" height_o="1330" data-src="https://freight.cargo.site/t/original/i/753483a585a0caa5c862b3d61f99b6f889a2a303d8eabae69f0c0eeedb202777/MoPop.png" data-mid="50824897" border="0" src="https://freight.cargo.site/w/1000/i/753483a585a0caa5c862b3d61f99b6f889a2a303d8eabae69f0c0eeedb202777/MoPop.png" /> Chuck E Cheese Tracking Service DesignGoogle Tag Manager, conversion journey mapping, service blueprints <img width="3790" height="2659" width_o="3790" height_o="2659" data-src="https://freight.cargo.site/t/original/i/41f2daa4d057353e48167e7a99d527710d8d718b353852510e6d077245243634/Artboard.png" data-mid="50425770" border="0" src="https://freight.cargo.site/w/1000/i/41f2daa4d057353e48167e7a99d527710d8d718b353852510e6d077245243634/Artboard.png" /> GoHealth Map UXProblem discovery, custom event tracking, mockups <img width="3685" height="2598" width_o="3685" height_o="2598" data-src="https://freight.cargo.site/t/original/i/e2a91ff23bc7d10c0e39d1290ed77cd80eb2ef980edbb3c5a4e5f2100184a44c/GoHeatlh.png" data-mid="50425794" border="0" src="https://freight.cargo.site/w/1000/i/e2a91ff23bc7d10c0e39d1290ed77cd80eb2ef980edbb3c5a4e5f2100184a44c/GoHeatlh.png" /> https://raelynthompson.com/Text Mon, 05 Aug 2019 20:50:28 +0000 Portfolio https://raelynthompson.com/Text Experience Avinode - UX/UI Designer Sq1 - UX SpecialistForix - Marketing/Analytics&nbsp; Elsevier - Copywriter Past/Current Clients Aflac, Chuck E Cheese, Kindercare, Provenance Hotels, Portland Trail Blazers, Nebraska Furniture Mart, SexyHair Other Hobbies Baking (specifically chocolate chip cookies and babka), sequin wearing, backpacking, spin classContact LinkedIn https://raelynthompson.com/GoHealth-Map-UX Mon, 05 Aug 2019 20:50:29 +0000 Portfolio https://raelynthompson.com/GoHealth-Map-UX GoHealth, an urgent care center with hundreds of locations across the states, primarily focused on using Sq1 as a recommendations and testing partner. Our partnership included monthly reporting, A/B testing queues, heatmapping, and landing page design. In Spring 2018, I noticed in my monthly reporting that mobile conversion rates were showing a unusual lag in overall location page visits and visit requests.&nbsp; In the NY area specifically, which had the highest density of center locations, the question that was posed was - how do we visually handle so many locations and help with the center discovery flow? My roles Design research Custom event tagsRecommendations Deliverables Wireframes Filtering rules User journey mapping Responsibilities Found the root causation of low mobile conversion rates and filter usage.&nbsp; Based on best practices for map UX, gathered and noted ideas that would work best for GoHealth Pitched UI with location clustering, improved filters, cohesive UI, and better map interaction.&nbsp; <img width="3685" height="2460" width_o="3685" height_o="2460" data-src="https://freight.cargo.site/t/original/i/7c40ceddcde5183500a9c7ac750b30a4344ef7e6a7063d13b4ad3691536cfaa4/GoHealth-Mobile-Map.png" data-mid="48685705" border="0" src="https://freight.cargo.site/w/1000/i/7c40ceddcde5183500a9c7ac750b30a4344ef7e6a7063d13b4ad3691536cfaa4/GoHealth-Mobile-Map.png" />Proposed Mockups - Spring 2018 Mapping Usability After pulling heatmaps from Hotjar for the location search pages, I noticed that most of the clicks were happening on the map on mobile, as if the users were moving the map around to find locations vs just using the filters present. Filters had little to no clicks on them. Markets with a large number of locations on the map (like NYC) show pins that are too tiny to interact with, and session recordings showed users had difficulty interacting with the individual locations on the map.&nbsp; I had found an event tracking tag that would help filter user session recordings with “rage clicks” or multiple clicks/taps happening in short succession. After some customization for GoHealth, I inputted the filter into Hotjar to see how users were clicking on the map, especially if they tapped multiple times in a short span.&nbsp;With this new session tag filter in place, I quickly realized an additional reason that mobile users were tapping on the map so much. Two fingers were needed to pan the map, which is not a natural interaction when most users are used to only needing one finger to move a map around. Assisting&nbsp; Location DiscoverabilityAs we looked through the market page user experience in more detail, it became clear to us that there are multiple usability issues with these pages, and addressing them individually wouldn’t really solve the core problems visitors were experiencing. We recommended testing an overhaul of the location search pages’ UI, with location clustering, better filters, improved interactions, and content hierarchy. Unfortunately, the client pushed off this overhaul and it was never implemented.&nbsp; https://raelynthompson.com/MoPop-Booking-Funnel-Audit Tue, 17 Sep 2019 17:50:53 +0000 Portfolio https://raelynthompson.com/MoPop-Booking-Funnel-Audit As part of an entire UX audit, I was tasked with auditing MoPop’s ticket purchase funnel.&nbsp; The end result of the audit was a simplified ticket purchase flow prototype that erased redundant screens and confusing secondary flows.&nbsp; My roles Design research Prototypes Deliverables WireframesMockups User journey mapping ResponsibilitiesAudited ticket purchase funnel through heuristic analysis, heatmapping, and analytics.&nbsp;Created prototypes using MoPop’s global styles to provide an idea for a more consistent and easy to understand booking funnel, with the intention of dispelling confusion and decreasing drop off rates.&nbsp; UX Audit Findings:&nbsp; The initial ticket page features an ad like visual for the upcoming event highest on the page. The order of content doesn't align with the order of importance in relation to purchasing a ticket. The varied alignment also makes it hard for users to quickly read the information. The month calendar alternated colors for the different week rows. At first glance, it appears that the gray colored days could represent days that are sold out and the active selected date lacks contrast. The current ticketing page could have been confusing users who aren't sure which event or exhibits will be up on the days they are interested in visiting. Additionally, the ad at the top seemed to imply that this is the event you are purchasing tickets for. The ticket funnel navigation remained the same as the sticky nav when a user is in the booking funnel. This made it so that two prominent "Buy Tickets" buttons are visible which could add cognitive load. If the user clicked the Buy Tickets in the nav, they were sent all the way back to the main site’s ticket page, essentially starting the whole process over, and based on heatmap and analytics data, this was certainly happening.&nbsp; The current form fields weren’t aligned in a way that makes them easy to read. The input label is put to the left when shorter. On labels that are longer it appears above and to the left. There is an opportunity to follow form best practices. <img width="712" height="452" width_o="712" height_o="452" data-src="https://freight.cargo.site/t/original/i/83adea260934ce6fb263c0e4e9deeb94c500afd0bab82fd11c35d79b4b5f1bda/MoPop-Image-1.png" data-mid="50819931" border="0" alt="Time selection screen. " data-caption="Time selection screen. " src="https://freight.cargo.site/w/712/i/83adea260934ce6fb263c0e4e9deeb94c500afd0bab82fd11c35d79b4b5f1bda/MoPop-Image-1.png" /> <img width="737" height="437" width_o="737" height_o="437" data-src="https://freight.cargo.site/t/original/i/b9b94970fbff66f3ab8e70ba71507bed85057c72a33f2fc2bf4c598180cecabb/Mopop-2.png" data-mid="50821122" border="0" alt="Form fields on ticket purchase info screen. " data-caption="Form fields on ticket purchase info screen. " src="https://freight.cargo.site/w/737/i/b9b94970fbff66f3ab8e70ba71507bed85057c72a33f2fc2bf4c598180cecabb/Mopop-2.png" /> <img width="477" height="597" width_o="477" height_o="597" data-src="https://freight.cargo.site/t/original/i/c4e4ffcefd8475286dd48502644626378e34b8e10cf45e39abdd37e381625db9/Mopop-3.png" data-mid="50821571" border="0" alt="Ticket options all present below the fold. " data-caption="Ticket options all present below the fold. " src="https://freight.cargo.site/w/477/i/c4e4ffcefd8475286dd48502644626378e34b8e10cf45e39abdd37e381625db9/Mopop-3.png" /> <img width="435" height="777" width_o="435" height_o="777" data-src="https://freight.cargo.site/t/original/i/71125aa61b4ded755b7e52ca7c60314ba1effc0b289e57d977292a8b22633cec/Mopop-Login.png" data-mid="50821362" border="0" alt="Mis-aligned form labels and links present on the mobile login screen. " data-caption="Mis-aligned form labels and links present on the mobile login screen. " src="https://freight.cargo.site/w/435/i/71125aa61b4ded755b7e52ca7c60314ba1effc0b289e57d977292a8b22633cec/Mopop-Login.png" /> Step by Step - Simplified Step Progression I mocked up redesigns of ticket funnel pages, with global elements and styles to improve consistency.&nbsp; Similar CTAs, input alignment, progress indicator were the main focuses, as well as designing with the mobile user in mind since more than 60% of MoPop’s traffic was mobile users. Step progress is indicated and CTA so users are aware of where they are in the funnel. There is also&nbsp; a consistent way for users to toggle between the steps with a "Next" and "Back" CTA. I also improved the login screen to be fully aligned and not take the user entirely out of the booking funnel.&nbsp; <img width="2228" height="1330" width_o="2228" height_o="1330" data-src="https://freight.cargo.site/t/original/i/5d94ad533d13946a2710b40a9404c45c05a959001925ee4ea2db133441db43d0/MoPop.png" data-mid="50823398" border="0" src="https://freight.cargo.site/w/1000/i/5d94ad533d13946a2710b40a9404c45c05a959001925ee4ea2db133441db43d0/MoPop.png" /> https://raelynthompson.com/CEC-Tagging Sat, 24 Aug 2019 15:09:16 +0000 Portfolio https://raelynthompson.com/CEC-Tagging For Chuck E Cheese, we needed reliable analytics to advocate for UX improvements and measure new feature implementation. Here’s how I created a Google Tag Manager components system to ensure better user behavior tracking on site.&nbsp; Background: In our initial UX audit for Chuck E. Cheese, we noticed that there was disconnect between multiple metrics and user actions in their analytics. After digging more, we realized the problem was attributed to a convulated tracking structure. Working with the CEC team, the in-house strategy and digital teams, as well and my own UX team’s input, I created a new naming convention and publishing process for all tracking components in Google Tag Manager. &nbsp; My Roles Initial design research UX Audit Analytics Audit Google Tag Manager Audit Deliverables Service Blueprint Component Naming Rules Event tagging flow ResponsibilitiesDiscovered analytics discrepancies and defined key customer contact points to ensure measurement. Mapped out current conversion tracking as well as proposed new conversion tracking. Created tag naming rules and conventions&nbsp; using research from user interviews (mostly client-side and agency teams that would be using analytics). Made all tracking changes and shared new documentation with other teams for cross team compatibility.&nbsp; Documentated all GTM changes.&nbsp; <img width="1330" height="2300" width_o="1330" height_o="2300" data-src="https://freight.cargo.site/t/original/i/7e1d709d0ab34b461f6974bb5eb4b877971abb65568add7014f757dc7033872c/CEC-Tags---Tracking-Visual.png" data-mid="50219582" border="0" src="https://freight.cargo.site/w/1000/i/7e1d709d0ab34b461f6974bb5eb4b877971abb65568add7014f757dc7033872c/CEC-Tags---Tracking-Visual.png" />An example of the original tag flow - specific to the booking funnel. As you can see, all tracking was tied to one event tag which had a vague name. As the name suggests, it would fire with any click in the booking funnel, creating thousands of event firings with no discernable user action.&nbsp; This project is a little different than most, because the user is actually the CEC team as well as the agency team, making it an example of service design. Service design improves the experiences of both the user and employee by designing, aligning, and optimizing an organization’s operations to better support customer journeys.1 It was extremely difficult to determine specific events, because each form submission was labeled the same. The main differentiator between these events was the page name (label) but all events were fired by clicks on the page; which essentially meant all of these event firings may not actually be form submissions - users moving through the booking funnel and instead just clicking around on each page. <img width="3790" height="2659" width_o="3790" height_o="2659" data-src="https://freight.cargo.site/t/original/i/41f2daa4d057353e48167e7a99d527710d8d718b353852510e6d077245243634/Artboard.png" data-mid="50425840" border="0" src="https://freight.cargo.site/w/1000/i/41f2daa4d057353e48167e7a99d527710d8d718b353852510e6d077245243634/Artboard.png" /> In short, internal and external teams were not getting a good idea of how users were moving through the booking funnel because of inaccurate tracking setup. Chuck E Cheese needed tracking that would show how users were moving through the booking funnel and the actions that they were taking to help improve the process. The problem was not limited to the booking funnel - CEC also had a total of over 300 tags with duplicated, tags without triggers, and so many other issues. It was important to understand how each team used the CEC GTM container (where all the tracking was inputted) to reach a shared understanding of why a matching naming convention was important and necessary. I created a clearer naming convention and created documentation for it to help as the internal and other agency teams created new tracking through GTM. I designed a new tagging flow for the booking funnel to help clear up and define actions that users were taking in the booking process. This helped the UX team, strategy team, and client find bottlenecks and issues on CEC’s website. &nbsp;I made the intial push to clean up CEC's GTM container, which meant auditing all 300+ tags, and creating a spreadsheet of current tag/trigger/variable names with proposed new names and fixes for each tag and noting which ones were duplicates or no longer valid. I manually updated each tag/trigger/variable in CEC's GTM container, bringing down their tag count from 300+ to a mere 170ish tags. I checked each tag to ensure it was firing correctly. The end result? Cleaner data and better insights into how users were interacting with the site and&nbsp;better informed testing ideas and recommendations.&nbsp; https://raelynthompson.com/Aflac-Testing-Program-1 Mon, 19 Aug 2019 21:28:53 +0000 Portfolio https://raelynthompson.com/Aflac-Testing-Program-1 As part of Aflac’s lead generation program at SQ1, we perform ongoing testing to further optimize their lead funnel.&nbsp; This includes but is not limited to: A/B testing, performing usability studies, creating prototypes for future states, optimizing landing pages for the paid search team, and more.&nbsp; My roles Design research UI/UX Design A/B testing User Testing Deliverables VWO Tests Testing Summaries Usability Studies Custom Reporting Sheets Presentations Mockups + Prototypes Journey Mapping Responsibilities • Create and review heatmaps, session recordings, usability tests, and analytics properties and present objectives for ongoing testing ideas and recommendations. • Set up reporting framework for each test; establish key metrics for evaluation and reporting while analyzing them on a regular basis. • Build landing pages using conversion design/landing page optimization principles • Give tons of supportive content to help win the internal teams over for tests and recommended implementations. EXAMPLES OF WORK New Product User Testing In the midst of a new product launch, Aflac wanted to get user feedback on an application process.&nbsp; I set up a user study that included users that matched their site demographics, and with the help of coworkers, created a fully functional prototype of the experience. Tasks were created through each major step in the application process. Participants would go through each task, speaking aloud about the experience as they worked through the study. The study found several key pain points. A vast majority of users found the application process too long, they couldn’t understand quite a bit of insurance lingo/jargon, and the final steps were unclear (”would the client reach back out to me??” was a common question).To adjust the new product, our team went back through the application process to take out unnecessary steps, define and clarify insurance jargon where needed, and define what would happen after the user completed the application to help increase conversion and ease user confusion.&nbsp;The product was launched with some, but not all of our recommendations. A low amount of traffic was sent to the new experience, and the client determined that this would only be the Phase 1 version of their new product. The new iteration of the product will be launching in 2020, backed by some of the research that we did for the first iteration.&nbsp; A/B Test - Mobile Nav CTA Aflac had no other mobile CTA except a paper icon on the top right corner next to the navigation menu. We tested a variation with a mobile sticky CTA that stayed with the user no matter where they were on the site, with a clear CTA of “Request a Quote”.&nbsp; Mobile conversions increased by 89%, and the test reached significance in a few days.&nbsp; I’m happy to chat about other A/B tests that we have done over a phone call.&nbsp; <img width="2880" height="1562" width_o="2880" height_o="1562" data-src="https://freight.cargo.site/t/original/i/0ad3ba903e5e89b29cae0fd9c48d850e77b8cc2d19c40e2ff8831527dfb9e28a/Artboard-Copy.png" data-mid="49069604" border="0" src="https://freight.cargo.site/w/1000/i/0ad3ba903e5e89b29cae0fd9c48d850e77b8cc2d19c40e2ff8831527dfb9e28a/Artboard-Copy.png" /> Lead Form - Future State Concepting Ultimately, with any testing program, comes the inevitable question of “What can we do next?” Optimization can be continual, and in some aspects tiring to ideate.&nbsp; However, the joy of the UX field is that there is always opportunity to dream up future states.&nbsp; After years of optimization and user testing for Aflac, I noticed a few common issues: In some aspects our testing was becoming less impactful. It seemed as those users were still not quite to the point of submitting a lead and in fact less likely than the year prior.&nbsp; A common bit of feedback from user testing was that users wanted to see what they might be paying month to month for an Aflac plan, something that isn’t necessary available on the site.&nbsp; The problem was, by only having this information available by going through the lead form process (which involved being called by an agent) - Aflac was risking alienating potential customers who might prefer a different mode of contact. Market and testing data backed this claim up:&nbsp; 32% of the general population finds the phone the most frustrating way to engage customer service.1 50% of millenials prefer text/SMS as their primary mode of contact.1 38% of usability test users noted that they preferred live chat as their form of contact. 1. Conversocial Report: The State of Social Customer Service Not only would the client see potential lift in conversions from these customers, but also could differentiate themselves from their direct competitors. All other competitors in their direct vertical had similar lead form processes of phone calls from agents. Users ultimately want to compare different types/brands of insurance quickly - why have an additional barrier of communication? <img width="1497" height="324" width_o="1497" height_o="324" data-src="https://freight.cargo.site/t/original/i/2a10b8c43e925a9ac9d957b4e4abb1fd45bd60b71412d725404d476477d02725/download-4.png" data-mid="48994896" border="0" src="https://freight.cargo.site/w/1000/i/2a10b8c43e925a9ac9d957b4e4abb1fd45bd60b71412d725404d476477d02725/download-4.png" /> Lead form journey mapping We recommended a few items in our pitch:&nbsp; Deeper dive into the full lead process, to fully map out inconsistencies and bottlenecks. This would include mapping out the entire call center process with their scripts. Using this information, we would improve the current end-to-end lead process, not just onsite as we had been doing.&nbsp; Perform user studies based on conversational or different types of lead forms out there to better benchmark what users might expect from different forms of contact.&nbsp; Implement other forms on contact on site, based on learnings from user testing, and testing iterations of these (i.e. chatbots, smart contact forms, etc) to further improve lead quality and quantity, along with user satisfaction.&nbsp; Add content on site that might help users find the information that they are looking for - like coverage cost calculators.&nbsp; It boiled down to this - users expect more than having to make a phone call when looking for information. If information or easy contact is not onsite, they might bounce and find an easier option.&nbsp;