https://schairer.design KELLY SCHAIRER / UX Wed, 02 Apr 2025 16:23:41 +0000 https://schairer.design en https://schairer.design/taxes Wed, 02 Apr 2025 16:23:41 +0000 KELLY SCHAIRER / UX https://schairer.design/taxes hi pls { margin: 0; line-height: 0.9; font-size: 3em; font-weight: bold; color: #fff0f4; text-shadow: -1px 1px 0 #FCD8E3, -2px 2px 0 #FAD6E1, -3px 3px 0 #F9D4DF, -4px 4px 0 #F7D1DD, -5px 5px 0 #F6D0DC, -6px 6px 0 #F5CDDA, -7px 7px 0 #F4CBD8, -8px 8px 0 #F2C9D6, -9px 9px 0 #F1C7D5, -10px 10px 0 #F0C5D3, -11px 11px 0 #EFC3D1, -12px 12px 0 #EDC1D0, -13px 13px 0 #ECBECE, -14px 14px 0 #EBBDCC, -15px 15px 0 #EABACA, -16px 16px 0 #E8B8C9, -17px 17px 0 #E7B6C7, -18px 18px 0 #E6B4C5, -19px 19px 0 #E4B2C3, -20px 20px 0 #E3B0C2, -21px 21px 0px #E2AEC0, -22px 22px 0px #E1ACBE, -23px 23px 0px #DFAABD, -24px 24px 0px #DEA7BB, -25px 25px 0px #DDA5B9, 0px 0px 39px rgba(0,0,0,0.2) } img { width: 450px; height: 396px; margin-top: 3em; } hi&nbsp; https://schairer.design/INDEX Thu, 30 Jul 2020 21:26:40 +0000 KELLY SCHAIRER / UX https://schairer.design/INDEX Kelly Schairer is a user experience designer based in Brooklyn, New York. Case Study #1:AdmiralDashboardRedesign Case Study #2:MoodMirrorMobile Application Case Study #3:SkillboxInstructorTools https://schairer.design/DESIGN Thu, 30 Jul 2020 19:55:17 +0000 KELLY SCHAIRER / UX https://schairer.design/DESIGN DESIGN <img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/155bcc082df50f46d60ff0fddb994bc4746d4bfb4466b87564c578af8133514e/ad-preview.png" data-mid="78752336" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/155bcc082df50f46d60ff0fddb994bc4746d4bfb4466b87564c578af8133514e/ad-preview.png" /> Case Study #1: Admiral Dashboard Admiral is a SaaS Platform that provides digital publishers with tools to increase and maintain the revenue they earn through site traffic. How can a redesigned user dashboard help “The Visitor Relationship Management Company” deepen their relationship with clients?Read Case Study ➔ <img width="1710" height="730" width_o="1710" height_o="730" data-src="https://freight.cargo.site/t/original/i/10e3e785defa49ca2f57f4d0939f441afe6dd9461709484df86a60156544850b/mm-preview.png" data-mid="78753608" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/10e3e785defa49ca2f57f4d0939f441afe6dd9461709484df86a60156544850b/mm-preview.png" /> Case Study: MoodmirrorMoodmirror is a native mobile mood log that demystifies the relationship between a user’s mind and body. How can tracking patterns in physical and mental health help millennials develop better habits?&nbsp;Read Case Study ➔ <img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/8e573731616e6f3ff321075c2b21ceb792758e10533fb12fbdd582cfa1d2c1ba/sb-preview.png" data-mid="78753622" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/8e573731616e6f3ff321075c2b21ceb792758e10533fb12fbdd582cfa1d2c1ba/sb-preview.png" /> Case Study: SkillboxSkillbox is a web-based platform where independent instructors can organize classes and connect with students. How can an event management platform provide hobbyist educators with the resources they need to earn a living from their passion?Read Case Study ➔ https://schairer.design/Case-Study-Admiral-1 Mon, 06 Jul 2020 21:49:32 +0000 KELLY SCHAIRER / UX https://schairer.design/Case-Study-Admiral-1 <img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/155bcc082df50f46d60ff0fddb994bc4746d4bfb4466b87564c578af8133514e/ad-preview.png" data-mid="77582525" border="0" data-no-zoom src="https://freight.cargo.site/w/1000/i/155bcc082df50f46d60ff0fddb994bc4746d4bfb4466b87564c578af8133514e/ad-preview.png" /> Case Study: Admiral Dashboard Admiral is a SaaS Platform that provides digital publishers with tools to increase and maintain the revenue they earn through site traffic. How can a redesigned user dashboard help “The Visitor Relationship Management Company” deepen their relationship with clients?Written by Kelly Schairer https://schairer.design/Intro_Admiral Wed, 15 Jul 2020 00:49:13 +0000 KELLY SCHAIRER / UX https://schairer.design/Intro_Admiral Introduction&nbsp; The Team I worked with 4 UX designers to complete this redesign project. Our primary points of contact during the design process were the company’s co-founders and product manager, though I can also attribute our success to the open line of communication we were granted to their CEO along with representatives from their sales and customer support teams.My team routinely conducted ideation and synthesis workshops across the design project’s timeline: most notably, a series of&nbsp;affinity diagram sessions after each round of user interviews, a series of&nbsp;6-8-5 sessions to establish divergent concepts, and an empathy map workshop with the client’s founders during preliminary research.&nbsp; <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/75fcabfa6dc5a111690669086c569b5e539fe54c7516129826f317342dce053a/WB_Affinity_Userint3.JPG" data-mid="77412628" border="0" src="https://freight.cargo.site/w/1000/i/75fcabfa6dc5a111690669086c569b5e539fe54c7516129826f317342dce053a/WB_Affinity_Userint3.JPG" /> Pictured: Two members of my design team during an affinity diagram workshop Timeline and Tools We completed this project in 4 weeks across 3 agile sprints and presented our progress to the client through meetings held at the end of each sprint. We utilized Figma and G Suite as our primary tools, and also used Zoom and Slack to communicate with our client and one another remotely. My RoleDomain Research I compiled and synthesized relevant, up-to-date information from reputable sources on all subjects within the project’s problem space that my team deemed necessary for the overall success of our design. User Interviews and Usability Testing I moderated interviews and usability test sessions with our client’s users and recruited additional prospective users who aligned with the target audience. I also audited interviews and tests moderated by other members of my team to transcribe and take notes.&nbsp; Information Architecture I applied our domain research and user inteview findings to reorganize the informational structure, key screens, and features of our client’s existing product in a manner that would better suit user needs and created a corresponding site map for the revised design. UX WritingI played a key role in the composition of long-form written reports including a domain research findings brief and a usability test report. I was also integral to shorter-form writing tasks such as the establishment of design principles. Visual DeliverablesI designed assorted graphics necessary to convey information including an empathy map, a site map, and slide decks for client check-in meetings. I also created a template and style guide for the project’s visual competitive analysis and annotated wireframes. https://schairer.design/Admiral_Challenge Wed, 08 Jul 2020 17:36:33 +0000 KELLY SCHAIRER / UX https://schairer.design/Admiral_Challenge Challenge Making Admiral’s Acquaintance Managing Visitor RelationshipsFor this redesign project, I had the pleasure of working with Admiral, a SaaS company based in Florida. Admiral’s clients are digital publications like newspapers, blogs, and educational platforms: their software suite helps these publications recover and increase revenue earned from web traffic.&nbsp; Admiral’s stated goal is to create a holistic relationship between publishers and their visitors through a vertical suite of products that allow clients to communicate with visitors and monitor visitor behavior through installation of a simple Javascript tag. Though Admiral’s services are most lucrative when used together, the majority of clients only use their adblock recovery service.&nbsp; From Siloed to CentralizedClients manage their Admiral account with a web-based dashboard that provides a control panel and a variety of relevant analytics for each service. Though frequent dashboard logins are not strictly necessary to recover traffic revenue, the availible resources can help users evaluate and improve their strategy to increase earnings.&nbsp; Admiral’s motivation for a redesign was a low rate of user engagement with the dashboard relative to the size of their client base. Clients generally had a positive opinion the company’s services, but few regularly used the dashboard. To address this, Admiral asked us to create a unified home dashboard featuring resources from each individual service’s dashboard page.&nbsp; BEFORE: Admiral Dashboard The dashboard page for each Admiral product is accesible via tabbed navigation.&nbsp; With no centralized hub to act as a homepage, the user is greeted by the dashboard’s first tab, Adblock Recovery, by default upon login.&nbsp; <img width="907" height="930" width_o="907" height_o="930" data-src="https://freight.cargo.site/t/original/i/5dc1613fac45622afd66dcfc0812f82816ab2c39bc8d44473fbedd3fc0fb9b63/dashboard-ss.png" data-mid="77048142" border="0" src="https://freight.cargo.site/w/907/i/5dc1613fac45622afd66dcfc0812f82816ab2c39bc8d44473fbedd3fc0fb9b63/dashboard-ss.png" /> <img width="907" height="693" width_o="907" height_o="693" data-src="https://freight.cargo.site/t/original/i/da15b2a063d7e62408b42093cd875b73e87d31467cd389c0ceb776daf6e5d6e4/onboarding-ss.png" data-mid="77047350" border="0" src="https://freight.cargo.site/w/907/i/da15b2a063d7e62408b42093cd875b73e87d31467cd389c0ceb776daf6e5d6e4/onboarding-ss.png" /> BEFORE: Admiral Onboarding After registering an account, users are prompted to install the service’s javascript tag on their domain and then navigated directly to the dashboard. Client GoalsHere’s what Admiral specifically wanted the design to address and provide: Upsell Opportunities - Encourage current clients who use just one service to consider upgrading and encourage potential clients to sign up for product updates, request a demo, or upgrade to a paid accountUser Engagement - Entice users to create a profile, access the dashboard website regularly, and recommend the service to othersOnboarding - In addition to delivering a dashboard design, Admiral asked us to develop a comprehensive onboarding flow to guide users through the redesign and acquaint them with the new dashboard experience.&nbsp; https://schairer.design/Admiral_Approach Wed, 08 Jul 2020 17:48:10 +0000 KELLY SCHAIRER / UX https://schairer.design/Admiral_Approach The ApproachGathering Research Insights Understanding the Domain In order to effectively fulfill Admiral’s goals, we conducted research on the industry of Visitor-Relationship Management to establish a thorough understanding of each service offered by Admiral:Adblock Recovery Adblock Recovery (or Adtech) detects software intended to block the advertisements that publishers rely on to generate revenue from web traffic.According to a 2019 Global Web Index survey, 45% of internet users globally have used an ad blocker in the past month. Privacy and ConsentLegally, digital publishers can only collect and sell visitor data if visitors provide consent according to standards set by GDPR and CCPA legislation.&nbsp;Publishers are seriously liable if they fail to adhere to these legal standards in addition to risking permanent damage to visitor trust and loyalty. Subscription ServicesIn lieu of adblock prevention, some publishers ask their visitors to commit to a subscription, either paid or in exchange for their email address.A 2017 NYT internal memo&nbsp;stated that newsletter subscribers read twice as many articles and are twice as likely to become paid subscribers. 10Competitor products evaluated and annotated for competitive analysis Understanding the CompetitorsThrough our next step of research, we’d ensure that Admiral’s redesigned dashboard would not only drive user interest and engagement, but also align with standards and expectations set by their competitors. We conducted a visual competitive analysis by annotating key screens from the dashboards of companies Admiral named as competitors, additional competitors we identified through domain research, and other widely-used digital resource management dashboards. Here’s what we learned: Centralized Hubs are Industry StandardUsers who manage digital resources with a dashboard expect immediate access to primary tools located across the platform, confirming the client’s assumption that a unified dashboard will increase user satisfaction. Successful Dashboards are Customizable The majority of dashboards annotated for this analysis offered users the opportunity to tailor dashboard experience to suit individual professional needs. By expanding the customization opportunities offered to Admiral’s users, there was an opportunity to increase dashboard engagement. Dashboards Should Provide Actionable Functions The core appeal of a centralized dashboard hub is allowing users to take immediate action on high-priority tasks without navigating to a secondary page. The centralized Admiral dashboard will be most successful if it is not just a visual display of information, but a powerful tool in itself.&nbsp; Understanding the Client In order to fulfill Admiral’s business goals, we wanted to broaden our understanding of the organization’s vision and brand. Admiral generously provided us access to three members of the company for&nbsp;subject matter expert and stakeholder interviews.We spoke to representatives from Admiral’s sales team and&nbsp;customer support team for insight on the perspective of employees who interact with clients on a daily basis. We also had the opportunity to interview the&nbsp;CEO, which&nbsp;deepened our awareness of Admiral’s big picture and long-term goals. Insight from Sales The sales representative emphasized how multiple services can work together to serve a singular purpose. He felt it was important for the dashboard to communicate the potential each service has to monetize visitors using language easily digestible to clients. Insight from Customer Support The customer suport representative shared that Admiral users often contact him directly with any issue or confusion they experience with the dashboard because the platform does not provide resources for user troubleshooting. He felt that ease of use should be a priority for the redesign. Insight from CEO Admiral’s CEO expressed particular interest in representing Admiral as a horizontal suite of products that work best in conjunction with one another, with Average Revenue Per User as a unifying KPI metric. His priority for the new design was the potential for upsell opportunities. 5Current Admiral clients who shared opinions and insight in user interviews Understanding the Users Obviously, we wouldn’t be able to fully address the needs of Admiral’s users unless we communicated with them directly. We conducted user interviews with 5 professionals who use Admiral for work in departments like ad sales, subscription coordination, and digital marketing at online publications. We were particularly interested in how Admiral’s services impact the jobs of users on a daily basis, as well as their opinions on the current dashboard design. These were our biggest takeaways:Clients Value Excellent Customer Support When clients praised the company, they mostly referenced their experience with customer support, rather than their experience actually using Admiral products. This high degree of user support is a key part of Admiral’s appeal. The Dashboard is a Middle-Man Many users pay a brief visit to the dashboard to isolate data relevant to their objectives and export it to another platform. Though this raw data is crucial to their professional responsibilities, they rely resrouces provided by other platforms to analyze and leverage this data. Lack of Feature and Product VisibilityOur interviews indicated that the current dashboard didn’t communicate the potential that Admiral services or any of their particular features have to increase revenue. Users understood the value of the service they used most often, but not how other products could further serve their interests. https://schairer.design/Admiral_Discoveries Wed, 08 Jul 2020 22:15:17 +0000 KELLY SCHAIRER / UX https://schairer.design/Admiral_Discoveries DiscoveriesForging a Design Path Visualizing the Problem To apply and contextualize our research insights, we created a&nbsp;user flow diagram exploring the journey users would undergo as they gradually became more familiar with Admiral. For the purpose of this artifact, we defined new users as “Strangers” and clients using multiple Admiral services who would recommend the company to others as “Best Friends”.&nbsp; <img width="2211" height="1241" width_o="2211" height_o="1241" data-src="https://freight.cargo.site/t/original/i/cddd7c010880d4adbea71f913a37bc79d13cc48cceb813f3cf1dc2c6c338f7ea/User-Flow.png" data-mid="76873199" border="0" src="https://freight.cargo.site/w/1000/i/cddd7c010880d4adbea71f913a37bc79d13cc48cceb813f3cf1dc2c6c338f7ea/User-Flow.png" /> Admiral User FlowAs designers, we couldn’t control the context through which clients were introduced to Admiral or their professional objectives upon logging in-- our design would have to accommodate each user type we’d identified and everything in between. Defining the Problem This diagram visualized a critical insight from our research:&nbsp;Admiral user satisfaction was driven mostly through interactions with Customer Support, and rarely through positive experiences with the dashboard. Users of all types and touchpoints rely on customer service representatives to compensate for the dashboard’s usability issues. This insight allowed us to articulate the problem our design would address:Admiral needs to effectively communicate the value of their services by enhancing the informational resources and usability of their platform so that users can understand and optimize the horizontal suite of products without relying on customer support. Approaching the SolutionWe now had a clear-cut design objective: by emulating the qualities that define positive experiences with Customer Love, we could help users feel comfortable navigating the dashboard without help, expand their understanding of both the services they already use and other services Admiral offers, and ultimately increase interest in upgrading to additional services within the product suite. We established four design principles to inform the direction of our project: <img width="400" height="474" width_o="400" height_o="474" data-src="https://freight.cargo.site/t/original/i/73f58693196d2b64f198ee35550fff89d2f27840d6fb313f23e11831f842d3f2/sf400w.svg" data-mid="77074619" border="0" data-scale="77" src="https://freight.cargo.site/w/400/i/73f58693196d2b64f198ee35550fff89d2f27840d6fb313f23e11831f842d3f2/sf400w.svg" /> STRAIGHTFORWARDAdmiral’s software collects and displays a lot of data. The presentation of data should be easily digestible, but not so deceptively simple that users are unable to recognize Admiral’s full value. <img width="406" height="400" width_o="406" height_o="400" data-src="https://freight.cargo.site/t/original/i/4841ed69a439a4af22abb0767164ec37ef3315ceb509705992c0769b430f9cc0/hc.svg" data-mid="77074464" border="0" data-scale="92" src="https://freight.cargo.site/w/406/i/4841ed69a439a4af22abb0767164ec37ef3315ceb509705992c0769b430f9cc0/hc.svg" /> HUMAN-CENTRICAdmiral’s values hinge on the idea that users and visitors are more than just statistics. It’s important for the dashboard design to retain the impression of a human touch in order to deliver an engaging, approachable product. <img width="400" height="400" width_o="400" height_o="400" data-src="https://freight.cargo.site/t/original/i/d61e29f94a11fc5d1871e13b8148374ed379ad5c9014115c857b6f425f64a24f/sg400w.svg" data-mid="77074620" border="0" data-scale="98" src="https://freight.cargo.site/w/400/i/d61e29f94a11fc5d1871e13b8148374ed379ad5c9014115c857b6f425f64a24f/sg400w.svg" /> SELF-GUIDINGThe dashboard should capture the spirit of what Admiral users already praise: their customer support team. We want users to feel confident exploring and mastering the platform without direct assistance from Customer Support. <img width="400" height="474" width_o="400" height_o="474" data-src="https://freight.cargo.site/t/original/i/014731d8548a949495dcf7e473b4499b2f30f89141a89ef10f8425adb1fedd5e/grat400w.svg" data-mid="77074617" border="0" data-scale="83" src="https://freight.cargo.site/w/400/i/014731d8548a949495dcf7e473b4499b2f30f89141a89ef10f8425adb1fedd5e/grat400w.svg" /> GRATIFYINGWe want Admiral’s users to feel that Admiral’s array of services allow them make more valuable workplace contributions. We also want them to feel the corresponding sense of accomplishment from a job well done. https://schairer.design/Admiral_Solutions Thu, 09 Jul 2020 22:42:04 +0000 KELLY SCHAIRER / UX https://schairer.design/Admiral_Solutions SolutionsIdeation &amp; Validation Divergent Concepts DashboardIn order to establish three divergent concepts to serve as our potential basis for the dashboard redesign, my team applied our research findings on successful dashboard characteristics in a 6-8-5 rapid ideation workshop. We discussed and evaluated the strongest ideas generated to pinpoint different ways to improve upon the current dashboard then assembled three sets of mid-fidelity wireframes and prototypes for the purpose of concept testing.&nbsp; Dashboard Concept 1:Familiar BaselineThis concept repurposed the layout of the current dashboard into a centralized homepage with updates to navigation and data visualization. Data visualization is the focal point of the page and customizable via toggle. Users also have the option to quickly export a data set after adjusting the displayed data to their preference.&nbsp; Upsell potential is indicated by displaying a “locked” preview of additional services. <img width="1440" height="1166" width_o="1440" height_o="1166" data-src="https://freight.cargo.site/t/original/i/2e177a38955fe30ae417a7ffb5166bbfa90692b0b597ffdfd97bd91fb177296a/Concept-KS-2.png" data-mid="77279579" border="0" src="https://freight.cargo.site/w/1000/i/2e177a38955fe30ae417a7ffb5166bbfa90692b0b597ffdfd97bd91fb177296a/Concept-KS-2.png" /> <img width="1440" height="1166" width_o="1440" height_o="1166" data-src="https://freight.cargo.site/t/original/i/2b4878308488f76913f9362bb7ecc7759776ab17fcf730602ae085961e33326a/Concept-KS.png" data-mid="76968651" border="0" src="https://freight.cargo.site/w/1000/i/2b4878308488f76913f9362bb7ecc7759776ab17fcf730602ae085961e33326a/Concept-KS.png" /> <img width="1440" height="1624" width_o="1440" height_o="1624" data-src="https://freight.cargo.site/t/original/i/202fad8e150c140699ea1e8924dedbedf5a8800caea397e695766aea205f76c4/Concept-EP.png" data-mid="76970250" border="0" src="https://freight.cargo.site/w/1000/i/202fad8e150c140699ea1e8924dedbedf5a8800caea397e695766aea205f76c4/Concept-EP.png" /> Dashboard Concept 2:Vertical CardsThis dashboard concept utilizes more negative space and replaces top navigation with a sidebar. Each service is represented by a horizontal content card containing metric elements of varying customizable size. Upsell potential is indicated by displaying a locked version of an entire content card to represent a service to which users could potentially upgrade. Dashboard Concept 3: Draggable ElementsThis concept features a secondary expandable responsive touch column to the right of primary dashboard data. This design prioritizes the ability for users to dictate what features and metrics are most important to them with an additional emphasis on content strategy. Upsell potential is indicated by selectively locking elements that represent upgradeable services. <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/ef3e47e988b4da58452691e9cdf7cacd26d369b873745be29079ef0e3e821357/Concept-AK-2.png" data-mid="76969065" border="0" src="https://freight.cargo.site/w/1000/i/ef3e47e988b4da58452691e9cdf7cacd26d369b873745be29079ef0e3e821357/Concept-AK-2.png" /> <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/6538ab7853c259a9a75328790d41ae903173188bcf648514035e22df41c1dd84/Concept-AK.png" data-mid="76969066" border="0" src="https://freight.cargo.site/w/1000/i/6538ab7853c259a9a75328790d41ae903173188bcf648514035e22df41c1dd84/Concept-AK.png" /> Onboarding In the same rapid ideation workshop, my team generated two divergent onboarding concepts. We prioritized flexibility in these onboarding concepts, both in the sense that they could apply to any potential design concept we may decide upon for the dashboard itself and in the sense that it could appeal to the different types of users identified in our User Flow diagram.&nbsp; <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/fb2547df365afd00313a0a14f8ebae1586603453c3b22cd5713fcb55c6ed009c/OB_C_A2.png" data-mid="77281415" border="0" src="https://freight.cargo.site/w/1000/i/fb2547df365afd00313a0a14f8ebae1586603453c3b22cd5713fcb55c6ed009c/OB_C_A2.png" /> <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/80e4fe711c8be0587555966d8423f751d5bdc133fc4572790d704fd04ed92104/OB_C_A.png" data-mid="77277382" border="0" src="https://freight.cargo.site/w/1000/i/80e4fe711c8be0587555966d8423f751d5bdc133fc4572790d704fd04ed92104/OB_C_A.png" /> Onboarding Concept 1:Optional WalkthroughThis concept opted for literal emulation of an interaction with customer support. Users are given the option to receive a tutorial that would walk through the installation of their javascript tag and the creation of an engage element. Onboarding Concept 2:TooltipsThis concept provides instructional information about the platform automatically by displaying tooltips upon first login that disappear individually upon hover. <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/c99c7189d639549963121bc53d328c5b3272925f2afc4b4c1a3cec064c7b4685/OC_C_B.png" data-mid="77277383" border="0" src="https://freight.cargo.site/w/1000/i/c99c7189d639549963121bc53d328c5b3272925f2afc4b4c1a3cec064c7b4685/OC_C_B.png" /> 9User participants for divergent concept testing Concept TestingWe tested the concept prototypes with 9 users. Test participants, while employed in industries parallel to Admiral’s clients, were unfamiliar with Admiral at the beginning of their test session. Given the key problems identified in our research, we felt it was important to gauge how much participants understood about the product’s purpose and value based solely on their exposure to our design prototypes.Here’s a breakdown of the data we gathered about the strengths and weaknesses of each design during concept testing: &nbsp; Pros Cons Dashboard 1 Effective, easily adjustable data visualizationQuick Export after adjustment Adjustments can’t be “saved”Raw data table looks cluttered Dashboard 2&nbsp; Granularity of displayed metricsDiscreteccess to raw data Layout and content distributionAbility to interact with data elements unclear Dashboard 3Interactable interfaceRevenue-focused default metrics&nbsp;Demonstrates vertical suite’s benefits Ambiguous visualization of dataPurpose of content in right-hand bar unclear Onboarding 1&nbsp; Educates users by providing a specific and direct task Skippable tutorial: is the information retrievable later? Onboarding 2 Direct and concise Overcrowded, overwhelming Converged Concept After completing our concept testing, my team isolated the strengths, weaknesses, and opportunities of each concept. This synthesis of concept test data in conjunction with additional insights from our initial research led us to the following conclusions for our converged design concept:Two Touchpoints for OnboardingThough the initial sign-up process for new users would remain consistent, users will be able to opt-out of any additional guidance through the dashboard after the installation of their javascript tag (though the tutorial resources will be retriable later if they choose to skip it). Split the Difference for Tutorial Overall, users responded positively to both our skippable tutorial concept and our tooltip concept for onboarding. The specifics of the feedback we gathered led us to believe the final concept should incorporate elements of both: instead of displaying all tooltips at once, our design would display them one-by-one as users toured the platform. Keep the interface Clean and Minimal The dashboard will display visualized data by default with raw data accessible via interaction with the visualization element in order to declutter and streamline the appearance of each page Data &amp; Metric Customization Capability Users will be able to tailor each content card displayed on the dashboard’s homepage to fit their priorities and business goals. Per the CEO’s recommendation, we would place particular emphasis on the KPI of Average Revenue Per User and allow users to define the other core metrics that drive their revenue and strategy beyond the suggested metrics informed by our research. Strike Balance on Upsell Potential &amp; Core UsabilityTesting indicated that users react negatively when too much space is dedicated to “locked” elements that encourage upsell. The final design will demonstrate the potential value of upgradeable services tastefully but effectively. Site Map and User Tasks I took the lead on creating a site map for the updated dashboard, with information architecture drawing partially from the original siloed individual dashboards and partially from user research findings. We also created a separate task flow chart to outline the specifics of the onboarding process.&nbsp; <img width="1525" height="1156" width_o="1525" height_o="1156" data-src="https://freight.cargo.site/t/original/i/867076d8eab9c83cbc8acbb2de5f3b0635f91c732d0cb365e78a5ee5213160b9/Site-Map.png" data-mid="76970481" border="0" src="https://freight.cargo.site/w/1000/i/867076d8eab9c83cbc8acbb2de5f3b0635f91c732d0cb365e78a5ee5213160b9/Site-Map.png" /> Admiral Site MapEstablishes 7 top-level navigation categories in addition to the centralized home dashboard Onboarding Task FlowBreaks down the two onboarding options users will have upon sign-up. Information in Progressive Onboarding will be retrievable later on for users who choose Quick Start.&nbsp; <img width="1017" height="428" width_o="1017" height_o="428" data-src="https://freight.cargo.site/t/original/i/f28e9fab3af209b1e00f52bea47d953039e63ea596ce531404ec758642a40f01/ad-obf.png" data-mid="77390613" border="0" src="https://freight.cargo.site/w/1000/i/f28e9fab3af209b1e00f52bea47d953039e63ea596ce531404ec758642a40f01/ad-obf.png" /> Additionally, we established 7 key tasks users would accomplish through use of the dashboard’s prototype: Sign up for a new account and undergo unboarding Manually or automatically install Admiral’s javascript tag on a webpage Create a new “engage” javascript element with custom text and appearance Edit the contents of an existing “engage” javascript element Export raw data from a data table for use in another application View a table of the raw data displayed on a visualized data element View the details of a locked Admiral product and upgrade their account This gave us all the tools we needed to build the first iteration of our prototype. https://schairer.design/Admiral_Outcomes Thu, 09 Jul 2020 23:30:57 +0000 KELLY SCHAIRER / UX https://schairer.design/Admiral_Outcomes Outcomes Prototyping &amp; Testing Wireframes and Prototype With our final converged dashboard concept and revised site map established, my team created a full set of mid-fidelity wireframes and a corresponding prototype of the dashboard redesign. <img width="1440" height="1262" width_o="1440" height_o="1262" data-src="https://freight.cargo.site/t/original/i/10a454c8ed68ab25a0e36db85105839ab8e3dbd3a2a52eaba6e6e761ae7dffa5/Wireframe-Home-us.png" data-mid="77397009" border="0" src="https://freight.cargo.site/w/1000/i/10a454c8ed68ab25a0e36db85105839ab8e3dbd3a2a52eaba6e6e761ae7dffa5/Wireframe-Home-us.png" /> <img width="1440" height="1262" width_o="1440" height_o="1262" data-src="https://freight.cargo.site/t/original/i/a4524e21f0faf17c6ac7e2a0d0b023bf7faa973134afa30dd69e20abfdc72dc0/Wireframe-Home.png" data-mid="77391239" border="0" src="https://freight.cargo.site/w/1000/i/a4524e21f0faf17c6ac7e2a0d0b023bf7faa973134afa30dd69e20abfdc72dc0/Wireframe-Home.png" /> Dashboard HomeUsers can not only customize the size and content of each card on their dashboard’s home page, but also customize the Quick Manage feature in the right bar for additional easy access to the tools they use most.&nbsp;Revenue OptimizationIn addition to locked pages in the side navigation and locked elements on the home page, users are compelled to consider the value of Admiral’s complete vertical suite with the Revenue Optimization meter. Visual Data ExpansionInteracting with anyvisualized data across the dashboard will open an expanded view of that data. Uses can navigate from this expanded view directly to the service’s dedicated page for even more detail.&nbsp; <img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/1ce42dccf6b198098714f58ed1b5f9d90ab35487fa8240ad7fffa0b6c13fd27a/dataexp_1.png" data-mid="77396433" border="0" src="https://freight.cargo.site/w/1000/i/1ce42dccf6b198098714f58ed1b5f9d90ab35487fa8240ad7fffa0b6c13fd27a/dataexp_1.png" /> <img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/dff92e866500126f51395add78a97d814ab86c963daeadfb4f9225f68f37494d/dataexp-2.png" data-mid="77396435" border="0" src="https://freight.cargo.site/w/1000/i/dff92e866500126f51395add78a97d814ab86c963daeadfb4f9225f68f37494d/dataexp-2.png" /> <img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/ccd4de53f15503ab365b67aed93a31a3ae125d56e5b079d1f7a7d61651b82bbe/dataexp_3.png" data-mid="77396434" border="0" src="https://freight.cargo.site/w/1000/i/ccd4de53f15503ab365b67aed93a31a3ae125d56e5b079d1f7a7d61651b82bbe/dataexp_3.png" /> <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/cdbe9de1cb00be34d3732f0533652e109ed3867222961288a52c0427754f012e/su1.png" data-mid="77398415" border="0" src="https://freight.cargo.site/w/1000/i/cdbe9de1cb00be34d3732f0533652e109ed3867222961288a52c0427754f012e/su1.png" /> <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/a07c88b65ecd07740f02ee0e1be34e20d08ed0cae3b7642cc25e151c6904a5c0/su2.png" data-mid="77398416" border="0" src="https://freight.cargo.site/w/1000/i/a07c88b65ecd07740f02ee0e1be34e20d08ed0cae3b7642cc25e151c6904a5c0/su2.png" /> <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/5b7f728ff7e6c7a96cc92c74815637f54d39fe872cd3f5bd2efe6bcea31c2d31/su3.png" data-mid="77398418" border="0" src="https://freight.cargo.site/w/1000/i/5b7f728ff7e6c7a96cc92c74815637f54d39fe872cd3f5bd2efe6bcea31c2d31/su3.png" /> <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/a7675bb50f98998fcdf662d6c60bd92826f8de9fa4157423d39674f6b52bbcba/su4.png" data-mid="77398419" border="0" src="https://freight.cargo.site/w/1000/i/a7675bb50f98998fcdf662d6c60bd92826f8de9fa4157423d39674f6b52bbcba/su4.png" /> Quick Start OnboardingUsers who wish to sign up quickly and explore the platform on their own terms are only required to complete 3 simple steps to ensure their Admiral account is up and running. Progressive OnboardingUsers who choose to undergo the complete dashboard tour are guided through each major element of the dashboard through a series of tooltips and have the option to toggle between steps. <img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/f56e562796adbf3b77b70c80fa0fbe41fee5409cac0fbf2225df642d32a872f1/t2.png" data-mid="77398125" border="0" src="https://freight.cargo.site/w/1000/i/f56e562796adbf3b77b70c80fa0fbe41fee5409cac0fbf2225df642d32a872f1/t2.png" /> <img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/0892d500e6c53cc0d6eec5c26bc7f4c6d721edfcb3f98a94e6a6795cc54f04c9/t1.png" data-mid="77398124" border="0" src="https://freight.cargo.site/w/1000/i/0892d500e6c53cc0d6eec5c26bc7f4c6d721edfcb3f98a94e6a6795cc54f04c9/t1.png" /> <img width="1440" height="900" width_o="1440" height_o="900" data-src="https://freight.cargo.site/t/original/i/3ee3df5f428ab9e0702697fed8cd9b0fb13f1e6024bafb06b851c3bba39f7ffc/t3.png" data-mid="77398126" border="0" src="https://freight.cargo.site/w/1000/i/3ee3df5f428ab9e0702697fed8cd9b0fb13f1e6024bafb06b851c3bba39f7ffc/t3.png" /> 6Current and potential Admiral clients who tested for usability issue 4.1OUT OF 5 Average ease of use rating across all tasks 90%Average satisfaction rating for the dashboard redesign among test participants Usability Testing Six participants were recruited to conduct usability testing. Among our usability test participants were current Admiral clients and other professionals whose occupations and expertise aligned with potential Admiral clients. Participants were provided with the dashboard prototype in a web browser and given 6 scenarios that would require them to complete key task flows. Test moderators employed think-aloud moderation and encouraged participants to share thei thoughts and observations throughout in addition to evaluating the difficulty of each task on a numerical scale.Here are some qualitative observations from our test participants: “The old one was too sales-y and colorful. This is more straightforward and to the point.”- C.B., Current Admiral Client “This is a very simple, sleek looking product.”- L.W., Potential Admiral Client “I like the quick manage sidebar. I can see things that I would use very quickly.”- P.H., Current Admiral Client Usability Recommendations We detailed the quantitative data from post-task surveys as well as the qualitative observations verbally expressed by participants in a comprehensive usability test report.&nbsp; By evaluating available data, we identified a few minor usability issues to address in a second iteration of the prototype:Revise Feature Labeling Though participants responded positive to new features such as “Quick Manage” and content card customizability, the purpose of these features was not immediately clear to new users because of their presentation in the first iteration. We would address this by adding explanatory copy to onboarding and empty states when applicable. Signify Element Interactions Participants did not immediately recognize the ability to expand data visualizations and view raw data by clicking. Our resolution was to modify the interface of these elements to indicate potential for interaction. Modify Default Metrics Test participants made it clear that the metric users were most interested in seeing immediately upon login was conversion rate, a metric not available in the initial design iteration. We adjusted this central dashboard element accordingly. Design Iterations Based on the data and feedback gathered during our usability testing sessions, we made the following revisions to our prototype: <img width="1440" height="949" width_o="1440" height_o="949" data-src="https://freight.cargo.site/t/original/i/5b81472ce78d49b71347a3026c1f31c98735debc3c837bababb7e016611bdebe/iter-graph-2.png" data-mid="77406853" border="0" src="https://freight.cargo.site/w/1000/i/5b81472ce78d49b71347a3026c1f31c98735debc3c837bababb7e016611bdebe/iter-graph-2.png" /> <img width="1440" height="949" width_o="1440" height_o="949" data-src="https://freight.cargo.site/t/original/i/174a200fc243bd3e4da18b052c2bf3a4fddea8b1676ff8da8d79488c276a56f0/iter-graph-1.png" data-mid="77406851" border="0" src="https://freight.cargo.site/w/1000/i/174a200fc243bd3e4da18b052c2bf3a4fddea8b1676ff8da8d79488c276a56f0/iter-graph-1.png" /> Revisions to Data VisualizationsSeveral minor revisions were made to all data visualization elements, including additional labeling for the element’s mechanics and interface icons to visually indicate the user’s ability to expand and modify the element through interaction. Revisions to Informational LabelingIn order to clarify the purpose of both industry-specific terms and new features intended to streamline workflow, we expanded our use of tooltips beyond onboarding and across dashboard features in order to continually educate users as they explore the platform.&nbsp; <img width="1440" height="949" width_o="1440" height_o="949" data-src="https://freight.cargo.site/t/original/i/a093db94b613ee6ae2e05f327a5427893e0bfc767b620896bf950a2ae04b9301/tt-iter-2.png" data-mid="77408687" border="0" src="https://freight.cargo.site/w/1000/i/a093db94b613ee6ae2e05f327a5427893e0bfc767b620896bf950a2ae04b9301/tt-iter-2.png" /> <img width="1440" height="949" width_o="1440" height_o="949" data-src="https://freight.cargo.site/t/original/i/81fb2991a70b9e8509f5c515c2378c0e32a6e6ba4d14d8ed31cd9ee3dd6974f1/tt-iter-1.png" data-mid="77408686" border="0" src="https://freight.cargo.site/w/1000/i/81fb2991a70b9e8509f5c515c2378c0e32a6e6ba4d14d8ed31cd9ee3dd6974f1/tt-iter-1.png" /> <img width="1440" height="949" width_o="1440" height_o="949" data-src="https://freight.cargo.site/t/original/i/6c9ff563b9bc3981e72ae35411d926ef381a96188e2123d69ebee8f6522ee6fe/upgrade-2.png" data-mid="77407031" border="0" src="https://freight.cargo.site/w/1000/i/6c9ff563b9bc3981e72ae35411d926ef381a96188e2123d69ebee8f6522ee6fe/upgrade-2.png" /> <img width="1440" height="949" width_o="1440" height_o="949" data-src="https://freight.cargo.site/t/original/i/1f48c05320a55c70c7daa0f00820c72e0233ff1cc6057320d14bfd98a6e9e8a9/upgrade-1.png" data-mid="77407029" border="0" src="https://freight.cargo.site/w/1000/i/1f48c05320a55c70c7daa0f00820c72e0233ff1cc6057320d14bfd98a6e9e8a9/upgrade-1.png" /> Revisions to Account Upgrade Task FlowTest participants were concerned that the process of upgrading to additional Admiral services was too simple and didn’t properly convey the action’s financial weight. The revised task flow to connects users to a sales representative and an informational page. After iterating in order to address high-priority usability concerns, we felt confident enough in the final result to present our work to the client. 12Key wireframe screens fully annotated prior to final client handoff Annotated Wireframes My team was confident that our design was built on a foundation of great ideas, but we wanted to make sure we thoroughly communicated any ideas and intentions that didn’t necessarily come across in our live prototype. When we handed all of our materials off to Admiral’s staff, we included a set of annotated wireframes that articulated the intended purpose and function for every element on the dashboard’s key screens.&nbsp; Annotated Wireframes:Adblock&gt;DataI created the template and guidelines for the annotated wireframes and edited all annotations for clarity and consistency prior to submission.&nbsp; <img width="2442" height="1213" width_o="2442" height_o="1213" data-src="https://freight.cargo.site/t/original/i/706303e80a2929f4c202f25537e07db77b013c0c67aa0a301539029d6a7f4fb4/annotated-wireframes.png" data-mid="77411193" border="0" src="https://freight.cargo.site/w/1000/i/706303e80a2929f4c202f25537e07db77b013c0c67aa0a301539029d6a7f4fb4/annotated-wireframes.png" />