Creating apps with Forge and its UI frontend components is now easier than ever. Join Senior Designer Allard van Helbergen and Product Manager Josephine Lee as they walk through the story of designing Forge UI. What is a declarative UI and why did we choose this paradigm? What are all the considerations that go into defining the set of components to build apps with? And how do you make ‘creating apps’ simple? Walk away understanding the foundations of Forge, how all the different components work together, and where Forge UI is headed in the future.

1. Designing Forge UI
A Story of Designing an App UI System
JOSEPHINE LEE | PRODUCT MANAGER | ATLASSIAN
ALLARD VAN HELBERGEN | SR DESIGNER | ATLASSIAN | @VANHELBERGEN

2. Secure
1000+ components
Buildable blocks
Metrics
Analytics
Who
When
How
Why
Where
Useable
Accessible
Lightning fast
Super performant
Limitless configuration
Mobile
VR optimised
Future proofAIMachine learning
Writes itself
Does work for you

3. Secure
1000+ components
Buildable blocks
Metrics
Analytics
Who
When
How
Why
Where
Useable
Accessible
Lightning fast
Super performant
Limitless configuration
Mobile
VR optimised
Future proofAIMachine learning
Writes itself
Does work for you
EASY
TO USE

4. Kicking off
Forge UI
Doing the
Research
Bringing it
to life
Learnings
and what’s
next
Agenda

5. Kicking off
Forge UI
Doing the
Research
Bringing it
to life
Learnings
and what’s
next
Agenda

6. Forge Goals
Atlassian Hosting
Remove all complexities in
setting up a Cloud
environment

7. Security
Ensure built in app security
with hosted infrastructure
Forge Goals
Atlassian Hosting
Remove all complexities in
setting up a Cloud
environment

8. Security
Ensure built in app security
with hosted infrastructure
Forge Goals
Simple Experience
Provide a simple app creation
experience
Atlassian Hosting
Remove all complexities in
setting up a Cloud
environment

9. WHAT IS FORGE UI?
(EVENT, STATE)
UI VIEWFAAS
(<APP />, STATE)
MARK UP

10. Zero effort UX
Get best-practices and
accessibility built in
Forge UI Goals
Rapid DevX
Build and iterate
fast and with ease
Cross Platform
Unlock extensibility on
web and mobile native

11. In-house developer
Software engineer by day.
Forge app developer by night.

12. In-house developer
Software engineer by day.
Forge app developer by night.
🦄

13. In-house developer
Software engineer by day.
Forge app developer by night.
Likes popcorn.
🌽

14. In-house developer
Software engineer by day.
Forge app developer by night.
Likes popcorn.
And horses, too.
🦄
🌽

15. DeclarativeImperative
<Cell>
<Button text="Attend" />
</Cell>
const container = document
.getElementById(‘my-cell’);
const btn = document
.createElement(‘button’);
btn.className = ‘btn’;
btn.value = ‘Attend’;
container.appendChild(btn);

16. Editor

17. Kicking off
Forge UI
Doing the
Research
Bringing it
to life
Learnings
and what’s
next
Agenda

18. Kicking off
Forge UI
Doing the
Research
Bringing it
to life
Learnings
and what’s
next
Agenda

19. Kicking off
Forge UI
Doing the
Research
Bringing it
to life
Learnings
and what’s
next
Agenda

20. FORGE UI RESEARCH JOURNEY
Define
research plan
Research into
Editor macros
Component
validation
workshop
DIVERSE MACRO LIST
Component
brainstorming
workshop
VALIDATED
COMPONENT LIST
PROJECT
START
MACRO LEVELS +
REFERENCE MACROS
DELIVERY ORDER

21. FORGE UI RESEARCH JOURNEY
Define
research plan
PROJECT
START
Define
research plan
Research into
Editor macros
Component
validation
workshop
DIVERSE MACRO LIST
Component
brainstorming
workshop
VALIDATED
COMPONENT LIST
MACRO LEVELS +
REFERENCE MACROS
DELIVERY ORDER

22. RESEARCH PLAN
In-house developer
Deep dive and understand our in-
house dev persona
Top Editor
Extensions
What types of editor apps do in-
house devs want to build?
Top Components
What components do we need
to provide for these apps?
Please remember
You don’t always need the line or text at all.

23. RESEARCH PLAN
In-house developer
Deep dive and understand our in-
house dev persona
Top Editor
Extensions
What types of editor apps do in-
house devs want to build?
Top Components
What components do we need
to provide for these apps?
Please remember
You don’t always need the line or text at all.

24. Define
research plan
Research into
Editor macros
Component
validation
workshop
DIVERSE MACRO LIST
Component
brainstorming
workshop
VALIDATED
COMPONENT LIST
MACRO LEVELS +
REFERENCE MACROS
DELIVERY ORDER
Define
research plan
Research into
Editor macros
PROJECT
START
FORGE UI RESEARCH JOURNEY

25. What Editor
Macros?
Confluence
Question
Community
post
Marketplace
audit

26. Targeting external developersWhat Editor
Macros?
Confluence
Question
Community
post
Marketplace
audit

27. What Editor
Macros?
Confluence
Question
Community
post
Marketplace
audit

29. Define
research plan
Research into
Editor macros
Component
validation
workshop
DIVERSE MACRO LIST
Component
brainstorming
workshop
VALIDATED
COMPONENT LIST
MACRO LEVELS +
REFERENCE MACROS
DELIVERY ORDER
Define
research plan
Component
brainstorming
workshop
PROJECT
START
FORGE UI RESEARCH JOURNEY
Research into
Editor macros
DIVERSE MACRO LIST

