This document discusses low-code capabilities of digital product design platforms. It notes that today's software development faces challenges like siloed tools and lack of UX resources for developers. Low-code and no-code tools promise to help by bridging designer-developer divides. Digital product design platforms integrate tools across the design-development process, from prototyping to collaboration to code generation. These platforms help speed time to market and improve quality by streamlining hand-offs. The document compares vendors and demonstrates a platform's features before recommending platforms to accelerate app development.

1. Low-Code Capabilities of Digital
Product Design Platforms
Jason Beres
Infragistics
jasonb@infragistics.com

2. • I manage the 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 Challenges in 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 in Software
Development

5. • The “UX Process” 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
to the Rescue?

7. Low-Code
• Digital product teams 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 Product Design Platforms

9. Introducing: Digital Product Design Platforms

10. • Bridge the traditional 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 graphic design and layout of UI.
Screen Design
Sketch App showing DOM tools and layouts in an interactive screen design.

12. • Diagrams or linked-screens that
highlight movement throughout a
product.
User Flows
Indigo.Design showing user-flows and screen states in a running prototype.

13. • A mockup of a partial of complete
solution that you want to create.
Prototyping
Progression of a low-fidelity prototype to a high-fidelity prototype.

14. • Gather insights from users to
ensure design and interactions are
correct.
User Testing
Indigo.Design showing analytics and usability reporting on a prototype.

15. • Real-time visual collaboration
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 designer with 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 screen designs and
prototypes into production-ready
code.
Code Generation
Code generation plug-in for Visual Studio Code to generate Angular app.

18. Digital Product Design Platforms:
Low-Code Platform Solutions
to Siloed Challenges

19. • Solving the design-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 forecasts that 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. Vendor Comparison

23. InVision
/
Adobe
XD
• Large user base.
• 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. Demo

25. Recommendations
• Consider low-code capabilities 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
• Digital product 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. https://www.infragistics.com/products/indigo-design/app-builder

28. The End