The Lifestyle 21 - Mobile UX design & wireframe concept for HUBBA

897 views

Published on

Nathasit Wajasittisilp - CMO of The Lifestyle 21 Co., Ltd.

This work shop has been specifically provided for @Hubba - Coworking space in Thailand during Jelly Week of 2013.

Material is about concept of mobile UX design and wireframe
which create impact for stakeholders even more than you can think of.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
897
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • UserClient  ObjectSystemCompetition
  • UserClient  ObjectSystemCompetition
  • UserClient  ObjectSystemCompetition
  • (ถ้าเลือกข้อมูลชั้นสุดท้าย)
  • (ถ้าเลือกข้อมูลชั้นสุดท้าย)
  • (ถ้าเลือกข้อมูลชั้นสุดท้าย)
  • (ถ้าเลือกข้อมูลชั้นสุดท้าย)
  • http://www.informationweek.com/development/mobility/10-keys-to-mobile-banking-success/231300303http://blog.mfoundry.com/2012/03/mobile-banking-best-practice/Triple offering – Mobile app / Mobile browser / SMSVendor that focus on mobileTest, Test and Test (both security, app, 10 target devices)App name mattersSecure everything – Phone number, Device ID, Username & password, Data encryptionDisabling device through ATMKnow your customers and apply to it – Daily fund transfer limit, New account limit (or use more factor like OTP or Add more account on website)Make app offering location-based data to youMobile application adoption planningMobile app distribution & marketingSecure-coding training and use a secure software development life cycle (SDLC).Session time-out
  • http://www.informationweek.com/development/mobility/10-keys-to-mobile-banking-success/231300303http://blog.mfoundry.com/2012/03/mobile-banking-best-practice/Triple offering – Mobile app / Mobile browser / SMSVendor that focus on mobileTest, Test and Test (both security, app, 10 target devices)App name mattersSecure everything – Phone number, Device ID, Username & password, Data encryptionDisabling device through ATMKnow your customers and apply to it – Daily fund transfer limit, New account limit (or use more factor like OTP or Add more account on website)Make app offering location-based data to youMobile application adoption planningMobile app distribution & marketingSecure-coding training and use a secure software development life cycle (SDLC).Session time-out
  • http://www.informationweek.com/development/mobility/10-keys-to-mobile-banking-success/231300303http://blog.mfoundry.com/2012/03/mobile-banking-best-practice/Triple offering – Mobile app / Mobile browser / SMSVendor that focus on mobileTest, Test and Test (both security, app, 10 target devices)App name mattersSecure everything – Phone number, Device ID, Username & password, Data encryptionDisabling device through ATMKnow your customers and apply to it – Daily fund transfer limit, New account limit (or use more factor like OTP or Add more account on website)Make app offering location-based data to youMobile application adoption planningMobile app distribution & marketingSecure-coding training and use a secure software development life cycle (SDLC).Session time-out
  • http://www.informationweek.com/development/mobility/10-keys-to-mobile-banking-success/231300303http://blog.mfoundry.com/2012/03/mobile-banking-best-practice/Triple offering – Mobile app / Mobile browser / SMSVendor that focus on mobileTest, Test and Test (both security, app, 10 target devices)App name mattersSecure everything – Phone number, Device ID, Username & password, Data encryptionDisabling device through ATMKnow your customers and apply to it – Daily fund transfer limit, New account limit (or use more factor like OTP or Add more account on website)Make app offering location-based data to youMobile application adoption planningMobile app distribution & marketingSecure-coding training and use a secure software development life cycle (SDLC).Session time-out
  • http://www.informationweek.com/development/mobility/10-keys-to-mobile-banking-success/231300303http://blog.mfoundry.com/2012/03/mobile-banking-best-practice/Triple offering – Mobile app / Mobile browser / SMSVendor that focus on mobileTest, Test and Test (both security, app, 10 target devices)App name mattersSecure everything – Phone number, Device ID, Username & password, Data encryptionDisabling device through ATMKnow your customers and apply to it – Daily fund transfer limit, New account limit (or use more factor like OTP or Add more account on website)Make app offering location-based data to youMobile application adoption planningMobile app distribution & marketingSecure-coding training and use a secure software development life cycle (SDLC).Session time-out
  • Questions to be answered by Yamaha staff----- Meeting Notes (5/9/12 11:51) -----1. Academy2. Piano & keyboard3.
  • The Lifestyle 21 - Mobile UX design & wireframe concept for HUBBA

    1. 1. Mobile UX concept & wireframing Date: Jan 16, 2013 By: Nathasit Wajasittisilp – Co-founder Source: The Lifestyle 21 Co., Ltd.Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    2. 2. Management Profile Nathasit Wajasittisilp Chief Marketing Officer Ph.D. Tharis Thimthong & Co-founder Chief User Experience (UX) 15 yrs exp – Usability research, 13 yrs exp - Brand management, Software development and iOS architecture and Lean UX interactive media tools. development. Pee Thongsinchareon Chanin Manochayakorn Chief Creative Designer Chief software engineer 4 yrs exp – Mobile UI design and 12 years in software, e-commerce 8 yrs exp in consumer insight and solution, mobile application marketing research from Global development. Research firm. Panprida Yomjinda Krit Plianpae Business development mgr. Chief iOS engineer 4 yrs exp – Business development 10 yrs exp - E-commerce solutions,
