The online customer experience: researching and planning a web presence

1. The online customer experience: researching and planning a web presence MARK 430 WEEK 4

2. Recap – coverage of online marketing fundamentals • Weeks 1 – 4 we have looked at some of the basic fundamentals of online marketing to act as a basis for application • What makes online marketing different from traditional marketing • Social, legal, economic and technical factors that underpin online marketing • The internet marketing mix • Relationship marketing • Web analytics – the importance of setting goals and measuring outcomes • User experience design - building a web presence to meet goals

3. Executive briefing paper assignment • Designed to test the learning outcomes for the first part of the semester • Paper is due next week (October 1st) in hard copy at start of class

4. Focus on implementation and practice of online marketing • Weeks 5 – 11 we will look at some the applications of online marketing • Social networking and social media • Search marketing – search engine optimization • Search marketing and contextual advertising • Interactive / display advertising and behavioural targeting • eMail marketing • Mobile commerce and virtual commerce • The Online Marketing Campaign team project is designed to test the learning outcomes for the entire semester – the instructions will be covered in detail next week

5. Today’s class….. • Researching and planning a web presence • The web development life cycle • Goto + Cotler’s “Core Process” for web site redesign • Goal setting and evaluation exercise

6. Developing an effective web presence • Web presence is a key part of online marketing - the most important element of a firm’s owned media • Often the only touch point with a customer – very influential in terms of brand perception • Must be effective for the customer – deliver what they want – relevance and value • Must be effective for the organization – SMART goals • Designing an interactive experience is different Based on: eMarketing eXcellence. 2008. Chaffey et al. BH

7. The importance of the interface • Internet technology has caused a shift in the way in which firms interact with their customers • Face-to-face encounters replaced with screen-to-face interactions. • Interfaces include desktop PCs, laptops/notebooks, web kiosks, handhelds such cellphones, smartphones & tablets Based on: eMarketing eXcellence. 2008. Chaffey et al. BH

8. Elements / success factors to consider in developing a web presence Product Price /Promotions Range Interactivity Customer journey fit Flow and data entry Service Fulfillment Support WEB PRESENCE Design Visual Design Style Tone Reassurance Trust Credibility Customer experience Emotional values Rational values Performance Speed Availability Relevance Content and search Customization Ease of Use Usability Accessibility and web standards Chaffey et al (2006) pg. 303

9. Web (re)development workflow: Goto + Cotler’s “Core Process • Define the Project (Discovery) • Develop the web site structure • Design the visual interface • Build and integrate • Launch and beyond Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

10. Typical roles involved in a web project • Site sponsor / site owner • Project manager (balances budget, time, scope) • Art director/visual designer • Information architect / designer / usability engineer • HTML & CSS developer • Programmer / backend engineer / DBA • QA (Quality Assurance) • Content manager / copywriter Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

11. PHASE 1 OF A WEB PROJECT: DISCOVERY

12. DISCOVERY Setting objectives Understanding your audience Analyzing your industry Developing functional requirements PLANNING Creating a project plan Setting the budget Creating Schedules Assigning your project team Setting up staging areas Planning for user testing Phase 1. Define the project • CLARIFICATION • Determining overall goals • Preparing a creative brief Outputs: Creative brief and project plan Project kickoff Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

13. Setting organizational and user goals • Goals from the organizational perspective • Goals from the user perspective: what do they want to do on your site? • SMART GOALS • Specific • Measureable • Achievable • Realistic / relevant • Timebound • Commissioning a Business Website - How to produce a Design Brief – Paul Boag

14. Goal-setting exercise • Practice in thinking about web site goals and how to measure them

15. Understanding the audience • Market research • Demographic and psychographic information • Create a detailed profile for each visitor type (a persona) and do early user testing • Commissioning a Business Website - Know your audience – Paul Boag Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

16. Understanding the functional and technical requirements • Very significant factor in defining the project • Has a major impact on skill set needed, scope and timeframe of the project and therefore – budget • Needs to be articulated very clearly by the project manager and signed off by the client • Control of scope creep • Audience technical capabilities are a major factor – needed to set the standards the team will work to • Eg. Device used to access the content, screen resolution, plug-in installed, browser, bandwidth etc Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

17. Output: Creative Brief • The information gathered during the Discovery phase provides the content for this document • Goto & Cotler – (Creative) Communication Brief worksheet Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

18. Phase 2 of a web project: develop the site structure

19. CONTENT VIEW Addressing content Auditing existing content Outlining content Creating a content delivery plan SITE VIEW Sitemapping Addressing existing site organization Setting naming conventions Phase 2. Develop site structure • PAGE VIEW • Wireframing • Addressing navigation • Naming and labeling USER VIEW • Defining key user paths • Developing the HTML protosite • Creating user scenarios Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

