https://www.shannondecock.com/about daily 0.75 2021-09-07 https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1631030581527-GLX6DWDMXYMZ83Q7M7TB/shannon-headshot.jpg About - Hello, I’m Shannon DeCock. I’m a UX designer with more than 20 years of design experience. I have a passion for design, which can be seen in my career path growing from a newspaper designer to graphic designer to a product designer. My design strategy is focused on finding the problem and looking for a solution — fall in love with a problem, not the solution. Throughout my career, I have been a leader and have utilized my strong communication skills to articulate a vision and collaborate with stakeholders. I want to continue to use these strengths to build great products. https://www.shannondecock.com/contact daily 0.75 2021-09-07 https://www.shannondecock.com/work daily 1.0 2020-08-05 https://www.shannondecock.com/work/event-design monthly 0.5 2021-02-01 https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612137978612-IY0BPN32I5RI6G3KOE5H/waug-1.png Work - Event Design https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612140521861-M70SHNIYJ6Y0EAMX5HYW/waug-3.png Work - Event Design https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612140214886-GY7DXPGAL0QEY5X0DVBI/waug-2.png Work - Event Design https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612140543002-987WP5MT76CZ0HDFDDS3/waug-4.png Work - Event Design https://www.shannondecock.com/work/annual-report monthly 0.5 2021-09-06 https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/041f3651-09db-4d9a-8d30-cc52b38f5872/annualreport3.jpg Work - Annual Report https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/62eb8b42-758b-4398-aa92-dd86ffdae79d/annualreport4.jpg Work - Annual Report https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/a22c1890-c32d-41c1-bb5f-b55252f01df2/annualreport1.jpg Work - Annual Report https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/175ddd17-0621-4a2b-b455-1766be4b5b84/annualreport2.jpg Work - Annual Report https://www.shannondecock.com/work/website-redesign monthly 0.5 2021-01-31 https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612126940867-A6D5N41KKPCUSR1UUHVF/webassign-solution-2.png Work - Website Redesign https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612126969492-T7HAQ9E7CMGOMJDN0Q6D/webassign-solution-3.png Work - Website Redesign https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612127000014-KTX0OH59UEIVVET36RWC/webassign-solution-4.png Work - Website Redesign https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612107789285-LWJBROIRXTOVOX7A5CTW/webassign-before.jpg Work - Website Redesign - The Challenge When WebAssign was founded in the late 1990s, the website, which was mainly used for students and instructors to log into the system, was built directly into the application itself. This made it nearly impossible to use the website for marketing activities because it required a product release to make any changes to the website. It could be weeks or even months between update releases. We knew the site had more than 100,000 visitors each month and we needed a way to tap into all of that traffic. https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612126305953-629BRQF99TRE1UOJVR6O/webassign-research.png Work - Website Redesign - The Research I worked with a product manager and marketing manager to identify the three main audiences for the site — instructors, students, and publishers — and determine how each audience would use the site. I also completed a competitive analysis to look for UX and language patterns familiar to our audience. I then worked with the marketing director and communications manager to create an information architecture that would best organize our inventory of information and make sense for our users to navigate. https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612123659990-RKGQYB4NX8N9PI9WU1WI/webassign-process.png Work - Website Redesign - The Process I began sketching ideas and creating low fidelity wireframes. Using the wireframes, I collected feedback from colleagues — many of them instructors who have used the product. Once I was confident in a design, I moved on to high-fidelity screens and developed a style guide. I also designed and illustrated all of the visual elements for the site. Development and Testing Entrusted with implementing these concepts, I interviewed and retained an outside developer and oversaw the entire process of transferring my vision from high-fidelity screens to the WordPress platform. Once there was a functional site available, I performed some usability testing at our users group meeting with new users and socialized the redesign with long-time users for feedback. I made necessary changes to the site and continued work with the developer to iterate. https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612122482001-1NACYSL7D4RK5YH7MG3J/webassign-solution-1.png Work - Website Redesign - The Solution The new responsive site was launched in July 2014. The marketing team was now equipped with a site that enabled them to promote new features of the product and upcoming events. They were also able to move forward with a modern content marketing plan to help reach in sales goals. The instructors' ability to get product news and tips was significantly improved. Our support staff also saw a reduction in calls from students as they could more easily find help online. https://www.shannondecock.com/work/navigation-redesign monthly 0.5 2021-01-31 https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612061531986-UQZS309RXOOWVXQ0B00H/navigation-solution-2.png Work - Navigation Redesign https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612061550118-NHCJ71XBUT1JWXNKJDTN/navigation-solution-3.png Work - Navigation Redesign https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612061563023-AL9ZPMN1322U6I4YCP8R/navigation-solution-4.png Work - Navigation Redesign https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1609804287315-9EXUAOY4V8V7HN4Q2O5C/nav-challenge.png Work - Navigation Redesign - The Challenge The decision to redesign the navigation and header first would not only lay the foundation for the rest of the redesign, but it would also make a powerful impact on for our users. Some frustrations that our users faced were overall findability, and awareness of where they are in the platform. Labels didn’t follow industry conventions making it difficult to locate items. For instance, there were main navigation items named “tables” and “apps”. Our goal was to restructure the IA and to provide a more efficient way to move around the platform. https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612058277482-AN918BBQJGWA56D6JP4L/cardsorting.jpg Work - Navigation Redesign - The Research Our lead user researcher led an extensive research effort to ensure our new information architecture made sense to our users. We needed to not only use industry standard words, but we also needed to group words the way our users expected. To accomplish this, our researcher conducted a card sorting activity with internal stakeholders and a Tree Jack exercise with external users. With the results from these activities, she was able to confidently develop a new organizational structure. https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612058926954-WT5EJ84CBYEKZ8RU27GR/navigation-process.png Work - Navigation Redesign - The Process Once we were confident in the new IA, I developed a prototype using InVision. The prototype was tested with 8 users in which they were asked to perform a series of 9 tasks. The users successfully completed 8 of the tasks at a rate of 88% or higher. The ninth task was only successful 50% of the time. I went back to the design and iterated to achieve a higher success rate on the final task. I was also able to take some overall feedback and incorporate it into the design, such as more contrast in the hierarchy of the navigation and color scheme. https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1612059739373-8HYWE0K9WT7D4MT66229/navigation-process.png Work - Navigation Redesign - The Solution The final design for the new header and navigation utilizes the new IA and the results and feedback gained in user testing. The navigation items have been renamed and reorganized to make more sense for how our users interact with the product. I also moved the navigation from a top horizontal position to the left side which enables the platform to shift to a persistent navigation model. Now the user has insight into where they are in the product at all times. The side navigation also has a collapsing functionality which creates a larger work area in the platform. Other improvements made to the header include functionality to switch accounts, more entry points to find help, and improved visibility to platform notifications. https://www.shannondecock.com/work/product-dashboard monthly 0.5 2021-01-04 https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1609784416981-AQT1R6AG8KUWIV6SZBXR/db-solution+5.png Work - Product Dashboard https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1609785705896-NB3JCJORTAXN95Q7NXWY/db-solution-2.png Work - Product Dashboard https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1609785705340-719DVOXXXOC3L8J75JI3/db-solution-3.png Work - Product Dashboard https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1609785706120-8YHC1D0S0U5YELFOIE5Y/db-solution-4.png Work - Product Dashboard https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1594683342162-ZTVZG3JGOC7A26ILDCC7/db-before.jpg Work - Product Dashboard - The Challenge The Bronto Marketing Platform’s dashboard was under-utilized for one simple reason — it was displaying the wrong information. It needed an overhaul so that busy marketing professionals can work as efficiently as possible. The dashboard is the first thing users see when logging in and we need to provide the data most important to them. https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1609780587475-5BBBWOQ6OWXEKR9NKMGQ/Aro%252BHa_0010.jpg Work - Product Dashboard - The Research The team’s UX researcher conducted a user survey to determine the value of each existing widget. Users were asked how often they used each widget. Of 28 available widgets, only 4 of them averaged a response of “sometimes,” none ranked higher than that. We also combed through previous user interviews to identify patterns of requested features — items that could potentially appear on the dashboard. Finally, we conducted internal interviews with stakeholders and professional services, who are a user persona. https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1609783238722-G1ZR9A6OBFXG7CMLVPOB/db-process.jpg Work - Product Dashboard - The Process Armed with the research above, we started to map out widgets and connected them to metrics and the level of data available to us. For instance, we knew we could track revenue performance at the site, campaign, message, and delivery level. Once we settled on the data within each widget, we began to whiteboard how a widget might look and behave. Once we were heading in a solid direction, we created some large paper prototypes and presented our planned content to the product team. We were looking not only for confirmation in our direction, but also for any holes in our plan. https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1609799468919-NZROMCS7EAHIGI90LHKU/db-solution-1a.png Work - Product Dashboard - The Solution I worked in Sketch App to design a comprehensive dashboard including all of the functionality and data our users have been asking for — including trend data and a way to track growth. I then collaborated with the product manager and developers to size the work. From there, the PM and I focused on what would be feasible for an MVP. Shown are the MVP along with details of some of the widgets. The user also has added functionality to filter the data shown by a date range which we discovered was a large gap in the current dashboard. Aside from widgets that better serve our users’ needs, the updated design also provides a better calendar system to schedule marketing emails and a shortcut to create new segments, emails and other common tasks. https://www.shannondecock.com/work/product-dashboard-f35sn monthly 0.5 2021-09-07 https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1618497259178-6XJGK9GR6YAVBQL5L519/20140301_Trade-151_012-2.jpg Work - Red Hat Marketplace https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1607694583486-2PQT0LQ193RL7MCB6DX4/20140228_Trade+151_0046.jpg Work - Red Hat Marketplace https://images.squarespace-cdn.com/content/v1/5ec321c2af33de48734cc929/1607694644871-IC85FNH781UNZSZEGHDR/Aro+Ha_0428.jpg Work - Red Hat Marketplace https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1630961141009-IWZA85DZLZGHB69SSK2C/personas.jpg Work - Red Hat Marketplace - The Challenge Red Hat Marketplace’s customers are made up of a varied set of interconnected user groups, each with equally diverse needs and challenges. Developers want to quickly develop and deploy apps on any platform. IT leaders are searching for standardization, security, compliance and cost savings. Procurement managers need the ability to manage usage and allocation of purchased products. Software vendors want to market and sell their product to the broadest set of users possible. https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1630962288506-VKVWGA422AA5CBSXFKAJ/journeys.jpg Work - Red Hat Marketplace - The User Journeys Now that we have determined our potential users and the challenges they face, the design team created a list of user-focused journeys in order to stay focused on what makes a successful experience. Our principle designer set up an initial high level journey through the platform. Journeys I led or played a large role in are listed in bold. Get started and create and account Find a product that meets their needs Try or buy a product Use the product they purchased Pay based on their usage of the product https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1630965159470-91DDCNJPVFVZI3C2D9LT/rhm1.jpg Work - Red Hat Marketplace - The process In order for developers to be able to use the software they purchased, they also had to be able to manage the software. I began cataloging all of the different actions that would need to be taken from a single piece of software — updating, deploying, purchasing a trial, removing, renewing a subscription. From here I created low-fidelity wireframes for these flows and compiled a list of questions to investigate. I worked with the design team, product managers and UX researchers to find answers and start to narrow the scope for MVP. As requirements became more defined, so did the design. The My Software page would be the hub for all purchased software. I designed the card that would represent entitled software along with all of the actions and states one card could encompass. I also created the details page for purchases software where a developer would begin their deployment journey, read documentation, or ask for support. https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1630966321002-RB1LLHK535BFJZHZWQMN/rhm2.jpg Work - Red Hat Marketplace - The MVP After the fundamentals of the journey were defined — a developer can see and deploy software they purchased — advanced requirements began to take shape. I created flows to show how a user can search and filter their software, and how a user can see and distinguish between multiple entitlements of the same piece of software. I worked along side a product manager and technical lead to validate these flows and then moved them into high fidelity, and created specs to hand off to our developers. The developers and I worked very closely having reviews to make sure the designs were being met. https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1630967417048-H8N81MUE0GNJ73RL4VPI/rhm3.jpg Work - Red Hat Marketplace - The iterations Soon after launch, I led highly strategic initiatives critical to the success of our users. I partnered with stakeholders and helped lead a collaborative effort with design, developers and product managers to design new features for product bundles, products with multiple operators and deploying datasets. https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1630975406402-QE9QTA517FVO9MMNSPJY/wb4.jpg Work - Red Hat Marketplace - The process After the initial launch of Red Hat Marketplace, we shifted focus to our procurement managers. They need the ability to manage usage and allocation of purchased products. I partnered with two other designers on the marketplace team to identify who would need usage data and how they would consume it. A developer needs to understand what has been used and how much is left in the current plan. An IT leader and procurement manager need to see spending trends. A developer’s journey goes through the My software area, a natural fit to to surface usage to that user group. The spending trends data would be shown in a net new usage area. As a team we worked together to ensure the two areas had a consistent look. We started by defining user stories and then I began whiteboarding data visualization ideas. https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1630976080469-5FHQJSC7GJS6SDHABIP6/rhm5.jpg Work - Red Hat Marketplace - The solution Helping our users understand usage was an extremely complex problem given multiple types of metrics, data availability, and allocating by department. I designed a chart that combined total usage and usage by department. This chart was repurposed and also used on the new usage dashboard. https://images.squarespace-cdn.com/content/v1/5f0cd66d9ca7c019f7aac17e/1630976719913-VLTYZR2W9PXF89ER9UKF/rhm6.jpg Work - Red Hat Marketplace - Other work Outside of these two main user journeys, I made other large contributions to the design of Red Hat Marketplace. I was the initial designer for our support experience as well as documentation and API reference.