4 In various service business sectors yrs exp – iOS application development,Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    3. 3. Management profile2010 – 2013 – CMO – The Lifestyle 21 Co., Ltd. (Digital agency)2012 – 2013 – Speaker – Business canvas & Lean UX design (KMUTT)2006 – 1010 – Group brand manager “Siam Winery” (Mont Clair)2004 – and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas Thailand” (Unif)duplicated without Confidential 2006 – Strategic business unit mgr. “Uni-President and creativity which cannot be permission.
    4. 4. Management profileConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    5. 5. Management profileConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    6. 6. Our experiencesConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    7. 7. iPad presentation tools Objective: -To give support insurance sales team for total Thailand Solutions: - Simplified insurance premium calculation. - Pre-screening tools for part-time insurance agent.Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    8. 8. iPad – Sales management Objective: - To streamline sales ordering process - To give instant sales performance insight for sales supervisor / MGT Solutions: - Revolutionized sales order interface - Infographic driven report - Instant internal communication toolConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    9. 9. iPad application – eBook Arena Objective: -To sell book through iPad application Solutions: - Simplified and newly innovative way of reading eBooks.Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    10. 10. iPad – Sales management Objective: - To streamline sales ordering process - To give instant sales performance insight for sales supervisor / MGT Solutions: - Revolutionized sales order interface - Infographic driven report - Instant internal communication toolConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    11. 11. iPhone application – Location based Objective: - With alcohol drinking communication was restricted, it’s a hard time for communication via mass media. Solution: - Location based push notification enable brand to communicate with customers @ the spot they want talk to customers.Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    12. 12. iPhone application – TV streaming Objective: - To enable DTAC (leading mobile operator in TH) promoting movie on demand and Live stream TV. Solution: - Real-time streaming TV program from satellite - VDO on-demand with payment module - Customer profile and payment historyConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    13. 13. iPhone application – LH Living+ Objective: - To help Land & Houses (A leading real estate developer in Thailand) better communicating with their prospect and home owners. Solution: - Location-based communication system for customization message for particular customers/prospects.Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    14. 14. Objectives User-Experience: • Understanding differences in UI and UX • UX design concept & model • Factors affecting UX design Wireframing: • What the hell is Wireframe? • How to do it?Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    15. 15. Difference between UI & UX User interface design (UID) is the practice of planning and shaping the form present between a product idea and its user, with particular focus on key interactive features or characteristics such as textures, shapes,(visual design) deals with the specific user UI design knobs and buttons. interface(s) of a product or service. Dan Saffer Diagram of User Experience Design, Source: http://www.quora.com/Dan-SafferConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    16. 16. Difference between UI & UX User-experience design (UXD) is a broad term used to explain all aspects of a person’s experience with the system including the interface, graphics, industrial design, physicaldeals with the overall subjective UX design interaction, and the manual.”associated with the use of a product or experience service. Dan Saffer Diagram of User Experience Design, Source: http://www.quora.com/Dan-SafferConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    17. 17. UX design concept Dan Saffer Diagram of User Experience Design,Confidentialhttp://www.quora.com/Dan-Saffer Source: and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    18. 18. UX design concept The UI can be a component of UX, but many user experiences dont have UIs.The design of a UI will be heavily informed by the UX design. The UX design will be less informed by the UI. Dan Saffer Diagram of User Experience Design,Confidentialhttp://www.quora.com/Dan-Saffer Source: and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    19. 19. UX designDevelopment model
    20. 20. UX design model – Five Planes The Five Planes of Garre The Surface PlaneSoftware Interface as a Task On the surface you see a series of Web pages, made Hypertext system as a up of images and text. The Skeleton Plane Beneath that surface is the skeleton of the site: the Information placement of buttons, tabs, photos, and locks of text. The Structure Plane The skeleton is a concrete expression of the more abstract structure of the site. The Scope Plane The structure defines the way in which the various features and functions of the site fit together The Strategy Plane The scope is fundamentally determined by the strategyConfidential and for internal user only. of the site. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    21. 21. User experience design process User Content Iterative design & Prototype Resear Strategy development specificati ch on Info, Compare Multiple Test, handover Planner, Prioritize, A/B Test, ASEQ, NPS Gather, Visual, Interactive Measure Technique HTML, TEST Program Spec. PROTO CONT TYPE USER ENT UXD RESE SKET PROTO ARCH STRA CH TYPE TEGY VISUA L WIREF DESIG RAME NConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    22. 22. Selection model of five plane The UX development model of A betterJ. J. Garrett approach is to have work on each plane finish before work on the next can finish The ripple effect means that choosing an “out of bounds” option on an upper plane will require SOURCE : rethinking decisions on lower planes GARRETT J.J.Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    23. 23. Where to start? Mobile User Users App Client • Demographic • Information • Business • Psychographic Architecture objectives • Current, New, • Type of content • Marketing Ex • Function objectives • Value V.S. specification • Value expectation • API specification proposition • Past experience • Interface design • Strategic • Client’s • Navigation design decision knowledge • Information • Budget • Learning curve design • Timeline • Usage • HA / Non-HA • Client design expectationsConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    24. 24. Factors in Mobile app development Physical Software Peripher constrai constrai al nt nt devices • Screen size / • Operating • Bluetooth resolution system keyboard • Button • Version of UI • Paired devices • Features • Default UI • Connected (i.e. • Default API (i.e. devices NFC, Accelerom twitter) • GPS assisted eter, face • Command (i.e. • Watches detection Gesture) • Camera censor) • Copyright / • Camera PatentConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    25. 25. Where to start? Competit System Usage ion & staff • Environment • Competitors’ • Current • Cellular / Wifi offering infrastructure coverage • Communication • Current • Data plan channel manpower • Occasion • Share of voice • Type of • Completion • Share of usage technology speed • Communication • Social flow interaction • IT staff knowledgeConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    26. 26. Where to start? Eco- syste m Mobile Users User App Usage &Client infra- Competition struct ure Corporate politic start here!Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    27. 27. Options of UX design is “UX pattern”Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    28. 28. • Mobile-patterns.com • Theultralinx.com • Pttrns.com • mobiletuxedo.com • mobiledesignpatterngallery.com • lovelyui.com • Patternsofdesign.co.uk • androiduipatterns.com & much more from Professor GoogleConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    29. 29. WireframingConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    30. 30. What is the Wireframe? A wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website, mobile or TV screen.Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    31. 31. Benefits for external parties Mobile User Users App Client • Trial • Data & field • Manage • Preference mapping expectation • Comparison • Information • Minimize • Concept design fitting surprise • Navigation testing • Mutual • Work flow testing understanding • Gesture testing • Concept test • Boss approvalConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    32. 32. Benefits for internal parties Designe Project Program r manager mer Physical: • Tracking Understanding • Screen size • Version control of testing • Manage multiple 1.Human Action • Visual / reading parties 2.Non-Human testing • Manage Action • Default UI understanding 3.Navigation correction among 4.Transition • Mutual stakeholder 5.Loading & alert understanding 6.System flow • SpecificConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    33. 33. Sample of paper & pencil Things to write down: - Purposes - Element - Information/ field - Action button - Navigation - Loading/ Alert - Work flow - Default actions - Non-Human action - Scale - Page / Date/ Version - Reference idea/Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    34. 34. Sample of paper & pencil Things to write down: - Purposes - Element - Information/ field - Action button - Navigation - Loading/ Alert - Work flow - Default actions - Non-Human action - Scale - Page / Date/ Version - Reference idea/Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    35. 35. Wireframing - Paper mock-upConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    36. 36. Wireframing – Data structureConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    37. 37. Wireframing – Data structureConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    38. 38. Wireframing – Power Point mock- up Objective:HOME Name: Last sync: May 31, 2012 Sync now : All customers From - To 1. 0. 1. 2. 3. 4. 5. 6. 7. (IN) IV) (IN-RV) (sales report) 2. (Control panel) : : : : : : :Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    39. 39. Wireframing – Power Point mock- upHOME Name: Last sync: May 31, 2012 Sync now : From - To 0. 1. 2. 3. 4. 5. 6. 7. (IN) IV) (IN-RV) (sales report) : : :•15,350 • IN: 4,500,250 • - - 7,600•45,350,000 • RV: 3,125,000 • - - 8,240 •Remain: 1,375,250 • - - RS): 3,500 •18-46-0 CHINA: 6,000 •18-46-0_ USA: 43,250 •18-46-0_Russia: 50,000 : : : • RV: 3,125,000• 3,000 • - - 7,600• 1,850 • - - 8,240• 1,150 : • • - - RS): 3,500 • •18-46-0 CHINA: 6,000 • •18-46-0_ USA: 43,250 •18-46-0_Russia: 50,000Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    40. 40. Wireframing – Screen prototype (Adobe) Note: 1. 2. FG14, FG15 3. • = • =Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    41. 41. Source of Wireframe tools • Justinmind.com • Mockflow.com • Pidoco.com • Hotgloo.com • Visio • InDesign • Photoshop • Powerpoint • Pencil & paper & much more from Professor GoogleConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    42. 42. Case study of UX design Maximiz Increase e attractiven Utilities ess of UX Mobile Banking Enhanc e User- friendlin essConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    43. 43. Exercise 1.Design UI of mobile banking application 2.UX design for Log-in module 3.Fifteen-minutes 4.Group into 5 people a groupConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    44. 44. REAL CASE STUDYConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    45. 45. Mobile Banking UX design: “User authentication model”Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    46. 46. Authentication model 1. Something the user knows 1. Something the user knows 
2. Something the user has. 
2. Something the user has. 
 
3. Something the user is.Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    47. 47. Two-factor authentication Something we know Something we have Username Password Phone number Phone IDConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    48. 48. Authentication method 1 Something we know Something we have Username Password Phone number Phone ID Pros: - Work on WiFi and 3G Con: - Need OTP to verify account owner - Mid-Low security level - User Action +2Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    49. 49. Authentication method 2 Something we know Something we have Username Password Phone number Phone ID Pros: - Work on WiFi and 3G Con: - Need OTP to verify account owner - User Action +2Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    50. 50. Authentication method 3 Something we know Something we have Username Password Phone number Phone ID Pros: - User Action -2 - No more OTP. - High security level (Prevent package sniffer on WiFi AP) Con: - Work on only cellular data (3G or Edge) - Need process to register device and set password on ATM or Bank CounterConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    51. 51. The rest of materials contains highly confidential data of client which are unable to reveal, please join my next session @ Hubba or give me a call for your corporate workshop for better MOBILE UX DESIGN in actions. Follow me at www.facebook.com/iztyle.meConfidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated withoutpermission.
    52. 52. For more information, please contactNathasit W. – Co-foundernathasit@thelifestyle21.com082-655-4545

    ×