User experience architect portfolio - aneta platzerova-p

  • View
    71

  • Download
    0

Embed Size (px)

DESCRIPTION

 

Text of User experience architect portfolio - aneta platzerova-p

  • 1. 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
  • 2. In this portfolio About me Work approach and deliverables Case studies Contact details
  • 3. 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.
  • 4. Defining a projects 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
  • 5. Defining a projects 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. A robust way to capture the users 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
  • 10. 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
  • 11. 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 dont 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
  • 12. Case studies
  • 13. 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)
  • 14. 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)
  • 15. 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.
  • 16. Task: Allow the user to select a price from a wide range (10 - 5000). Challenge: Create the