Downloaded 38 times
Uploaded byVijay Morampudi
Designing user experience (ux) for digital products
The document focuses on designing user experience (UX) for digital products, covering aspects such as user research, personas, journey mapping, and usability testing. It emphasizes the importance of understanding user needs and pain points, creating detailed user profiles, and employing iterative testing methods like A/B testing and design sprints. Various stages and types of wireframing and prototypes are also discussed to illustrate how to effectively test and validate design concepts throughout the development process.
More Related Content
Similar to Designing user experience (ux) for digital products
Designing user experience (ux) for digital products
- 1. Designing User Experience(UX) for Digital Products #Experience is everything
- 2. User Research Journey Mapping Wireframesto Prototyping Usability testing Design Thinking Designing for Mobile Designing for IoT Agenda
- 3. User Experience (UX) UserExperience (UX) encompasses all aspects of a digitalproduct that users experience directly or indirectly. This includes usability, learnability, usefulness, aesthetics, and brand awareness. An experience can also take place without an interface. Amazon Echo has a blue ring that lightsup to indicate when the user should speak
- 4. User Experience (UX) UserExperience (UX) encompasses all aspects of a digitalproduct that users experience directly or indirectly. This includes usability, learnability, usefulness, aesthetics, and brand awareness. An experience can also take place without an interface. Amazon Echo has a blue ring that lightsup to indicate when the user should speak
- 5. User Experience (UX) UserExperience (UX) encompasses all aspects of a digitalproduct that users experience directly or indirectly. This includes usability, learnability, usefulness, aesthetics, and brand awareness. An experience can also take place without an interface. Amazon Echo has a blue ring that lightsup to indicate when the user should speak
- 6. • Helps tounderstand“What are the user needs and pain points?” User Research • Research helps to discover personas and identify user journeys
- 7. • Helps tounderstand“What are the user needs and pain points?” User Research • Research helps to discover personas and identify user journeys
- 8. • Helps tounderstand“What are the user needs and pain points?” User Research • Research helps to discover personas and identify user journeys • Leverage insightsfrom analytics for existing productsto support user research methods
- 9. • Helps tounderstand“What are the user needs and pain points?” User Research • Research helps to discover personas and identify user journeys • Leverage insightsfrom analytics for existing productsto support user research methods • Research isn’t limitedto discovery phase, but more of a thread throughout the process
- 10. Personas • Start byunderstandingyourusers • User experience vary from person to person. An applicationthat creates + ve experience for one person may create a – ve experience for another
- 11. • A personais a human-friendlyformat for user-research related facts. It is a description of an intendeduser of the solutionto be designed. It distillsthe information about a specific user group into a fictitioususer profile Personas • Start by understandingyourusers • User experience vary from person to person. An applicationthat creates + ve experience for one person may create a – ve experience for another
- 12. • A personais a human-friendlyformat for user-research related facts. It is a description of an intendeduser of the solutionto be designed. It distillsthe information about a specific user group into a fictitioususer profile Personas • Update personas as you gain new insights, adding new items, removing or correcting old ones. • Describing 4 to 6 major personas is usually enough to cover about 80 percent of the customer base • Start by understandingyourusers • User experience vary from person to person. An applicationthat creates + ve experience for one person may create a – ve experience for another
- 13. A user journeyis a series of steps which represent a scenario in which a user might interactwith the thing you are designing. Journey Mapping Persona User Journey Primary user UserSecondary user User Primary Journey User User Journey User Journey
- 14. A user journeyis a series of steps which represent a scenario in which a user might interactwith the thing you are designing. Mappinguser journeys highlightsimportantpain points Journey Mapping Persona User Journey Primary user UserSecondary user User Primary Journey User User Journey User Journey Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems
- 15. A user journeyis a series of steps which represent a scenario in which a user might interactwith the thing you are designing. Mappinguser journeys highlightsimportantpain points Journey Mapping Persona User Journey Eliminatingpain points and injecting wow moments form the base for backlog items (Epics and Themes) Prioritize Epics/Themes to developa roadmap of MVP’s for prototyping Primary user UserSecondary user User Primary Journey User User Journey User Journey Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems
- 16. A user journeyis a series of steps which represent a scenario in which a user might interactwith the thing you are designing. Mappinguser journeys highlightsimportantpain points Journey Mapping Persona User Journey Tool for successful digital transformation – customer journey mapping Eliminatingpain points and injecting wow moments form the base for backlog items (Epics and Themes) Prioritize Epics/Themes to developa roadmap of MVP’s for prototyping Primary user UserSecondary user User Primary Journey User User Journey User Journey Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems Business problems
- 17.
- 18. + Fast, low-skill -Limited interactions, harder to test details and full flows, little context for users Use – Exploring and testing high-level concepts like user flows and interaction design, best for making lots of different versions and validate design options Work on high level flow with flowcharts Use low fidelity to get high level feedback on user flow High fidelityMediumfidelity Low fidelity Wireframes
- 19. + Fast, low-skill -Limited interactions, harder to test details and full flows, little context for users Use – Exploring and testing high-level concepts like user flows and interaction design, best for making lots of different versions and validate design options Work on high level flow with flowcharts Use low fidelity to get high level feedback on user flow High fidelity +More interactive, easier to test, good balance of time and quality - Moretime-intensive, but not fully functional Use – User testing specific interactions and guided flows; also better for stakeholder presentations, as these prototypes have morecontext Mediumfidelity Low fidelity Wireframes
- 20. + Complete design,including visuals, content, and interactions; can test very detailed interactions – Very time-intensive, requires skills with softwareor coding Use – User testing very specific interactions and details, and presenting the final design work to stakeholders Use higher-fidelity visualdesign allows you to test accessibility, touch and feel of your design, completion of journey + Fast, low-skill - Limited interactions, harder to test details and full flows, little context for users Use – Exploring and testing high-level concepts like user flows and interaction design, best for making lots of different versions and validate design options Work on high level flow with flowcharts Use low fidelity to get high level feedback on user flow High fidelity +More interactive, easier to test, good balance of time and quality - Moretime-intensive, but not fully functional Use – User testing specific interactions and guided flows; also better for stakeholder presentations, as these prototypes have morecontext Mediumfidelity Low fidelity Wireframes
- 21. Wireframe dimensions Visual design Breadth of functionality Depth of functionalityInteractivity Datamodels Wireframe dimensions
- 22. Wireframe dimensions Visual design Breadth of functionality Depth of functionalityInteractivity Datamodels Indicates how much of the broad functionality is represented in the prototype Higher-fidelity breadth can be used to test how the user would use the features together A lower fidelity of breadth might only focus on a single function, to make it easier to design and test that specific feature Wireframe dimensions
- 23. Wireframe dimensions Visual design Breadth of functionality Depth of functionalityInteractivity Datamodels Indicates how much of the broad functionality is represented in the prototype Higher-fidelity breadth can be used to test how the user would use the features together A lower fidelity of breadth might only focus on a single function, to make it easier to design and test that specific feature Indicates how detailed an individual feature of the prototype is built out A high-fidelity depth contains all aspects of a specific function of the product A low-fidelity depth contains a shallow representation of the functions of a product Wireframe dimensions
- 24. Wireframe dimensions Visual design Breadth of functionality Depth of functionalityInteractivity Datamodels Indicates how much of the broad functionality is represented in the prototype Higher-fidelity breadth can be used to test how the user would use the features together A lower fidelity of breadth might only focus on a single function, to make it easier to design and test that specific feature Indicates how detailed an individual feature of the prototype is built out A high-fidelity depth contains all aspects of a specific function of the product A low-fidelity depth contains a shallow representation of the functions of a product Interaction design is primarily concerned with behaviors and actions The interactivity of the prototype indicates how the interactive parts of the app or product are displayed to the user Higher-fidelity interactive prototype allow us to test how interface elements animate and transitions Wireframe dimensions
- 25. Wireframe dimensions Visual design Breadth of functionality Depth of functionalityInteractivity Datamodels Indicates how much of the broad functionality is represented in the prototype Higher-fidelity breadth can be used to test how the user would use the features together A lower fidelity of breadth might only focus on a single function, to make it easier to design and test that specific feature Indicates how detailed an individual feature of the prototype is built out A high-fidelity depth contains all aspects of a specific function of the product A low-fidelity depth contains a shallow representation of the functions of a product Interaction design is primarily concerned with behaviors and actions The interactivity of the prototype indicates how the interactive parts of the app or product are displayed to the user Higher-fidelity interactive prototype allow us to test how interface elements animate and transitions Data model encompasses the content that a user interacts with in the interface and the data utilized in both the frontend and backend of a product Low-fidelity data models might cause you to make mistakes in your design It’s important to have real data to verify text wrapping for large text, display long names for files Wireframe dimensions
- 26. Wireframe dimensions Visual design Breadth of functionality Depth of functionalityInteractivity Datamodels Visual design is concerned with layout and aesthetics High-fidelity visuals allow you to test the touch and feel and accessibility of your designs Indicates how much of the broad functionality is represented in the prototype Higher-fidelity breadth can be used to test how the user would use the features together A lower fidelity of breadth might only focus on a single function, to make it easier to design and test that specific feature Indicates how detailed an individual feature of the prototype is built out A high-fidelity depth contains all aspects of a specific function of the product A low-fidelity depth contains a shallow representation of the functions of a product Interaction design is primarily concerned with behaviors and actions The interactivity of the prototype indicates how the interactive parts of the app or product are displayed to the user Higher-fidelity interactive prototype allow us to test how interface elements animate and transitions Data model encompasses the content that a user interacts with in the interface and the data utilized in both the frontend and backend of a product Low-fidelity data models might cause you to make mistakes in your design It’s important to have real data to verify text wrapping for large text, display long names for files Wireframe dimensions
- 27. Omni-channel experience User Journey UserJourney User Journey Channel User Journey
- 28. Omni-channel experience User Journey UserJourney User Journey Channel User Journey identify which journeys aremoreapplicable to the channel
- 29. Omni-channel experience User Journey UserJourney User Journey Channel User Journey From touchpoints to journeys: An excellent customer experience must last the entire journey identify which journeys aremoreapplicable to the channel
- 30. Omni-channel experience User Journey UserJourney User Journey Channel User Journey From touchpoints to journeys: An excellent customer experience must last the entire journey Delivering consistent informationacross all channelsmeans organizationsmust create integratedbackend systems that share and update data on the fly. Core features and workflows should be consistent across all channels. use A/B testing to get a better sense of what works for users according to channel. If someone abandonstheir cart in your app, does a message about returning and checking out their items get a better response via an email or a push notification? identify which journeys aremoreapplicable to the channel
- 31. • Usability isusuallymeasured through testing. Given a number of test subjects that reflects the type of user that will use the application: • how many successfully complete a task. • on average how quickly do they complete that task. • on average how many user errors are made while attempting to complete that task. • Activities during usabilitytesting • Interviews about past experiences (past) • Testing working software (present) • Testing wireframes & prototypes (future) Usability testing Incorporate eye tracking in usability testing to understand the complete user experience
- 32. • Usability isusuallymeasured through testing. Given a number of test subjects that reflects the type of user that will use the application: • how many successfully complete a task. • on average how quickly do they complete that task. • on average how many user errors are made while attempting to complete that task. • Activities during usabilitytesting • Interviews about past experiences (past) • Testing working software (present) • Testing wireframes & prototypes (future) “Elaborateusability tests are a wasteof resources. Thebestresults come fromtesting no morethan 5 users and running as many small tests as you can afford.” - JAKOBNIELSEN Usability testing • Do usabilitytest at regular intervals • Run usabilitytests with 4-5 participants, which covers 80% of usabilityproblems
- 33. • Usability isusuallymeasured through testing. Given a number of test subjects that reflects the type of user that will use the application: • how many successfully complete a task. • on average how quickly do they complete that task. • on average how many user errors are made while attempting to complete that task. • Activities during usabilitytesting • Interviews about past experiences (past) • Testing working software (present) • Testing wireframes & prototypes (future) “Elaborateusability tests are a wasteof resources. Thebestresults come fromtesting no morethan 5 users and running as many small tests as you can afford.” - JAKOBNIELSEN Usability testing The Tobii X2 is placed below the mobile device Incorporate eye tracking in usability testing to understand the complete user experience • Do usabilitytest at regular intervals • Run usabilitytests with 4-5 participants, which covers 80% of usabilityproblems
- 34. Comparing effectiveness oftwo different versions of the same design or product by launchingthem both under similar circumstances. Used to validatedesign decisionswith real time data Multivariate testing uses the same comparison idea as A/B testing, but compares a higher number of variables, and reveals more informationabout how these variables interactwith one another. Most commonly A/B tests are used to test the onboardingjourney and design layoutsfor user conversion A/B testing
- 35. Variationof Design Thinking;Pioneered by Google Ventures Answer critical business questions through design, prototype a solution,and test it with real audience – all in one week? Design Sprint Understand Diverge Converge Prototype Validate
- 36. Variationof Design Thinking;Pioneered by Google Ventures Answer critical business questions through design, prototype a solution,and test it with real audience – all in one week? Design Sprint Understand Diverge Converge Prototype Validate Outcome Everybody knows everything about the problem Dig into problem
- 37. Variationof Design Thinking;Pioneered by Google Ventures Answer critical business questions through design, prototype a solution,and test it with real audience – all in one week? Design Sprint Understand Diverge Converge Prototype Validate Outcome Everybody knows everything about the problem Outcome Tons of solution sketches (low fidelity) Dig into problem Explore different solutions to the problem
- 38. Variationof Design Thinking;Pioneered by Google Ventures Answer critical business questions through design, prototype a solution,and test it with real audience – all in one week? Design Sprint Understand Diverge Converge Prototype Validate Outcome Everybody knows everything about the problem Outcome Tons of solution sketches (low fidelity) Outcome One or few best solutions Dig into problem Explore different solutions to the problem Decide on best solution based on desirability, business viability,and technical feasibility
- 39. Variationof Design Thinking;Pioneered by Google Ventures Answer critical business questions through design, prototype a solution,and test it with real audience – all in one week? Design Sprint Understand Diverge Converge Prototype Validate Outcome Everybody knows everything about the problem Outcome Tons of solution sketches (low fidelity) Outcome One or few best solutions Outcome Prototype (high fidelity) Dig into problem Explore different solutions to the problem Decide on best solution based on desirability, business viability,and technical feasibility Prototype the solutionto test with users
- 40. Variationof Design Thinking;Pioneered by Google Ventures Answer critical business questions through design, prototype a solution,and test it with real audience – all in one week? Design Sprint Understand Diverge Converge Prototype Validate Outcome Everybody knows everything about the problem Outcome Tons of solution sketches (low fidelity) Outcome One or few best solutions Outcome Prototype (high fidelity) Outcome Knowledge Dig into problem Explore different solutions to the problem Decide on best solution based on desirability, business viability,and technical feasibility Prototype the solutionto test with users Conduct usability testing on prototype to get early feedback
- 41. Variationof Design Thinking;Pioneered by Google Ventures Answer critical business questions through design, prototype a solution,and test it with real audience – all in one week? Design Sprint Understand Diverge Converge Prototype Validate Outcome Everybody knows everything about the problem Outcome Tons of solution sketches (low fidelity) Outcome One or few best solutions Outcome Prototype (high fidelity) Outcome Knowledge 1. Reduce assumptions, answer critical business questions, and give you a peek into the future of your product – without spending months of developmentand design time. 2. You might even decide to call off your project entirely– and the opportunity costs of what you could buildinstead are immeasurable. Benefits Dig into problem Explore different solutions to the problem Decide on best solution based on desirability, business viability,and technical feasibility Prototype the solutionto test with users Conduct usability testing on prototype to get early feedback
- 42. Strategy Pros andCons Leading device strategy Consequences of the leading device strategy + Less design work (at first) + Faster to market - build and release one platform first - One platform will have to wait - Higher risk of forcing patternsonto non-leadingdevice Design Strategies for Mobile Ecosystem – choosing your approach
- 43. Strategy Pros andCons Leading device strategy Consequences of the leading device strategy + Less design work (at first) + Faster to market - build and release one platform first - One platform will have to wait - Higher risk of forcing patternsonto non-leadingdevice Custom design + Most room for innovation - More developmenttime - Unpredictablebehaviorwith OS updates Design Strategies for Mobile Ecosystem – choosing your approach
- 44. Strategy Pros andCons Leading device strategy Consequences of the leading device strategy + Less design work (at first) + Faster to market - build and release one platform first - One platform will have to wait - Higher risk of forcing patternsonto non-leadingdevice Custom design + Most room for innovation - More developmenttime - Unpredictablebehaviorwith OS updates Platform dedicated solutions + Strongest user experience across platforms + Release at the same time + Less developmenttime compared to custom solutions - More work - design twice - Less consistency between designs thus more difficult to maintain Design Strategies for Mobile Ecosystem – choosing your approach
- 45. Strategy Pros andCons Leading device strategy Consequences of the leading device strategy + Less design work (at first) + Faster to market - build and release one platform first - One platform will have to wait - Higher risk of forcing patternsonto non-leadingdevice Custom design + Most room for innovation - More developmenttime - Unpredictablebehaviorwith OS updates Platform dedicated solutions + Strongest user experience across platforms + Release at the same time + Less developmenttime compared to custom solutions - More work - design twice - Less consistency between designs thus more difficult to maintain • Focus on functional consistency not UI consistency • Follow platformguidelines – Look at what you can do on each platform before you start designing • Create style guide that everybody can refer to • Xcode for iOS and Andriod Studio havebuilt in editorsto design high fidelity prototypes. It speeds up developmentby reducing hand-offsbetween designers and developers • Design enterprise mobile apps around enterprise workflows. Use multi app architecture to focus on task specific apps. Design Strategies for Mobile Ecosystem – choosing your approach
- 46. Facets of designin IoT—a good product requires integrated thinking across all of these Design for IoT Designing UX for IoT will confront you with some extra challenges and complexity that you wouldn’t encounterbefore. You’ll need to think about some different and perhapsnew areas of design that all serve to shape the UX.
- 47. Facets of designin IoT—a good product requires integrated thinking across all of these • Embedded devices often save power by connecting only intermittently ... which means parts of the system can be out of sync, creating discontinuities in UX • Latency on the Internet is out of your control (and reliability is not 100%) ... which means although we expect physical things to respond immediately and reliably, this might not happen • Code can run in many more places ... which means users have to engage with the system model to predict how it will work if parts are offline • Devices are distributed in the real world ... which means social and physical context of use is complex and varied • Functionality can be distributed across multiple UIs ... which means designers need to consider not just usability but interusability • Much of the information processing happens in the Internet service ... which means the service experience is often equally or more important than the single device UX Design for IoT Designing UX for IoT will confront you with some extra challenges and complexity that you wouldn’t encounterbefore. You’ll need to think about some different and perhapsnew areas of design that all serve to shape the UX.
- 48. Device is theFocus of the UX Service is the Focus of the UX Industrial design of devices is striking Industrial design of devices is low profile Many interactions handled via the core device (e.g., a watch) Interactions are distributed across multiple devices Most functionality is handled on the core device itself (e.g., a washing machine) Most functionality lives in the cloud service or gateway software (perhaps because local devices don’t have much computing power) User views service as a way to control the device (e.g., “I have an app for my thermostat”) User views device as a means to enable the service (e.g., “The intruder alarm uses motion sensors”) Swapping the core device for a different make or model would radically change the user experience of the system (e.g., changing to a different brand of thermostat or make of car) Devices can be added, removed, or swapped without changing the core functioning of the system (e.g., paying for travel with an NFC phone instead of an RFID card) if the device is the hero of your UX, make sure it’s attractive, usable, and does what it needs to do, elegantly. If your service is the focus of the UX, you can still make beautiful devices but make sure the service design is at least as good IoT Products Combine Devices and Services Oyster card is an avatar for Service. Oyster can also be used via NFC- enabled phones Nest users arelikely to say “I havea Nest,” referring to the thermostatto representthe entire system. Because the device is so central to the UX, users will havehigh expectations of its design and functionality
- 49.
- 50. Thank You Questions? Feedback?Share experience? [email protected] linkedin.com/in/vijaymorampudi Vijay Morampudi • ManagingDigital transformation programs to deliver business valueearly to customers using geographicallydistributedteams • PMP®, PMI-ACP® and SAFe Agilist (SA) certified • B.Tech in CSE from IIIT Hyderabad. • Specialties 1. Digitaltransformation 2. Program Management 3. Agile adoptionand transformationat Portfolio level using enterprise frameworks (SAFe) 4. Enterprise MobileApp Development 5. User Experience (UX)