While we recently implemented threads, tasks, and manual requests, we realized that threads followed one set of design patterns, while manual requests and tasks followed a different set of patterns. In an effort to clean this up for manual requests and IOUs – threads are already being implemented and tasks are being handled separately – this doc outlines a new, unified approach to ensure business use cases match the rest of the app.
LHN & Avatars
Notes for completeness:
- The workspace chat now uses a consistent avatar for members and admins, with the overarching goal being consistency and less confusion. Workspace chats use a 40x40 dual-avatar, with a larger workspace avatar and a smaller member avatar overlaid in the bottom-right. That said, the name of the workspace chat will continue to differ for admins, taking the form %memberName%, so that they’re able to find workspace chats for specific employees.
- Expense reports use a 24x24 dual-avatar, with the rounded member avatar in the top-left and a rounded square workspace avatar in the bottom right. This dual avatar emphasizes the collaboration and shared nature of sending a request and eventually getting paid back. The title takes the form “%workspaceName% owes %amount%” (and updates to %workspaceName paid %amount% when settled).
- IOU reports will similarly use a 24x24 dual-avatar, though both members have a rounded avatar in contrast. The title is the same as expense reports.
- Requests made to the workspace will feature a larger 32x32 rounded member avatar, as well as a smaller 20x20 rounded square workspace avatar in the case of expense requests. The workspace overlay helps distinguish requests to a workspace vs a DM, which has no extra overlay. The title takes the form “%amount% request for %merchant% | %comment%”.
- Threads in workspace rooms/reports will use a distinct “overlay” avatar from requests. A larger 40x40 circular member avatar as well as a smaller 20x20 rounded square workspace avatar overlaid in the bottom right. This similarly helps distinguish workspace threads from DMs, and emphasizes the member who made the parent comment. The title of the thread is the parent comment.
- Threads in DMs/GroupDMs will simply use the avatar of the parent message sender.
- All chat rooms tied to workspaces will feature the workspace avatar. This deprecates the chair and similar icons for user-created rooms.
Headers
Notes for completeness:
- For the first line, the avatars and header follow the same convention as the LHN.
- For the second line, we use “From %parentChat% in %policyName%”.
- The parent report is always hyperlinked, displayed in blue and can be clicked to return to the parent report.
*iou/expenseReport subheaders
- Remove the
To: and amount
- reposition the
Pay button
- modify the pay button copy, so it includes the report amount. i.e
Pay $50 with Expensify
Mobile (Old | New):
Desktop (Old | New):
Rollout Plan
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~01d3518465643567ea
- Upwork Job ID: 1666939604347977728
- Last Price Increase: 2023-06-08
While we recently implemented threads, tasks, and manual requests, we realized that threads followed one set of design patterns, while manual requests and tasks followed a different set of patterns. In an effort to clean this up for manual requests and IOUs – threads are already being implemented and tasks are being handled separately – this doc outlines a new, unified approach to ensure business use cases match the rest of the app.
LHN & Avatars
Notes for completeness:
Headers
Notes for completeness:
*iou/expenseReport subheaders
To:andamountPaybuttonPay $50 with ExpensifyMobile (Old | New):
Desktop (Old | New):
Rollout Plan
To:andamountPaybuttonPay $50 with ExpensifyUpwork Automation - Do Not Edit