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

Size: px

Start display at page:

Download "The online customer experience: researching and planning a web presence MBA 563 WEEK 5"

Willa Small
5 years ago
Views:

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

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 How to design the underlying structure of a web site

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 Face-to-face encounters replaced with screen-to-face interactions (and screens of many sizes) Build your site to work well on any device (responsive design) Often the first 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

4 Ways to get a web site built Build and code from scratch bespoke development (HTML, CSS, databases, ecommerce functionality etc) Wide range of firms offer services of varying expense, sophistication, and levels of expertise (the sky is the limit) Use a content management system (CMS) as the foundation for the site Wordpress (it is said that Wordpress powers 27% of the web); Joomla, Drupal etc Template-based sites Squarespace, Weebly, Wix etc. Aimed at small business with little or no technical expertise. Disadvantage is that the site is not usually exportable for hosting elsewhere (proprietary systems) & there is very limited customization

5 THE MOBILE FIRST WEB

6 The importance of a mobile-first strategy for website design Increasing shift to mobile access of websites Google announced it would penalize non mobile-friendly websites in mobile search results(april 2015) In October 2016 Google announced it would split its mobile and desktop index with the mobile index being the primary and most upto-date version Try the Mobile-friendly Test

7 Responsive design Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor's screen size and orientation and change the layout accordingly.

8 The process of designing and building a mobile-friendly site The Responsive Web Design Process (Cuker, 2013)

Tips for a mobile site Clear and simple navigation hamburger menu is popular It is even more important to identify the content people want to access on mobile Remember that

9 Tips for a mobile site Clear and simple navigation hamburger menu is popular It is even more important to identify the content people want to access on mobile Remember that content will be stacked on a small screen If you are a business with a physical storefront always integrate a Google map so people don t have to leave your site to find you

10 WEB DEVELOPMENT STAGES AND ACTIVITIES

11 Web development workflow model: Define the project & set goals Plan Build and improve Launch and evaluate Design and develop the website structure Plan Create content and build site Build and integrate content Design the visual interface Plan Goto & Cotler Web ReDesign 2.0: Workflow that Works (2005) New Riders

12 Another way of looking at the elements of the web design process

13 PLANNING A WEB SITE: DEFINE THE PROJECT AND SET GOALS

14 Steps in planning an effective web presence 1. Determine business objectives, site goals, and success factors 2. Identify the target audience and create user profiles of audience members 3. Conduct market research and competitive analysis 4. Design the site for audience, functionality, and usability

15 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

16 Setting website goals What do you want site visitors to do? Business objectives Site objectives Success criteria Why does your web site exist? What functions and content will your site provide? Design your site to achieve these

17 Identifying the purpose of a web presence for an organization A web site can have many purposes, both broad and specific. Some examples: Provide product or service information Sell a product or service Increase brand recognition Provide help, operational instructions, or customer support Shift customers toward self service Induce people to subscribe to a newsletter Provide information for the media Allow people to make bookings online

18 User oriented design: Motivations and Goals of Web Site Visitors why are they there? to learn about products or services to buy the products or services to obtain information to obtain contact information for a person or department in the organization to interact with other users to search for something in particular to browse to be entertained Catering to all these different needs in designing a web interface can be challenging When you set the goals for a site, think about what people want and why they are there

19 Success criteria Be specific! a 25% increase in newsletter signup by 31 st December dinner reservations booked via the online form in October ,000 software downloads at the promotional price during Q a 5% increase in visitor time spent on the product feature page by 30 th September 2018 Conversion rate (see next slide)

20 Conversion rate Conversion rate: keeping track of the percentage of your web site visitors that take a desired action. For example: registering on your site customizing your site booking an appointment making a purchase Conversion rate calculation: Number of purchases divided by number of site visitors a site that had 1000 visitors who made 50 purchases has a conversion rate of 5%. A success criteria would be to increase your conversion rate Conversely for an ecommerce site a goal might be to decrease shopping cart abandonment

21 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

