UX Prototyping: New Principles and Tools (HTP Grodno, 20.03.2018)
- 2. About Myself ➔ Business Analyst ➔ UX-enthusiast ➔ Can write some stuff in Python ➔ Started career in Customer Support ➔ An old otaku (useless fact)
- 3. Glossary ➔ Minimal Valuable/Viable Product That is a product, anyway. You can try to sell it to customers. ➔ Prototype Not a product. You can show it to friends, family, and even investors. Don’t try to sell it to customers. They won’t be happy about that. ➔ UX prototype Focuses mainly on user experience and customer satisfaction of using a future product.
- 4. How it used to be in the past
- 5. How it used to be in the past (bad case)
- 6. How it works now (in most cases)
- 7. Top 10 Highest Rated Prototyping Software* 1. InVision - 98% 2. Marvel - 95% 3. Axure RP - 79% 4. POP - 76% 5. Fluid UI - 70% 6. Proto.io - 62% 7. Flinto - 57% 8. UXPin - 41% 9. iRise - 36% 10. Framer Studio - 28% *Based on G2 Satisfaction Score by g2crowd.com
- 8. What tools do you use for prototyping?
- 9. What features are required for a prototyping tool?
- 10. Must-have features nowadays ● Multiplatform ● Collaboration ● Preview on devices ● Responsive layout ● Versioning ● Diverse component configuration ● Navigation among screens ● Animation ● Export to multiples formats
- 11. Nice-to-have features ● Extensive documentation ● Video tutorials ● Less limitations for non-enterprise customers ● Free (no subscription required) ● Sending automatic request for making and delivering coffee from the nearest cafe
- 12. From design to implementation
- 13. Some unexpected sh*t is about to happen anyway. Just take it easy.
- 14. What we can do (these are new principles) ➔ Closer collaboration between UX and DEV ➔ Re-using design in development ➔ Narrow the gap between a prototype and a product/feature ➔ Prototype is an MVP
- 15. Prototyping tools under consideration today Alva (https://meetalva.io/) Framer (https://framer.com/) Supernova Studio (https://supernova.studio/) Fuse (https://www.fusetools.com/)
- 16. Alva or Meet Alva “It is a radically new digital design tool built for cross-functional product teams. Alva lets you design interactive products based on the same components your engineers are using for production websites. But, our mission goes way further. And guess what – we are entirely open source.” - meetalva.com https://github.com/meetalva/alva
- 18. Alva’s default patterns Atoms: ● Button ● Copy ● Dropdown item ● Headline ● Image ● Layout ● Space Molecules: ● Dropdown ● Hero ● Teaser ● Text
- 20. What we’ve got ➔ Using React to customize basic components ➔ One source for design and code of the components ➔ Reusing the components
- 21. Alva + ● Tight collaboration between UX and DEV ● Prototype components are up-to-date with a product ● Creating and supporting design systems and style guides ● Further reusing of custom components ● Free ● Open source
- 22. Alva - ● Lack of documentation and tutorials ● It is a quite raw tool ● Lack of configuration in the visual editor ● Lack of default patterns ● React-focused only
- 23. Briefly about Framer (advantages) ● You can design in traditional way ● You can actually write code instead ● Using CoffeeScript as more light-weighted syntax of JavaScript ● Diverse component customization and animation abilities ● Export to SVG and CSS code ● Rich documentation and tutorials ● You can embed AR.js to use augmented reality in Framer
- 24. But… (Framer’s disadvantages) ● You’d better know JS basics ● Need much time to learn the features ● It is not free
- 25. Supernova products Supernova Studio Powerful visual editor on desktop for designing mobile apps. We will focus on it. Supernova Cloud Online suite for team collaboration on a prototype. It is free and has no limits for users and projects. But it works only in a conjunction with the Studio. The Studio is not free.
- 26. Supernova Studio
- 27. Supernova Studio: Export as code Export a prototype as a project for: Android iOS React Native Build system configuration file and project structure, layouts, assets, drawables, source code, localizations files and other platform specifics.
- 28. Supernova Studio: Localization ● Make localization during the design stage ● Check localizations in the editor ● Up-to 30 languages. ● Automatic or manual localization ● Can use built-in Google Translate API connector
- 29. Other Supernova’s advantages ● Powerful animation engine ● Export to Supernova Cloud ● Extensive documentation ● Video tutorials
- 30. Supernova - ● Import from Sketch only ● Mac only ● High price ● Magic under the hood
- 31. Fuse - platform for developing Android and iOS apps. From Norway with love.
- 32. Own XML for designing components, layouts, and basic animations JavaScript to make it alive Real time app preview Compiled app for Android or iOS How it works (in general)
- 33. App preview and code editor = FREE
- 34. Fuse Studio – a visual editor for designing app 125$ per month for a user
- 35. Example of a button Attributes, classes, variables – all we love.
- 36. Let’s add the button on a screen
- 37. This is a checkbox. It is not so funny anymore.
- 38. Radio Buttons
- 39. Compare UI and the code
- 40. Fuse: Advantages ● A development platform ● UX and DEV are working in one environment ● Prototype = MVP ● Extensive documentation ● App preview ● Platform updates and improvements
- 41. Fuse: Disadvantages ● No sense to use it just for UX prototyping alone ● Need time and efforts to learn ● High price for a license
- 42. We need to learn. That’s it.
- 43. Thank you!