joel heaton ux design portfolio · joel heaton ux design portfolio [email protected]...

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)



Prototypes



Time: 00:03:27:09

Steven Leonard, Chapter 6 TDTCNS

Time: 00:03:27:09


Prototypes

Time: 00:03:27:09




Prototypes



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



Wireframe sketches



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



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.



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.



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



Create todos

ManageslistsofliketodosEvents,projects,trips,maintenance

Creates new lists

Syncscalendarsgooglecal,ical,icloud,sms,alerts,badges

Fullyfunctioningcalendarapporuseothercalendarandsync.

Fullyfunctioningcalendarapporuseothercalendarandsync.

Notificationsettings

Associatesapi

Connections

Users/Profiles,Social

Editstodos



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