joel heaton ux design portfolio · joel heaton ux design portfolio [email protected]...
TRANSCRIPT
Joel Heaton UX Design Portfolio
http://joelheaton.com [email protected] (413)210-6378
“User Centered Design is a process where all facets of design and technology
form a bug free experience and interaction, accomplishing the goals a user wants or needs.”
Joel Heaton
UX Design Workflow and Guidance Support Documents
• UserResearch(User stories, user needs)
• FeaturesandFunctionality(Features, time line, level of difficulty)
• UserPathways (Diagrams of how users interact with product)
• Wireframes(Simplified interface layouts based on user research, features and functionality and user pathways)
• PrototypesandMockups (Advanced designs based on all previous data)
• Analysis (Analytics, tracking, user flow, SEO)
Joel Heaton UX Design Portfolio
http://joelheaton.com [email protected] (413)210-6378
Time: 00:03:27:09
Steven Leonard, Chapter 6 TDTCNS
Time: 00:03:27:09
Steven Leonard, Chapter 6 TDTCNS
Prototypes
Time: 00:03:27:09
Steven Leonard, Chapter 6 TDTCNS
Joel Heaton UX Design Portfolio
http://joelheaton.com [email protected] (413)210-6378
Joel Heaton UX Design Portfolio
http://joelheaton.com [email protected] (413)210-6378
Joel Heaton UX Design Portfolio
http://joelheaton.com [email protected] (413)210-6378
Prototypes
Option 1
mph ENE SPEED
0mph ENE SPEED
34mph ENE SPEED
112
mph ENE SCAN
mph ENE SCAN
mph ENE SCAN
0 MPH
No speed indicator reading
0 MPH
No speed indicator reading
YELLOW
Approaching 35MPH
YELLOW
Approaching 35MPH
RED
Exceeding 35MPH
RED
Exceeding 35MPH
Option 2
Joel Heaton UX Design Portfolio
http://joelheaton.com [email protected] (413)210-6378
Wireframe sketches
Joel Heaton UX Design Portfolio
http://joelheaton.com [email protected] (413)210-6378
Jen is late to work. She grabs her iPhone and pauses...Which vehicle should i take. ?
7:35amShe decides to hop on her sport bike. Snaps her iPhone to the cradle and she is o�.
As she enters the I-25 onramp her Iphone displays.
7:37am
7:43am
She hits the brakes. Slows right down and just misses her 3rd ticket.
7:45am
Arrived at work.On time No Ticket
8:00am
Device is updated and connected to GPS for maps, speed, location direction and known speed traps. Also weather and traffic congestion.
Device can detect and monitor for Radar and Laser traps in real time.
Accidents Alerts
Weather Alerts
Construction Alerts
Joel Heaton UX Design Portfolio
http://joelheaton.com [email protected] (413)210-6378
Joel Heaton UX Design Portfolio
http://joelheaton.com [email protected] (413)210-6378
User Research
Iamverybusyaroundthefarm.MywifeisalwaysshoutingouttomewhenIamfeedingtheanimalsoronthetractorwhatneedstogetdonearoundthehouse.Anappthatlistsoutherordersinsteadofshoutingatmewouldbegreat.Iwillget them done and won’t forget.
GeorgeAge: 54MaleInterests: Full time farmer
Weneedalistthatcanshowusallthevacationsandtripswehaveplanned.Everyweekendweheadtothemountains.Wewanttostopforgettingthings,wewantabetterlist.Somethingthatkeepsamasterlistforusandwecancheckofftasksthatneedtogetdone.Synctobothphonesandprioritizesthemforustotackletogether.Tohaveoldliststhatwecansaveandrefertoforbiking,skiing,kayaking,snorkelingorhotspringstrips.Wetakedifferentstuffwithus.
Paula and SvenAge: 45,49Male and FemaleInterests: Mountain Biking, travel, motorcycles, rock climbing, camping
SynchronicityLists of things we need to get packed, fixed and plannedReminders
Lists of fixes on the houseRemindersStop forgetting
IneedanappthatIcanlookatontheweekendwhenIamdoingchorestoknowwhatBarbneedsdone.There’ssomuchtodothatIneedavisualprioritizedlistformetofollowandgetdone.Reminders.TakingthegarbageoutonThursdays,BringthekidstoSocceronTuesdaysandThursdays,fixthetoilet,buyticketsforThanksgiving,Buildashed.
MikeAge: 38MaleInterests: Sales professional, diy
List of Chores Appointments tracked for familyTravel reservations
BarbAge: 32FemaleInterests: Kids, family, landscaping
To do listsCheck off listsA great calendar
IwantanappthatIcansendtodoitemstomyhusband.WeareverybusyandhealwaysseemstogetthingsdoneinhiscalendaronhisiphonebutnotthingsItellhim.Awaytokeeptrackofthethingsaroundthehome.
Joel Heaton UX Design Portfolio
http://joelheaton.com [email protected] (413)210-6378
Features and Functionality
Features and Functionality• Tracksandalertsdriverofthespeedlimitby
color of device screen• Detectslaserandradarusage• Easilymovedfromvehicletovehicle• Small• GPSenabled,navigation• Speed• Direction• Temperature• Altitude• Weather• Knownspeedtraps• Accidents• Construction• Easytomountandsecuretoanyvehicle• Vividcolorassociationtoaiddriver• AppdesignedforiPhoneandmobiledevices
only.
Concepts and Sensory Design
• TheiLazerwasdesignedtobeeasilyviewedandunderstood.RED-YELLOW-GREENcolorsprojecttothedrivereasilyindayornightconditionswarningthemtoslowdownasneeded.Aftersomeusetheuserwilldevelopasenseofhowtoadjusttheirspeedbyseeingtheglowingcolorinstinctively.Theunitisabletopullinthenationaldatabaseofspeedlimitpostingsandindicatetothedriveriftheyaregoingtoofastonmostroads.TheBLACKbackgroundisusedbecausethroughtestingitisthemostvisiblewiththelargenumberandlettersize.Thecontrastcaterstodarkandlightrapidlychangingconditionswhicharereadilyseen.Alertcolorsaremosteffectivelyutilizedinthisscenario.
• TheneedfortheiLazercameaboutbecauseadifferentsensoryexperiencehappenswhenonmotorcycle.Theysayagoodriderismentallymore“aware”thantheaveragemotorist.Themotorcycleriderhasnosecondchanceifinanaccident.Themaingoalistominimizerisk.Sensesareheightened,theneedtokeeptheeyesontheroadismaximized,hearingisvoided,vibration,physics,inertia,adrenalineandalertnessareincreasedorheightened.Byseeingayellowlightonthedisplayintheperipheralvisionisadifferentkindofsensoryexperience.Driversonamotorcycleoracarhavetheabilitytoeasilyassociatethesewarningcolorswithoutactuallyhavingtoknowthedata,butinstinctivelyknowhowtomakeneededadjustmentstospeedbythecolorthedeviceilluminates.
TheiLaZerisanaddonandappformobiledevices to detect laser and radar speed monitoring.Thedeviceisafullyfunctionalnavigation system that also provides the driver information,apianddatafromothersources.Asmall all in one extension to your mobile device.
Joel Heaton UX Design Portfolio
http://joelheaton.com [email protected] (413)210-6378
Browse(browseauthors, animations)
Portfolio(Author,
upload,edit,profile,documents)
Settings
Video(scrollingauthorsand videos)
Author (New user, set up, profile, from desktop)
Launch website
Home
• Createlogin• Profile• Createapifeedsto
twitter,facebook,G+,LinkedIn,etc.
Developer is working on Authors site. They both have access to CMS a wordpress dashboard.
Animator/developer (Marketing, Web admin, from desktop)
Browse Authors by:
•Editslastweekspost,chapter6,StevenLeonard,bringsuptheanimatorsfinalvideopostedtoYoutube.AdjustsizeandcopiesembedcodeforChapter6.PasteintohtmlcodeonWPpost.Save,Preview,update.
•Worksonbio,addsAuthorcover
•Adsanepubtotheecommercesite,acover.jpgandpublishes
•EntersinatimetosharelastweeksarticlethroughJetpack.
•EachteammemberchoosesanAuthor.Somewithillustration,animation,video,photographyandotherwebportfolios.
•AllauthorprofilesareviewedthroughAppleTVtogether.
•Theydecidetocontact4oftheAuthorswithfeedback,2Authorsameetingisscheduled,1theyoffertoinvesttimeandmoneyintopublishingand1animatoriscontactedforanotherproject.
•Eachteammemberisassociatedwithvarioussocialplatforms.Somewith100kfollowers.Pressreleases/PRwebisutilizedaswell.
Martin Family (Kitchen TV any device)
Turn on iPhone
Launch app
Launch app
Login to accountHome
Home
Home
Click Browse
Browse page
• LinkuptoAppleTVtoshowonkitchenHDTV
Login
Kids play list
Jimselectsthe2-5yearoldanimationsandstoriesthataretaggedas2-5yo.5StoriesarereadtothekidswhileJimgetsthelunchesready,feedsthedog,sweepsthefloor,wipesthecounters,takesoutthetrash,feedsthekidswafflesandjuices.After30minutestheappshutsdown.
•Jimchecksparentalcontrols
•Authorlooksatthebasiclayoutofthesite.Getsreadytostartbuildingtheportfolio.
Wordpress dashboardBrowsePortfolioSettingsVideo
BrowsePortfolioSettingsVideo
Publisher (Publishing team, meet to peruse talent, any device)
Launch app
NameGenreSocialbuzzOther
User Pathways
Joel Heaton UX Design Portfolio
http://joelheaton.com [email protected] (413)210-6378
Create todos
ManageslistsofliketodosEvents,projects,trips,maintenance
Creates new lists
Syncscalendarsgooglecal,ical,icloud,sms,alerts,badges
Fullyfunctioningcalendarapporuseothercalendarandsync.
Fullyfunctioningcalendarapporuseothercalendarandsync.
Notificationsettings
Associatesapi
Connections
Users/Profiles,Social
Editstodos
Joel Heaton UX Design Portfolio
http://joelheaton.com [email protected] (413)210-6378
Joel Heaton UX Design Portfolio
http://joelheaton.com [email protected] (413)210-6378
Product and Engineering Development Priorities
Phase 1 Phase 2 Phase 3• Legalresearch• Securedomain,host,serverspace• Createftpaccess• Installwpdatabase• Setupsocialnetworkaccounts.• UXDesign• Meetwithprogrammer• Beginmarketing logo branding color elements identity branding concepts for all devices desktop,
iPhone, tablets, kindle, other
• Communicationwithdevelopers• Apiresearch,developmentandtesting
• Designanddeveloptheapp• Designwebsite
• Testing+editing• Communicationwithdevelopers• WordpressbackendforAuthors• Prototypes• Roughprototypes• Flushthroughdesignandfunctionflaws
andfix• Buildecommerceplatformtosellworks
byauthors.ePub,pdf,animations.• Marketingbyblogging,social.
• Refineallelementsforidentityandbranding
• Buildoutalldevices• Testing• Branding• Marketing• Web,social• Launchofproducttopublic• Monitoring• SEO• Analytic