Desktop
B2B
0 to 1
Duration
Design Team
My Role
UX Design
UI Design
Organization
Design Problem
Imagine you’re a worker in a large manufacturing plant. At 8 AM, after the morning meeting, you need to write the meeting minutes in Google Docs and send them to the supervisor and colleagues. While starting the production line, you notice a minor incident and immediately report it in the Incident Management System.
Before lunch, you complete the monthly production summary report in the ERP system. At 2 PM, you receive an urgent task to write and submit an equipment maintenance request in MaintainX.
Near the end of the day, you also complete the employee attendance report in ADP and send it to HR. Finally, you submit the daily work summary in Microsoft Teams, recording the day’s activities.
The next day, you also need to mentor new employees on using different systems for reports. You feel overwhelmed by frequently switching between multiple software systems, leading to heavy workloads and errors. You wish for a unified system to streamline reporting and improve efficiency.
This is a market issue that we identified in our user research: many companies are using five to seven different reporting systems simultaneously. This creates a high learning curve for employees and significantly increases the error rate. For managers, it’s also difficult to collect and analyze all the scattered reports. Some companies even have to collect them manually, which greatly reduces overall efficiency.
Design Problem
Design Solution
This includes both regular routines such as weekly updates, store openings, or facility checks, and unexpected updates such as shift changes, maintenance requests, or incident reports. Updates makes it easier to manage all these tasks in one place.
This includes both regular routines such as weekly updates, store openings, or facility checks, and unexpected updates such as shift changes, maintenance requests, or incident reports. Updates makes it easier to manage all these tasks in one place.
Our target users are frontline workers because:
They often rely on outdated tools to complete their tasks.
Industries with a high number of frontline workers are the primary clients for Microsoft Teams OA suites.
Design Highlight
Updates is not the first app in the office management series, so we needed to consider its relationship with other apps, like Approvals, which was released earlier. The PM and marketing teams wanted to promote Updates and Approvals together, so as designers, our task was to ensure that Updates aligns with the design style and user experience of Approvals, while also meeting user needs and specific requirements.
Design Highlight
When designing timestamps, I initially referenced “Approvals,” which has a mature but complex system unsuitable for our MVP. “Updates” and “Approvals” serve different needs, with “Updates” including a “due” concept not present in “Approvals.”
Considering cultural and global factors, I initially designed timestamps like “due tomorrow at 5 pm.” However, after consulting with the CX writer, I realized translating full sentences could be challenging in some languages. To ensure smooth operation across over 20 languages and keep things simple, I opted for a more straightforward time display.
I maintained basic timestamp principles from “Approvals” to keep our MVP simple and scalable.
Design Highlight
Adaptive Card
Another key focus was the adaptive card in the message extension. In Microsoft Teams chat, there are shortcuts that allow users to open apps directly from the chat (I use Approvals here as an example). When users access Updates from chat to submit or review reports, a corresponding adaptive card appears in the chat. Our task was to design these cards to fit different actions and roles.
For example, users can open Approvals directly from the message extension.
I began by researching the Microsoft Teams Design System, Approvals, and other competitors. I also outlined all the variation factors that could affect the content displayed on the card.
There are also many challenges that we need to take into consideration:
Technical concern
The Adaptive Card is configured to refresh automatically if the total number of users in the chat/channel is 60 or fewer. However, if the user count exceeds 60, some users will need to manually refresh the card.
Corner cases
Users switch the update type between scheduled or one-time (with a due date) to ad hoc (without a due date), and vice versa.
Someone is later invited to the chat.
Users later modify the receiver/submitter.
Users later modify the name of the update.
Users alter the questions in the update after someone has already submitted.
Users do not have access to the update.
... ...
With the various factors, technical issues, and edge cases in mind, we ultimately designed many different card variations.
🔶 Request an update
🔹 Scheduled / Recurring
🔻 Loading card
Incomplete
Complete
Everyone’s view
Time sensitive
In progress
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Channel
“Pending by: Studio 8 ”
🔻 Base card
Everyone’s view
Recurring
If (Receiver & Writer), show Review modal;
If (Receiver), show Review modal;
If (Writer & Submitted), show Submission;
If (Writer), show Write modal;
Else, show No access modal;
In progress
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Update
Completed
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Update
🔻 RBAC
Receiver’s view
Recurring
In progress
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Review
Completed
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Review
Writer’s view
Recurring
In progress
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Write update
Completed
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
View my submission
Other’s view
Recurring
Others (not writer, not receiver) will see base card.
Receiver & Writer view
Recurring
In progress
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Write update
Review
Completed
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Review
View my submission
🔹 Scheduled / Once time
🔻 Loading card
Incomplete
Complete
Everyone’s view
Time sensitive
In progress
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Channel
“Pending by: Studio 8 ”
🔻 Base card
Everyone’s view
Recurring
If (Receiver & Writer), show Review modal;
If (Receiver), show Review modal;
If (Writer & Submitted), show Submission;
If (Writer), show Write modal;
Else, show No access modal;
In progress
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Update
Completed
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Update
🔻 RBAC
Receiver’s view
Recurring
In progress
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Review
Completed
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Review
Writer’s view
Recurring
In progress
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Write update
Completed
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
View my submission
Other’s view
Recurring
Others (not writer, not receiver) will see base card.
Receiver & Writer view
Recurring
In progress
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Write update
Review
Completed
Store check-in
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Review
View my submission
🔹 Ad-hoc
🔻 Loading card
Incomplete
Complete
Everyone’s view
Time sensitive
Ad-hoc
Store check-in
Viewers
Daniela Mandera
Available to
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa, Ray Tanaka, Hanno Simmon and 14 others
Channel
“Pending by: Studio 8 ”
🔻 Base card
Everyone’s view
Recurring
If (Receiver & Writer), show Review modal;
If (Receiver), show Review modal;
If (Writer & Submitted), show Submission;
If (Writer), show Write modal;
Else, show No access modal;
Ad-hoc
Store check-in
Viewers
Daniela Mandera
Available to
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Update
Ad-hoc
Store check-in
Viewers
Daniela Mandera
Available to
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Update
🔻 RBAC
Receiver’s view
Recurring
Ad-hoc
Store check-in
Viewers
Daniela Mandera
Available to
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Review
Ad-hoc
Store check-in
Viewers
Daniela Mandera
Available to
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Review
Submitters can submit from multiple entries, and multiple times. Count is consistent with app exeprience.
Writer’s view
Recurring
Ad-hoc
Store check-in
Viewers
Daniela Mandera
Available to
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Write update
Completed
Store check-in
Viewers
Daniela Mandera
Available to
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Submission
1 in total
View my submission
Write again
My submission shows the latest submission.
“Write again” will bring update in modal to write again.
Upon submission, the current card is updated with latest submission count.
Other’s view
Recurring
Others (not writer, not receiver) will see base card.
Receiver & Writer view
Recurring
Ad-hoc
Store check-in
Viewers
Daniela Mandera
Available to
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Write update
Review
Ad-hoc
Store check-in
Viewers
Daniela Mandera
Available to
Babak Shames, Karin Blair, Joshua Vanburen, Kayo Miwa and 14 others
Submission
1 in total
Review
Write again
🔶 Write an update
🔹 Scheduled
🔻 Loading card
Everyone’s view
Time sensitive
In progress
Theft incident report
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames
🔻 Base card
Everyone’s view
Time sensitive
Review
Theft incident report
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames
Read
Submitter sent an update to chat/channel.
Submitter & Receiver can view submission. Others has no access.
🔻 RBAC
Writer’s view
Time sensitive
Completed
Theft incident report
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
View my submission
Receiver’s view
Time sensitive
Received
Theft incident report
Due
Sep 19, 2024, 6:00 PM
Viewers
Daniela Mandera
Submitters
Babak Shames
Review
Other’s view
Time sensitive
Others (not writer, not receiver) will see base card.
🔹 Ad-hoc
🔻 Loading card
Everyone’s view
Time sensitive
In progress
Theft incident report
Viewers
Daniela Mandera
Submitters
Babak Shames
🔻 Base card
Everyone’s view
Time sensitive
Review
Theft incident report
Viewers
Daniela Mandera
Submitters
Babak Shames
Read
Submitter sent an update to chat/channel.
Submitter & Receiver can view submission. Others has no access.
🔻 RBAC
Writer’s view
Ad-hoc
Completed
Theft incident report
Viewers
Daniela Mandera
Submitters
Babak Shames
View my submission
Receiver’s view
Ad-hoc
Received
Theft incident report
Viewers
Daniela Mandera
Submitters
Babak Shames
Review
Other’s view
Ad-hoc
Others (not writer, not receiver) will see base card.
Design Highlight
Provisioning
Provisioning involves setting up IT infrastructure and ensuring authorized users have access to necessary resources. After gathering basic requirements from our engineers, I began designing the process to ensure users could use the app effectively. I initially considered adding visual elements like animations, videos, or a progress bar to inform users during provisioning. However, after consulting with my design manager and the development team, I learned that provisioning issues were rare and would not significantly impact the user experience.
Given this insight, I prioritized a straightforward design approach that minimized additional work for the engineers. The final design simply informs users that leaving the page during provisioning could result in data loss, focusing on clear communication rather than unnecessary details. This experience taught me the importance of balancing user needs with technical feasibility and team resources, allowing me to make informed design decisions and deliver efficient solutions.
Creating template...
If you leave this page before your template is created, you may lose template data.
If you are creating a template for the first time, it may take longer.
Something went wrong
Wait a bit, then go back to try again.
Go back
Provision failed
User in their flow. Not sensible to provisioning.
Provision succeeds before user reaches “Publish”
Provisioning in progress but user clicks “Publish”
Provision failed before user reaches “Publish”
User will go back to “create template step 3” after clicks “Try again” button
User left the create template loading page before provision succeeds
Provision failed
The error message with “go back” button shows up.
Show loading spinner and description.
Template creation failed.
Provision is still in progress.
User will see an empty state in the Manage template page.
If provision failed, it will also be triggered again automatically when user re-enter the app.
Provision starts in the background (users cannot sense it).
User can see the template they created in the Manage template list
Provision will be triggered again when user clicks on “Publish”
User stays on the create template loading page
Provision is successful
User in their flow (e.g. create template flow).
Not sensible to provisioning.
Example issue identified during user testing
Although users gave us generally good feedback, we also discovered some issues during usability testing. One problem was that the input fields in the report template preview were clickable and editable.
This confused some users, as they thought they could fill out the form directly in the preview. However, when they moved to the next step, they realized it was just a preview, which caused a poor user experience.
Design Highlight
Visual Design
In visual design, we faced some challenges.
Firstly, Microsoft’s Teams products have two design systems: the old Fluent UI and the new Fluent UI, which is still being rolled out. When we were designing Updates, Approvals was still using the old UI. Our goal was to align Updates with the new Fluent UI while also matching the design style of Approvals. This required extra research to ensure we used the correct design elements. Sometimes, we encountered conflicting elements between different Microsoft systems, so we had to collaborate closely with other designers to find the best solutions.
Also, because Microsoft operates globally, we often had to work across time zones. For instance, our app needed new icons, so I had to communicate with the core Teams team and the visual team in the U.S. to create the right icons. This required coordinating time zones, clarifying requirements, and keeping communication open to ensure our design met the standards.
Design Outcome
Result
Design Outcome
Post-reflection
Designing products for global markets requires a deep understanding of cultural adaptability and linguistic inclusivity. It’s not just about translating text but also about ensuring that design elements resonate with diverse audiences. This includes considering cultural nuances, local preferences, and different user behaviors. Additionally, it’s crucial to manage costs effectively, balancing the need for inclusivity with budget constraints. This ensures that the product remains accessible and competitive while delivering a high-quality user experience. Balancing these elements is key to creating products that succeed on a global scale.