The online customer experience: researching and planning a web presence

1. The online customer experience: researching and planning a web presence MBA 563 WEEK 1

2. After today’s class you will understand….. • The main steps in the website planning and development process • How to identify goals for a particular organizational website • How the motivations of website visitors can be included in site design • The requirements for the website project assignment

3. 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

4. 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

5. 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

6. Web (re)development workflow:

7. Web (re)development workflow: Goto + Cotler’s“Core Process Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

8. 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

9. PHASE 1 OF A WEB PROJECT: DISCOVERY and goal setting

10. 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

11. 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

12. 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

13. Exercise on setting goals for a website • You will need to do this for your web site project • This exercise will give you some practice • Remember the goals you set MUST be able to be achieved via the website Goal =>> =>> website design feature / content / functionality

14. Aims of design for usability • Understand user’s goals • Anticipate them • Make it easy to accomplish them – a way to meet the goals must be reflected in the design of the web pages themselves

15. How do you know if your site is meeting its goals? • Conversion rate: keeping track of the percentage of your users that you persuade to move to the “next step”. • The next step could be • registering on your site • customizing your site and saving their preferences • signing up for an email newsletter • making a purchase • Next weekwe will look in much more detail at web metrics so you will be able to measure your goals

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

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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

25. 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

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

27. 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

28. Aesthetic design • Aesthetics - visual characteristics such as colours, graphics, fonts etc • The look and feel of the site should reflect the sensibilities of the customers being targeted – and fit with the offline and online branding. It also has to fit with user goals. • 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 Based on: eMarketing eXcellence. 2008. Chaffey et al. BH

29. 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

30. 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

31. Web project assignment

32. Web project assignment • Stage 1 of this assignment is the production of a planning document (worth 35%) • Stage 2 is the production of the site itself (worth 15%) • Both due on Friday July 11th at 4:30pm (via email) • Before you develop your website, you need to PLAN • Assignment instructions, some samples and the marking scheme are on the course website at http://web.viu.ca/thomasb/mba563.html

33. PART 1 – WEBSITE PLANNING AND DESIGN DOCUMENTATION • Sections of your plan • SECTION 1: Goals and target audience • SECTION 2: Information architecture, page layout etc • SECTION 3: Design “look and feel” and usability • SECTION 4: Site content - images, video, search engine optimization