22 Aims of design for usability 1. Understand user s goals 2. Anticipate them 3. Make it easy to accomplish them a way to meet the goals must be reflected in the design of the web pages themselves

23 DESIGNING AND DEVELOPING WEBSITE STRUCTURE AND CONTENT

24 Designing the structure of the site 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? Creating wireframes is 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 and programming changes take longer than wireframe changes

25 Site maps and wireframes Site map: A visual representation of a site s structure, organization, flow, and grouping of content Shows an overview of the site structure as a whole and how the pages link together Wireframe / blueprint: Show All major page structural elements Image and media placement and sizes (in pixels) Navigation elements Functional elements (forms, buttons, interaction etc) Messaging / content areas Does not typically include visual design elements

26 Content - the WHAT of the site What are the products, information, services etc? The call to action : promotional and communications messages what do you want people to do? How do you convey your message? Text, images, sound, and video Widgets for content from 3 rd party sites (eg. twitter) Embeds for video, Slideshare etc Content type: differentiate between time sensitive information versus evergreen information

27 Community content User Generated Content (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 reviews, support forums, knowledge sharing

28 ELEMENTS OF WEB VISUAL, INTERFACE, AND FUNCTIONAL DESIGN: WEBSITE USABILITY

29 Customer-Centric Web Site Design and Usability Usability doesn t just mean easy to use - it means usable by the site s target audience for their purpose in using the site (the use case ) Amazon.com has a very different use case than Google.ca or Twitch.tv or VIU.ca Think about Function (what can the user DO) Aesthetics (look and feel, graphic design) Content (text and media; freshness; UGC)

30 Q: What s the most important thing I should do if I want to make sure my web site is easy to use? A: Don t make me think! From: Steve Krug. Don t make me think: a common sense approach to web usability. 3 rd ed. New Riders

Managing Layout and Whitespace Put content that is important to the user above the fold Why use responsive design? How do you know what is important?

31 Managing Layout and Whitespace Put content that is important to the user above the fold Why use responsive design? How do you know what is important? Use server logs Use responsive design so that your site looks good on all devices. Relies on use of fluid layout and image elements screen resolution is detected by CSS media queries On mobile your site layout will be stacked so make sure the order is optimal Use whitespace

32 Make sure your site loads fast

33 Navigation labels and functionality Think about how people want to access your content (by product, by task, by part number etc) Use the language of the user to label your content, not the language of the organization what is appropriate depends on your primary target audience eg. on a gardening site scientific name for diseases or common names? Latin or English names of plants for a gardening site? Avoid ambiguities in labeling On more complex sites use breadcrumbs to help people find their way

34 Consistency Make sure that the navigation of the site is consistent Use colour / graphics to help user keep a sense of where they are Follow web conventions (where audience appropriate) eg. making the logo (top left?) clickable back to home page Links underlined or not?

35 Write for the web? It depends on your audience, and the nature of the content People tend to scan rather than read on a screen More white space, bullets, shorter paragraphs, are often recommended for content that is likely only to be read onscreen Longer or more dense material should be printready and allow font size changes BUT remember that people do increasingly read on screens of all sizes

36 Contact us? Provide lots of information addresses Phone and fax (?) numbers - for customer groups / product groups Physical address Twitter account for DM / Facebook Messenger Real-time chat Employee names are nice to have (if appropriate) Not just fill-out forms (but well designed forms are very important) Make sure you have the resources to answer give your visitors a time frame for a response

37 12 reasons I won t buy from your website: the mistake list (from JeffBullas.com includes examples) Low quality visuals The site doesn t appeal to the target audience Content is stale and boring Under-estimating the importance of the About Us and Contact Us pages The shopping cart doesn t work properly Your trust indicators are missing Bad SEO Not being mobile friendly Not having video to illustrate products Not having a clear value proposition Cheesy stock images No available calls-to-action

Planning and designing a web presence (Part 1) MGMT 230 Week 3

Planning and designing a web presence (Part 1) MGMT 230 Week 3 After today s class you will understand.. The main steps in the website planning and development process How to identify goals for a particular