This document provides an overview of using wireframes to elevate UiPath apps with better user experience (UX) design. It discusses: 1. The importance of wireframing apps to set clear vision, direction, and improve user adoption. 2. Recommended wireframing tools like Balsamiq, Figma, and Lucidchart that allow quick iteration. 3. Best practices for creating prototype-focused wireframes that call out the major UiPath app components like pages, containers, controls to translate designs into code. 4. The goal of wireframing is user satisfaction through ease of use, visual design, navigation and responsiveness.

1. Design Dynamics
Elevating UiPath Apps with UX Wireframes

2. 2
Meet today’s speaker:
David Kroll
Solutions Engineering, Product Marketing, Sales Enablement
Recovering Application Developer
@ Ashling Partners

3. 3
The Story of Jake, the UiPath Apps Developer

4. 4
1. Story of Jake (5 min)
2. Introduction to Wireframing (5 min)
3. Best Wireframing Tools (5 min)
4. Mastering Wireframes & Translating them into UiPath Apps (15 min)
5. Q&A Session (5 min)
6. Conclusion & Additional Resources (5 min)
Agenda Slide

5. Section 2
Introduction to Wireframing

6. 6
When building an app for
other stakeholders, do
you struggle with…
• Lack of Clear Vision?
• Lack of Direction/Feedback?
• Poor User Experience (UX)?
• Poor End-User Adoption?
• Accessibility Issues?
If so, applying proper wireframing techniques can
truly make the difference on your next project!

7. 7
User stories are often provided when building out applications, like below:
Examples:
• As a digital marketer, I want an interface that lets me build out my digital ad campaign
and plan its execution over the next 12 months so that I can do my job more effectively.
• As a tax analyst, I want an interface that lets me review the past quarterly earnings and
estimate potential tax implications in the following year so that we can save on taxes
where possible.
• As an IT manager, I want an interface that helps me manage work assignments to my
employees so that we can be more efficient.
The Importance of Wireframing
As a < type of user >, I want < some goal > so that < some reason >

8. 8
Any wireframe worth its salt should achieve the following:
• Clearly set a direction and expectation on what that application will look like
• Provide control recommendations to meet the application requirements
(i.e. ComboBox vs. Date Picker)
• Serve as a conversation starter with the business, with the intent to arrive at an ideal design that
is both possible and user friendly
• Serve as a foundation to a deeper prototype specification, ensuring that developers are in
alignment with the business vision and their expectations.
Components of a Wireframe
Requirements
or User Stories
Wireframe Prototype
Order of Operations

9. 9
Wireframing in Action

10. 10
• Use a digital tool (like Balsamiq or Figma!)
• Group your wireframes by application
• Think through functional approach
You can build multiple screens on a single view
(smaller apps), or subdivide them across multiple
screens (larger apps).
Great for getting feedback quickly as it is low-cost to
build and easy to re-iterate as the business makes
decisions on what they would like to use.
It’s a great time to make any functional assumptions
known by including them in your design which
improves teamwork and collaboration.
Creating a Wireframe

11. Section 3
The Best Wireframing Tools

12. 12
Wireframing Tools
At the end of the day, whichever tool
you choose is up to you, but I
recommend looking at the following
attributes
• Pick something easy to use
• Consider collaboration needs
• Consider the
approvers/stakeholders

13. 13
Recommended Tooling
Tool Name Description
Sketch Wireframes, prototypes, and user interfaces
Figma High fidelity design prototyping
Lucidchart Flowcharts, diagrams, wireframes
Balsamiq Rapid wireframing (great for iterative design)
Balsamiq Figma

14. Section 4
Mastering Wireframing

15. 15
As a digital marketer, I want an interface that
lets me build out my digital ad campaign and
plan its execution over the next 12 months so
that I can do my job more effectively.
We translate it into a visual interface
1. Align the requested interface/forms visually
2. Read and capture requirements in design
3. Try to make the interface easy and appealing
4. Show it to the business/client before building
5. Set expectations for the app
6. Build the agreed-upon design
Mastering Wireframing

16. 16
Supported Requirements:
- Ability to launch the form to create a new
campaign
- Ability to launch the form to edit existing
campaigns
- Ability to access relevant analytics (managers
only)
- Ability to see currently running and previously
executed campaigns.
- Ability for system administrator to manage
access to application
Example: Landing Wireframe

17. 17
Mastering C.R.A.P. ☺
Contrast
Using colors or font sizes to draw
attention to different elements
Repetition
Repeating elements in a design
helps create consistency
Alignment
Proper alignment creates balance
and organization in a design
Proximity
Items that are related should
stay near each other

18. 18
Example: Create a New Campaign Wireframe
Supported Requirements:
- Ability to create a new campaign
- Ability to link up notification parties
- Should load active client list from CRM into
List Clients dropdown
- Ability to save as draft

19. 19
Example: Edit Existing Campaign Wireframe
Supported Requirements:
- Ability to edit existing campaigns
- Ability to access and publish drafts
- When an item is selected in the list, it should
load the campaign details below the selected
frame.

20. 20
Example: Analytics Wireframe
Supported Requirements:
- Ability to load in key analytics from CRM
- Track the starting budget for the year
- Show the remaining budget left for the year
- Calculate the ROI by looking at campaign
performance.
- Estimate recommended budget for next year

21. 21
Example: Access to Application Wireframe
Supported Requirements:
- Ability to enter in a person for application
access using a type-ahead control.
- Ability to look for a specific group through a
search capability.
- Ability to select access level and configure
initial access.

22. 22
End-state Wireframe

23. Section 5
Translating Wireframes into
UiPath Apps

24. 24
Aligning wireframes to UiPath Apps
What is
your goal?
Set expectations and
receive feedback
Provide a blueprint for
UiPath development
Feedback-focused
Wireframes
Prototype-focused
Wireframes
Great for business
Great for developers

25. 25
What is a prototype-focused
wireframe?
Did you know that if you have technical prowess
in UiPath Apps, you’re even more ideal to be a
part of the wireframing process?
In this style of wireframe, we draw
out the major components that we
will use in UiPath Apps to create the
interface, and we try to annotate and
call out different components
necessary for the design.

26. 26
Wireframing Prototyping
Visualizing an app Creating a design specification

27. 27
Data Storage
Make sure a database exists
on the back-end before you
begin building your app.
Most applications will need a
master repository to store
application information by
default – I recommend doing
this in UiPath Data Service.
Pro tip:
By referencing your wireframe, you can
better visualize and understand the data
relationships of the application!
Pages
A UiPath Application can be
subdivided into Pages, which
are essentially screens.
For each screen that you
wireframe, you should expect
to build a page.
Did you know?
Pages can be re-used if they are placed
inside a Page Container control.
Containers & Controls
The fundamental building blocks
of UiPath Apps, mastering
containers will allow you to build
virtually any interface.
Think through how you would
organize your containers and
controls to arrive at the intended
layout.
Pro tip:
Try naming your controls in your wireframe
consistently to keep your blueprint aligned.
Example of UiPath Components

28. 28
Why do we do this? User Satisfaction!
Ease of Use
Visual Design
Navigation
Responsiveness
Speed
Satisfaction
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
1 2 3 4 5 6 7 8 9 10
Roughly the
Average

29. Section 5
Any questions?

30. 30
Wireframing Tools
• Balsamiq - https://balsamiq.com/
• Figma - https://www.figma.com/
• Sketch - https://www.sketch.com/
• Lucidchart - https://lucidchart.com/
UiPath Apps Controls - Control Documentation
Additional Resources
Other links
Thank you for your time ☺
Please reach out to me on LinkedIn if you want to chat further