20. the “What” of the site Site structure: Content view • Text, pictures, sound and video • both the type of content, and the media with which it is delivered • The offering mix: products, information, services etc • The appeal mix – the “call to action”: promotional and communications messages • The media mix: the multimedia elements included on the site • Can your audience see them? Plugins. • Content type: differentiate between time sensitive information versus “evergreen” information • Freshness keeps bringing customers back • Archives provide a useful service to users Based on: eMarketing eXcellence. 2008. Chaffey et al. BH

21. How does a firm connect to other businesses? Site structure: Content view • Links to other sites – affiliates and complementary products / services • Outsourced and syndicated content – pulling content in to your site from third parties eg. rss feeds, stock quotes, weather, images, embedded videos and widgets. Based on: eMarketing eXcellence. 2008. Chaffey et al. BH

22. Community Site structure: Content view • UGC engenders strong community - encourages stickiness and loyalty • Community can create attractive content (ie. free content for the site owner) • Web communities can make the user feel that they are valued by the firm • Community can satisfy needs not otherwise able to be satisfied individually (eg. finding people, getting tech support) • Common tools are support forums, message boards, knowledge sharing Based on: eMarketing eXcellence. 2008. Chaffey et al. BH

23. Site structure: Site view and Page view Information architecture "Information architecture involves the design of organization, labeling, navigation, and searching systems to help people find and manage information more successfully." Lou Rosenfeld and Peter Morville Information Architecture for the World Wide Web • Supports user goals – makes the site usable • Makes navigation and search more effective (don’t make me think!) • Increases flow and ease of movement on the site • Optimizes for search engines • Integrates offline communications • Related content grouped to measure effectiveness Based on: eMarketing eXcellence. 2008. Chaffey et al. BH

24. Site structure: Site view and Page view Information architecture is concerned with how the site will function • Function - site layout and functionality • Section breakdown - the way the site is organized into sub-categories • make them clear, and customer focused • Organize by customer type / product / task eg. Telus • Linking structures - navigation • where am I? • how do I get back to where I came from?(viu.ca) (breadcrumbs) • Navigation tools • search functionality and methods • browse capability via category drill-down Based on: eMarketing eXcellence. 2008. Chaffey et al. BH

25. Site structure: Site view and Page view Site mapping • A visual representation of a site’s structure, organization, flow, and grouping of content • It is not a technical schematic • Shows an overview of the site structure as a whole • Includes agreed naming conventions • Example Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

26. Site structure: Site view and Page view Wireframes • Storyboards for the site • Also called page schematics, content layouts, or blueprints • NOT design oriented – show information only • Purpose of wireframes • Aid in communication • Form the basis for visual design • Form the basis for HTML production / templates • Show (at a minimum) • All major page elements • Target window size (in pixels) • Navigation • Media • Functional elements • Messaging / content areas • Example Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

27. What did phase 2 of the site redesign process accomplish? • Developing the Site Structure phase answers specific questions • How is the overall structure organized? • What exactly goes on each page? • How do the pages work with one another? • One of the most challenging and time consuming aspects of web development • If visual design is done without this step may result in inefficient use of design resources • Graphical changes take longer than wireframe changes Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

28. Phase 3 of a web project: design the visual interface

29. Phase 3: Design the visual interface • The site’s graphic design – “look and feel” • Strongly associated with functionality, but the work is done by graphic designers not information architects (although they will work together) • Mood • Colours • Images • Music Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

30. Aesthetic design • Aesthetics - visual characteristics such as colours, graphics, fonts etc • Jonathan Yuen (designer and Flash developer) - elegant, visually appealing, uses music to enhance the customer experience, navigation is not at all obvious – goal of the site is to showcase his design abilities • Cheap-CDs.com and CraigsList– bare bones – different image, but says a lot about the brand • The look and feel of the site should reflect the sensibilities of the customers being targeted – and fit with the offline and online branding Based on: eMarketing eXcellence. 2008. Chaffey et al. BH

31. Interface and content customization • Customization is the site’s ability to tailor to different users • The way customization can be achieved is divided roughly into 2 types (although many sites use both) • Personalization – contentpreferences actively selected by the user that persist over subsequent visits eg. Facebook apps • Tailoring by site - automatically generated customization based on a user’s previous behaviour, and the actions of other similar users eg. amazon.com Based on: eMarketing eXcellence. 2008. Chaffey et al. BH

32. Part of the design process: Usability testing • Can be done with html prototypes, paper prototypes, or with a fully-functioning version of the interface • Testers selected from target audience • Usually task oriented • Overt or covert observers • Types • Diagnostic - to spot problems early on • Comparative - select among alternate designs • Verification - have goals been met? Based on: eMarketing eXcellence. 2008. Chaffey et al. BH