1. 1. SDL Proprietary and Confidential Building the New Web Client Getting it right from the start Joo Lopes UX Strategist
2. 2. Day Plan 09.30 INSPIRATION 10.15 11.00 11.15 12.30 13.30 15.45 ROADMAP 2015 / 2016 WORKSHOP THE MASTER MINDS UI CONCEPT PRESENTATON
3. 3. 3 Inspiration
4. 4. About this session - Goals Where are we today - Get everybody on the same page Concerns and technical tradeoffs of design decisions Design thinking: Idea generation and takeaways Pointing out next steps Increase emotional involvement with the product In summary, gather feedback, concerns and ideas, of developers, professional services and product management towards a new Web Client.
5. 5. About the Workshop later Work in Groups Follow a template Writing, Draw, Sketch Results presentation No laptops or phones, focus is essential We will have regular breaks
6. 6. 6 Where User Research points at
7. 7. A few sound bytes Amy and Steph from VM WARE talk about the web client HITACHI about when they use the web client Steven from HITACHI talks about inboxes Charles from Informatica about translation reporting capabilities
8. 8. Where User Research is pointing at Transparency about people, objects and processes. Clarity around reuse; understand the impact of change Cross-References: whats being used in a Pub or Topic Tracking capability: who did what; what changed in that version More batching possibilities Quick and dirty publishing jobs No need for IT support In particular for the Web Client: what does it do?
9. 9. 9 Functionality and personas
10. 10. Functionality and personas Find Objects Move Objects Make Favorite Preview Topics Checkin Checkout Download Create New Objects Create New Versions Create New Branches Delete Objects Version compare Create Translatio n Job Edit a Translatio n job Define Languages Create New Language Delete Language Run Translatio n Report Check if objects are being used Find where objects are being used Reuse stats per user / pub Grant permissio ns to users / groups Define ownership Define candidate Baseline Manage baseline Run where used reports History Manage system workflows Manage active workflows Change workflow state Manage workflow actors Define Output Format Publish System Events Publishing Errors Translation Errors Obj.Manag. Translation Reuse Permissions Baseline ReportingWorkflow PublishLogsEdit
11. 11. Functionality and personas Find Objects Move Objects Make Favorite Preview Topics Checkin Checkout Download Create New Objects Create New Versions Create New Branches Delete Objects Version compare Create Translatio n Job Edit a Translatio n job Define Languages Create New Language Delete Language Run Translatio n Report Check if objects are being used Find where objects are being used Reuse stats per user / pub Grant permissio ns to users / groups Define ownership Define candidate Baseline Manage baseline Run where used reports History Manage system workflows Manage active workflows Change workflow state Manage workflow actors Define Output Format Publish System Events Publishing Errors Translation Errors Obj.Manag. Translation Reuse Permissions Baseline ReportingWorkflow PublishLogsEdit
12. 12. Functionality and personas Find Objects Move Objects Make Favorite Preview Topics Checkin Checkout Download Create New Objects Create New Versions Create New Branches Delete Objects Version compare Create Translatio n Job Edit a Translation job Define Languages Translatio n Status Delete Language Run Translation Report Check if objects are being used Find where objects are being used Reuse stats per user / pub Grant permission s to users / groups Define ownership Define candidate Baseline Control baseline Run where used reports History Manage system workflows Manage active workflows Change workflow state Manage workflow actors Define Output Format Publish System Events Publishing Errors Translation Errors Obj.Manag. Translation Reuse Permissions Baseline ReportingWorkflow PublishLogsEdit
13. 13. Functionality and personas When can we use overlays
14. 14. 14 Product Axioms
15. 15. Focus on peoples goals Our software should serve humans, not systems. Be empathic with people like you. Spend time making their life easier. Understand users priorities and make them yours.
16. 16. Features need a hierarchy If 80% of users use 10% of features, bring those to the spotlight. Endow the UI with a hierarchical interpretation. Keep in mind basic and advanced functionality.
17. 17. Leverage functionality Know how people are using your product. Drop features that are not used; find ways to improve those who are.
18. 18. Strive for a transparent system Respect the intrinsic social nature of work relations through software. Your users need to be aware of whats going on with people and objects inside their organization.
19. 19. Extensibility compliant Different customers have different requirements. Dont lose sight of how extensible the out-of-the-box experience is. Overall consistency should not be affected by variable tools and feature scope.
20. 20. Happy Birthday Adobe Photoshop
21. 21. The idea was good, it filled up a gap in 1987 Quickly built emotion and devotion Evolution was consistent and continuous It kept up with technical evolution Creators got the UI model right from the start SAME DNA IS THERE FROM DAY 1! But why?
22. 22. Thomas Knoll
23. 23. It's the greatest image manipulation program that's ever been built, and like Google with search, its name has come to be used as a substitute for the actions it performs.
24. 24. We need budget to architect our documentation or were f***ed. Are our competitors already architecting? Lol! I remember when our support doc was not architected!
25. 25. 29 THE MASTER MINDSDesign Thinking workshop
26. 26. Brief intro: what Design Thinking is Focus on people / customers and their needs and not on a specific technology or other conditions. Methods therefore used are observations, interviews, brainstorming, prototyping Innovating at the intersection of business, technology and people leads to radical, new experience innovation. The user is the one to decide if a product or a service should exist or be established.
27. 27. Workshop THE MASTER MINDS - You will be individually challenged to identify the main problem with the current web client. (10 min) Later, that problem needs to be translated into user needs and benefits of solving it through practical cases. Example: if you find that today not being able to order lunch directly from the Web Client is a major issue, you will have to: - Explain to whom it is an issue (persona) - What are that persona goals - What are the problems she is trying to surpass - How could we include the functionality in the product - Show and tell. Draw, sketch, explain. - All group to decide issues to tackle during this exercise (20m) We will weight your individual picks, try to group them together if that is the case and pick the one each group will tackle during the rest of the workshop
28. 28. Workshop THE MASTER MINDS - Each group (of 4 persons) will then deep-dive into the problem. You will have a template to follow. Generate as many ideas as you can (45m + 45m). Empathize with your user First of all, who is your persona? What are that personas goals? Define the problem What is the persona trying to solve? What are the pain points getting there? How to get there? What opportunities might there be for more creative solutions? Write, draw, explain! Dont forget to find a catchy name for your project. - Results presentation and discussion (60m total)
29. 29. 33 Zooming in to UI architecture and optimized flows
30. 30. Drivers UI Architecture User flows Zooming in progress so far
31. 31. UI Architecture Browsing Topics, Versions and Languages Creating new objects Editing metadata Version Compare Publishing Translations Jobs // Translation Management Workflow and To dos Notifications Inboxes Search Zooming in
32. 32. Single flat environment (no tabs) Consolidated toolbar In context panels Metadata Tracking Overlays Callouts UI Architecture - Container patterns
33. 33. Navigating Topics, Versions and Languages Creating new objects Translations Jobs and Translation Management Publishing process Workflows and Notifications Search * At this point this is SDL confidential material and mockups, wireframes and prototypes cannot be included in this presentation. User Flows *
34. 34. Thank You! Follow me on Twitter Follow me on LinkedIN