alexander crockett ux portfolio 2013

Upload: mas-pas

Post on 14-Apr-2018

219 views

Category:

Documents


0 download

TRANSCRIPT

  • 7/30/2019 Alexander Crockett UX Portfolio 2013

    1/15

    T: +1323 559 1607 E: [email protected] W: http://alexcrockett.com

    Alexander Crockett

    Portfolio & Work

  • 7/30/2019 Alexander Crockett UX Portfolio 2013

    2/15

    T: +1323 559 1607 E: [email protected] W: http://alexcrockett.com

    3. About Me4. Capabilities5. Approaches

    6. Understanding Users7. Proles, Personas & User Stories

    8. Experience Maps & Mental Models9. Use Cases & Use Case Diagrams

    10. Designing Systems11. Flows, System Logic, & Diagrams12. Storyboards & Interactions13. Layout Patterns & Wireframes

    14. Things People Have Said

    Contents

  • 7/30/2019 Alexander Crockett UX Portfolio 2013

    3/15

    T: +1323 559 1607 E: [email protected] W: http://alexcrockett.com

    I am a User Experience Architect. I use research methods tohelp dene systems and help people engage with servicesonline. I take a holistic approach and have worked acrossmultiple devices: from desktop and mobile to tablet and

    TV. I advocate storytelling to describe a user s experience.My approach is a led by service thinking, ethnography,contextual and task based analysis.

    Projects have included work with Blitz, Rosetta, TBWA/ChiatDay, Precedent, Genex, Phenomenon and now my own (andyour) projects as well as work with Microsoft Game Studios,Computer Associates, The British Heart Foundation, severalNHS Health Authorities, The Financial Services Authority,

    Acura and Ford.

    I started with studies in psychology, art and communicationstudies and post-graduate studies in research methods inthe social sciences. Whilst studying I specialized in visualcognition. I used specialized research software to buildexperiments that study how we understand visual stimuli tomake better decisions. I later taught the use of this softwareto other post-graduates.

    I was interested in the pre-conscious processes that govern how we interdisplays to make decisions. After conducting a review of the available litethe human visual system and relying on my studies of human visual proceI designed a piece of research that measured the role stimuli in the enviroplay on our ability to make accurate decisions.

    I created an experiment that presented cues in a series of conditions. Bymeasuring reaction times and accuracy I found results that have directimplications on HCI and the way in which we think about decision making

    About Me

  • 7/30/2019 Alexander Crockett UX Portfolio 2013

    4/15

    T: +1323 559 1607 E: [email protected] W: http://alexcrockett.com

    1. ResearchI have successfully used a range of research methods to solve dierent kinds ofproblems at dierent points in the design and strategy portions of a project. Theseinclude the use of methods such as:

    - Interviews- Focus Groups- Card Sorting

    - Ethnographic and eld research- User testing- Heuristic Evaluations

    - Best Practice Reports- Trend Analysis

    2. Information Design & Information ArchitectureFrom the early stages of projects I analyse and map how information will be usedacross systems. I do this using tools that include:

    - Sitemaps- Taxonomy & Ontology Models- Mental Models

    - Content Audits

    - Object Attribute Analyses

    3. Interaction DesignWhen I design a system I start with a framework for the design of the system. Thisincludes specifying the functionality, interactions and patterns that will be used. Ithen:

    - Create sketches of the system- Create system and ow diagrams- Create wireframes

    4. Systems Design & StrategyFor me UX is about systems and not interfaces. I therefore take a systems wideview thinking about the ecosystem and the environment of use. The tools I use todescribe and think about these systems include

    - Service Blueprints and Experience Maps

    - Flow Diagrams- Use Case Diagrams- User Stories

    Capabilities

  • 7/30/2019 Alexander Crockett UX Portfolio 2013

    5/15

    T: +1323 559 1607 E: [email protected] W: http://alexcrockett.com

    Patterns

    Sketches

    Diagrams

    WireframesTesting

    InterviewsFocus Groups

    Card SortingAnalytics

    RequiremenQualitativAnalysisQuant.

    AnalysisMental ModTask Analy

    Personas

    Use Cases

    Scenarios

    Concepts

    Strategies

    Wow, this is

    easy to use.

    Approach

    Dene User Experience begins by dening the scope and nature of the

    solutions it will design to. This includes the nature and scope of the

    requirements for both business and user.

    In this denition phase I conduct research, create requirementsand produce models and mappings that will inform functionality,screens and goals that the system I am designing must accountfor. These mappings can include experience maps, use cases, ows,information design, service design and strategies and concepts thatwill help realize a system.

    Design I typically design in between two and three phases depending on

    the projects scope. My approach is based on my experience ofproject requirements. The rst phase of design is always done inbroad strokes. Future iterations rene designs and where it helps Ibuild prototypes.

    Specication, Testing & IterationFinally I build detailed specications. Where testing is required Iprovide plans and conduct usability tests.

    Iteration is something that is always accounted for. Through aexible approach to projects, processes and designs I make sure Iam always on hand to work through the nal and next stages of anyproject I am working on.

  • 7/30/2019 Alexander Crockett UX Portfolio 2013

    6/15

    T: +1323 559 1607 E: [email protected] W: http://alexcrockett.com

    Understanding Users

  • 7/30/2019 Alexander Crockett UX Portfolio 2013

    7/15

    T: +1323 559 1607 E: [email protected] W: http://alexcrockett.com

    Proles:By building proles I have helped develop an understanding of users values,goals and aspirations. Knowing these helps think and design to user needs

    and dene the way in which technologies can support the things people do.

    By understanding the limitations that exist for a group of people I havehelped identify the constraints people have. This has helped build commonunderstanding about innovations will help or hinder people.

    Proles also act as a context from which we can all map ideas. Primarily,proles I develop have acted as a communication tool through the projectprocess.

    Personas:I have created many personas and have worked on projects in whichthe goal was the creation of personas and projects where personas havesupported design. Personas inform design and business decisions, groundingthem in a common understanding.

    Stories:I use stories and scenarios as a starting place for design. A scenario cancover a lot of ground prior to working through use cases and ows. Theyalso help identify important parts of a system early.

    Proles, Personas & User Stories

    .

    PHOTOGRAPH

    Michael Wole50yrs.o age

    Owner,Architec tureFirm

    HouseholdIncome:$500,000

    Married

    Hastwokids,Jamie14&Kurt16

    LivesinManhattan,USA

    Hisextraeortsgointoarchitectingthedetailso atripthatwillbememorableandsignifcant.

    KeyCharacter istics

    Plansahead

    Valueaware

    Likestovalidatethedetails

    Clearvisionotheexperience

    Comparesop tions

    Consultsamilytomakenaldecisions

    DecisionPoint s

    Whatkindotriparewetaking?

    Willthe

    destination meetourdemands?

    Whatwillbenovelandinteresting?

    Doweneedtothinkaboutanitinerary?

    WhatwillmywieandIdo thatsspecial?

    Goals

    Feelgoodaboutdecisions

    Havehistripgo

    smoothly Feellikeagreatdad

    Haveasenseoaccomplishment

    Findspecicpointsointerestoreveryonegoing

    Frustrations&PainPoints

    Inecientlycompletingsimpletasks

    Noteelingasiheis gettinga

    tailoredservice Havingtoworkharderthanheeelsheshouldtogetinormationheneedstomakedecisions

    Nothavingasenseoownershipandsupport

    Michaeleelsaccomplished,andvalueswhathesdoneandtheliethathesbuiltwithhiswieBeth.Hesarticulate,aproblem-solver,andawareodetails.Ultimately,Michaelislookingtoeelasenseo rewardromleisureactivities.Thatrewardcomesromeelingasieveryonearoundhimisgettingsomethingspecial.Hehasondmemoriesoeveningsspentwithhiswieatthe BoraBoraPearlHotel;atimeheseeksto recreate.

    Althoughheknowswherehesbeensuccessul,helikestoextendthescopeo hisexperiences.Hetakestripstolocationsthathethinkswillentertainandeducate,givehimandhiswieabreak,andaddto theircollectionomemories.

    Michaelsamilywillinvitecloseriendsonvacationwiththem.Recognitionorhis eortsisimportanttohimromthosearoundhim.

    Michaelexpectstobeableto getwhathewantswithminimumeortandhighreturn.Thisallowshimtoputhisextraeortsinto

    architectingthedetailsoa tripthatwillbememorableandsignicantoreveryone.

    Michaelsbiggestconstraintscomeromtheactthathesrunningabusiness,otenhavingtothinkcreativelyandonhiseet.Hewantstogiveeverythingtheleveloattentionheeelshisactivitiesdeserve,buthastorelyonsupportrompeoplearoundhim.

    Asaleaderhesusedtobeingin control.Heknowsheneedstorelyon otherpeoplesopinionsandhe valuesexpertise.Heknowstakingtheadviceoexpertscanimprovethequalityohisexperiences,especiallywhentheproductissomethingbetterthanheexpected.

    Ultimately,considerationsorMichaelrelatetothelevelo controlhe eelshehas.Whetherthismeanshesinspiringtheexperiences,orthathesabletomonitorthedirectionthingsaregoinginorderto takeownership.Toachievethesethingsheexpectsfexibility,supportwhenhe reachesorit andattheendohiseorts,asmileon theacesaroundhim.

    Likes Variety

    Enjoys Novelty

    Has Varied Interests

    Is a Creature of Habit

    Has a Sense of Adventure

    Believes Time is More Important than

    Interested In The Arts

    Enjoys Being with The Family

    Needs Control over the Experience

    Wants a Learning Experience

    Enjoys Excitement

    Looking to Relax

    Technographic Profle

    Michaelistechnicallyverysavvy.HeuseshisiPadandiPhoneorbusiness,orexamplehellviewarchitectural

    drawingsusingAutoCAD.Hefndswhatworksorhimandisloyal.Heswearyotheideaosocialmedia,butwillcommentonthesitesheuses andhaswrittenorarchitectureblogs.Hecatchesthenews,weatherandgetsinormationonline.

    Hecanbedescribedastimestrapped,

    driven,andtopuserotechnology.

    Interests, Values & Needs

  • 7/30/2019 Alexander Crockett UX Portfolio 2013

    8/15

    T: +1323 559 1607 E: [email protected] W: http://alexcrockett.com

    People interact with more than an interface. Websites and applicationsare all parts of an ecosystem in which information serves dierentroles at dierent times. At each of those times peoples needs, goals

    and attitudes change. By thinking beyond the interface and lookingacross the whole system a bigger picture can be built that allows us tolook across a whole journey and into its parts. By building blueprintsof those touchpoints, service interaction points and journeys I work tohelp create:

    - Strategies that are global- Interaction models that work across an ecosystem- Find opportunities to better engage with people- Identify when, why and how a person is using a system

    All with the sole purpose of ensuring that the systems we design aretrue to the service model, ensuring their relevance beyond the initialconcepts and through the lifespan of the user.

    Experience Maps & Mental Models

    LOOKING & DISCOVERING BOOKING

    UserActivities

    SupportingContent&F

    unctionality

    DECIDING

    Looksatthe World

    DESTINATION

    RESEARCH

    CRUISERESEARCH

    DETAILRESEARCH

    SHARESRESEARCH

    INITIALCOMPARISONS

    CONFIRMSDECISIONS

    MAKESDECISIONS

    BOLooksat

    Cruises

    Looksat

    Places

    Looksat

    Routes

    Looksat

    Activities

    ComparesCruises

    CruisePages

    Maps

    Location

    Pages

    RoutesPages

    Activities

    Pages

    Travel

    Videos

    ExploreShips

    ProfileCreation

    Onboard

    Life

    Itineraries

    Bookmark

    and Share

    VikingInfo

    SuggestPlaces

    SuggestActivities

    Bookmark

    Activities

    Save LocalHistory

    Save Points

    of Interest

    Travel OptionsBuilder

    Travel ProfileBuilder

    ItineraryBuilder

    TravelFavorites List

    CompareFeatures

    Pricing

    Joined

    Profiles

    ShareInterests

    Add and

    Remove Items

    Compare

    Cruise Dates

    LocalHistory

    Considers

    Cruises

    Looksat

    Ships

    Looksat

    Cabins

    Looksat

    OnboardLife

    LooksatTime Onboard

    Picks

    Options

    Considers

    Dates

    Looksat

    Cruise Length

    Looksat

    Time at Ports

    SavesOptions

    Shares

    Selections

    Gathers

    Feedback

    Narrows

    List

    Makes

    Choices

    Builds TravelProfile

    VisaInfo

    TravelItinerary

    Confirms

    Cruise

    Confirms

    Locations

    Confirms

    Activities

    Confirms

    Dates

    Notifieof Bo

    Booki

    Fi

    Cr

    Se

    Cr

    Bo

    Cr

    Vali

    Bookin

    ComparesPrices

    Compares

    Routes

    Compares

    Places

    Compares

    Times at Locations

    Compares

    Activities

    Makes

    Decisions

    Confirms

    Decisions

  • 7/30/2019 Alexander Crockett UX Portfolio 2013

    9/15

    T: +1323 559 1607 E: [email protected] W: http://alexcrockett.com

    From stories I write use cases. These can be written to any level ofgranularity and include the logic and interactions users will nd ina system. Use cases have helped to act and dene comprehensive

    views of the systems I have worked on:

    - The dene key interactions- The dene key pieces of functionality- They dene the main parts of a system- They identify complexities in a system- They help consolidate a view of how a system should work

    Use Case Diagrams extend Use case outlines and illustrate not justthe primary interactions but, the steps that go beyond those initialsteps a person takes to achieve a goal. Beyond that I use Use CaseDiagrams to:

    - Illustrate how interactions are supported- Identify the main sequences of steps- Begin the process of achitecting a system- Identify the data that a system will need at each point of contact

    - Tie a system together

    Use Cases & Use Case Diagrams

    Use Case 1: User Creates an Account1. User arrives at the Kraco site

    2. User selects sign-in/register

    3. User selects create an account4. User sees the account creation page

    5. The user completes the required elds

    6. The user arrives at their main account page

    Use Case 2: User Finds a Product1. User arrives at the Kraco site2. User sees the category of product the wish to purchase

    3. User selects the product category

    4. User arrives at the product listing page and sees a list of products5. User lters the list

    6. User sees a ltered list of products

    7. User sorts the list8. Result set is sorted by sort criteria

    9. User selects a product from the list10. User arrives at a Product Detail Page11. User adds item to cart

    12. User selects check-out

    13. User proceeds to check-out

    Use Case 3: User Searches1. User is at the Kraco website2. User decides to perform a search for the product, category or

    brand

    3. User enters product type in the search box4. User submits the search

    5. User sees a search result list

    6. User scrolls the list7. User changes the view from list view to grid view

    8. User selects an item from the list

    9. User arrives on a Product Detail Page

    Use Case 4: User Browses Bundles1. User arrives at the Kraco website looking for a collection of items2. User sees collections of products on the homepage

    3. User chooses to browse a collection of bundles

    4. User arrives at a page with a list of bundles5. User browses page and sees a module that displays similar

    bundles6. User marks page to view later

    7. User selects related bundle

    8. User arrives at new bundle page

    9. User sees bundle and product descriptions10. Users browses images

    11. User adds bundle to cart

    12. User proceeds to check-out

    Use Case 5: User Browses Designs1. User arrives at the Kraco website looking for a collection of items

    2. User sees they can browse collections of products by design3. User chooses a design

    4. User arrives at a landing page for the selected design5. User sees a banner, a description of the design style and products

    that share the design

    6. User marks products on the page to view later7. User browses page and sees a module that displays similar design

    styles

    8. User selects related design listed on the page9. User arrives at new design landing page

    10. User sees design and product descriptions

    11. User browses images

    Use Case 6: User Buys a Gift Card1. User wants to buy a Gift card for a family member

    2. User selects the option to buy a gift card

    3. User sees a page with gift card options4. User selects the options they want

    5. User selects purchase

    6. User proceeds to check-out

    Use Case 7: User Compares Products1. User arrives at the Kraco site2. User sees the category of product the wish to purchase

    3. User selects the product category

    4. User arrives at the product listing page and sees a list of products5. User lters the list

    6. User sees a ltered list of products

    7. User sorts the list8. Result set is sorted by sort criteria

    9. User marks products to compare

    10. The products are displayed as selected in the list11. User selects the compare view

    12.User sees a screen with the products theyve selected to compare13. User selects products they want to compare against each-other

    14. User sees product descriptions, images and features

    15. User removes items from the list

    16. User selects the product they are most interested in17. User adds to cart

    18. User proceeds to check-out

    Use Case 8: User Purchases1. User has items in their cart2. User selects check-out3. User sees shopping cart4. User chooses to add items, remove items or add to w

    5. [If User selects wish-list user is asked to sign-in]6. [If user makes modications to cart then shopping ca

    7. User selects check-out8. [If user is not signed-in user adds billing and shipping

    9. [If user is signed in they have the option to modify bo

    shipping details]10. User proceeds to check-out

    11.User sees price on conrmation page

    12. User selects to purchase13.User sees purchase conrmation and receives e-ma

    Use Case 9: User Selects Spanish Version of Site1. User arrives at site and sees content is in English2. User sees option to view spanish version3. User selects language options4. Page relaods with content in Spanish

  • 7/30/2019 Alexander Crockett UX Portfolio 2013

    10/15

    T: +1323 559 1607 E: [email protected] W: http://alexcrockett.com

    Designing Systems

  • 7/30/2019 Alexander Crockett UX Portfolio 2013

    11/15

    T: +1323 559 1607 E: [email protected] W: http://alexcrockett.com

    Every project I have worked on has required an attention to thedetails of a system. I have accounted for everything from statesof a system to the information that has to be mapped based on a

    users decisions in a system. I use diagrams to:

    - Communicate the logic of a system- Illustrate the steps and decisions that can be made- Identify the key paths and interaction points of a system- Help dene the requirements, states and scope of a system- Provide the basis for the information strategy of a system

    Flows, System Logic & Diagrams

    MessageDetail

    Screen

    ReportMessageConfrmation

    Dialogue

    ComposeScreen

    DeleteMessageConfrmation

    Dialogue

    MessageBox /Section

    SaveMessegeConfrmation

    Dialogue

    CancelMessageConfrmation

    Dialogue

    SendMessageConfrmation

    Dialogue

    UserCancels

    Editing

    UserSends

    Message

    UserSavesMessage

    UserReports

    Message

    UserDeletes

    Message

    UserRepliestoMessage

    UserSendsMessage

    UserSelects

    Message

    UserConfrmsAction

    UserCancelsAction

    UserCancelsAction

  • 7/30/2019 Alexander Crockett UX Portfolio 2013

    12/15

    T: +1323 559 1607 E: [email protected] W: http://alexcrockett.com

    Storyboard and interaction ows tell the visual story of an interface.They bring concepts to life. I use them to:

    - Communicate interaction concepts- Bring ows to life- Illustrate the main steps people can take- Illustrate the steps people can take to achieve goals- Find and identify additional opportunities and paradigms that

    support peoples journey through a system

    1. User Lands on QR Code

    Landing Page

    2. User Searches For Dealer

    3. User Lands On Dealer Search

    Result Page & Selects Dealer

    4. User Selects Vehicle From

    Dealer Inventory

    5. User Lands on Detail Page &

    Chooses to Contact Dealer

    Storyboards & Interactions

  • 7/30/2019 Alexander Crockett UX Portfolio 2013

    13/15

    T: +1323 559 1607 E: [email protected] W: http://alexcrockett.com

    Module Title

    Module t

    Con

    Bucket of links to content pieces

    Module

    Content

    within a

    Section

    of the site

    Functionality to either cthe content, share it

    or subscribe to a feed

    News shown in

    reverse chronological or

    A layout, the patterns used in a layout and the rationale behindtheir use are rst steps in design. By identifying patterns :

    - I dene the common patterns used in a site system- Communicate how layouts meet requirements- Identify which patterns best meet goals- Identify best practices

    Wireframes allow us to communicate design ideas, build the basisfor iterating through design concepts and create specications fordevelopment. Wireframes:

    - Communicate the intent and usability of a page

    - Specify use, interactions, layout and functionality of a page- Allow collaboration and communication at dierent stages of aproject

    I have worked across desktop, tablet, mobile and TV. In everyproject Ive worked on the wires have been the basis fordialogue, design and iteration. From sketches through to high-delity wireframes and prototypes I am uent at producing andcommunicating at the right level for any audience. In addition Iam uent at several application for design from Adobes software

    through to Visio and Axure.

    Layout Patterns & Wireframes

  • 7/30/2019 Alexander Crockett UX Portfolio 2013

    14/15

    T: +1323 559 1607 E: [email protected] W: http://alexcrockett.com

    Things People Have SaidI worked together with Alex on Halo Waypoint. He is diligent, enthusiastic, resourceful, and he brings a vast knowledge of User Experience tools and methodology to the Alex is always learning new methods and looking for ways to improve the UX process. He is a strong advocate for users and user research to ensure end users will alwaysbest experience. He is a great team member and he will be an advocate for the end users on any project.

    Jui Dai, User Experience/ Information Architect/ Visual Designer

    Alexander was a pleasure to work with. He brings a passion to his work that is not conned to business hours. Alexander is deeply interested in the craft of User Experien

    translates into a willingness to experiment with new methods infused in to current standardized practices. This desire to evolve is one of his greatest strengths. Please condirectly should you want to talk further about employing Alexander on your next project.

    Charles Erdman, Experience Lead

    Alex is an enthusiastic and passionate designer. He is meticulous regarding details and works tirelessly to get designs right. I learned a lot f rom him.

    Sarah Dzida, Principal, D-Z Creative Consulting

    Alex is enthusiastic, thoughtful and thorough in his approach to creative problem solving.Top qualities: Personable, Expert, High Integrity

    Milana Sobol

    Alex is a bright, bubbly individual who is always willing to tackle the next challenge that comes along. He is a dedicated team player and his research skills are second toSedef Gavaz, UX Consultant

    Alex is simply a great guy, enthusiastic, goes the extra mile to ensure something is right and certainly someone you would want on your team.

    Sean Gardiner, Technical Architect

    I worked with Alex at Precedent for about a year. He is a consultant with a range of skills and disciplines. He is bright, dedicated and professional with a great eye for detalso has a great personality with wonderful sense of humour and enthusiasm. I enjoyed working with Alex and would love to work with him again.

    So-Yeon Kim,Consultant

    Alex is a thinker, and a very good one at that. He is able to research topics deeply, gain valuable insights into customer problems and deeply understand user motivationsskills in cognitive and behavioral psychology are unmatched in the whole of my professional experience; he is a dyed-in-the-wool usability researcher, and a tremendous

    to any user experience team that values innovation and out-of-the-box thought. He knows how to look beyond the surface of a problem, discover underlying issues, and cresearch to gather data used to devise solutions to that problem. He conducted an extensive, ambitious usability research project which provided very important discoverilarge multi-phase project that couldnt have been unearthed any other way.

    Jason Cook, UX Director

  • 7/30/2019 Alexander Crockett UX Portfolio 2013

    15/15

    T: +1323 559 1607 E: [email protected] W: http://alexcrockett.com

    Thank You