Interactive solutions - Web Usability

Interactive solutions

e-marketing

e-business

e-gov

e-consulting

Practical use of prototypes in designing portals

Case study project site Ministry of Finance www.mf.gov.pl

Practical use of prototypes in designing portals

Presentation plan 1. Client and order - problem, goals, resources.

2. Prototypes - types and characteristics.

3. The process of project implementation - from the general to the detail.

4. Methods and tools used in project implementation.

5. A brief presentation of the results of the work on the project.

6. Summary: conclusions.

7. Questions to the teacher.

www.ideoagency.com

Practical use of prototypes in designing portals

Client and order - problem, goals, resources Client: Problem:

Objectives:

Ministry of Finance  the contractor needs to provide portals specifications before executing it;  there are ideas, but lack of resources and knowledge to create a project on your own;  the need to use fresh insights on problems and concepts, to introduce new solutions; Strategic task:  designing a new version of the Ministry of Finance website (mf.gov.pl).

Operational task:  enhance the transparency, usability and functionality of the user interface (user experience);  design of site structure and information architecture in such a way as to reconcile information between two independent services (MF service and information service prepared by MF)

www.ideoagency.com

Practical use of prototypes in designing portals

Client and order - problem, goals, resources Resources:

On the Ministry's side: - 12-person, multidisciplinary team on the Ministry's side - decision makers in the composition of the team - clearly defined final effect that the MF wants to get - prepared preliminary concepts, analysis of the target group, preliminary project "pro-site" - a definite, unrestricted budget for an advisory project On the agency side: - 3 person team - knowledge, experience, commitment

www.ideoagency.com

Practical use of prototypes in designing portals

Prototypes - their types and characteristics

Definitions:

Prototype - this is a model design; Visual interface mapping; Used to represent the structure / layout of elements, information architecture, functionality, and product behaviour itself. The basic advantage is the ability to quickly modify (relatively cheap). It is a tool used to test usability with users as well as to present the concept of a projected product to a customer.

Mock-up’s are drawings / diagrams of the interface and functionality of the product.

Prototypes are interactive mock-up’s where you can interact with a product.

Mock-up’s and prototypes are most often accompanied by a descriptive document - a functional specification.

www.ideoagency.com

Practical use of prototypes in designing portals

Prototypes - their types and characteristics - Electronic - Paper

- HI-Fi - LO-FI

www.ideoagency.com

- Static - Interactive

Practical use of prototypes in designing portals

Paper does not mean noninteractive ...

http://www.youtube.com/watch?v=GrV2SZuRPv0

www.ideoagency.com

Practical use of prototypes in designing portals

Project implementation process - from the general to the detail

STAGE 1

Analysis of the situation, surroundings, materials and customer needs

www.ideoagency.com

STAGE 2

Service analysis, benchmarking, recommendations, communication strategy

STAGE 3

Design of service structure and information architecture

STAGE 4 Design prototypes of services and develop functional specifications

Practical use of prototypes in designing portals

Methods and tools used in the project Usability testing of online services or applications can be divided into two main groups: - Usability studies involving the users of the target audience of the product (and the experts performing the analysis and analysing the results) - Usability testing based on expert audit.

Both groups contain a number of methods, techniques and research tools that are used in the research process.

www.ideoagency.com

Practical use of prototypes in designing portals

Methods and tools used in the project Steps 1 and 2:

Analysis of the situation, surroundings, materials and customer needs.

Service analysis, benchmarking, recommendations, communication strategy

Interview One of the basic methods used in the research process with users. In the case of a project for MF, the method was used first to deepen the knowledge of the client, his preferences and expectations.

Qualitative analysis Technique is based on expert judgment. The expert team (at least 2 independent auditors) analyses and evaluates the sites through prism defined before the survey areas, for example: aesthetic senses, layout of elements, functionality, usability, marketing and communication, SEM support analysis. Areas are selected individually for each analysis performed. The report includes an evaluation of solutions, a description of positive and negative elements, and recommendations.

www.ideoagency.com

Practical use of prototypes in designing portals

Methods and tools used in the project Steps 1 and 2:

Analysis of the situation, surroundings, materials and customer needs.

Service analysis, benchmarking, recommendations, communication strategy

Heuristic analysis This technique is based on the assessment of the conformity of a given project with utility rules (so called heuristics - the most popular are the 10 heuristics of J. Nielsen). Usually used to detect navigation problems.

Data analysis Method used at the end of the research process. It consists in systematizing the results and formulating the conclusions and recommendations necessary to write a report with recommendations. All collected test material is analysed.

www.ideoagency.com

Practical use of prototypes in designing portals

Methods and tools used in the project Steps 1 and 2:

Results:

www.ideoagency.com

Analysis of the situation, surroundings, materials and customer needs.

Service analysis, benchmarking, recommendations, communication strategy

- Report on the usability analysis of the current site - A report containing proposals and recommendations for solutions - A strategic document "Global Assumptions of the MF BIP + Project" including: > Service philosophy: goal, task, persona, etc. > Description of the most important functional and graphic assumptions for the site (recommendations and suggestions) > Description of the key functional assumptions for the content management system (recommendations and suggestions) and work flow > Communication strategy for all MF sites (domain policy, exchange of information between sites, etc.)

