user centered design process - measurefest presentation

Download User centered design process - Measurefest Presentation

Post on 27-May-2015




1 download

Embed Size (px)


This is an expanded version of the User Centered Design process presentation that I delivered at Measurefest October 2014.


  • 1. 1USER EXPERIENCE DESIGNMark Fassbender, Global Head of Web Optimisation

2. 2People are on the web not to enjoy yourweb design, but to get something done.Design Exploratorylexisnexis.comTO: S T E V E M A N N BY: D X T E A M 11 20 1 3Jakob Nielsen 3. 3A site that really works fulfills yourstrategic objectives while meeting theneeds of your users. Even the best contentand the most sophisticated technologywon't help Design you balance Exploratorythose goals withouta cohesive, lexisnexis.consistent comuser experience toTO: S T E V E M A N N BY: D X T E A M 11 20 1 3support it.Jesse James Garrett 4. 4What is user experience designUser experience (UX) is the way a person feels aboutusing a product, system, or service.from wikipediaUser experience design puts the user at the heart of the development process. It isbased on gaining a deep understanding of user motivation, goals, abilities.That understanding is then combined with and understanding of business goals andobjectives to create a plan that will guide the entire development process to ensure thatuser needs are met in such a way that it is advantageous to the business.Theres a reason that people are coming to your website, if you understand the reasonand rationale for a visit and put the right content in front of the right user at the righttime, it becomes much easier to convert a visitor into a customer. 5. You can use an eraser on thedrafting table or a sledgehammer on the construction site.- Frank Lloyd WrightDesign in an exercise in problem solving. In orderto have a successful design, the problems thatneed to be solved or the goals that need to bereached must be identified and understood.For a website to be successful, we must firstunderstand the requirements of: Users Technology Business owners Legal 6. InformationarchitectureContentstrategyCampaignsSEOTechnicalfunctionalityVisualdesignBusinessobjectivesNavigationCustomerservicePost salessupportUser needs& motivationBusinessobjectivesMaximumSuccessPotentialUser experience is notsomething that is implementedat the beginning of a projectand then forgotten about.It is a philosophy that needs tobe taken into account duringevery step of the productlifecycle and guide everyinteraction between a user andthe business. 7. The user experience design processImplement +PublishDiscovery +UnderstandingStructure + ValidationInteractionsDevelopmentMonitoring +MaintenanceQualityassuranceLaunchworkshopworkshopContinualImprovement 8. OverviewThis beginning phase provides the foundation for every other step. The research done in thisphase provides a deep understanding of user needs and motivation, business objectives. Theanalysis of the research provides insight on how to more closely align the motivation of the usersto the needs of the business.Groups involvedGlobal Digital Business Team (GDB)Customer Discovery & Innovation (CDI)Local teams (participant recruitment)Website usersExisting customersTools usedUserZoomDecibel InsightGoogle AnalyticsDirect customer feedback tool (Kampyle)Discovery + understanding 9. 9Discovery + understandingUser needs analysisUser interviews and testingWeb metrics analysisWeb user behavioral insightOnline surveysCustomer interviewsWebsite user behaviour analysisResultPersona detailKey touchpointsUser frustrationsUser motivationsBusiness needs analysisSr. business stakeholdersMarketingSalesCustomer serviceStrategy teamProduct teamLegalITResultPersona basicsBusiness KPIs 10. 12Discovery phase: workshopWorkshopWhere the findings of the discovery phase are presented to internalstakeholders, and discussions revolve around to following: customer experience map which highlights key tasks and the supporting assets prioritized content by persona and phase initial sitemap high level business KPIsGroups involvedGlobal Digital Business Team (GDB)Customer Discovery & Innovation (CDI)Local teamsSr. StakeholdersTools usedMicrosoft OfficePens & PaperFlip ChartsSticky notes (of course!) 11. 13Discovery phase: workshopOutputAt the end of the workshop revisions there should be a consensus and agreement on thefollowing: High level sitemap (main sections of the site agreed) Overall KPIs Success measures for each persona Prioritized content for each personaBenefits of sitemaps, user flows and journey maps Determines project scope Highlights potential problem areas that need extra attention Establishes how existing user behavior will impact business objectives Creates connections between site structure, navigation, content, user needs,business needs and technology Form the base for wireframe design 12. Customer journey example 13. Customer experience map 14. 16Structure and interactionsWireframes are the blueprints for designThey are structural documentation that organizes content and interactive elements.Wireframes focus on layout and content and help prioritize the elements that make up apage.Groups involvedGlobal Digital Business Team (GDB)Customer Discovery & Innovation (CDI)Design TeamLocal teams (participant recruitment)Tools usedAxureOmnigrafflePen & Paper 15. 17Visual designQuestions to ask when discussing wireframes What is the purpose of this page, what do we want users to do How do the different elements relate to one another Do the pieces work together or do they send conflicting messagesBenefits of wireframes Validate and clarify project scope Define page level KPIs Highlight potential development challenges early in the process Determines content/element priority Delivers something visual that can be shared to sr. management 16. Wireframe example 17. 19Visual developmentVisual design patterns are the building blocks of templatesDesign patterns and components are the foundation on which a successfulwebsite are built. They are reusable designs that server a specific purpose andcan be modified on a regional basis.Groups involvedGlobal Digital Business Team (GDB)Customer Discovery & Innovation (CDI)Local teams (participant recruitment)Tools usedJavascript /jqueryHTML / CSSAdobe creative suiteAxure 18. 20Visual developmentQuestions to ask when discussing design components Is it technically possible to build it Is it on brand Does it solve a user or business need Is this suitable for all sites or is this a local solutionBenefits of pattern design Build once, reuse as often as necessary Can be customized for multi-region use The more components exist in the library, the faster future site can be built Ensure compliance to global standards local editors are not responsible fortechnical implementation 19. Using lego blocks to build a pageLogoUtility navigationSite searchSite navigation*Header*Hero bannerPromo box 1Promo box 2Promo box 3Promo box 4*sliding promobox display *Contact footerFooter navigationSocial Media*footer* 20. 22Development: contentContent strategy & developmentA process to determine which content should appear on which pages of thewebsite in order to meet user expectations and needs.Final page content is to be approved by business owners and subject matter expertsGroups involvedLocal marketing teamsLocal content teams (product team)Global Digital Business team (strategy)Tools usedMicrosoft office 21. 23Development: contentSEO background research Existing site research Competitor research Keyword identification Inbound link auditContent strategy Content audit to identify key assets Page titles Keywords per pagePage content (requires wireframes to be approved) Page copy and content (images, video, links, downloads, forms, etc.) Individual page KPIs 22. Development: content 23. 25Development: technicalPagetype and template creationMaster pagetypes defined and created by the development team.Pagetypes are a shell which will hold editable, reusable content blocks.These content blocks are assembled in a pagetype to create a template.Groups involvedDevelopment teamTools usedSquizJavascript / JqueryHTML / CSSPHP 24. 26Implementation and publishingContent populationOnce a template has passed UAT, it will be available for web editors topopulate with approved content.Content population can take place on a section by section or template by templatebasis, it is not necessary for all templates to be be created before populationbegins.Groups involvedLocal web teamsGlobal Digital Business team (support)Tools usedMicrosoft officeSquiz 25. 27Implementation and publishingTechnical implementation and configurationOnce the content has been populated, all tracking, monitoring and thirdparty code is added and configured. Other tasks include: Install Google Analytics and configure goals and funnels Setup redirects to minimize any traffic loss due to the redesign Create XML sitemap and submit to search engines Configure and monitor webmaster tools to identify critical errorsGroups involvedGlobal Digital Business teamLocal marketing teamTools usedSquizCRM systemAny 3rd party application/functionsBeing used on the site 26. 28Quality assurancePre-flight review checks All content is reviewed for accuracy and appropriateness Technical functionality Tracking systems (google analytics, insight tools) CRM form handoff validated Third party functions validated (click to chat, customer feedback)Groups involvedGlobal Digital Business Team (GDB)Customer Discovery & Innovation (CDI)Local teams (participant recruitment)Tools usedAll relevant third party toolsCustomer feedback tool (Kampyle)Littleforest IndexWebmaster toolsGoogle AnalyticsCRM systems 27. LaunchLaunch DNS changes Send notice to search engines Marketing teams begin new site campaigns 28. 30Continual improvementPost launch supportThe performance (based on the KPIs established earlier in the process) will bemonitored and shared with stakeholders. As opportunities for improvementbecome known, appropriate steps will be taken to maximize performance. Reporting Governance Training Consultancy Actionable insightGroups involvedGlobal D