Elements of UX Design

download

of 36

  • date post

    27-Jan-2015
  • Category

    Technology

  • view

    105
  • download

    1

Embed Size (px)

description

An Overview on the Process of creating User Experience from Research to Implementation.

Transcript of Elements of UX Design

  • 1. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design ProcessMemi BeltrameThe UX Design ProcessCreating User Experiencefrom Research to ImplementationLiip techtalk, November 9th 2010

2. Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process Content User Experience Design Behaviour Form 3. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design ProcessInformation ArchitectsContentBehaviour Form InteractionGraficDesignersDesigners 4. Liip Techtalk November 9th 2010Memi Beltrame: The UX Design ProcessNo Design without Research 5. Liip Techtalk November 9th 2010Memi Beltrame: The UX Design ProcessNo Design without ResearchWho? What? Why? How? 6. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process UX Design follows the 5S Pattern 7. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process ConcreteAbstract 8. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process ImplementationResearch 9. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Strategy 10. Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process StrategyFind out Context Purpose/Range Focus Group(s) Mission Statement 11. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design ProcessScope 12. Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process ScopeFind out Personas Their Goals Their Motivation Their Usecases 13. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Personas A Short Introduction 14. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design ProcessA Persona is a representative of a certeain user group. PeterSueMarcDefine TargetAnalyze UsersGroup Users Form PersonaAudience 15. Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process Personas Are tangible Provide a common groundfor conversation Help prioritize tasks inregard to business relevance 16. Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process Personas Name them Give them a background Define their level of skills Define motivation & needs 17. Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process Example: Swiss Winter ResortJeff & LizeKevin & friends The Weiss family 18. Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process Example: Swiss Winter ResortJeff & LizeKevin & friends The Weiss familyWho are they? What are their needs? 19. Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process Example: Swiss Winter ResortJeff & Lize Kevin & friends The Weiss family Middle class couple Student Shoe-Shop owners with 2 kids Jeff: Lawyer, Lize: Teacher Very social snowboard nerd Have been here before once Travel a Lot Good offers are crucial to him Come by car Like sports & nature Likes adreanline kicks Only during school holidays Want to find out on their Depends on public transport Want to be sure to get best own what suits them most Wants to get on the slopes asoffers to match their budget easily as possible Need planning support 20. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Structure 21. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Structure Find out Workflows User Priorities:Tasks & Information 22. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design ProcessSkeleton 23. Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process Skeleton Translate Usecases and Tasks to Prototypical Screens 24. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Skeleton Translate Usecases and Tasks to Prototypical Screens Make Prototypes Test Iterate 25. Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process Skeleton Tests verify assumptions on Tasks Workflows Content 26. Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process Skeleton Define Patterns for Interaction and Design Principles 27. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Surface 28. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Surface Design Layouts and Grafical Elements. 29. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Surface Implement Design and Interactions 30. Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process Surface Implement Design and Interactions Implement Test Iterate 31. Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process Surface Tests give feedback on Functionality Content Aesthetics 32. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Recap 33. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Screens, ImplementationPrototypes,Design Patterns Workflows, Information Architecture Personas, TasksMission, Focus Groups 34. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Any Questions? 35. Liip Techtalk November 9th 2010 Memi Beltrame: The UX Design Process Thank you! 36. Liip Techtalk November 9th 2010Memi Beltrame: The UX Design Process Creative Commons Credits:By David Studio 757http://www.flickr.com/photos/studio757/4515640847/By Sport Communitieshttp://www.flickr.com/photos/sportcommunities/2200759639/By Steve Polyakhttp://www.flickr.com/photos/spolyak/1031569673/