30. Component
Brainstorming
Workshop

31. Crazy 8s

32. Crazy 8s

34. Top Components
List

35. Define
research plan
Research into
Editor macros
Component
validation
workshop
DIVERSE MACRO LIST
Component
brainstorming
workshop
VALIDATED
COMPONENT LIST
MACRO LEVELS +
REFERENCE MACROS
DELIVERY ORDER
Define
research plan
Component
validation
workshop
Component
brainstorming
workshop
PROJECT
START
FORGE UI RESEARCH JOURNEY
Research into
Editor macros
DIVERSE MACRO LIST

36. Component
Validation
Workshop

37. Shareback session

38. Shareback session
Question: How to define a layout model?

39. Define
research plan
Research into
Editor macros
Component
validation
workshop
DIVERSE MACRO LIST
Component
brainstorming
workshop
VALIDATED
COMPONENT LIST
MACRO LEVELS +
REFERENCE MACROS
DELIVERY ORDER
Define
research plan
Component
validation
workshop
Component
brainstorming
workshop
VALIDATED
COMPONENT LIST
PROJECT
START
FORGE UI RESEARCH JOURNEY
Research into
Editor macros
DIVERSE MACRO LIST

42. RENDER
ONLY
MACROS

43. RENDER
ONLY
MACROS

44. ACTIONABLE
MACROS
RENDER
ONLY
MACROS

45. CONFIGURABLE
MACROS
ACTIONABLE
MACROS
RENDER
ONLY
MACROS
GIFs about:
GIF me!
The metal age

46. CONFIGURABLE
MACROS
ACTIONABLE
MACROS
RENDER
ONLY
MACROS
Configurable GIFs!

47. FORGE

48. CONFIGURABLE
MACROS
ACTIONABLE
MACROS
RENDER
ONLY
MACROS
Configurable GIFs!

49. CONFIGURABLE
MACROS
ACTIONABLE
MACROS
RENDER
ONLY
MACROS
Macro richness levels

51. Define
research plan
Research into
Editor macros
Component
validation
workshop
DIVERSE MACRO LIST
Component
brainstorming
workshop
VALIDATED
COMPONENT LIST
MACRO LEVELS +
REFERENCE MACROS
DELIVERY ORDER
Define
research plan
Component
validation
workshop
Component
brainstorming
workshop
VALIDATED
COMPONENT LIST
PROJECT
START
MACRO LEVELS +
REFERENCE MACROS
DELIVERY ORDER
FORGE UI RESEARCH JOURNEY
Research into
Editor macros
DIVERSE MACRO LIST

52. Kicking off
Forge UI
Bringing it
to life
Learnings
and what’s
next
Agenda
Doing the
Research

53. Kicking off
Forge UI
Bringing it
to life
Learnings
and what’s
next
Agenda
Doing the
Research

54. Kicking off
Forge UI
Bringing it
to life
Learnings
and what’s
next
Agenda
Doing the
Research

55. Good principles force clarity
and reduce ambiguity.
DESIGN PRINCIPLES

56. Atlassian Design Principles
http://www.atlassian.design

57. Ease and speed over
flexibility
Minimise options to stay lightning fast.
Provide direction
Components are molecular and composed
and avoid minutiae.
Forge UI
design
principles

58. Layout

59. Layout:
Blocks

60. Blocks and the vertical stack
IMAGE
TEXT
TEXT
IMAGE
TEXT

61. IMAGE
TEXT
TEXT
IMAGE
TEXT
BENEFITS
Reflow of layout
Responsiveness managed
inside of block
Cross-platform
Blocks can have alternate
renderings per platform

62. Layout:
Containers

63. Containers and blocks
INPUT
SUBMIT
INPUT

64. Containers and blocks
INPUT
SUBMIT
INPUT
SUBMIT
INPUT

65. Containers and blocks
INPUT
SUBMIT
INPUT
SUBMIT
INPUT

66. Containers and blocks
INPUT
SUBMIT
INPUT
SUBMIT
INPUT

67. The result
https://unsplash.com/photos/zP7X_B86xOg

68. Button
Text
Image
Text field
Text area
Radio / Checkbox group
Select
Date-picker
Button set
Table
Form
CONTAINERS BLOCKS

69. Nic’s DJ app
Bust out the beats.

70. You can’t beat my high-score.
Peter’s 2048 game

71. Kicking off
Forge UI
Doing the
Research
Bringing it
to life
Learnings
and what’s
next
Agenda

72. Kicking off
Forge UI
Doing the
Research
Bringing it
to life
Learnings
and what’s
next
Agenda

73. Kicking off
Forge UI
Doing the
Research
Bringing it
to life
Learnings
and what’s
next
Agenda

74. Start the basics
Users, personas, goals, and principles
were key to getting clarity
Research is iterative
Keep it lo-fi and be comfortable with
unknowns and learning as you go
TEAM
Collaboration for the win!
Key
Learnings

75. TODAY
HANDS-ON
FORGE LABS
Upstairs in Schubert 3

76. THIS YEAR
FORGE BETA
PROGRAM

77. Thank you!
ALLARD VAN HELBERGEN | SR DESIGNER | ATLASSIAN | @VANHELBERGEN
JOSEPHINE LEE | PRODUCT MANAGER | ATLASSIAN