Amity International Business School

Amity International Business School

MBA- IB, 3rd Semetser Digital Marketing Dr. Loveleen Gaur

Amity International Business School

Module 6: Planning and managing website development

The user-centred design web process Amity International Business School and project plan
Planning Audience profiling Website specification

Navigation

Customer journey mapping

Design

Competitor research
User Acceptance Testing

Agency brief

Wireframe development

Test site creation

Testing

DDA Compliancy

Usability

Server load testing

Delivery

Full Creative design

Final UAT

Live environment

Launch

Amity International Business School

Amity International Business School

Wireframe
A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.Wireframes are created by User Experience professionals called Interaction Designers.

Wire Frames testing and implementing web site designs

Amity International Business School

Amity International Business School

Wireframe Testing
At the wireframe stage the website exists only in graphical form, perhaps in PhotoShop format or PDF. Nevertheless it is possible to assess a subset of the W3C's Web Content Accessibility Guidelines (WCAG) checkpoints even though no code has yet been written. In addition it is possible to identify potential issues and provide guidance for the developers and content creators, such as the recommended semantic structure. Checkpoints that can be assessed may include the following depending on the level of detail that is present.
7

Amity International Business School

All information conveyed with colour is also available without colour, for example from context. There is sufficient colour and brightness contrast between text and backgrounds. This will be applied to both text and graphical representations of text. The use of markup rather than images to convey information. The use of heading, subheadings and lists to divide large blocks of information into more manageable groups. The destination of links is clear from the link text (e.g. don't use 'click here' or 'read more'). The existence of a sitemap page or table of contents. Consistent use of navigation mechanisms. Appropriate labelling of form controls. Consistency of presentation style. Other accessibility issues may be identified depending on the content of the pages and the degree to which the site's structure and behaviour can be determined from the wireframes.

Amity International Business School

Wire Frames testing and implementing web site designs

Amity International Business School

Wireframe Testing tools

Wireframe techniques make easier to connect ideas for reduce time and cost and allow greater straight usability and functionality testing afore implementation. We must download free wireframe tools and present best ideas then put live to get user feedback.
10

Amity International Business School

Balsamiq Mockups

11

Amity International Business School

Cacoo Cacoo is a userfriendly online drawing tool that allows you to create a variety of diagrams, such as sitemaps, wireframes and network charts.

12

Usability testing

Amity International Business School

Running a series of test scenarios with an average group of customers. Identify 90%+ of potential usability issues before you launch Gather real data and feedback to increase efficiency of design Develop insight into potential behaviour

Amity International Business School

User Acceptance Testing (UAT)

Final test once design is implemented by Subject Matter Expert or user.
Requirements sign off Test script sign off Bugs/crashes/issues

Planning and briefing web projects Internal stakeholders

Amity International Business School

Communicate:
Objectives KPIs Budgets Timescales Ongoing progress reports

Output:
Buy in/approval Business requirements Involvement of right people Easier implementation

Developing technology gives it life Amity International Business School

Development and technology has implications for the way your site functions,how usable and accessible it is, as well as implications for SEO. The main considerations you should be aware of when building a site:
Managing content(CMS)

Interactive interfaces-Web users have come to expect rich, interactive experiences online, and interactive website interfaces are a part of that. E.g. Adobe Flash, HTML5, with CSS3 and JavaScript
Search and usability considerations
16

Web technologies

Amity International Business School

HTML Hypertext Markup Language XML FEEDS Extensible Markup Language XHTML Extensible Hypertext Markup Language CSS Cascading Style Sheets AJAX Asymetric Javascript and XHTML RSS FEEDS Really Simple Syndication VIDEO STREAMING RICH MEDIA

XML feeds

Amity International Business School

Data in tags. XML is the mark up language that define the set of rules for encoding documents in a format that is both human and machine readable.

AJAX(asynchronous java script)

Amity International Business School

With AJAX web application can send data to and retrieve data from server asynchronous(background) without interfering with the display and the behavior for the existing page.

RSS feeds

Amity International Business School

Information architecture planning customer journeys

Amity International Business School

Amity International Business School

Budgeting for web projects

Traditional/historic spend
Top down Bottom up

Priority Based Activity Based

Budgeting for web projects Planning Design Testing Delivery

Amity International Business School

Budgeting for web projects Planning

Consultancy and research Specification development Technology research Analysis of historic web analysis and target audience

Amity International Business School

Budgeting for web projects Design

Creation of wireframes Creation and hosting of wireframes Development of core site (CMS/programming)

Amity International Business School

Budgeting for web projects Testing

Specification of testing programme Usability testing User Acceptance Testing Contingency for additional testing

Amity International Business School

Budgeting for web projects Delivery

Final design and development Hosting and launch On going maintenance Continued programme of testing

Amity International Business School

Example budget for web project

For corporate website with CMS Planning stage = Design stage = Testing Stage = Delivery (launch)= Delivery (ongoing) = 5000 - 10000 15000 - 30000 15000 - 20000 5000 - 10000 12000 per year

Amity International Business School

launch

Amity International Business School

Testing is an important part of website development and design, and it should take place throughout the process of planning, designing and building, leaving just final quality assurance (QA) testing before the site goes live. The site needs to be tested in all common browsers to make sure that it looks and works as it should across all those browsers. All links should be tested to make sure that they work correctly, and its always a good idea to get a final check of all the copy before it goes live. Tools like W3Cs HTML validator (validator.w3.org) should be used to validate your HTML

29

Amity International Business Case study: Happy Cog and Greater School Philadelphia Tourism Marketing Corporation

In 2010, the Greater Philadelphia Tourism Marketing Corporation (GPTMC), an organisation geared toward creating awareness around and promoting the city of Philadelphia in the United States, needed to refresh their website and general digital presence. The original website, created in 1997, had become a key marketing tool for the organisation but due to its outdated design, was facing some major problems: The designs DNA did not encourage a high degree of engagement with content. Excessive navigation and a fragmented architecture meant users were often confused. There was no strategy for the social web.
30

Amity International Business School

31

Amity International Business School

In order to create an engaging and user friendly site, Happy Cog, a US based digital agency, worked with the organisation to scrutinise data from both local and tourism sources. They needed to change perceptions about what Philadelphia had to offer and celebrate its unique attributes. The website needed to:
Be emotionally compelling. Encourage users to spend more time on the site to encourage them to book trips and spend money in Philadelphia. Become more credible.
32

Solution

Amity International Business School

This was not an easy task, but designers chose to create portraits of the city on the website to showcase some of its less commonly known sites and features. They adopted a visual approach to the website and through this, aimed at enhancing the sites ability to engage users. Through this design concept, they also hoped to assist users in planning their trips.
33

Amity International Business School

34

Amity International Business School

To fix the navigational issues on the site, the decision was made to simplify the number of choices for the user. Three basic critical processes were identified that the architecture needed to support: Selecting a destination. Building an itinerary. Obtaining detailed information about the city. They also needed to fix the management of the site. Originally the back-end of the site was managed through a variety of tools which did not integrate well. These were made up of custom publishing solutions and blogging tools.
35

Amity International Business School

GPMTC has many custom publishing needs and during the course of the project, Happy Cog realised they needed to find one comprehensive content management solution to successfully handle all of the sites requirements. They decided on ExpressionEngine (EE) as a platform for the project since this enabled authors with varying levels of technical skill to get to work immediately. This was a pivotal requirement since GPTMC needed to migrate hundreds of entries from a legacy MS SQL/XHTML publishing platform to a MySQL/Textile system manually. It also meant that Happy Cogs developers were able to code XHTML with real-life website copy and not worry that real copy would break the layout after coding was complete.
36

Amity International Business School

At the same time, the Happy Cog team was able to: Distribute their development workload due to a well documented templating language. Work on the front-end and back-end concurrently to code pages. Hook up basic site functionality while working on front-end XHTML development. Free their back-end developers to focus on coding custom functionality. Develop front-end JavaScript slideshows that can be customised and edited.

37

Amity International Business School

Another major change was the URL. From http://www.gophila.com it was changed to http://www.visitphilly.com/. This meant implications for the search engine visibility of the site.

To combat this, the team worked together with SEO organisation, Seer Interactive, to implement a 301 redirect tool which allows GPTMC to specify routes and make sure the search ranking are not negatively affected.

38

Questions

Amity International Business School

What role did navigation and usability play in the redesign of the website? Why did the developers decide to consolidate the content management platforms?

Last date of submission- 5th September 2012

39