Slack context: https://expensify.slack.com/archives/C01GTK53T8Q/p1705945570975289
Problem
In #focus mode it's possible to "clear out" your LHN such that there's no chats that appear. Note that this only happens on mobile because on wide screens you always have a chat open. In this case, the app looks semi-broken because it's so empty.
Solution
Create an "empty state" UI that gives the user something fun to look at when they've cleared out the LHN in #focus mode.
Mockup
Figma link
Empty state animation
Fireworks lottie file
Empty state illustration
Fireworks.svg.zip
Note that ideally we will want to use an animation here—I'm just attaching the SVG as a just-in-case.
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~012902c6ddfd90e221
- Upwork Job ID: 1749533931715035136
- Last Price Increase: 2024-01-22
- Automatic offers:
- DylanDylann | Contributor | 28123180
- tienifr | Contributor | 0
Slack context: https://expensify.slack.com/archives/C01GTK53T8Q/p1705945570975289
Problem
In #focus mode it's possible to "clear out" your LHN such that there's no chats that appear. Note that this only happens on mobile because on wide screens you always have a chat open. In this case, the app looks semi-broken because it's so empty.
Solution
Create an "empty state" UI that gives the user something fun to look at when they've cleared out the LHN in #focus mode.
Mockup
Figma link
Empty state animation
Fireworks lottie file
Empty state illustration
Fireworks.svg.zip
Note that ideally we will want to use an animation here—I'm just attaching the SVG as a just-in-case.
Upwork Automation - Do Not Edit