1
Mark Fassbender, Global Head of Web Optimisation
USER EXPERIENCE DESIGN
2
TO: S T E V E M A N N BY: D X T E A M 11 20 1 3
Design Exploratorylexisnexis.com
“People are on the web not to enjoy your web design, but to get something done.”
Jakob Nielsen
3
TO: S T E V E M A N N BY: D X T E A M 11 20 1 3
Design Exploratorylexisnexis.com
“A site that really works fulfills your strategic objectives while meeting the needs of your users. Even the best content and the most sophisticated technology won't help you balance those goals without a cohesive, consistent user experience to support it.” Jesse James Garrett
4
What is user experience design
“User experience (UX) is the way a person feels about using a product, system, or service.” from wikipedia
User experience design puts the user at the heart of the development process. It is based on gaining a deep understanding of user motivation, goals, abilities.
That understanding is then combined with and understanding of business goals and objectives to create a plan that will guide the entire development process to ensure that user needs are met in such a way that it is advantageous to the business.
There’s a reason that people are coming to your website, if you understand the reason and rationale for a visit and put the right content in front of the right user at the right time, it becomes much easier to convert a visitor into a customer.
“You can use an eraser on the drafting table or a sledge hammer on the construction site.”
- Frank Lloyd Wright
Design in an exercise in problem solving. In order to have a successful design, the problems that need to be solved or the goals that need to be reached must be identified and understood.
For a website to be successful, we must first understand the requirements of:
• Users• Technology• Business owners• Legal
Informationarchitecture
Contentstrategy
Campaigns
SEO
Technicalfunctionality
Visualdesign
Businessobjectives
Navigation
Customerservice
Post salessupport
User needs& motivation
Businessobjectives
MaximumSuccess
Potential
User experience is not something that is implemented at the beginning of a project and then forgotten about.
It is a philosophy that needs to be taken into account during every step of the product lifecycle and guide every interaction between a user and the business.
The user experience design process
Implement + Publish
Discovery +Understanding
ValidationStructure + Interactions
Development
Monitoring +Maintenance
Qualityassurance
Launch
workshop
workshop
ContinualImprovement
OverviewThis beginning phase provides the foundation for every other step. The research done in this phase provides a deep understanding of user needs and motivation, business objectives. The analysis of the research provides insight on how to more closely align the motivation of the users to the needs of the business.
Groups involved
Global Digital Business Team (GDB)Customer Discovery & Innovation (CDI)Local teams (participant recruitment)Website usersExisting customers
Tools used
UserZoomDecibel InsightGoogle AnalyticsDirect customer feedback tool (Kampyle)
Discovery + understanding
9
Discovery + understanding
User needs analysisUser interviews and testingWeb metrics analysis Web user behavioral insightOnline surveys Customer interviewsWebsite user behaviour analysis
ResultPersona detailKey touchpointsUser frustrationsUser motivations
Business needs analysisSr. business stakeholdersMarketingSalesCustomer serviceStrategy teamProduct teamLegalIT
ResultPersona basicsBusiness KPIs
12
Discovery phase: workshop
WorkshopWhere the findings of the discovery phase are presented to internal stakeholders, 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 KPIs
Groups involved
Global Digital Business Team (GDB)Customer Discovery & Innovation (CDI)Local teamsSr. Stakeholders
Tools used
Microsoft OfficePens & PaperFlip ChartsSticky notes (of course!)
13
Discovery phase: workshop
OutputAt the end of the workshop revisions there should be a consensus and agreement on the following:
• High level sitemap (main sections of the site agreed)• Overall KPIs • Success measures for each persona• Prioritized content for each persona
Benefits 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
Customer journey example
Customer experience map
16
Structure and interactions
Wireframes 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 a page.
Groups involved
Global Digital Business Team (GDB)Customer Discovery & Innovation (CDI)Design TeamLocal teams (participant recruitment)
Tools used
AxureOmnigrafflePen & Paper
17
Visual design
Questions 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 messages
Benefits 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
Wireframe example
19
Visual development
Visual design patterns are the building blocks of templates Design patterns and components are the foundation on which a successful website are built. They are reusable designs that server a specific purpose and can be modified on a regional basis.
Groups involved
Global Digital Business Team (GDB)Customer Discovery & Innovation (CDI)Local teams (participant recruitment)
Tools used
Javascript /jqueryHTML / CSSAdobe creative suiteAxure
20
Visual development
Questions 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 solution
Benefits 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 for technical implementation
Using “lego blocks” to build a page
LogoUtility navigationSite searchSite navigation*Header*“Hero” bannerPromo box 1Promo box 2Promo box 3Promo box 4*sliding promo box display *Contact footerFooter navigationSocial Media*footer*
22
Development: content
Content strategy & developmentA process to determine which content should appear on which pages of the website in order to meet user expectations and needs.Final page content is to be approved by business owners and subject matter experts
Groups involved
Local marketing teamsLocal content teams (product team)Global Digital Business team (strategy)
Tools used
Microsoft office
23
Development: content
SEO background research• Existing site research• Competitor research• Keyword identification• Inbound link audit
Content strategy• Content audit to identify key assets • Page titles• Keywords per page
Page content (requires wireframes to be approved)• Page copy and content (images, video, links, downloads, forms, etc.)• Individual page KPIs
Development: content
25
Development: technical
Pagetype 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 involved
Development team
Tools used
SquizJavascript / JqueryHTML / CSSPHP
26
Implementation and publishing
Content populationOnce a template has passed UAT, it will be available for web editors to populate with approved content. Content population can take place on a section by section or template by template basis, it is not necessary for all templates to be be created before population begins.
Groups involved
Local web teamsGlobal Digital Business team (support)
Tools used
Microsoft officeSquiz
27
Implementation and publishing
Technical implementation and configurationOnce the content has been populated, all tracking, monitoring and third party 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 errors
Groups involved
Global Digital Business team Local marketing team
Tools used
SquizCRM systemAny 3rd party application/functionsBeing used on the site
28
Quality assurance
Pre-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 involved
Global Digital Business Team (GDB)Customer Discovery & Innovation (CDI)Local teams (participant recruitment)
Tools used
All relevant third party toolsCustomer feedback tool (Kampyle)Littleforest IndexWebmaster toolsGoogle AnalyticsCRM systems
Launch
Launch• DNS changes• Send notice to search engines• Marketing teams begin new site campaigns
30
Continual improvement
Post launch supportThe performance (based on the KPIs established earlier in the process) will be monitored and shared with stakeholders. As opportunities for improvement become known, appropriate steps will be taken to maximize performance.
• Reporting• Governance• Training• Consultancy• Actionable insight
Groups involved
Global Digital Business Team (GDB)Customer Discovery & Innovation (CDI)Local teams (participant recruitment)
Tools used
UserZoomDecibel InsightGoogle AnalyticsDirect customer feedback tool (Kampyle)Littleforest IndexHP Autonomy Optimost 5second test
A/B testingHP Autonomy Optimost: Managed Svc
Measure the impact of changing site content or layout
Test one or more variations to see which performs best
Understand what messaging works for your local market
Learnings from these tests can be applied to other media – email, brochures, direct marketing
Tools overview
A/B testingHP Autonomy Visualtest
A simplier version of HP Autonomy Optimost
Ideally suited to smaller, simple changes:
button colour
button text
headline copy
Images
Simple layout changes
Tools overview
Site configurationSite performanceOptimization reporting
SEO overview In-bound link reports (link building) Global search trends Local search trends Search volumes SEO and keyword suggestions Broken links ‘Lost’ pages (page not found errors)
Tools overview
Page performancePopular pagesDownloadsPage value (estimated)Performance funnels (user journeys)
Identify pages with a high traffic but low conversion
Identify traffic sources – organic search, paid search, email campaigns, direct traffic, social media …
See where your traffic is from
Browser and operating system statistics
Tools overview
Recorded user interactionsMouse and click heatmapsAttention and scroll mapsForm anaysis
Watch users move through a site
Identify popular content (clicks)
See where people are clicking on a page
See form completion rates – field by field
Identify ‘problem’ fields in a form
Create performance funnels and identifydrop out points
Identify site errors and performance issues
Tools overview
KPI PerformanceError reportingBrand governancew3c best practice standards
effectiveness scoring for: KPI Search Governance Content Technical Infrastructure
Full list of site assets Improve SEO Improve accessibility
Tools overview
Visitor feedback submissions
General improvement or drop is visitor site satisfaction
View customer comments and suggestions
Can be used to generate leads
Direct, unsolicited feedback from users
“Clear, transparent information - good to see. Accessible to a wide range of users - no PhD required!”
Tools overview
Goal conversionsTraffic sourcesPage performance/evolution over time
Easy to understand visuals
Supports funnels and multi-page goals
Automatically highlights user patterns
Tools overview
Best practice guideseLearning modulesDiscussion groupsMarket data and insight
Beginner guides Best practice guides Understand your market better Participate in roundtable discussions Gain knowledge through elearning Market research and insight reports
Tools overview
Images and example acknowledgement
Steve job’s design quote imagehttp://designwebkit.com/inspiration/steve-jobs-quotes-visualized/
Process icons http://graphicdesignjunction.com/2013/07/seo-icons/
Simple persona exampleMicrosoft viahttp://www.forbes.com/sites/louiscolumbus/2013/03/29/personas-are-the-future-of-enterprise-apps-lessons-learned-from-scribe-software/
Advanced persona exampleTodd Warfell viahttp://www.werner-puchert.com/2008/07/07/exploring-personas/
Rail Europe Journey MapAdaptive Path http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map/
Sarah’s Broadband Journey mapEffective UIhttp://www.effectiveui.com/via:http://www.ux-lady.com/experience-maps-user-journey-and-more-exp-map-layout/ http://www.uxmatters.com
Content Strategy ConsiderationsKalpesh Rathod
Stay in touch
Twitter:https://twitter.com/flashbender
LinkedInhttp://uk.linkedin.com/in/flashbender
Top Related