Designing Elegant UX Across Devices and Platforms
4 likes1,840 views
1. The document outlines an agenda for a workshop on designing user experiences across devices and platforms. It covers topics like user research, journey mapping, wireframing, prototyping and testing. 2. Various exercises are described like creating games, journey mapping experiences, and prototyping a travel app concept. 3. The goal is to practice user-centered design techniques and collaboration while focusing on designing for different form factors and delivery methods.
Designing Elegant UX Across Devices and Platforms
- 1. UniversalMind™ UniversalMind™ Future Insights LIVE Designing Elegant UX Across Devices and Platforms UniversalMind™ Monday, May 6, 13
- 2. UniversalMind™ :)- Erik Loehfelm EVP of User Experience, Universal Mind @eloehfelm erik.loehfelm@universalmind.com Monday, May 6, 13
- 6. UniversalMind™ AGENDA Part 1: • User-centered design • Get creative! • Who is your user? • Tools: notebooks, sketches, illustrations Part 2: • Journey Mapping • Contextual scenarios - day in a life stories of user’s interacting with design object • Tools: notebooks, sketches, illustrations Part 3: • Wireframes - sketches and underlying architectural solution to the design, including the state structure of the application • Tools: notebooks, markers, sketches, Paper by 53 Monday, May 6, 13
- 7. UniversalMind™ AGENDA (CONTINUED) Part 4: • Deployment decisions - native, hybrid, mobile web • Content / Context design - the organization of content contextually for the user’s situation • Tools: notebooks, sketches, illustrations Part 5: • Thematic design - graphic and ui design, patterns, metaphors, color, applied branding, iconography, typography • Moodboards • Tools: sketches, Illustrator, Photoshop, Fireworks, fluidUI, Flash Part 6: • Prototyping and testing: iterative, user based, testing of concepts and ideas with capture and adjustment • Tools: sketches, Illustrator, Photoshop, Fireworks, fluidUI, Flash, FieldTest, TAP by UnitID, Silverback Monday, May 6, 13
- 9. UniversalMind™ UniversalMind™ 1. understand people, content and context Monday, May 6, 13
- 10. UniversalMind™ UniversalMind™ 2. document their journey Monday, May 6, 13
- 12. UniversalMind™ UniversalMind™ 4. graphic and interaction design Monday, May 6, 13
- 14. UniversalMind™ UniversalMind™ 6. test and iterate! Monday, May 6, 13
- 15. UniversalMind™ Get Creative! The Gamemaker... • Create a game with whatever is within your reach • Game must have rules • Game must have a winner and loser(s) • It can be a game of skill or chance • 12 minutes - solo or with a partner Monday, May 6, 13
- 16. UniversalMind™ UniversalMind™ 1. understand people, content and context Monday, May 6, 13
- 18. UniversalMind™ UniversalMind™ 2. document their journey Monday, May 6, 13
- 20. UniversalMind™ Mini-Maper Create an ad-hoc journey map • With a partner, gather the experience getting here • Document their experience • Focus on ‘seeing’them • Listen to their ‘thoughts’as they move through the details • Capture emotion, be very detailed • 10 mins each and switch Monday, May 6, 13
- 21. UniversalMind™ What...? • What did you learn from the last exercise? • What common pitfalls? • What common wins? • What opportunities do you see? • Highlight them now and discuss with your partner • 10 mins Monday, May 6, 13
- 37. UniversalMind™ Ready, Wireframe! A new travel app • Grab a concept from your journey map • Speak visually to author your idea • Try to leverage design patterns... identify them! • Don’t worry about naming, branding, colors • Try to split your concept: mobile and mobile web • 20 minutes mobile, 20 minutes mobile web Monday, May 6, 13
- 39. UniversalMind™ Category, OUT! Think of something in the category, or you’re out! • I’ll start with a category ie. animals, cars, cereal, baseball teams • When pointed to, yell out something in the category • If you can’t think of one immediately, you’re out • :) Monday, May 6, 13
- 40. UniversalMind™ UniversalMind™ delivery options: • Mobile Web vs. Desktop Web • Responsive Web vs. Mobile Web • Web App vs. Native App • Wrapped Web vs. Native App Monday, May 6, 13
- 41. UniversalMind™ rich functionality basic functionality cheap expensive Mobile Web Desktop Web inflexible flexible Responsive Web Web App Native App Wrapped Web Monday, May 6, 13
- 42. UniversalMind™ UniversalMind™ mobile web how? web to mobile techniques to consider: 1. Graceful Degredation... 2. Progressive Enhancement... 1. Adaptive Design 2. Responsive Design Monday, May 6, 13
- 43. UniversalMind™ UniversalMind™ 1. graceful degredation • been around for awhile • could work for some instances • many sacrifices (from a CX perspective) • ‘backward’ approach (?) Monday, May 6, 13
- 44. UniversalMind™ UniversalMind™ 2. progressive enhancement • build up an experience from the baseline • work in an responsive manner • target sizes (and content) not devices* Monday, May 6, 13
- 49. UniversalMind™ Mostly Fluid Column Drop Images courtesy www.lukew.com Monday, May 6, 13
- 51. UniversalMind™ Carousel Sub sections Navigation Carousel Nav Shopping Social Footer Carousel Sub sections Navigation Carousel Nav Shopping Social Footer Carousel Sub sections Navigation Carousel Nav One Product Social Footer Shopping Monday, May 6, 13
- 54. UniversalMind™ Desktop - “Bird’s Eye View” of Adobe content Products Creative Cloud Photoshop CS6 Navigation/Promotional Image supporting content Content Monday, May 6, 13
- 55. UniversalMind™ Products Creative Cloud Photoshop CS6 Navigation/Promotional Image supporting content Content Monday, May 6, 13
- 56. UniversalMind™ Products Photoshop CS6 Navigation/Promotional Image supporting content Content Monday, May 6, 13
- 57. UniversalMind™ Content eval! Unwrap your company (or personal) site’s content • Do a brief content audit of your site • Create a ‘birds-eye-view’of your current content • With mobile in mind, create a ‘birds-eye-view’of mobile • Consider the ‘content’s choreography’as you design • 30-40 minutes Monday, May 6, 13
- 58. UniversalMind™ UniversalMind™ GUI design isn’t pixie dust. 1 Monday, May 6, 13
- 59. UniversalMind™ M O O D B O A R D Monday, May 6, 13
- 62. UniversalMind™ Gotham ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmnop qrstuvwxyz 1234567890,.!?’” Helvetica ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmnop qrstuvwxyz I S A A C D A N I E L S / MOODBOARD Monday, May 6, 13
- 63. UniversalMind™ Be Moody! Collect ideas and paste them to a Moodboard • Collect fonts • Capture images • Grab colors • Pinterest board? :) • 30-40 minutes Monday, May 6, 13
- 64. UniversalMind™ 01 01 02 03 04 05 01 02 03 02 03 04 05 01 02 03 1/4 The first element of the UI is the overall state. This is the launch page the viewer sees when first opening the application. It contains a list of the most recent transactions from their bank accounts. The second element of the UI is the hamburger button, this allows button slides the recent activity to the right to reveal an off canvas state. From that state the user updates their settings to their different accounts. The third element of the UI is the individual labels. The user can see where they made a transaction, the date it happened, and the amount involved in the transaction. This leads me to the forth element of the UI which is the carrot. When the user taps the carrot they are brought to a new page where they can see specific details about the transaction they selected. The fifth element of the UI is the tab controller. This bar is fixed at the bottom of the state to allow the user to navigate quickly between the major functions of the application. This function of the application is where the user manages their bills. When the second option is selected from the tab controller, the user is brought here. From here they can see a list of their upcoming bills. The first element is general information about upcoming bills. It gives the name of the bill due and the status of the bill. Although not displayed correctly in this wireframe, the place of the item in the list would update depending on when the bill is due. I.E. The bills that are due soonest will be at the top of the list. The second item of the UI is an updating countdown until the bill is due. This allows the user to easily see how much time until the payment of a bill is due. The thrid element is a carrot. This carrot brings the user to a new state where then can then either pay the bill, see information on the users synced with that account, and see a detailed page about the bill. HIGH-FIDELITY WIRE FRAMES States Explanations Gotham ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmnop qrstuvwxyz 1234567890,.!?’” Helvetica ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmnop qrstuvwxyz I S A A C D A N I E L S / MOODBOARD A P P L I C AT I O N R E N D E R I N G S ISAAC DANIELS INTERACTIVE MEDIA ERIK LOEHFELM WEDNESDAY, APRIL 3RD, 2013 + = Monday, May 6, 13
- 65. UniversalMind™ fluidui.com EXCELLENT on-device wireframe and prototyping tool! Monday, May 6, 13
- 67. UniversalMind™ Test your ideas! Create a project in FluidUI • Start a wireframe experiment in FluidUI • Add interactive links • Add images and hotspots • 45 minutes Monday, May 6, 13
- 68. UniversalMind™ UniversalMind™ 6. test and iterate! Monday, May 6, 13
- 69. UniversalMind™ Go Ape Sh!t. Create a user test in Silverback • Try loading up the FluidUI prototype in Silverback • Record someone using your application • 15 minutes Monday, May 6, 13
- 70. UniversalMind™ What...? • What did you learn from watching people with your idea? • What common pitfalls did they stumble upon? • What common wins? • What opportunities do you see to improve your concept? • Highlight them now and discuss with your partner • 5 mins Monday, May 6, 13
- 72. UniversalMind™ you practiced... • User-Centered design theory! • Being a design thinker! • Communicating visually! • Focusing on human-values! • Process in a design workflow! • ‘Doing’over ‘contemplating’! • Ad-hoc collaboration! Monday, May 6, 13
- 75. UniversalMind™ :)- Erik Loehfelm EVP of User Experience, Universal Mind @eloehfelm erik.loehfelm@universalmind.com Monday, May 6, 13