https://justinshen.com Justin Shen Mon, 09 Mar 2020 21:27:34 +0000 https://justinshen.com en https://justinshen.com/Index Thu, 05 Mar 2020 15:45:52 +0000 Justin Shen https://justinshen.com/Index Hi, I’m Justin!Product Designer | Film Photographer Snob*&nbsp; | One Bag Traveller (on hold) Wherever you may be, I hope you are staying safe and healthy. &nbsp;👍️ I love working on teams to solve problems by creating product solutions that align to both business metrics and UX outcomes. It’s always tempting to focus on short-term solutions but by really digging deeply into user pain points and talking to all stakeholders, I believe that it’s always better for the business in the long run to create an intuitive and delightful user experience. *Kidding - but I did recently get back into film photography and have amassed four point and shoot cameras. I enjoy the limitation of it compared to digital photography because I take one shot and then just experience the moment versus taking multiple shots for maybe incrementally better photos. I am trying to learn Japanese I can’t wait for warmer weather so I can wear my Sabahs. I have 4 pairs and am resisting a 5th. I switched to iPhone this year since the Pixel 5 was subpar. I have to say, I think Android does a lot better but it is nice to be in group chats now... https://justinshen.com/Mortgage-Calculator-Redesign Thu, 05 Mar 2020 15:48:02 +0000 Justin Shen https://justinshen.com/Mortgage-Calculator-Redesign Interactive Financial Calculator Mortgage Calculator I worked with Brian (Product Manager) to redesign SmartAsset’s mortgage calculator with the end goal of improving its position on Google’s search results. Even though the page received a sufficient amount of traffic and had the highest number of backlinks, it had poor user engagement metrics which indicated that the experience wasn’t what users were looking for. As a result of the changes we made, the mortgage calculator jumped from 19th to 4th in Google’s search results. <img width="2000" height="1125" width_o="2000" height_o="1125" data-src="https://freight.cargo.site/t/original/i/47ee4a091b8aec992440edba9e0ddb703ef0ae77850e92e455fc305b071c6b3a/1-introduction.png" data-mid="63115709" border="0" src="https://freight.cargo.site/w/1000/i/47ee4a091b8aec992440edba9e0ddb703ef0ae77850e92e455fc305b071c6b3a/1-introduction.png" /> Identifying the Problems I started the process by working with Kyrsten (Senior UX Researcher) to uncover problems with the page as well as conduct a competitive analysis of our top competitors. We used a combination of Google Surveys, Google Analytics and Usertesting.com. What We Uncovered<img width="2000" height="1125" width_o="2000" height_o="1125" data-src="https://freight.cargo.site/t/original/i/cf7a15dfdf685a0181ef4ae6ee461f9c159a4527cf9468ebb179e81fbcce17a3/2-identifying-problems.png" data-mid="63115710" border="0" src="https://freight.cargo.site/w/1000/i/cf7a15dfdf685a0181ef4ae6ee461f9c159a4527cf9468ebb179e81fbcce17a3/2-identifying-problems.png" />Users focused on the inputs in the middle and missed the inputs on the left hand side at first glanceMost users coming to the page were first-time homebuyers that knew their down payment, not the mortgage amount. Users found the Recommended Savings and Recommended Minimum Income sections to be helpful and a unique strength of SmartAsset’s calculator.The amount of information being presented all at once overwhelmed the users.Users found it tedious to scroll up and down to view the accompanying visuals and adjust inputs, especially on mobile.Mobile First I adopted a mobile-first approach as mobile traffic was increasingly a large percentage of our traffic and it would force prioritization of information amongst stakeholders. After writing a storyframe and reviewing it with Brian, I started exploring different interactions on mobile. One key objective I kept in mind was to figure out a way to present the main content in one screen so that the user didn’t have to excessively scroll up and down. Swipe vs Tab I wanted to consolidate the Mortgage Payment Breakdown and Mortgage Overtime into one viewable screen so I tested swiping versus a tabbed experience. The results of our user testing showed that the tabbed experience was simpler and more intuitive <img width="2000" height="1125" width_o="2000" height_o="1125" data-src="https://freight.cargo.site/t/original/i/da122eabd50db596c8101db0db34b97c5fd68526be34105af47b410698731476/3a-swipe-tab.png" data-mid="63115711" border="0" src="https://freight.cargo.site/w/1000/i/da122eabd50db596c8101db0db34b97c5fd68526be34105af47b410698731476/3a-swipe-tab.png" /> Accordion vs Tab The Total Monthly Payment Breakdown consists of a donut chart with high level numbers and a more detailed breakdown. I explored having the breakdown in an accordion as well as a tabbed experience. I went with the tabs so the user wouldn’t have to scroll. <img width="2000" height="1125" width_o="2000" height_o="1125" data-src="https://freight.cargo.site/t/original/i/4d6e1d114d92f53d106fc9ee9c4d556c6b97d2ef350094d011a6e47c7c3e09d7/3b-accordion-vs-tab.png" data-mid="63115712" border="0" src="https://freight.cargo.site/w/1000/i/4d6e1d114d92f53d106fc9ee9c4d556c6b97d2ef350094d011a6e47c7c3e09d7/3b-accordion-vs-tab.png" /> Sticky Input vs Sticky Answer I came across the New York Times’ Mortgage Calculator in our research and decided to explore a similar pattern of having a persistent “sticky” answer/output. I created two iterations to test - one iteration had a fixed input and the other had a fixed answer bar. Both directions were aimed at solving the annoying experience of scrolling up and down to adjust inputs to then see the updated answer. We decided to go with the sticky answer option as the inputs took up too much space on the screen. <img width="406" height="720" width_o="406" height_o="720" data-src="https://freight.cargo.site/t/original/i/6bb169efb146eccce982dd4d32a65e5d5628b18e087efb24df510f5f80e99131/ezgif.com-gif-maker-3.gif" data-mid="104240135" border="0" data-scale="36" src="https://freight.cargo.site/w/406/i/6bb169efb146eccce982dd4d32a65e5d5628b18e087efb24df510f5f80e99131/ezgif.com-gif-maker-3.gif" /> Making Design Fixes and Improvements Further utilizing the research we had collected, I then set to redesigning the desktop experience to address the user experience issues Kyrsten and I had uncovered. I switched between designing for desktop and mobile to ensure that the design components would translate well between the two. And of course, we tested many times to land on our final iteration.<img width="2000" height="1125" width_o="2000" height_o="1125" data-src="https://freight.cargo.site/t/original/i/27aed12eb7eecfbb32d46e439a3de1657649405b22a1cb0a532742148c48304b/4-design-fixes.png" data-mid="63115715" border="0" src="https://freight.cargo.site/w/1000/i/27aed12eb7eecfbb32d46e439a3de1657649405b22a1cb0a532742148c48304b/4-design-fixes.png" /> Summary of ChangesRestructured the page template so that all inputs were grouped together on the left hand side. (I went through a lot of iterations here.)Added an introductory line that eases users into the experience and gives context.Changed the input title from “Details” to “Edit Your Mortgage Details” to be more informative and instructive.Collapsed the inputs that weren’t frequently used and had a smaller impact on the calculation. Also, instead of titling it “Advanced” or “More”, I named it “Tax, Insurance &amp; HOA Fees” so that users could quickly understand what was in the accordion.Changed the pie chart into a donut chart to utilize the space more efficiently on mobile which then carried over to desktop.Grouped the Recommended Savings and Recommended Minimum Income into an “Other Financial Considerations” section with new copy so that the experience felt more conversational and helpfulUtilized progressive disclosure by collapsing the breakdown of the Recommend Savings and Recommended Minimum Income into an accordion so users were not overwhelmed with information. Added a “Compare Loan Types” section that educates users on the difference between 30 year and 15 year fixed mortgages. Inspired by NerdwalletAdded a “How We Got this Answer” section to provide a basic explanation of how we do our calculations.Added ample white space in between sections so the experience wasn’t overwhelming.Success! We launched the redesign and saw an improvement across the board in our usability metrics as well as an increase in our SERP position. Average session duration increased 26.1% overall, with a 31.4% increase on mobile.Engagements per user increased 53.7% overall, with a 78.7% on mobile.SERP position jumped from 19th to 4th, getting us onto the first page of search results. https://justinshen.com/Sparrow Sun, 08 Mar 2020 16:09:48 +0000 Justin Shen https://justinshen.com/Sparrow &nbsp;Internal Autodialer CRM Software Sparrow I worked with Laura (Product Manager) to design a CRM for SmartAsset’s SmartAdvisor Concierge Team. The concierge team calls leads (users who have completed SmartAsset’s financial advisor matching questionnaire) to confirm their identity and interest in connecting with a financial advisor (FA) on the SmartAdvisor platform. The existing system was clunky, unintuitive and did not have the functionality that the operations team needed. The new system, coined Sparrow, increased the speed at which the concierge team processed leads which translated to an increase in revenue. <img width="2000" height="1125" width_o="2000" height_o="1125" data-src="https://freight.cargo.site/t/original/i/25be7cdea95cc9f503a7da2599500f49c659d28d3e0678b5fa19b3eadce90a46/1-introduction.png" data-mid="102362641" border="0" src="https://freight.cargo.site/w/1000/i/25be7cdea95cc9f503a7da2599500f49c659d28d3e0678b5fa19b3eadce90a46/1-introduction.png" /> Understanding problems and gathering requirementsTo get started, Kyrsten (Senior UX Researcher) and Michael (UI/UX Designer) observed the concierge team’s workflows to understand their pain points with the existing system and Laura provided a list of the necessary processes that they required. From this, I created a list of the components that would fulfill these requirements with the focus of designing a CRM that enables the concierge team to quickly and easily process leads - in other words, increase “speed to lead” (as coined by Laura).<img width="2000" height="1125" width_o="2000" height_o="1125" data-src="https://freight.cargo.site/t/original/i/5ced5d5131151a6e91f9a6e3536dd28c510baf0ba58c8c8cd0d12fb82bf5dcfe/2-problems.png" data-mid="63115891" border="0" src="https://freight.cargo.site/w/1000/i/5ced5d5131151a6e91f9a6e3536dd28c510baf0ba58c8c8cd0d12fb82bf5dcfe/2-problems.png" /> The overall page components that were crucial for SparrowDialer - Used to call the lead and advisor as well as connect them into a conference call.Outcome - Used to log an outcome for the call Lead Information - Displays all pertinent information from the leadAdvisor Information - Displays all pertinent information from the advisor Designing an intuitive dialerThe primary&nbsp; flow of how a concierge member uses the dialer is: Call lead.Lead picks up.Confirm identity and interest.Place lead on hold.Call advisor.Confirm advisor availability.Unhold call with lead to connect lead and advisor into a three-way conference call.Confirm connection. Leave call.&nbsp;<img width="2000" height="1125" width_o="2000" height_o="1125" data-src="https://freight.cargo.site/t/original/i/3c506b95c664cc316dcfe2b84d968c1624fc3e047549151a292cbcaf08a625b3/3-dialer.png" data-mid="63115892" border="0" src="https://freight.cargo.site/w/1000/i/3c506b95c664cc316dcfe2b84d968c1624fc3e047549151a292cbcaf08a625b3/3-dialer.png" />I broke the dialer into three components so the concierge team could see the status of each leg of the call (call duration, call drop, etc.) and take action on it (hold, unhold, end)An easy-to-use outcome moduleThe existing CMS placed all the possible outcomes in a dropdown that was located far below the fold which forced the concierge team to scroll down to 1) find the dropdown and 2) scroll through a long list to find the correct outcome. To start off, the outcome section was placed so that the concierge could quickly interact with it without the need to scroll. The dropdown was an inefficient pattern to use so I first asked Laura to identify the most common outcomes. These ended up being Voicemail - Name, Voicemail - No Name and Invalid Number. As the concierge team would have to pick these outcomes frequently, I pulled them out into their own buttons. We then worked together to group the other outcomes into Pickup and Other as options in a dropdown. <img width="2000" height="1125" width_o="2000" height_o="1125" data-src="https://freight.cargo.site/t/original/i/6600a3abc405e9cdd8aa0901b42188e99c32723baa1a5974125942e7ddd9c60c/4-outcomes.png" data-mid="102362664" border="0" src="https://freight.cargo.site/w/1000/i/6600a3abc405e9cdd8aa0901b42188e99c32723baa1a5974125942e7ddd9c60c/4-outcomes.png" /> A simplified interfaceIn addition to the dialer and outcome modules, the CMS also needed to display the lead and advisor details. I worked with Kyrsten and the concierge team to understand what was crucial for them to have a successful call and removed everything else. This allowed the concierge team to focus on the relevant information and not be distracted by unnecessary visual noise. <img width="2000" height="1125" width_o="2000" height_o="1125" data-src="https://freight.cargo.site/t/original/i/6d56850c44d32e2dfc3758cc7d791314e30facdec04bc72a77204ccce99adc90/5-simplified.png" data-mid="102362833" border="0" src="https://freight.cargo.site/w/1000/i/6d56850c44d32e2dfc3758cc7d791314e30facdec04bc72a77204ccce99adc90/5-simplified.png" />Improved speed to lead, improved concierge workflowThe new interface combined with a significant amount of backend improvements greatly increased the number of calls the concierge team was able to make thus allowing them to get to new leads faster. This in turn translates to a higher pickup rate which leads to more revenue. Beyond just the numbers, a testament to the usability of Sparrow came in the form of Neil (Concierge Manager) telling us that a newly hired concierge member was able to use the system smoothly and complete his tasks without any training. https://justinshen.com/Improving-Multiple-Live-Products Mon, 09 Mar 2020 21:27:34 +0000 Justin Shen https://justinshen.com/Improving-Multiple-Live-Products Overview Improving multiple live products At SmartAsset I’m responsible for identifying and improving existing experiences across all different areas for all teams. This requires me to quickly understand the context and collaborate with stakeholders across different teams to create options to test and implement. Financial Advisor Lead Team Improving copy for the financial advisor questionnaire handoff screenThe concierge team raised the issue that when reaching out to people who had filled out the questionnaire, many did not expect to be called. We hypothesized that the lack of clarity on the handoff screen did not clearly communicate what would happen next leading to a lower contact rate. I worked with Laura (Product Manager) and Kyrsten (Senior UX Researcher) to improve the copy (lower tech lift) in order to increase the contact rate. After three rounds of user testing, we landed on an iteration that improved the valid contact rate by over 3%. <img width="2000" height="1125" width_o="2000" height_o="1125" data-src="https://freight.cargo.site/t/original/i/e8a4af0619b7b2321af7991e465e8eb22922ef4229bc240f0fa993b2282d617a/1-handoff-copy.png" data-mid="63143720" border="0" src="https://freight.cargo.site/w/1000/i/e8a4af0619b7b2321af7991e465e8eb22922ef4229bc240f0fa993b2282d617a/1-handoff-copy.png" />Financial Advisor Lead TeamRedesigning the financial advisor questionnaire handoff screen With the success of the copy updates, we moved on to improve the overall design of the handoff screen by addressing problems the product and concierge team had identified. Users did not see the advisors they were matched with when viewing the site on their phone. This was a result of the advisor matches being placed below the fold and users not scrolling down.Users were not prepared to discuss next steps when the customer service team called them.Users were confused when receiving a call from a NYC phone number (where SmartAsset is based) and also thought we were their financial advisor match. We call to verify their information and answer any questions they have about the process.The advisor matches (on mobile) were difficult to compare as they stretched out over more than one scroll. <img width="2000" height="1125" width_o="2000" height_o="1125" data-src="https://freight.cargo.site/t/original/i/76f296a094fa8a688571053b742c0278c2ec19c5efaf40b09b6a6c6e7d7b77ce/2-handoff-design-a.png" data-mid="63143721" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/76f296a094fa8a688571053b742c0278c2ec19c5efaf40b09b6a6c6e7d7b77ce/2-handoff-design-a.png" /> <img width="2000" height="1125" width_o="2000" height_o="1125" data-src="https://freight.cargo.site/t/original/i/280936fa2eacfb8e98fd5aff733d1335b5f44afe6f953a6a22a40b45b6267131/2-handoff-design-b.png" data-mid="63143722" border="0" src="https://freight.cargo.site/w/1000/i/280936fa2eacfb8e98fd5aff733d1335b5f44afe6f953a6a22a40b45b6267131/2-handoff-design-b.png" /> <img width="2000" height="1125" width_o="2000" height_o="1125" data-src="https://freight.cargo.site/t/original/i/c73d2c2af05f48cb0df12fed88a2e5e1bb51aebc4316f047f46f7748734cb70d/2-handoff-design-c.png" data-mid="63143723" border="0" src="https://freight.cargo.site/w/1000/i/c73d2c2af05f48cb0df12fed88a2e5e1bb51aebc4316f047f46f7748734cb70d/2-handoff-design-c.png" /> The results of the A/B test showed that the original design outperformed the new design by 0.74%.&nbsp; As this was a negligible difference, the product team decided to remain with the new design because was easier to update and gave more room for testing and optimization. We were unable to measure the success of the FAQ since we don’t have a way to track how “prepared” our users are but hope to have a system in the future that allows us to track it. Financial ProductsTeamCreating a comparative monetization unit SmartAsset has created reviews for numerous financial products and institutions - banks, mortgage rates, savings accounts, cd accounts, etc. A part of our monetization strategy for these pages is to have partnerships with the institutions that we review and insert a link that goes to their product. But since we didn’t have a partnership with most institutions we’ve reviewed, we originally had placed a link to go to an institution that we did have a partnership with. This was a poor, deceptive, user experience that I raised a flag with and took action to improve. After working with Kyrsten (Senior UX Researcher) to confirm this was a problem, I created a monetization unit that allowed us to insert a different company’s product link while making it clear to the user where they were going to. After launching, we saw success in three areas. We increased the number of partner offers we could swap in from one to six due to the flexibility of the new design.Revenue increased by over 300% as a result of the increased partner offers.In user testing, participants found the new unit clear and helpful.<img width="2000" height="1125" width_o="2000" height_o="1125" data-src="https://freight.cargo.site/t/original/i/91009f7ba5fef053596277db4dc045fbeca9f714e54fb46928df9ad602ce35e5/3-comparative.png" data-mid="63143724" border="0" src="https://freight.cargo.site/w/1000/i/91009f7ba5fef053596277db4dc045fbeca9f714e54fb46928df9ad602ce35e5/3-comparative.png" />Editorial TeamImproving search functionality The SmartAsset Editorial Team produces the content that supports SmartAsset’s blog, reviews and much more. To do so, they use a mix of custom-built tools and off the shelf software which leads to a complicated process. An ongoing initiative has been to slowly consolidate these systems into one place so it’s easier and more efficient. For this project, I worked with Gabe (Product Manager), Chris (Writer/Editor) and Emily (Front-End Developer) to understand editorial’s workflow as well as the technical and product limitations of the search page for the database. I focused primarily on making sure the user experience aligned to the editorial team’s expectations and less on cleaning up the visuals as that was out of scope for the project. <img width="2000" height="1125" width_o="2000" height_o="1125" data-src="https://freight.cargo.site/t/original/i/bbac422f158669f436bd267ff7dad5d27937a3d8ea4dd06cee2adb207014558a/4-search.png" data-mid="63148004" border="0" src="https://freight.cargo.site/w/1000/i/bbac422f158669f436bd267ff7dad5d27937a3d8ea4dd06cee2adb207014558a/4-search.png" />