Practical use of prototypes in designing portals

Methods and tools used in the project Step 3:

Designing the site structure and information architecture

www.ideoagency.com

Practical use of prototypes in designing portals

Methods and tools used in the project Step 3:

Designing the site structure and information architecture

Research Methods: Interview For this stage, the method was used to use the knowledge of the Client Team regarding the preferences, needs and legal requirements associated with the information posted on the site. This information was confronted with expert knowledge, recommendations and targets set in previous steps.

Scenarios of use These are sets of defined tasks that users have to perform during utility tests. Such tests should take into account a number of typical situations for which a service exists. In the case of the project, they were internal tests - without user involvement. They used to evaluate the architecture you created for the clarity of the names of the menu items.

www.ideoagency.com

Practical use of prototypes in designing portals

Methods and tools used in the project Step 3:

Design the structure and architecture of the service information

Tools: Free MIND Mind Mapping Application.

Used for:  Create a complete, clickable structure for all sites  Applying descriptions of contents of individual elements of the structure  Apply descriptions of the functionality and use of the template element

www.ideoagency.com

Practical use of prototypes in designing portals

Methods and tools used in the project Step 3:

Design the structure and architecture of the service information

Results:

- The clickable structure of all services (9 independent structures) - Editable structure in .MM files (Free MIND application format) - A clickable structure with description: > Content of individual elements of the structure > Assign the functionality and use of the template element

www.ideoagency.com

Practical use of prototypes in designing portals

Methods and tools used in the project Step 3:

Design the structure and architecture of the service information

And if there was more time ...

Treejack application http://www.optimalworkshop.com/treejack.htm www.ideoagency.com

Practical use of prototypes in designing portals

Methods and tools used in the project Step 4:

Design prototypes of services and develop functional specifications

www.ideoagency.com

Practical use of prototypes in designing portals

Methods and tools used in the project Step 4:

Design prototypes and development of functional specifications

Tools:

AXURE RP Axure RP Pro is a great tool for creating all kinds of prototypes, user interfaces, flowcharts, and automatically generated application and web site specifications.

Us used for prototyping due to the extensive capabilities of advanced interactions and the automated generation of functional specifications based on the prototype.

Made: - Mock clickable services - Functional documentation

www.ideoagency.com

Practical use of prototypes in designing portals

Methods and tools used in the project Step 4:

Design prototypes of services and develop functional specifications

Tools: DRAW - OpenOffice package It is an OpenOffice vector graphics editor, comparable to the first version of CorelDraw. It enables the user to quickly edit and create both simple and impressive 2D and 3D graphics, including artwork and block diagrams, allowing them to be used in other package components or exported to different graphic formats.

Made: - Static mock sites

www.ideoagency.com

Practical use of prototypes in designing portals

Methods and tools used in the project Step 4:

Design prototypes of services and develop functional specifications.

Results:

- A mock up of 9 independent services reflecting the full structure and template links under each element of the structure: > About 377 MB > About 77 500 files - Functional Specification (315 pages)

www.ideoagency.com

Practical use of prototypes in designing portals

Some information about the project - curiosities Each of the services available at a separate address: - Ministry of Finance: mf.gov.pl - Tax Administration: ap.gov.pl or administration@apodat.gov.pl - Customs service: sluzbacelna.gov.pl or sc.gov.pl - Treasury Control: ks.gov.pl or kontrolaskarbowa.gov.pl Addresses of individual pages: - Customs Chamber: ic.gov.pl - Customs office: uc.gov.pl - Chamber of Taxes: is.gov.pl - Revenue Office: us.gov.pl - Treasury Control Office: uks.gov.pl Each unit in the unit will have addresses in the form of: - Tax Office in Rzeszow: rzeszow.us.gov.pl - Customs Chamber in Krosno: krosno.ic.gov.pl - Tax Control Office in Rzeszow: rzeszow.uks.gov.pl If there are 2 branches of the Customs Office in Rzeszรณw: - rzeszow.uc.gov.pl - at this address will be a link-page with all the units of the Customs Office in Rzeszรณw - addresses of establishments: rzeszow1.uc.gov.pl, rzeszow2.uc.gov.pl

www.ideoagency.com

Practical use of prototypes in designing portals

Some information about the project - curiosities

www.ideoagency.com

Practical use of prototypes in designing portals

Some information about the project - curiosities

www.ideoagency.com

Practical use of prototypes in designing portals

Summary - conclusions 









Achieve optimal BIP + Website design in line with business goals and technical requirements, Matching the number of sites and the scope of their information to the information needs of different user groups, Refining the interests of different groups within the Ministry of Finance Eliminate - at the usability and design study stage - most potential problems that might occur during implementation Formalization of knowledge: gathering, arranging and summarizing existing knowledge about the needs and requirements of the Ministry for the BIP + Site,



Providing key data for further deployment,



Increasing the efficiency of the implementation process.

www.ideoagency.com

Thank you for your attention!

Wojciech Szymański w.szymanski@ideo.pl tel.: 500 226 626 www.ideoagency.com