Download as PDF, PPTX
More Related Content
Similar to Low Code Capabilities of Digital Product Design Platforms
Low Code Capabilities of Digital Product Design Platforms
- 1. Low-Code Capabilities ofDigital Product Design Platforms Jason Beres Infragistics jasonb@infragistics.com
- 2. • I managethe design & product development teams that innovate across Infragistics products, heavy emphasis on UX for developer tooling, UI frameworks & data visualization • 19 years @ Infragistics • 13 years Microsoft .NET MVP • Author/co-Author of 10 books ranging from SQL Server, MFC/C++, VB, C#, ASP.NET, Silverlight Jason Beres Senior VP, Infragistics Developer Tools https://Infragistics.com About Me @jasonberes jasonb@Infragistics.com @infragistics
- 3. Agenda • Today’s Challengesin Software Development • The Promise of Low-Code and No-Code Tools • Digital Product Design Platforms & Low-Code • Impact of Low-Code on the Future of Software Development • Comparing Tools in the Market Today • Demo
- 4. Today’s Challenges inSoftware Development
- 5. • The “UXProcess” of most enterprises and SMB’s is not mature – causing lost time, wasted money and canceled projects. • There are multiple tools, used by multiple teams, that don’t work together, to deliver software. • Development teams do not have access to UX resources. • Designs from UX do not translate well to developer capabilities. Building Software Today is Complex “Problems in development are 10 times more expensive to fix than during design” (1) “50% of a developer’s time is spent trying to fix issues that could have been avoided” (2) “70% of enterprise CEOs now see UX as a competitive differentiator” (3) “According to Forrester Research, the revenue impact of a 10%-point improvement in a company's customer experience score can translate into more than $1B in revenue” (5) “User experience (UX) focuses on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations” (4) (1) https://dinus.ac.id/repository/docs/ajar/RPL-7th_ed_software_engineering_a_practitioners_approach_by_roger_s._pressman_.pdf (2) http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.370.9611&rep=rep1&type=pdf (3) https://info.userzoom.com/UX-Enterprise-Survey-2019.html?_ga=2.216488534.1398585645.1592419135-799466160.1582827269 (4) https://www.usability.gov/what-and-why/user-experience.html (5) https://forrester.com/The+Business+Imapct+Of+Customer+Experience+2011/fulltext/-/E-RES59072?objectid=RES50972&al=0
- 6. Low-Code & No-Code tothe Rescue?
- 7. Low-Code • Digital productteams create apps with visual tools that require little to no up-front coding. • Includes a design to developer hand-off for dev team to ‘finish’ an application before deployment. • Should eliminate the need for heavy hand-coding in areas like screen design, UX flows, theming and branding. • Can all but eliminate the need for manual HTML & CSS tweaking. Definitions & Opinions No-Code • End-to-end app / automation creation with no developer skills required. • Includes RPA (Robotic Process Automation) like Zapier, Microsoft Power Automate, IFTTT. • Limited features for high-fidelity UX, high productivity for citizen developers & power users.
- 8. Low-Code & Digital ProductDesign Platforms
- 9. Introducing: Digital ProductDesign Platforms
- 10. • Bridge thetraditional silos between designers and developers with a shared vocabulary. • Reduces time to create / construct prototypes using accepted and approved pre-defined UI controls and UI patterns. • Interaction models as well as accessibility requirements like WCAG, ARIA and Section 508 compliance. • Reduces defects and testing & promotes brand consistency. The Foundation: Design Systems
- 11. • The graphicdesign and layout of UI. Screen Design Sketch App showing DOM tools and layouts in an interactive screen design.
- 12. • Diagrams orlinked-screens that highlight movement throughout a product. User Flows Indigo.Design showing user-flows and screen states in a running prototype.
- 13. • A mockupof a partial of complete solution that you want to create. Prototyping Progression of a low-fidelity prototype to a high-fidelity prototype.
- 14. • Gather insightsfrom users to ensure design and interactions are correct. User Testing Indigo.Design showing analytics and usability reporting on a prototype.
- 15. • Real-time visualcollaboration and co-editing of assets with stakeholders and digital product teams. Collaboration & Co-Editing A running prototype with interactive feedback in Indigo.Design.
- 16. • WYSIWYG designerwith code generation in real time or design-to- code in a post-design process. Low-Code App Building WYSIWYG App Builder with Toolbox, DOM layout, Property Editors.
- 17. • Convert screendesigns and prototypes into production-ready code. Code Generation Code generation plug-in for Visual Studio Code to generate Angular app.
- 18. Digital Product DesignPlatforms: Low-Code Platform Solutions to Siloed Challenges
- 19. • Solving thedesign-to-developer handoff challenge is a primary driver to move to a digital product design platform. Key Outcomes: • Increase team productivity and efficiency. • Drastically shorten time to market. • Produce higher quality, more usable digital products. Save Time & Money
- 20. • IDC forecaststhat close to 60% of part-time application developers will be low-code developers by 2025 • 1/3 of full-time application developers will be low-code developers. • Full-time low-code developers grows with a CAGR of 51.5%, in contrast to 32.6% for part-time low- code developers. • 70% of Application Development Activity by 2025 is low-code (Gartner). Shifting to Low-Code
- 21. • Low-Code /Design to Code Starts with a well-planned Design System. • Make sure you are including design and development teams in the UI Kit design, so you have UI Components and UI patterns in representative tools across each phase of the digital product design process. • The biggest impact on time and cost savings is eliminating high- cost, repetitive coding tasks with production-ready code output. Successful Low Code Toolbox in Sketch Toolbox in App Builder Map to Real UI Libraries
- 22.
- 23. InVision / Adobe XD • Large userbase. • Platform support for UI prototyping, interaction design, and image-based prototyping. • Strong design- system management • Plug-ins for Sketch, Adobe XD and other tools for cloud- design sync. Figma • Fast-riser in vector- based design tools. • Can be extended for code-generation. • App store for plug- ins and extensions. • Design system management tools. • Cloud-based for easy prototyping and sharing. Cons • No User Testing. • Code-generation setup very complex. • Default designs to not produce usable code. Sketch • Large user base. • Vector-based tool for interactive prototypes and cloud-based collaboration. • Large eco-system. Indigo.Design • Most balanced platform solution. • Image-based prototyping, markup tools. • Remote, un- moderation user testing solution. • App builder WYSIWYG IDE • VS Code plugins. Cons • No User Testing. • No Design-to-Code extensions. • Designs to not produce usable code. Cons • No User Testing. • No Design-to-Code extensions. • Designs to not produce usable code. Cons • No User Testing. • No Design-to-Code extensions. • Designs to not produce usable code. • Mac Only. Cons • Weak design system management. • Figma not supported. • Angular code gen only, Blazor / React Q4 2021. Designer Focus Developer Focus with Key UX Tools Designer Focus Designer Focus with Developer Aspirations
- 24.
- 25. Recommendations • Consider low-codecapabilities of digital product design platforms to accelerate application design and development. • Your design system is foundational to success – it must be owned, maintained and improved like any other product. • Success hinges on the continuum of UI libraries in your design tool, the prototyping tool and the app building tool. • Most tools are heavy on the designer features, not app building or code- generation, which is where most time and cost is spent.
- 26. Wrap Up • Digitalproduct design platforms have emerged as a core tool for digital product teams for the iterative design and development process, with capabilities including screen design, prototyping, collaboration with stakeholders, user testing and code generation. • According to Gartner, in the era of remote work and distributed teams, real-time visual collaboration and co-editing are critical to innovation. • Digital product design platforms are acting as the new whiteboard for the entire digital product team. "Application leaders must understand the key features of digital product design platforms and deploy a tool to cover everything from screen design to code generation.“ Technology Insight for Digital Product Design Platforms, Nov 24, 2020
- 27.
- 28.