Aneta Platzerova

Information Architect

and User Experience Portfolio

LinkedIn: anetaplatzerova

Telephone: 0793 9007 792

E-mail: mailto:ap.aneta@googlemail.com

Address: 10 Grafton Close, Maidenhead, SL6 7UG

In this portfolio

• About me

• Work approach and deliverables

• Case studies

• Contact details

About me

I am passionate about User Experience Architecture, eager to expand my

skills while following my passion for web usability and making complex

things simple and enjoyable.

I studied Web Design and Development course at Qantm College in

London that introduced me to Human-Computer-Interaction , User

Experience Design and I have not stopped being passionate about web

usability since then.

I have been working as an Information architect for over 3 years now. I

have had a great opportunity to work on a variety of projects from e-

commerce to complex online applications where I could hone my skills.

In this portfolio I have provided an insight into my work approach and

shown some examples of my work.

Defining a project’s key milestones

While working in agency environment I have adopted some key

milestones that help me represent my thinking process whilst creating the

User Experience.

Each step can be also represented as a core project deliverable that I

am going to illustrate in this document.

Step 6

Usability

Testing

Step 5

Wireframes

Step 4

Process

Flow

Step 3

User

Journey

Step 2

Sitemap

Step 1

Discovery

Phase

Work approach

Defining a project’s key milestones

While working in agency environment I have adopted some key

milestones that help me represent my thinking process whilst creating the

User Experience.

Each step can be also represented as a core project deliverable that I

am going to illustrate in this document.

Step 6

Usability

Testing

Step 5

Wireframes

Step 4

Process

Flow

Step 3

User

Journey

Step 2

Sitemap

Step 1

Discovery

Phase

Work approach

Step 1: Discovery Phase Getting to know the target audience

This step includes research into the

company, its market, customers and

competitors and any analytics

available from previous incarnations of

the website.

In the Discovery Phase I am involved in

defining the Key Target Audience by

specifying and analysing the users such

as who they are and what is their

“Situations”, “Motivations” and

“Expectations”.

Usually all findings about the user are

summarised through the “Personas” –

one of the usual deliverables for this

phase.

Personas for national holiday park operator

The sitemap is a great tool that helps me to communicate my thinking and the site

structure to all of the project stakeholders. The main focus is defining the Primary and

Secondary navigations, the footer, site hierarchy and content prioritisation.

Sitemap for financial planning experts

Sitemap for global crisis management PR business

Commonly I create the site structure in sitemap generator

tools such as “xMind”.

Step 2: Sitemap Defining the site structure

The User Journeys helps

to visualise the path

that the users need to

go through (page by

page) to accomplish

their individual goals as

quickly and easily as

possible.

A page description tell

us about what the

page contains and

how the users interact

here. Page interaction

describes the

interactions and

responses of the system.

User Journey for the vehicle quotation web application – Administrator view

User Journey for a vehicle quotation web application – Fleet manager view

Project narratives: This application has 3 different user roles with specific capabilities and paths that needed to be documented for all stakeholders.

Step 3: User Journeys Defining the core path and outcomes

A robust way to capture the

user’s actions and how the

system responds is to create

Activity Flow Diagram.

This helps me to demonstrate

all eventualities and design a

system that responds to every

users choice.

I especially find this document

helpful when communicating

with developers.

Activity Modelling for a private social community site. Each trigger such as submitting a new “Post” updates other members’ views. These relationships needed to be clearly defined.

Purchase Process Flow for a broadband company that displays several activities per page by using in page links (anchors).

Step 4:

Process Flow The triggers and system responses

Wireframes are one of the main deliverables.

These encompass the preceding thinking

process.

Through the wireframes I am communicating

the page layout, navigation and element

hierarchy in a visual form that is easily

understandable. The site interaction, links

between the pages and any conditional logic

is demonstrated through the Prototypes.

Usually the wireframes are presented to

stakeholders for any amendments and

iterations. Once signed off this becomes the

referral document for others involved in the

project. For responsive sites I consider the way

in which the layout needs to change for

different devices. For this I draw upon my

development knowledge to try to minimalize

the amount of additional effort this incurs.

To produce the HTML prototypes and

documentation I use a tool called “Axure”.

Purchase Process Flow for broadband company that displays several activities per page by using in page anchors.

Wireframes for the vehicle quotation web application (a responsive site) – showing the search functionality and results for desktop and mobile.

Step 5: Wireframes Page layout and hierarchy

Usability testing provides me with data

about the users behaviour while

browsing the website. This is the time

where I learn about the user the most.

