https://janellefloresdesigns.com Janelle Flores Sr.Product Designer/UX Fri, 07 Dec 2018 04:39:06 +0000 https://janellefloresdesigns.com en https://janellefloresdesigns.com/Home-Page Wed, 16 Aug 2017 21:47:53 +0000 Janelle Flores Sr.Product Designer/UX https://janellefloresdesigns.com/Home-Page Sr. Product Designer / UX Designer @ Insureon https://janellefloresdesigns.com/About-Janelle-Flores Wed, 11 Jan 2012 11:24:48 +0000 Janelle Flores Sr.Product Designer/UX https://janellefloresdesigns.com/About-Janelle-Flores Janelle Flores is currently a Sr. Product Designer at Insureon, embarking on her second year at the company. Leading the initiative in re-imagining Insureon’s primary user-facing web pages, Janelle is at the forefront in overhauling Insureon’s information architecture, migration to a new CMS, and visual redesign. Previous experience includes her role as a User Experience designer at Adobe Systems, focusing on the user experience for Adobe’s Creative Cloud products, enterprise offerings, marketing products, and end-user routes to self-service and support.&nbsp;Janelle entertains a passion for color and eclectic music by leaning towards work that often goes unnoticed and is unfamiliar to the average viewer. Her work contains a fine balance of effectiveness, enthusiasm, quality and quirkiness, all guided by a strong work ethic. She seeks to work on projects that desire creative solutions and need fun, fresh, and thought-provoking approaches. &nbsp; Janelle earned her Bachelor of Fine Arts in Graphic Design, Bachelor of Arts in Studio Practice, and Art Teacher Preparation at San Jose State University. Please email for a resume or any questions: janelle.c.flores@gmail.com https://janellefloresdesigns.com/Insureon-template-redesign Fri, 07 Dec 2018 04:39:06 +0000 Janelle Flores Sr.Product Designer/UX https://janellefloresdesigns.com/Insureon-template-redesign Insureon template redesign Developing a template system to be used across the Insureon ecosystem.&nbsp; The ProblemOne of my first tasks at Insureon was to assess the Insureon.com ecosystem. I found that it was bloated, as partial redesigns had been initiated throughout the Insureon ecosystem. Content was outdated and vital user information was sprinkled across many pages. There was no clear categorization of pages, or a clear linking pattern. The user journey was a “wild wild west”, lacking a clear navigational structure for our users.&nbsp; The previous partial redesign efforts resulted in many different legacy template designs, and inconsistent code structure on the back end. In the past, various page types were created as one-offs, allowing for a huge number of pages that could not be updated systematically. <img width="997" height="600" width_o="997" height_o="600" data-src="https://freight.cargo.site/t/original/i/88a8aa4ae32f3f09ac091a9988504a813b3fd5958c10706ea72ef4dc3a3c1ec0/iPhone-9.jpg" data-mid="31876975" border="0" data-scale="100" src="https://freight.cargo.site/w/997/i/88a8aa4ae32f3f09ac091a9988504a813b3fd5958c10706ea72ef4dc3a3c1ec0/iPhone-9.jpg" /> <img width="997" height="600" width_o="997" height_o="600" data-src="https://freight.cargo.site/t/original/i/cce9e1c52ecbf310f90847f28fa8e4eab4184787169269eec33449cc9d40d37b/iPhone-10.jpg" data-mid="31877362" border="0" src="https://freight.cargo.site/w/997/i/cce9e1c52ecbf310f90847f28fa8e4eab4184787169269eec33449cc9d40d37b/iPhone-10.jpg" /> There were numerous legacy template types in the Insureon ecosystem prior to the redesign. Above is just a select few. Every page attempted to act as a landing page, resulting in really long pages for the user to read, often with the same information repeated across pages. The result was a website architecture that was all one level, forcing users to really have to dig into long pages of content to find their answer. In addition, a large majority of the pages were not responsive, which really hindered Insureon in SEO.&nbsp; Identified areas for improvement: Implement a templatized strategy to the website that leverages a consistent type stylePrune the content on outdated pagesBuild leveraged components that can be updated individually across the ecosystem, allowing future updates to happen systematicallyBuild the ecosystem around a user centered global nav, establishing a clear hierarchy and purpose for each pageIdentify customer intent when they land on Insureon.com and map that to pages in the architecture <img width="1050" height="700" width_o="1050" height_o="700" data-src="https://freight.cargo.site/t/original/i/6c6d4370c71668d328c1251c312074ae3a898375aadc31ef31e7228b1b0245d4/ia-future.jpg" data-mid="32322280" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/6c6d4370c71668d328c1251c312074ae3a898375aadc31ef31e7228b1b0245d4/ia-future.jpg" /> <img width="1050" height="700" width_o="1050" height_o="700" data-src="https://freight.cargo.site/t/original/i/fe8659a8d872c6ca67e6c97e046896065591fafd69d9df3b2501410929231d6c/ia-maps-current.jpg" data-mid="32322309" border="0" src="https://freight.cargo.site/w/1000/i/fe8659a8d872c6ca67e6c97e046896065591fafd69d9df3b2501410929231d6c/ia-maps-current.jpg" /> Some of the extensive information architecture mappings during my assesment of the Insureon.com ecosystem.&nbsp; Constraints Amount of existing content One of the redesign requirements was to provide a clear hierarchy of information. This would allow users to travel farther down the Insureon content tunnel as needed. A main aspect of the business is to focus on individual small business professions and provide them with industry specific content. In some cases, we had around 40 pages of unique content to support just one profession (Insureon supports over 500 professions). Tags In the current ecosystem, there was no opportunity to add search to the page due to lack of tagging or categorized metadata present at the page level. When I met with the content lead on the project, there was hesitation to add tagging as their previous experience with tags was an added “bloat”. I explained the long term goal of search, and that search required a user facing tagging system, as well as robust metadata logic. SEO and design met with content to create a tagging system that would account for the entire ecosytem. Culture changeOne of the only metrics that the entire ecosystem was being measured on was the click-to-application (user initiates an Insureon insurance application) and the application completion ratio (user completes the entire Insureon insurance application). As Insureon continues to grow, they wanted to get more qualified candidates through their funnel. To achieve this, we had to present content higher up in the funnel. We reduced the prominence of the call to action above the fold. The existing pages had a high click-to-app rate, but low conversion of app completion. This was mainly due to the user seeing only the call to action above the fold, with any validation content below that users rarely read. The new template design reduced the call to action prominence significantly, which challenged the past business mentality that a prominent call to action was necessary to meet those metrics. Design Strategy Working with the SEO team, we knew that there were only about 4 aspects of the profession specific to small business insurance. Why that profession/industry needs business insurance Cost of business insurance for that profession/industry Recommended policies for that profession/industry State specific information that pertains to that profession/industryThese aspects needed to be addressed on one page, with a link out to further reading if the user required it. Consolidating to address all 4 aspects on one page eliminated hundreds of pages. Each document would have custom content for each industry/profession, but the visual layout would remain consistent. This concept meant that we could create each aspect in a flexible module that leveraged reusable components for each template. The four aspects identified translated to:&nbsp;Cost module. Flexible H2 with an image and supporting body text and a button link. Supports content for the cost of business insurance for that profession/industry.&nbsp;Policy cards. H3, icon and supporting body text, button link. Supports content for recommended policies for that profession/industry.&nbsp;State module. Flexible H2 with an image and supporting body text, dropdown selector, button link. Supports content for the state specific information that pertains to that profession/industry.&nbsp; Team and Stakeholders Content Team Aligned with SEO and Design to apply the tested content strategy to scale for authors. Product team Product Management was a key member of this redesign project team.&nbsp; I worked alongside a Design Manager who provided support with leadership and design feedback.SEO Led the content strategy with Design for the template design and testing strategy. Design ProcessAssessed each template and page type in the Insureon ecosystem with SEO.&nbsp; SEO generated a proposal for pages to be retired, and templates to be manually migrated to new template via hand authoring.Defined purpose of each new template based on user intent.Outlined list of components in use across all templates.&nbsp;Mapped types of existing pages to new templates designed. &nbsp;Designed and tested templates to determine improvements and metrics for each page type.Handed off components and modules with purpose, usage, detailed specifications to Engineering for technical implementation in the new CMS.Specified authoring workflows for each template and proposed designated components and modules to leverage for each. Worked with SEO to determine product and content associations that could be addressed through tagging properties in an effort to eliminate some hand authoring and create consistency across documents in the ecosystem. Explorations of template designs&nbsp; <img width="1050" height="700" width_o="1050" height_o="700" data-src="https://freight.cargo.site/t/original/i/7ca9de56e8453ce72a13cff6d216522393b6021959641551f53e3b4c39ab023a/explorations-1.jpg" data-mid="32322387" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/7ca9de56e8453ce72a13cff6d216522393b6021959641551f53e3b4c39ab023a/explorations-1.jpg" /> <img width="1050" height="700" width_o="1050" height_o="700" data-src="https://freight.cargo.site/t/original/i/0ba59e2d06aee030616a377af47e2e39a70b183cd2b48eaa5a3139813d0284ba/explorations-3.jpg" data-mid="32322397" border="0" src="https://freight.cargo.site/w/1000/i/0ba59e2d06aee030616a377af47e2e39a70b183cd2b48eaa5a3139813d0284ba/explorations-3.jpg" /> <img width="1050" height="700" width_o="1050" height_o="700" data-src="https://freight.cargo.site/t/original/i/ba3d49de371fb641ccc7f7e40d11926a633e3b5cf6b27d39d9a676111c8f4586/explorations-2.jpg" data-mid="32322395" border="0" src="https://freight.cargo.site/w/1000/i/ba3d49de371fb641ccc7f7e40d11926a633e3b5cf6b27d39d9a676111c8f4586/explorations-2.jpg" /> Some of the template design explorations.&nbsp; Universal elementsThe following elements are present throughout the redesign strategy. Global navigationInsureon’s previous global navigation was a reflection of their internal business structure. By eliminating old content, we created clear labels for the user that align to their mental model when shopping for business insurance. We also aligned Insureon’s site categories and site taxonomy to match up with users’ mental maps.&nbsp; The new global navigation was mapped to users’ search queries when seeking business insurance and tied to groups by insurance policy type, industry, and small business resources. An open card sorting test and usability testing was conducted to validate the updated structure with users. This project was a key aspect in setting a new foundation for Insureon.com. The global navigation improvements helped drive alignment across the team on Insureon’s business objectives, which in turn helped to set clear categories and page types (templates) on the website. Call to action at bottom of the pageThe call to action module catches users at the bottom of the page. This module was created to align to Insureon’s key business obective: direct qualified users to start the Insureon insurance application. User insights led us to develop a dynamic module. Depending on the page, the module can be preset with applicable industry and profession by an author. Visual Design <img width="680" height="800" width_o="680" height_o="800" data-src="https://freight.cargo.site/t/original/i/7605055e325b2a7c46ff9d180c4f096e05286be617eb207d89f346c9a76c257f/article.jpg" data-mid="31884536" border="0" data-scale="100" src="https://freight.cargo.site/w/680/i/7605055e325b2a7c46ff9d180c4f096e05286be617eb207d89f346c9a76c257f/article.jpg" /> <img width="680" height="800" width_o="680" height_o="800" data-src="https://freight.cargo.site/t/original/i/dd797a07630e1326529845cb6d35e0315de85c73a44e75a3804856351c907624/minor.jpg" data-mid="31884572" border="0" src="https://freight.cargo.site/w/680/i/dd797a07630e1326529845cb6d35e0315de85c73a44e75a3804856351c907624/minor.jpg" /> <img width="680" height="800" width_o="680" height_o="800" data-src="https://freight.cargo.site/t/original/i/5d3d92f755bc5016b430b9b6764b394328a9000959755c7518bba1a3d1fe2f16/policy.jpg" data-mid="31884548" border="0" src="https://freight.cargo.site/w/680/i/5d3d92f755bc5016b430b9b6764b394328a9000959755c7518bba1a3d1fe2f16/policy.jpg" /> <img width="680" height="800" width_o="680" height_o="800" data-src="https://freight.cargo.site/t/original/i/184801ca9f29ccfb5d9181ea5a361e34b61d35f2f3db78017b79c0a40a81a3a9/major.jpg" data-mid="31884573" border="0" src="https://freight.cargo.site/w/680/i/184801ca9f29ccfb5d9181ea5a361e34b61d35f2f3db78017b79c0a40a81a3a9/major.jpg" /> After the rationalization, four main templates (Policy template, Industry template, Profession template and Article template) were developed to handle the majority of the content in the Insureon ecosystem.&nbsp; Templates created for the Insureon ecosystemPolicy template A tabbed template built to make browsing content easier and more accessible for the user.&nbsp; This page type contains comprehensive content about a specific insurance policy. Before the redesign, there were some cases with more than 10 pages of content about one policy, with vital information sprinkled through the page.&nbsp; See the General Liability Policy page.&nbsp; Industry template A landing page for larger industries (example: Healthcare, Real Estate) that serves mainly as a router page to enable users to navigate to a more specific profession where they can access profession specific recommendations. Industry recommendations and cost data are also provided on this page type. See the Food &amp; beverage industry landing page.&nbsp;Profession template A landing page for a specific profession (example: Doctor, Landscape architect, Bar owner). Our users are more likely to land on this page first in our ecosytem, as organic search tends to align to the specific profession the user inputs. It serves as a page where we can make profession specific insurance policy recommendations, state specific information for that profession, and profession specific cost data. See the Restaurant profession landing page.&nbsp;Article template A template that serves for topic specific content that exists farther down the funnel (example: “Workers compensation for general contractors” or “How much insurance costs for dentists”). This page type allows for more content to be displayed on the page, as well as a right rail for related links, navigation by topic tags, and contact information. The breadcrumb present on the article template orients the user in the ecosystem.&nbsp;See the “General Liability for independant contractors” page. Testing With the reduced size of the call to action above the fold, we were concerned about the click-to-app rate and qualified candidates that completed an application. We decided to run usability testing on a prototype to test modules and value propositions on the page. Following that, we built the page statically, so we could A/B test against the “old” template. When reviewing the test results, we saw that users were actually reading and consuming more content than they had in the previous template. Users were also able to understand Insureon's main value propositions upon landing on the page. This was something that was not achieved previously in previous template designs. ConclusionOne the best improvements for our user was the global navigation changes that increased findability on the site. Matching users’ search intent led to a positive user experience on the site. In addition, the new breadcrumb in the article would consistently make it clear to the user where they were on Insureon’s website at all times. Exposing the content team to the global navigation project helped to drive prioritization of pages for authors. Each page on the site now has a clear purpose, intent, and categorization which will help to eliminate some of the content “bloat” that we had experienced previously.&nbsp; With the four main templates tested and validated, the next step is having engineering migrate these designs to the newly selected CMS. Once large amounts of content are in a new ecosystem, we can move users through our funnel more effectively. Using the capabilites of a robust CMS and applied analytics, monitoring trends and identifying improvements will continue.&nbsp;<img width="0" height="0" width_o="0" height_o="0" data-src="https://freight.cargo.site/t/original/i/df7ab89bedb412a41fe9d07e0e145d0cdef8d88579f70803edec6a641f490274/iPhone-10.jpg" data-mid="31876980" border="0" src="https://freight.cargo.site/w/0/i/df7ab89bedb412a41fe9d07e0e145d0cdef8d88579f70803edec6a641f490274/iPhone-10.jpg" /> https://janellefloresdesigns.com/Insureon-s-value-proposition-development Tue, 04 Dec 2018 19:43:23 +0000 Janelle Flores Sr.Product Designer/UX https://janellefloresdesigns.com/Insureon-s-value-proposition-development Value Proposition development&nbsp; Establishing and developing Insureon’s value props.&nbsp; The ProblemIn my first year at Insureon, there was a clear need for non-biased user testing on a variety of aspects of the business. While assessing the redesign for Insureon’s front facing website, we needed to gain an understanding of the user’s mental model when searching for small business insurance.&nbsp; This would provide insight into a few things about our users: The natural language users leverage to search for small business insurance.Search keywords used when looking for small business insurance.Users’ navigation paths to our competitors and how they perceive those webpages.What users hope to do and what they hope to learn when searching for small business insurance. Usability studyWe recruited 19 small business owners and gave each participant a mix of tasks and survey questions. Participants were asked to use think aloud protocol for tasks. Insights Users often search with their own state specifically in the search query. As many users were navigating their search results, they would bypass the first two results while acknowledging that they did not like clicking on “paid ads”. Insureon at the time was invested in paid ad placement, so that was a really great insight for our business to hear from users first hand. One interesting behavior was observed while watching users navigate the search results. For the first time, stakeholders were seeing that Insureon was presenting itself as a single carrier, appearing as a competitor to some of the single insurance carriers. Insureon should be presenting itself as a one stop option to compare multiple quotes from the best carriers. Had someone perhaps pointed this out in a meeting, it would have not been as impactful as the stakeholders being shown video of our users demonstrating this positioning first hand, so this felt like a solid win. <img width="2046" height="1520" width_o="2046" height_o="1520" data-src="https://freight.cargo.site/t/original/i/018416f760567b351a3dace28dd1d7562d40e4953da645947f507d4d392b6cda/Screen-Shot-2018-12-04-at-4.11.14-PM.png" data-mid="29911605" border="0" src="https://freight.cargo.site/w/1000/i/018416f760567b351a3dace28dd1d7562d40e4953da645947f507d4d392b6cda/Screen-Shot-2018-12-04-at-4.11.14-PM.png" />One view into what our users were seeing when they navigated search results. Insureon was positioned as a single carrier, rather than a one stop destination to compare multiple quotes from the best carriers.&nbsp; Culture ChangePart of this test was to initiate a mental shift for our content strategy stakeholders. There was a perception that we should not be reiterating our businesses value proposition as it was viewed as “repetitive”. After having content stakeholders watch the videos first hand, they could see the value of presenting and reiterating the value propositions consistently throughout the user experience.&nbsp; Result From this study, there was acknowledgment from content that Insureon had not consistently establed value propositions and needed clarity around that initiative. This led to an office wide workshop with the customer experience team on how to develop value propositions for Insureon. This workshop brought Insureon’s different teams together and created an opprotunity to correct the disconnects around who our key customers were, what they were looking for, and how we should present ourselves.&nbsp; Team and Stakeholders Content Team The content team looks for insights from SEO and UX to guide the content strategy. Educating and guiding the content strategy to a user focused strategy is the main goal of the value proposition excercise.&nbsp;Product team Product Management is a key member of this value proposition exercise. &nbsp;&nbsp; Value proposition office exerciseI intended to have this exercise be a working session for all members of the Silicon Valley office. Having the entire team participate would ensure that all team members felt involved in the solution, and drive alignment on what the main value propositions are that the company would focus on. Education was a main focus of this exercise, as all the teams had differing ideas of who our customers were, what problem we solve for our customers, and which key business values we wanted to highlight.&nbsp; <img width="4032" height="3024" width_o="4032" height_o="3024" data-src="https://freight.cargo.site/t/original/i/f871152bde7a735579fc3d008e84f9748cc0388bc65dec3aece45c6e1971d0b2/IMG_4174.JPG" data-mid="29901548" border="0" src="https://freight.cargo.site/w/1000/i/f871152bde7a735579fc3d008e84f9748cc0388bc65dec3aece45c6e1971d0b2/IMG_4174.JPG" /> Some of the office’s statements for “What problem Insureon solves for customers”.&nbsp; Insureon team members were asked to identify: “Who the target buyer is”, “what problem Insureon solves”, and the “reasons Insureon is best for the job”. After the individual team members wrote down their own ideas on post-its, I would provide members with the data and research we had around each item.&nbsp;Create a value proposition by compiling the three itemsApply value propositions created in a headline, subhead, Call to action buttons, and body text.&nbsp;Review &amp; discuss all team value propositions as a group Testing value propositions&nbsp;After the value proposition exercise with the various teams, Design evolved and developed value props to test. Illustrations were commissioned to accompany the value props. We tested the new value props against the current homepage. In the usability test we wanted to test the hypothesis that users would understand the problem Insureon was solving, and why Insureon was best for the job. The homepage at the time did not communicate Insureon’s value propositions effectively.&nbsp; 20 people participated in the study. Participants were split into two groups then given one of the sites to view, providing the business with insights on both the test and live page. A series of open ended questions and survey questions followed.&nbsp; <img width="1532" height="1152" width_o="1532" height_o="1152" data-src="https://freight.cargo.site/t/original/i/caef665f04532f6743e078da5ca9fc61e8441b6d355d96711564d59b1ec54ce2/Screen-Shot-2018-12-04-at-4.23.20-PM.png" data-mid="29912047" border="0" src="https://freight.cargo.site/w/1000/i/caef665f04532f6743e078da5ca9fc61e8441b6d355d96711564d59b1ec54ce2/Screen-Shot-2018-12-04-at-4.23.20-PM.png" /> <img width="1532" height="1152" width_o="1532" height_o="1152" data-src="https://freight.cargo.site/t/original/i/ecb5bdca47639a978a80fcf33fe2ea99c5bb4c3a39e44b9f4497138ba928617d/Screen-Shot-2018-12-04-at-4.23.28-PM.png" data-mid="29912108" border="0" src="https://freight.cargo.site/w/1000/i/ecb5bdca47639a978a80fcf33fe2ea99c5bb4c3a39e44b9f4497138ba928617d/Screen-Shot-2018-12-04-at-4.23.28-PM.png" /> <img width="1438" height="584" width_o="1438" height_o="584" data-src="https://freight.cargo.site/t/original/i/a94764238421c073ac19be674f7c9fa99f1448c7dc16ce0a98702128125000d5/Screen-Shot-2018-12-04-at-4.23.44-PM.png" data-mid="29912113" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/a94764238421c073ac19be674f7c9fa99f1448c7dc16ce0a98702128125000d5/Screen-Shot-2018-12-04-at-4.23.44-PM.png" /> Participants were split into two groups. Participants were given one of the sites to view: live site or test site with new value propositions.&nbsp; The Result Overall, the new value prop test page was more successful in communicating Insureon’s value to users. We gained insights on the illustrations that were used in the test as well, which led us down a path to commission clean, more simplified images.&nbsp;<img width="916" height="368" width_o="916" height_o="368" data-src="https://freight.cargo.site/t/original/i/1da00d9b4633c4fdbc13a3ae6ccca81e5d696a0b5cb8b234f6a3bca074c666ef/Screen-Shot-2018-12-04-at-4.24.14-PM.png" data-mid="31888101" border="0" src="https://freight.cargo.site/w/916/i/1da00d9b4633c4fdbc13a3ae6ccca81e5d696a0b5cb8b234f6a3bca074c666ef/Screen-Shot-2018-12-04-at-4.24.14-PM.png" />Final value proposition module that was further enhanced after learnings from the usability test. The value propositions were added in two places on our live site: the Homepage, and the Small Business Policies page. The homepage application start metric (users that start an insurance application on Insureon’s website) increased from 3.22% to 3.61% after placing the value propositions on the page. The homepage application complete metric (users that completed an entire application for insurance quotes) increased from 8.07% to 8.21%. On the Small Business Policies page we saw an increase from&nbsp;13.27% to 14.73% in the application complete metric.&nbsp;&nbsp;&nbsp;&nbsp; <img width="928" height="1120" width_o="928" height_o="1120" data-src="https://freight.cargo.site/t/original/i/91fc14b6bdaefb5da26234ac1786878bca22703d96e24c777f607067d991ce1d/Screen-Shot-2018-12-04-at-4.38.43-PM.png" data-mid="29913104" border="0" src="https://freight.cargo.site/w/928/i/91fc14b6bdaefb5da26234ac1786878bca22703d96e24c777f607067d991ce1d/Screen-Shot-2018-12-04-at-4.38.43-PM.png" /> <img width="3078" height="2422" width_o="3078" height_o="2422" data-src="https://freight.cargo.site/t/original/i/212439998a3f1c08468d50c5e6ba8580d6740bc5d93188e627d405bd691896a5/Screen-Shot-2019-01-04-at-3.03.27-PM.png" data-mid="31875484" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/212439998a3f1c08468d50c5e6ba8580d6740bc5d93188e627d405bd691896a5/Screen-Shot-2019-01-04-at-3.03.27-PM.png" /> The value propositions were added in two places on our live site: the Homepage, and the Small Business Policies page. &nbsp; ConclusionThe design team has identified further value props and pages to test on a regular testing schedule: value props that appear in article content and other landing pages. More evangelising has to be done around the value propositions across the company and align all Insureon collateral to a clear voice.&nbsp; As Insureon starts to hone in on its visual style, we anticipate changes with the illustration style in the future. &nbsp; https://janellefloresdesigns.com/Adobe-Help-article-redesign Thu, 17 Aug 2017 20:55:42 +0000 Janelle Flores Sr.Product Designer/UX https://janellefloresdesigns.com/Adobe-Help-article-redesign Adobe Help article redesign Creating a universal template solution for Help content.&nbsp; The Problem The Help Article redesign had several mandates: drive find-ability via search, start to drive a consistent user experience across all global support content, enable users to consume support content responsively, build a scalable infrastructure, and align the redesign with the Adobe.com aesthetic. The help ecosystem prior to the redesign had several versions of help articles that lived in several different variations of templates and visual styles. After completing a scrub of all existing templates across the help ecosystem, the team discovered that there were 18 different template types being leveraged for help articles. This visual inconsistency was confusing to the user when attempting to navigate the self-help ecosystem.&nbsp;The purpose of the Article Template in the Adobe ecosystem is to serve as the “solution” page. It does not serve as a router to other pages or as a hub page. The article page’s purpose is to provide answers for a specfic topic or question. If a page started to cover a wide range of issues, content authors were encouraged to break the content up into separate articles.&nbsp; <img width="1422" height="382" width_o="1422" height_o="382" data-src="https://freight.cargo.site/t/original/i/e691c9b66739cb823348d4395d9b07449fd1b4e726a1d2bb0ad71245f20b273e/Artboard-1.png" data-mid="2667081" border="0" src="https://freight.cargo.site/w/1000/i/e691c9b66739cb823348d4395d9b07449fd1b4e726a1d2bb0ad71245f20b273e/Artboard-1.png" /> There were 18 total article template types in the Help ecosystem prior to the redesign. Above is just a select few. Constraints MVP “state” Historically, templates were created to serve different types of help content: how-to, account management, download and install, product features, error articles, FAQs, etc. The goal was to design an article template that would serve all of the authors’ content needs while maintaining visual consistency for our users. Due to a lack of author resources dedicated to such a large volume of content, we had to migrate all existing articles in various templates into a single template. This meant that we could not spend the same amount of resources to optimize the template to its ideal state, but instead the new article template had to flex to take in many different content streams.&nbsp; Culture ChangePart of this project included an author mindset and culture change, meaning that authors had to be sold on the idea that this single article template could serve all their needs. Many authors had specific workflows they wanted the template to support, and they were accustomed to having full reign of nearly any template appearance at their fingertips. Authors were also in the habit of creating custom looks and styles to support their content. Our challenge to the authors was to do the reverse: write content in a way that maps to the new template structure. Team and Stakeholders Content Team The content team gave numerous insights on the author workflow. I looked to this group to give feedback regarding the authorable aspects of the template. The content team was the liason between the Product team, UX team, and the authors.Product team I worked alongside a Design Manager who provided support with leadership and feedback. I relied on UX team reviews and feedback from my other User Experience colleagues. &nbsp;Product Management and Program Management were also key members of this redesign project team. &nbsp;A key Localization member was also consulted to ensure we were considering our international stakeholders.&nbsp;Engineering Team The Engineering team supporting this effort did an innumerous amount of technical mapping for the migration of the old templates to the new Help article template.&nbsp; Design ProcessReviewed Authoring Workflows provided by the authorsConducted assessment of each template in the Help Ecosystem and generated proposal for templates to be retired, templates to be migrated to the new article template via script, and templates to be manually migrated in the new template via hand authoringWorked with Content Strategy team to outline list of all components in use across templates, and propose components to be retired from system vs. kept for use going forward. &nbsp;Each component with proposal to retire included a mapping to a component that would exist in new article template, which was then handed off to Engineering for technical mapping of the scripted migration. Each component with proposal to keep in new article template had purpose and usage of component defined by UX. &nbsp;More about this here.Determined product and content associations that could be addressed through tag properties, which would eliminate some hand authoring and create consistency across documents in the ecosystem.&nbsp; Many wish-list items were not in scope for Engineering due to resource constraints, like a tool bar feature in the header (see below). Due to right rail contraints in the prototype, we had to reduce the information to present only the table of contents. The inclusion of a tag cloud was denied due to the fact that there was not enough bandwidth to tag thousands of articles.In the design evolution, the page title presentation had to move due to accessibility and to accommodate the large number of locales that have to be supported in the content ecosystem. &nbsp;The product association on the right rail, called “Applies to”, was promoted lower on the right rail, and the visual mneumonic was dropped. The breadcrumb moved to the top of the page, due to the demotion of the page title. Search moved to sit with the title in an effort to slim down the header and to promote search on the template.&nbsp; <img width="1442" height="1209" width_o="1442" height_o="1209" data-src="https://freight.cargo.site/t/original/i/90fac34a96f54930da991697308b99132ae9d32d128b887cd8fc80aef776f1e7/Artboard-8-100.jpg" data-mid="3149240" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/90fac34a96f54930da991697308b99132ae9d32d128b887cd8fc80aef776f1e7/Artboard-8-100.jpg" /> <img width="1442" height="1209" width_o="1442" height_o="1209" data-src="https://freight.cargo.site/t/original/i/6e423bb89fc5be9b52dda6f057b9089b80d2382800dc07d1410d906e1397f3f1/Artboard-9-100.jpg" data-mid="3149241" border="0" src="https://freight.cargo.site/w/1000/i/6e423bb89fc5be9b52dda6f057b9089b80d2382800dc07d1410d906e1397f3f1/Artboard-9-100.jpg" /> <img width="1442" height="1209" width_o="1442" height_o="1209" data-src="https://freight.cargo.site/t/original/i/07ae584353f7a4727cc3d80764f9ce0023f0edda640e1a9a86156448e23c08f9/Artboard-10-100.jpg" data-mid="3149242" border="0" src="https://freight.cargo.site/w/1000/i/07ae584353f7a4727cc3d80764f9ce0023f0edda640e1a9a86156448e23c08f9/Artboard-10-100.jpg" /> <img width="1441" height="1209" width_o="1441" height_o="1209" data-src="https://freight.cargo.site/t/original/i/069d36badaf78c1af967c0bcb00e2790129e192145a84f6ec83b958dec5b96a7/Artboard-11-100.jpg" data-mid="3149243" border="0" src="https://freight.cargo.site/w/1000/i/069d36badaf78c1af967c0bcb00e2790129e192145a84f6ec83b958dec5b96a7/Artboard-11-100.jpg" /> <img width="1442" height="1209" width_o="1442" height_o="1209" data-src="https://freight.cargo.site/t/original/i/59dc9d8b86d7e0d5f2d16b8d0fa6ba8aa9a4e7454807d45d4ccf5de053d13c2a/Artboard-12-100.jpg" data-mid="3149244" border="0" src="https://freight.cargo.site/w/1000/i/59dc9d8b86d7e0d5f2d16b8d0fa6ba8aa9a4e7454807d45d4ccf5de053d13c2a/Artboard-12-100.jpg" /> Design evolution of the Article template.&nbsp; Visual Design <img width="1399" height="1140" width_o="1399" height_o="1140" data-src="https://freight.cargo.site/t/original/i/34f567fbfe9f10fa766e42b143edf706295728f29a59c35848c326fa887f3598/Screen-Shot-2017-08-18-at-11.57.34-AM.png" data-mid="2667609" border="0" src="https://freight.cargo.site/w/1000/i/34f567fbfe9f10fa766e42b143edf706295728f29a59c35848c326fa887f3598/Screen-Shot-2017-08-18-at-11.57.34-AM.png" />After rationalization, all 18 templates were mapped and migrated to one global, responsive article template. See them&nbsp;here live.&nbsp; Main template elements for the Help article:Universal header Clearly states the title of the article. Search is prevalent for user ease and to encourage browsing. Header is “sticky” on scroll, to account for the long length of the content articles. Contextual footer Orients the user with content product help links and relevant product links. Contact support links and relevant product forum links were also included.&nbsp; Contextual right rail Due to the long length of the article content, user data reflected the users’ desire to jump to specific sections of an article based on what seemed most relevant to them. Having a persistent right rail allows the user to scan section titles in the table of contents for parts of the document specific to them to browse directly to. See some of the before/after redesign comparisons here:&nbsp; <img width="1210" height="776" width_o="1210" height_o="776" data-src="https://freight.cargo.site/t/original/i/a584e2a1bf772eb402fc9a4d0a1d4ee79a8ada0511b292e3597f4bb746ee6b54/Artboard-2.png" data-mid="2668090" border="0" src="https://freight.cargo.site/w/1000/i/a584e2a1bf772eb402fc9a4d0a1d4ee79a8ada0511b292e3597f4bb746ee6b54/Artboard-2.png" /> <img width="1209" height="776" width_o="1209" height_o="776" data-src="https://freight.cargo.site/t/original/i/f24ee4b5cbfeb0ba48da66d1344498e960ec839b2aa92e0a76d13c14cf6e7ce0/Artboard-3.png" data-mid="2668091" border="0" src="https://freight.cargo.site/w/1000/i/f24ee4b5cbfeb0ba48da66d1344498e960ec839b2aa92e0a76d13c14cf6e7ce0/Artboard-3.png" /> <img width="1210" height="776" width_o="1210" height_o="776" data-src="https://freight.cargo.site/t/original/i/2e1de8f77fe201de6ef4eb8baab2a04f2f16248c8dd852e30e598d186b612cfd/Artboard-5.png" data-mid="2668093" border="0" src="https://freight.cargo.site/w/1000/i/2e1de8f77fe201de6ef4eb8baab2a04f2f16248c8dd852e30e598d186b612cfd/Artboard-5.png" /> <img width="1210" height="776" width_o="1210" height_o="776" data-src="https://freight.cargo.site/t/original/i/e281bfa7b49b5c67b74fc05ca71117ec85c07e0e1b888d22a721bb8321100ebb/Artboard-7.png" data-mid="2668095" border="0" src="https://freight.cargo.site/w/1000/i/e281bfa7b49b5c67b74fc05ca71117ec85c07e0e1b888d22a721bb8321100ebb/Artboard-7.png" /> <img width="1209" height="776" width_o="1209" height_o="776" data-src="https://freight.cargo.site/t/original/i/3ecec909cd77752a9f44b54d1e0b4d8e6993dce5c394abc60844b5daf93c468a/Artboard-6.png" data-mid="2668094" border="0" src="https://freight.cargo.site/w/1000/i/3ecec909cd77752a9f44b54d1e0b4d8e6993dce5c394abc60844b5daf93c468a/Artboard-6.png" /> <img width="1210" height="538" width_o="1210" height_o="538" data-src="https://freight.cargo.site/t/original/i/25495073267c64c6af89cba03f7e6563b025c9ffdae3a38f5f202ce18c2a3b78/Artboard-4.png" data-mid="2668092" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/25495073267c64c6af89cba03f7e6563b025c9ffdae3a38f5f202ce18c2a3b78/Artboard-4.png" /> See them live:&nbsp;Adobe Capture FAQ, Creative Cloud Libraries, Fix color casts, Flash Player Help, “Error Compiling movie”, Adobe ID account and sign-in troubleshooting The Result As pages were being migrated from old templates to the new article template, positive ratings on the pages were increasing by 5% in some cases, specifically for the Adobe Illustrator, Photoshop, and Lightroom content. &nbsp;International content in the new template saw overall increase in positive ratings. Bounce rates in the new article template dropped as well. Time Spent on page increased from 11% to 14%, and traffic from search increased on new article templates as a result of the improved page structure.Retrospective AuthorsThough the redesign had key content players, the authors felt misinformed about the elimination of the template flexibility. I wish socialization to authors about the goal of the project and the intent to increase user consumption had been emphasized more and managed continually through the project.&nbsp;Migration Even though we achieved the goal of the migration of thousands of pages into the new template, we still were not able to “fit” some content into the new visual presentation. Many pages still require a hand authoring touch in order to adhere to the visual style of the new template. &nbsp; https://janellefloresdesigns.com/Adobe-Help-article-Component-rationalization Fri, 18 Aug 2017 22:04:06 +0000 Janelle Flores Sr.Product Designer/UX https://janellefloresdesigns.com/Adobe-Help-article-Component-rationalization Adobe Help article redesign - component rationalizationCreate a consolidated, optimized set of components to leverage in the Help article.&nbsp;The problem The Help Article redesign had several mandates: drive find-ability via search, start to drive a consistent user experience across all global support content, enable users to consume support content responsively, build a scalable infrastructure, and align the redesign with the Adobe.com aesthetic. To learn about the template rationalization portion of this project, read more about it here. To ensure a consistent user experience, it was essential to have a consolidated component inventory that could be leveraged across the Help ecosystem. After completing a scrub of all components that existed, we discovered there was a total of 92 components. It was acknowledged by the team that maintaining this huge inventory was not scalable, that the mass quantity of components contributed to visual inconsistency, and there was a much needed rationalization of these components for the new re-designed Help Article. Team and stakeholders Content teamThe content team gave numerous insights on the author workflow. I looked to this group to give feedback regarding the authorable aspects of the template. The content team was the liason between the Product team, UX team, and the authors. Product teamI worked alongside a Design Manager who provided support with leadership and feedback. I relied on UX team reviews and feedback from my other User Experience colleagues. &nbsp;Product Management and Program Management were also key members of this redesign project team.&nbsp; Engineering team The Engineering team worked on the technical mappings of merged components, and retiring components from the ecosystem.&nbsp; The Design Process Upon investigation of all the inconsistencies of visuals across all the help articles, it was a common theme to see many components used in ways that strayed from their intended purpose. For example: authors used the table component in different variations to create different formatting presentations and in some cases, used a hub router presentation on an article. There were several permeations of “related link” presentations across Help articles as well, with 4-5 different title usages.&nbsp;Key actions:&nbsp; Conduct an inventory of all existing componentsIdentify which components can be merged, or eliminated due to duplicationIdentify the improvements that can be made to a component to optimize its useEliminate features in components that were creating visual disparity on templatesTry to identify the most “abused” features of components by authors and see if standardizing would help improve visual consistencyIdentify which components were not responsive, and improve The resultAfter the rationalization, the previous total of 92 components was reduced to 28 manageable components for the Help Article. To do this, the author workflow had to be taken into account. Many of the 92 components were merged during a migration to ensure existing content could inherit the new 28 redesigned components. The 28 components had to consider and address all author workflows, but also ensure visual consistency when used.&nbsp; <img width="1210" height="743" width_o="1210" height_o="743" data-src="https://freight.cargo.site/t/original/i/29f8f2e7aaf5114227c4a72c0ceabb0dbf34f9aab9aa74bdb7368aac98a426e4/Artboard-8-100.jpg" data-mid="3048656" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/29f8f2e7aaf5114227c4a72c0ceabb0dbf34f9aab9aa74bdb7368aac98a426e4/Artboard-8-100.jpg" /> <img width="1209" height="743" width_o="1209" height_o="743" data-src="https://freight.cargo.site/t/original/i/5903d6e5ac0545b392546b4424dfe225abf34aaff98e4f0c16c95be653d770d4/Artboard-10-100.jpg" data-mid="3048659" border="0" src="https://freight.cargo.site/w/1000/i/5903d6e5ac0545b392546b4424dfe225abf34aaff98e4f0c16c95be653d770d4/Artboard-10-100.jpg" /> <img width="1209" height="743" width_o="1209" height_o="743" data-src="https://freight.cargo.site/t/original/i/906711fb460e9550867887c3a9570d11a668245f5f2803e6f7d435a1d020d061/Artboard-11-100.jpg" data-mid="3048660" border="0" src="https://freight.cargo.site/w/1000/i/906711fb460e9550867887c3a9570d11a668245f5f2803e6f7d435a1d020d061/Artboard-11-100.jpg" /> <img width="1209" height="743" width_o="1209" height_o="743" data-src="https://freight.cargo.site/t/original/i/28bd42859e1382ff550a67b62801d969f9b7b1f1faf94929c68007679773eb8a/Artboard-12-100.jpg" data-mid="3048949" border="0" src="https://freight.cargo.site/w/1000/i/28bd42859e1382ff550a67b62801d969f9b7b1f1faf94929c68007679773eb8a/Artboard-12-100.jpg" /> <img width="1209" height="743" width_o="1209" height_o="743" data-src="https://freight.cargo.site/t/original/i/1ec6b5b0807d7aaa772c04cdb906e4eb9187bd72a48ac452fe65327ae2a4ef94/Artboard-9-100.jpg" data-mid="3048657" border="0" src="https://freight.cargo.site/w/1000/i/1ec6b5b0807d7aaa772c04cdb906e4eb9187bd72a48ac452fe65327ae2a4ef94/Artboard-9-100.jpg" /> Some examples of the component redesign Retrospective The first phase of the migration was completed. Many components could not be retired because they either required a complete migration or complete retirement of the templates they were used in. On some newly migrated pages you can see remnants of the old visual components because hand authoring is required to truly adhere to the new visual design.&nbsp; Now that authors have spent some time in the new template, they have been requesting fine tuning to components. These improvements are slated for future UX enhancements to start iterating on these components.&nbsp; https://janellefloresdesigns.com/Visual-Dictionary-for-Adobe-Illustrator Wed, 14 Jan 2015 07:54:25 +0000 Janelle Flores Sr.Product Designer/UX https://janellefloresdesigns.com/Visual-Dictionary-for-Adobe-Illustrator Visual Dictionary for Adobe Illustrator Instructional illustrations for the Adobe Illustrator Visual Dictionary. The terms were featured and accessible within the actual Adobe Illustrator app itself. For new users to Adobe Illustrator, some of the terminology in the app may need some explanation. Research shows that users have a higer recall when content is grouped with associated images. &nbsp; Each term in the Adobe Visual dictionary uses a simple illustration accompanied by a simple definition. Examples were: "What are swatches?", "What are art boards?", and "What is kerning?". <img width="1050" height="837" width_o="1050" height_o="837" data-src="https://freight.cargo.site/t/original/i/ef863e9886cc152833f9b7506e37b6fef5af90814ff90ebb03600453905c6b1d/Visual-dictionary-1.jpg" data-mid="2585985" border="0" src="https://freight.cargo.site/w/1000/i/ef863e9886cc152833f9b7506e37b6fef5af90814ff90ebb03600453905c6b1d/Visual-dictionary-1.jpg" /> <img width="1050" height="837" width_o="1050" height_o="837" data-src="https://freight.cargo.site/t/original/i/e6e2c244c572692f8b96cd14096de356c8760717c30ee5cd70d61f2b2d5be62d/Visual-dictionary-2.jpg" data-mid="2586909" border="0" src="https://freight.cargo.site/w/1000/i/e6e2c244c572692f8b96cd14096de356c8760717c30ee5cd70d61f2b2d5be62d/Visual-dictionary-2.jpg" /> <img width="1050" height="837" width_o="1050" height_o="837" data-src="https://freight.cargo.site/t/original/i/b5858101a5980313b8ee10154297c32723fd7f6f6a164f7c9d9369214eaef51a/Visual-dictionary-3.jpg" data-mid="2586911" border="0" src="https://freight.cargo.site/w/1000/i/b5858101a5980313b8ee10154297c32723fd7f6f6a164f7c9d9369214eaef51a/Visual-dictionary-3.jpg" /> What are swatches? - How it appeared in the Illustrator application upon first load <img width="1050" height="837" width_o="1050" height_o="837" data-src="https://freight.cargo.site/t/original/i/0d6c6ee668dfa415d3ac21607c4653a06eac336b2dda13c1887835f9da85c422/Visual-dictionary-what-are-artboards.jpg" data-mid="2585984" border="0" src="https://freight.cargo.site/w/1000/i/0d6c6ee668dfa415d3ac21607c4653a06eac336b2dda13c1887835f9da85c422/Visual-dictionary-what-are-artboards.jpg" /> What are artboards? - Current representation on Adobe site today <img width="4358" height="2583" width_o="4358" height_o="2583" data-src="https://freight.cargo.site/t/original/i/2c1637a320ccedab1c381e7be44c367a7d9466cd9cd9abf1a10ad728c7f72b08/VD_kerning_1046x620-09.png" data-mid="2532038" border="0" data-scale="60" src="https://freight.cargo.site/w/1000/i/2c1637a320ccedab1c381e7be44c367a7d9466cd9cd9abf1a10ad728c7f72b08/VD_kerning_1046x620-09.png" /> What is kerning? <img width="4358" height="2583" width_o="4358" height_o="2583" data-src="https://freight.cargo.site/t/original/i/9f82e019db6d4ec197177dd92098829299e31f562ad9d4d8e158abcd19661e6a/VD_package_1046x620-05.png" data-mid="2532037" border="0" data-scale="60" src="https://freight.cargo.site/w/1000/i/9f82e019db6d4ec197177dd92098829299e31f562ad9d4d8e158abcd19661e6a/VD_package_1046x620-05.png" /> What is a package? <img width="4358" height="2583" width_o="4358" height_o="2583" data-src="https://freight.cargo.site/t/original/i/8e2123e979f1ca60ba03b8a8fcf69ce3b318df2607f654dac073658e3a8ab402/VD-_transform_1046x620-04.png" data-mid="2532040" border="0" data-scale="60" src="https://freight.cargo.site/w/1000/i/8e2123e979f1ca60ba03b8a8fcf69ce3b318df2607f654dac073658e3a8ab402/VD-_transform_1046x620-04.png" /> What is transform? <img width="4358" height="2583" width_o="4358" height_o="2583" data-src="https://freight.cargo.site/t/original/i/2668d4fd7a9bac15a252b0533006e86d01d9a7aead810a87ce4b561d10d9bb6e/VD-_stroke_1046x620-03.png" data-mid="2532041" border="0" data-scale="60" src="https://freight.cargo.site/w/1000/i/2668d4fd7a9bac15a252b0533006e86d01d9a7aead810a87ce4b561d10d9bb6e/VD-_stroke_1046x620-03.png" /> What is a stroke? <img width="4358" height="2583" width_o="4358" height_o="2583" data-src="https://freight.cargo.site/t/original/i/aa99120a31ac0c75613ed6b20246797c027ad4ded9817e82004d7d44db7449b4/VD-_shapebuilder_1046x620-10.png" data-mid="2532042" border="0" data-scale="60" src="https://freight.cargo.site/w/1000/i/aa99120a31ac0c75613ed6b20246797c027ad4ded9817e82004d7d44db7449b4/VD-_shapebuilder_1046x620-10.png" /> What is the shape builder? <img width="4358" height="2583" width_o="4358" height_o="2583" data-src="https://freight.cargo.site/t/original/i/7705b784781efe5e9f90eae794bee703f3aa5ab4a4c5695d8f8ad0ddb8d306af/VD-_kuler_1046x620-07.png" data-mid="2532043" border="0" data-scale="60" src="https://freight.cargo.site/w/1000/i/7705b784781efe5e9f90eae794bee703f3aa5ab4a4c5695d8f8ad0ddb8d306af/VD-_kuler_1046x620-07.png" /> What is Kuler? <img width="4358" height="2583" width_o="4358" height_o="2583" data-src="https://freight.cargo.site/t/original/i/d06074b7c1667c62e70f0efac9d8a4419051d48ff577a423399532229cf03877/VD-_fill_1046x620-02.png" data-mid="2532044" border="0" data-scale="60" src="https://freight.cargo.site/w/1000/i/d06074b7c1667c62e70f0efac9d8a4419051d48ff577a423399532229cf03877/VD-_fill_1046x620-02.png" /> What is fill? <img width="4358" height="2583" width_o="4358" height_o="2583" data-src="https://freight.cargo.site/t/original/i/b4d500088f8e1af2bfc1b1d6df9b51dd7d3d1de7560090b084cafdf87657dfd8/VD-_drop-shadow_1046x620-08.png" data-mid="2532045" border="0" data-scale="60" src="https://freight.cargo.site/w/1000/i/b4d500088f8e1af2bfc1b1d6df9b51dd7d3d1de7560090b084cafdf87657dfd8/VD-_drop-shadow_1046x620-08.png" /> What is dropshadow? <img width="4358" height="2583" width_o="4358" height_o="2583" data-src="https://freight.cargo.site/t/original/i/af5c81c99040d82e7fb05d2c0c20ea5d1ad6547c40013af28c10bcf6225f7af3/VD-_bleed_1046x620-06.png" data-mid="2532046" border="0" data-scale="60" src="https://freight.cargo.site/w/1000/i/af5c81c99040d82e7fb05d2c0c20ea5d1ad6547c40013af28c10bcf6225f7af3/VD-_bleed_1046x620-06.png" /> What is bleed? https://janellefloresdesigns.com/Product-User-Guide Mon, 28 Aug 2017 03:04:27 +0000 Janelle Flores Sr.Product Designer/UX https://janellefloresdesigns.com/Product-User-Guide Product User GuideCreating a product self-help destination for Adobe’s end users. The Problem&nbsp; Through testing of the ecosystem before the redesign, user feedback reflected user expectations of “guides” to be available per product. Authors were creating link heavy pages as a way of offering one location for users to route to self-help resources and documentation for each product. Through click map and heat map data, it was identified that the existing pages were not being read through the entire length of the page, so anything below the fold was often not receiving the appropriate traffic. The redesign would need to entice users to browse the depth of content offered to them, and when users needed to find a relevant topic article they could do so easily. <img width="1210" height="776" width_o="1210" height_o="776" data-src="https://freight.cargo.site/t/original/i/29c8b713ec2a8f97e5779279156216bf69c62bafbe8fa72853736c0cd3ce4baa/Artboard-2-100.jpg" data-mid="3052819" border="0" src="https://freight.cargo.site/w/1000/i/29c8b713ec2a8f97e5779279156216bf69c62bafbe8fa72853736c0cd3ce4baa/Artboard-2-100.jpg" /> <img width="1209" height="776" width_o="1209" height_o="776" data-src="https://freight.cargo.site/t/original/i/8b09260205e64b1f8483b1841dcfad73df3d61406816cab28e6ac34e95efa4aa/Artboard-3-100.jpg" data-mid="3052821" border="0" src="https://freight.cargo.site/w/1000/i/8b09260205e64b1f8483b1841dcfad73df3d61406816cab28e6ac34e95efa4aa/Artboard-3-100.jpg" /> Photoshop User Guide and Acrobat User Guide Constraints Make it “dynamic”&nbsp; One of the key business requirements was to make the user guide dynamic. This meant that key topic tags would pull in all the tagged articles for that topic to a page of a user guide. Our article content at the time was bogged down heavily by legacy tags, unused tags, and in some cases articles were not correctly tagged. The topic tags that were being leveraged were not tested for ideal user comprehension. We knew that users did not understand our topic labeling by testing data, but it would require too much effort to go through a tag rationalization at the time of this project.&nbsp;Make the user guide “persistent” in the user journey Another business requirement was to make the user aware whenever they were consuming an article that was part of a “user guide”. When a user clicks a link within the user guide and navigates to a Help article, can the user easily navigate back to that user guide?&nbsp; Team and Stakeholders Content TeamThe content team gave numerous insights on the author workflow for user guide. Understanding the way authors planned user guide topic sections and tagged content was key to updating the authoring workflow for this template. The UX team looked to this group to give feedback regarding the authorable aspects of the template. The Content team was the liason between the Product team, UX team, and the authors. Product teamI worked alongside a Design Manager who provided support with leadership and feedback. I relied on UX team reviews and feedback from my other User Experience colleagues. &nbsp;Product Management and Program Management were also key members of this redesign project team. &nbsp;A key Localization member was also consulted to ensure we were considering our international stakeholders. Engineering TeamThe Engineering team supporting this effort did an innumerous amount of technical mapping for the migration of the old topic pages to the new User Guide template. The User Guide band implementation on the associated articles was a new implementation, and the Engineering team was instrumental on the dynamics.&nbsp; Design Process The visual design for the user guide went through a wide spectrum of changes.&nbsp; Assess the maximum and minimum cases for the amount of topics in the left rail implementationThe impact of visuals to the user guide and the impact to authoringAuthoring impact to article band implementation&nbsp; Light vs. Dark User testing was conducted on darker interface and the lighter interfaces. The lighter interfaces tested the best with users. &nbsp;Left vs. RightLeft rail and Right rail template layouts were tested with users. Though there was a right rail familiarity with the article template, the user guide tested best with left rail orientation. The association of reading left to right tested best with the left topic rail and the right content association.&nbsp; <img width="1442" height="1561" width_o="1442" height_o="1561" data-src="https://freight.cargo.site/t/original/i/7db511a0fe6b51363f50fa2474e7a6b637c83cdd9e7e06b5ad74bc6fd1855ef6/Artboard-13-100.jpg" data-mid="3505523" border="0" src="https://freight.cargo.site/w/1000/i/7db511a0fe6b51363f50fa2474e7a6b637c83cdd9e7e06b5ad74bc6fd1855ef6/Artboard-13-100.jpg" /> <img width="1442" height="1554" width_o="1442" height_o="1554" data-src="https://freight.cargo.site/t/original/i/58949f6953b26259ff7861a1269da522c85ce58699695cd579517be426883819/Artboard-8-100.jpg" data-mid="3505323" border="0" src="https://freight.cargo.site/w/1000/i/58949f6953b26259ff7861a1269da522c85ce58699695cd579517be426883819/Artboard-8-100.jpg" /> <img width="1442" height="1555" width_o="1442" height_o="1555" data-src="https://freight.cargo.site/t/original/i/b3fc8f0b025effdbb374a1be17a6f1bb2affa56954092d23b3b41170863e443a/Artboard-10-100.jpg" data-mid="3505371" border="0" src="https://freight.cargo.site/w/1000/i/b3fc8f0b025effdbb374a1be17a6f1bb2affa56954092d23b3b41170863e443a/Artboard-10-100.jpg" /> <img width="1441" height="1561" width_o="1441" height_o="1561" data-src="https://freight.cargo.site/t/original/i/d4324762fcc4d66b2e43843a3326d2742530d9d0e4bdbb907aeee25c9efd5c7a/Artboard-11-100.jpg" data-mid="3505521" border="0" src="https://freight.cargo.site/w/1000/i/d4324762fcc4d66b2e43843a3326d2742530d9d0e4bdbb907aeee25c9efd5c7a/Artboard-11-100.jpg" /> <img width="1442" height="1560" width_o="1442" height_o="1560" data-src="https://freight.cargo.site/t/original/i/3f728390ffa18648c21c31c6aa7e9832e78ba084ec912c4ce2bdf4dabece1e4f/Artboard-15-100.jpg" data-mid="3505530" border="0" src="https://freight.cargo.site/w/1000/i/3f728390ffa18648c21c31c6aa7e9832e78ba084ec912c4ce2bdf4dabece1e4f/Artboard-15-100.jpg" /> <img width="1442" height="1305" width_o="1442" height_o="1305" data-src="https://freight.cargo.site/t/original/i/02becc272c075447d12b026632f760fc69d9d491f5874f070bcbb49a654a511d/Artboard-14-100.jpg" data-mid="3505529" border="0" src="https://freight.cargo.site/w/1000/i/02becc272c075447d12b026632f760fc69d9d491f5874f070bcbb49a654a511d/Artboard-14-100.jpg" /> <img width="1441" height="1560" width_o="1441" height_o="1560" data-src="https://freight.cargo.site/t/original/i/7734fb6004f91cc07f3f14e9f17991f3724e54bd0437ce3834375a6f26abce56/Artboard-16-100.jpg" data-mid="3505531" border="0" src="https://freight.cargo.site/w/1000/i/7734fb6004f91cc07f3f14e9f17991f3724e54bd0437ce3834375a6f26abce56/Artboard-16-100.jpg" /> <img width="1442" height="1556" width_o="1442" height_o="1556" data-src="https://freight.cargo.site/t/original/i/b9d91659218128ed148b41736bcaba1792eca01627c18b46c995263b512c4aba/Artboard-9-100.jpg" data-mid="3505324" border="0" src="https://freight.cargo.site/w/1000/i/b9d91659218128ed148b41736bcaba1792eca01627c18b46c995263b512c4aba/Artboard-9-100.jpg" /> Previous visual explorations of the user guide&nbsp; Topic Titles While the investigation on the existing topic tags applied to articles, it was in full awareness that there needed to be further testing on the nomenclature of the user facing topics. It was also identified that rehauling and testing the topic titles was not in scope for the first implementation of the User Guide.&nbsp;Multiple tier navigation There was a strong need to be able to have multiple tiers within a topic. The current help article tagging ecosystem did not have a second or third tier tag implementation. It was called out of scope to start a multi-tier tagging structure for this first round implementation.&nbsp; The Visual Template elementsLeft Rail In the new design, the left rail encourages users to browse the depth of content available for each product. All topics live in the left rail, so there would be no need for the user to navigate a long page.&nbsp; Featured Content Upon selection of a topic, the user guide page content reflects the related links. In the featured content area, article title and article description is reflected.&nbsp;User Guide band When the user navigates away from the User Guide to a help article, a persistent navigation element stays with the user. &nbsp;It offers browsing by topic on the article itself, and navigation back to the product user guide.&nbsp; <img width="655" height="498" width_o="655" height_o="498" data-src="https://freight.cargo.site/t/original/i/339518ade1ae765ad9467aa81d8f54e7eeee1062869b972fdfd3e12a4756bcf5/userguide.png" data-mid="3052860" border="0" src="https://freight.cargo.site/w/655/i/339518ade1ae765ad9467aa81d8f54e7eeee1062869b972fdfd3e12a4756bcf5/userguide.png" /> <img width="655" height="498" width_o="655" height_o="498" data-src="https://freight.cargo.site/t/original/i/fc4f535ed736bdc4cfa8f6ff913edc6c46f419bae9ffb15468d7cec8c2b7903f/userguide2.png" data-mid="3053029" border="0" src="https://freight.cargo.site/w/655/i/fc4f535ed736bdc4cfa8f6ff913edc6c46f419bae9ffb15468d7cec8c2b7903f/userguide2.png" /> <img width="655" height="498" width_o="655" height_o="498" data-src="https://freight.cargo.site/t/original/i/c5f2667687082f96f7c9d6be3a5d09459a67f58fea88fbf111f65d4dd1dbb041/userguide5.png" data-mid="3053509" border="0" src="https://freight.cargo.site/w/655/i/c5f2667687082f96f7c9d6be3a5d09459a67f58fea88fbf111f65d4dd1dbb041/userguide5.png" /> <img width="655" height="498" width_o="655" height_o="498" data-src="https://freight.cargo.site/t/original/i/88ad03f7b120f1e8d9f14030c5bd59ac537b51ddab330039bf03d7620e16371e/userguide3.png" data-mid="3052969" border="0" src="https://freight.cargo.site/w/655/i/88ad03f7b120f1e8d9f14030c5bd59ac537b51ddab330039bf03d7620e16371e/userguide3.png" /> <img width="655" height="498" width_o="655" height_o="498" data-src="https://freight.cargo.site/t/original/i/a0f3b50d8bdaf38fe4f36e2d6086539896dc7075a17760b99109d42e96c58530/userguide4.png" data-mid="3053004" border="0" src="https://freight.cargo.site/w/655/i/a0f3b50d8bdaf38fe4f36e2d6086539896dc7075a17760b99109d42e96c58530/userguide4.png" /> Photoshop User Guide live todayView some User Guides live today: Illustrator InDesign Lightroom Retrospective Looking back on some of the original visual comps, it can be seen as discouraging to launch with a visually pared back user guide. Identifying the breadth of content per product that would need to be individually reviewed, authored, and all new design resources dedicated to support a more visual version is indeed daunting without knowing fully how it would test with our users. Once all the products identifed by the content team have launched with their own user guide, I look forward to improving the user’s visual experience.&nbsp;The implementation of the article’s user guide band will also need to be revisited. It became a huge author effort to make sure the tagging on all the individual articles was in place in order for the band to appear. It also became an author need to have an article appear in more than one user guide. The band can only show association with one article, and cannot support more than one user guide.&nbsp; https://janellefloresdesigns.com/Beginner-User-Tutorials Mon, 19 Jan 2015 06:57:51 +0000 Janelle Flores Sr.Product Designer/UX https://janellefloresdesigns.com/Beginner-User-Tutorials Beginner User Tutorials After analyzing beginner user experiences on several popular topics for Adobe products, short direct tutorials were created as a response. Each tutorial had an associated product file and image assets created specially for the user to follow along. The custom visuals created demonstrated the actions for each step that the user would take. <img width="1050" height="870" width_o="1050" height_o="870" data-src="https://freight.cargo.site/t/original/i/ca8b90054b18724c7d5862641934a2668e3d81306871f39a2c3a8e41a97b35e7/Blur-tutorial_1.png" data-mid="2532057" border="0" src="https://freight.cargo.site/w/1000/i/ca8b90054b18724c7d5862641934a2668e3d81306871f39a2c3a8e41a97b35e7/Blur-tutorial_1.png" /> How it appeared on Adobe at launch Tutorials created included: Add creative blur to photos in Photoshop, Work with Smart Guides in Photoshop, Using Widgets in Muse, Retouch photos in Photoshop. <img width="655" height="498" width_o="655" height_o="498" data-src="https://freight.cargo.site/t/original/i/ae1ba580ec58e279d3ce74684f3789209dcf08d39bded92a513ff063ab8fcc9d/using-widgets_begtuts.jpg" data-mid="2543302" border="0" src="https://freight.cargo.site/w/655/i/ae1ba580ec58e279d3ce74684f3789209dcf08d39bded92a513ff063ab8fcc9d/using-widgets_begtuts.jpg" /> Using Widgets in Muse - How it appears on Adobe.com today View a tutorial below: &nbsp; <img width="1000" height="4500" width_o="1000" height_o="4500" data-src="https://freight.cargo.site/t/original/i/61ac3e4cb4e13891cfe4200c63d3029ee35d5b9b6eb5806d9b9e2dc9c3464baf/Blur-tutorial1.png" data-mid="2532058" border="0" src="https://freight.cargo.site/w/1000/i/61ac3e4cb4e13891cfe4200c63d3029ee35d5b9b6eb5806d9b9e2dc9c3464baf/Blur-tutorial1.png" /> <img width="1000" height="3938" width_o="1000" height_o="3938" data-src="https://freight.cargo.site/t/original/i/68348586340083a811d524b8681e209a9af61c64359c3720a86d93068c758444/smart-guides-tutorial.png" data-mid="2532059" border="0" src="https://freight.cargo.site/w/1000/i/68348586340083a811d524b8681e209a9af61c64359c3720a86d93068c758444/smart-guides-tutorial.png" /> <img width="1000" height="5371" width_o="1000" height_o="5371" data-src="https://freight.cargo.site/t/original/i/a569aa63e861bcc0198eb8175660d47b3b6d72ae44c782a6f015c89ee4cf0fdd/content-aware-tutorial.png" data-mid="2532060" border="0" src="https://freight.cargo.site/w/1000/i/a569aa63e861bcc0198eb8175660d47b3b6d72ae44c782a6f015c89ee4cf0fdd/content-aware-tutorial.png" /> <img width="1000" height="5462" width_o="1000" height_o="5462" data-src="https://freight.cargo.site/t/original/i/83ef3e7a7b79cd3d66f9e2299b19a8fc3f5c337c8ee2dd27d8d2be59bdcb15e1/using-widgets-tutorial.png" data-mid="2532061" border="0" src="https://freight.cargo.site/w/1000/i/83ef3e7a7b79cd3d66f9e2299b19a8fc3f5c337c8ee2dd27d8d2be59bdcb15e1/using-widgets-tutorial.png" /> Respresentation on how it appeared on Adobe on publish date https://janellefloresdesigns.com/Creative-Cloud-Learn-Map Thu, 22 Jan 2015 00:04:57 +0000 Janelle Flores Sr.Product Designer/UX https://janellefloresdesigns.com/Creative-Cloud-Learn-Map Creative Cloud Learn MappingA 2014 redesign effort hoped to fold several “ecosystems” that tackle learning across Adobe.com into Creative Cloud Learn. To asses the current state, a large inventory had to be made across the website. An ecosystem map was created of the existing state of Adobe Creative Cloud Learn pages. The map provided a comprehensive mapping and documentation of over 35 products and distinct pages, something that did not exist prior. <img width="2000" height="2203" width_o="2000" height_o="2203" data-src="https://freight.cargo.site/t/original/i/58fe9719fe35c43fcdba50b3dd9c775f34ce639b07d72152261324427be451f8/whopper_final1.png" data-mid="2532055" border="0" alt="August 2014" data-caption="August 2014" src="https://freight.cargo.site/w/1000/i/58fe9719fe35c43fcdba50b3dd9c775f34ce639b07d72152261324427be451f8/whopper_final1.png" /> August 2014