alexander crockett ux portfolio 2013
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