The outcome from the user testing is for

me extremely valuable. I can validate

my initial thinking abut the users’

“Situation”, “Motivation” and

“Expectation” that were defined during

the discovery phase.

The Morae usability testing tool allows

me to record sessions, edit video,

generate analysis and create a

presentation of the results.

Observation Usability issue Severity rating

The users were struggling to recognise the current view because the colours were used inconsistently.

The tabs for different delivery details used the different colour metaphor that in the rest of the site.

Completed with difficulty

The Address lookup form fields don’t work in a natural and logical way. It is very easy to make a mistake that causes a complete abortion of the look up functionality and consequently the buying process too.

The address lookup functionality is system oriented and not user oriented.

Failed to complete / Completed with difficulty

Extract from Guerrilla Usability testing Task: Complete the checkout process up to payment details page without actually entering payment details.”

Step 6: Usability testing The users behaviour study

Case studies

Recently I have been tasked to create search functionality for a vehicle quotation web application. I came up with two interface variations containing the required fields that I wanted to validate with real users. I conducted some quick internal Guerrilla usability testing sessions which made my final decisions far more informed and the search more intuitive.

Option A Option B Final version

Case study 1: Guerrilla A/B testing (Summary)

Option A - Observations

1. Default view (closed view) - The price editing was not recognised immediately.

2. Manufacturer open view - The users often did not proceed to the next step – the link to model was not obvious enough.

3. Car attributes and contract specification categories were not immediately obvious.

4. Mileage – the words “Up to” needed to be included as the user thought they had to check the 10,000 and 20,000 mileage to get both ranges in the search results.

5. Makes and models selection – The selection of items were found to be intuitive but the microinteraction needed further contemplation.

1

2

3

4

5

Case study 1: Guerrilla A/B testing (Option A)

Case study 1: Guerrilla A/B testing (Option B)

1

2

3

4

Option B - Observations

1. Manufacturer view - Easily missed while

glancing at the search functionality.

2. Vehicle type selection - Use of the drop down

list for selecting the manufacturer seems to be

preferable by the majority of participants (3 out

of 5).

3. “Add another manufacturer” link - make this

link more visually obvious, for example by

adding a meaningful icon next to this action.

4. General findings – The participants were more

comfortable with this option as they had

clearer overview of what is available and did

not mind scrolling to view more options.

Task: Allow the user to select a price from a

wide range (£10 - £5000).

Challenge: Create the widget within a

limited space that enables clear mobile

friendly functionality. The initial slider

proposition was designed for a small price

range only(client request) and no longer

“Fit for purpose”. The whole widget needed

to be reconsidered.

Output: The slider was changed to a drop

down list that accommodates a specific

price range that is defined by user. This

solution significantly reduces the length of

drop down list that is more digestible and

mobile/tablet friendly.

Wireframes – defining microinteraction – the interface required to select the price range from the extensive list (from £10 - £5000 at £25 intervals). This would create an obscenely long list and almost unusable drop down list for a responsive view. I had to break down the price range into smaller ranges and allow to navigate within this range. As per research from client, 90% of users do not select the price range above £1000 for this reason I set the default values £10 – £1000 price range.

Initial proposition

New solution proposition

Case study 2: Microinteraction (Defining interaction)

General Heuristics - To analyse existing sites I use Heuristic evaluation where I consider the site in context of heuristic guidelines and try to identify any problems in key usability sections including the Navigation, Functionality, Structure, Content, Layout, Colour, Persuasion and usability best practice and provide guidance on what should be done to rectify the issues.

1. Ensure that visual indicators are provided so

that users are orientated as much as possible.

Consider using a different background colour

to identify a selected (hover over) state

2. Ensure that navigation labels are easy to scan.

Where possible ensure that any labels appear

on a single line instead of breaking across two

or more lines

3. Ensure that content is not constrained by the

page layout. Consider making the most of the

area in the mega menu that is unused and

that space is reduced to minimum

4. Ensure that users don’t need to scroll to use

navigation. Consider distributing the content

equally across the columns

1

2

3

4

Example from Heuristic evaluation document for UKSA website

This step includes

research into the

company, its market,

customers and

Personas for national holiday park operator

Case study 3: Heuristic evaluation (Extract from past evaluation)

Contact details:

Aneta Platzerova

LinkedIn: anetaplatzerova

Telephone: 07939 007792

E-mail: mailto:ap.aneta@googlemail.com

Address: 10 Grafton Close, Maidenhead, SL6 7UG

Well done, you have made it to the end!

Thank you for taking the time to

review my portfolio