Digitizing Business Processes with Microsoft - Teams Custom App --- Put your business processes into one digital place to work remotely with team, without distractions

1. This @&$!* coronavirus is
disrupting my business
processes…
uhm, what I
need to to?
Digitizing Business
Processes with Microsoft
Teams Custom App
Put your business processes into one digital
place to work remotely with team, without
distractions
Domenico Monaco
http://domenicomonaco.it
monaco.d@gmail.com

2. Over the years the digital workplace is become more and
more important.
But now, with COVID, many organizations are forced to
have a digital workplace, unlike in the past which was just
an opportunity for processes improvement.
But, digital workplaces are not like classic digitial places.
Digital workplace need to be integrated, secure, low-
distraction, productive and more… hard-features.
This @&$!* coronavirus is disrupting my business
processes ... uhm, what I need to to?
Digitizing Business Processes with Microsoft Teams Custom App

3. Digitizing Business Process into collaborative
platform as MS Teams through a custom App
Custom App
Digitized process
MS Teams
Digitizing Business Processes with Microsoft Teams Custom App

4. Available on Mobile, Desktop and Web
Integarted with Microsoft products
Extensible with to external solutions
Part of a big environment
So, why develop many touchpoints of your
workplaces…
when you can develop one MS Teams
Custom App as Web App?!
MS Teams as multi-touchpoint platform
Digitizing Business Processes with Microsoft Teams Custom App
#WTF!

5. Is good to have a digitized process with more as possible
similar design style to guest platform
Coherent design style can improve the:
• approval process on store
• user experience
• time to design and develop
• quality of digitized process
But, MS Teams is public platform
Digitizing Business Processes with Microsoft Teams Custom App

6. Styleguide Design MS Teams
Details and styleguide introdution about MS Teams Custom Tab

7. Microsoft Teams is a collaboration app that
helps your team stay organized and have
conversations— (Teams , Meetings,
Calls Activity) all in one place
MS Teams is available as Mobile App (Android
iOS) or Web App.
What is
Microsoft Teams?
Digitizing Business Processes with Microsoft Teams Custom App

8. When planning your digitez process, remember that
Teams is a collaboration hub.
The best Teams apps about your digitized process help people
express themselves and work better together.
MS Teams Digitized Business Process
Digitizing Business Processes with Microsoft Teams Custom App

9. Tabs are Teams-aware webpages embedded in Microsoft Teams, can be added as part of a channel
inside a team, a group chat, or as a personal app for an individual user.
There are two types of tabs available in Teams - channel/group and personal:
• A channel/group tab delivers content to channels and group chats, and are a great way to create
collaborative spaces around dedicated web-based content.
• Personal tabs, along with personally-scoped bots, are part of personal apps and are scoped to a single
user. They can be pinned to the left navigation bar for easy access.
Tabs are canvases that you can use to share content, hold conversations, and host third-party services, all
within a team’s organic workflow.
When you build a tab in Microsoft Teams, it puts your web app front and center where it’s easily accessible
from key conversations.
Digitized Business Process as Custom Tab
Digitizing Business Processes with Microsoft Teams Custom App

10. Digitized Business Process easily accessible
Digitizing Business Processes with Microsoft Teams Custom App
Tabs are canvases that you can use to share content,
hold conversations, and host third-party services, all
within a team’s organic workflow in order to Digitizing
your Business process easily accessible from key
conversations.

11. Digitizing Business Processes with Microsoft Teams Custom App
• Office356 Design Framework:
• https://developer.microsoft.com/en-us/fluentui#/
• MS Teams Web Components:
• https://fluentsite.z22.web.core.windows.net/
• MS Teams Design Guidelines:
• https://github.com/OfficeDev/TrainingContent/tree/mast
er/Teams
• MS Teams Tab Design Guidelines:
• https://docs.microsoft.com/en-
us/microsoftteams/platform/tabs/design/tabs
• MS Teams Reverse Styleguide
• https://www.figma.com/file/3I0TbgiGBuEXZ8Ure8JlEO/M
S-Teams-OSx-Desktop-App-Sizes?node-id=31%3A3
Design Guidelines

12. Mobile
Digitizing Business Processes with Microsoft Teams Custom App

13. Desktop
Digitizing Business Processes with Microsoft Teams Custom App

14. Workplaces has big screens
Digitizing Business Processes with Microsoft Teams Custom App

15. A good tab should display the following characteristics:
• Focused functionality
• Reduced chrome
• Integration
• Conversational
• Streamlined access
• Responsiveness to window sizing
• Flat navigation: task module, a pseudo dialog and browser page
• Good personality: custom logo small and unobtrusive, integrated colors and layouts
Design Guidelines
Digitizing Business Processes with Microsoft Teams Custom App

16. MS Teams has already color palette
Dark Light
Digitizing Business Processes with Microsoft Teams Custom App

17. Digitizing Business Processes with Microsoft Teams Custom App
Lets start with a boilerplate!
https://github.com/domenicomonaco/microsoft-teams-app-boilerplate

18. Some resources from http://freepik.com, https://www.flaticon.com, https://unsplash.com
Give me feedback!
Twitter @_domenicomonaco
Linkedin linkedin.com/in/domenicomonaco
DOMENICO MONACO
monaco.d@gmail.com
http://domenicomoanco.it
Thanks
Digitizing Business Processes with
Microsoft Teams Custom App
Put your business processes into one digital place to work
remotely with team, without distractions