Content
View differences
Updated by Marc Alcobé almost 2 years ago
After the results of both usability testings some UX/UI improvements has been designed in order to create a more complete and user friendly application. This changes imply the update on all screens of the app and will most likely close the scope of the current spike.
### Focus
Home tab
### Current implementation
OpenProject version 0.0.39
<img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116035/content">
### Acceptance criteria
* [x] Update the logo used on the top navigation bar [following the new designs](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=127-21264&t=fMvAXNkqOl5XEgPG-4). And double check the spacings between elements. Also ensure the font used on the header is 22px Regular, fgColor-onEmphasis.
* [x] Update the Octicons used in the bottom bar to use _home-24, op-view-list-24_ and _bell-24._
* [x] [ ] Add the floating button to create work packages also from the home screen. Follow the flow of creation [designed here](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=952-120985&t=fMvAXNkqOl5XEgPG-4), that enforces the selection of a project.
* [x] Limit the work packages displayed under _Recent work packages_ (no infinite loading needed) and its content gets divided between Today, Yesterday, and Last week. Ensure the work packages displayed are really the ones I worked on lately.
* [x] Ensure the headers _Favourite projects_ and _Recent work packages_ uses a 14px font in Medium, fgColor-default.
* [x] Ensure the headers inside _Recent work packages_ (eg. _Last week_) uses a 12px font in Medium, fgColor-muted.
* [x] The spacing and fonts of the work packages under _Recent work packages_ seems to not be the same as in [the designs specified](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=127-21264&t=fMvAXNkqOl5XEgPG-4). Double check font sizes and weights and spacings and sizes of elements (eg. size of the avatar). This will of course also affect the scope of <mention class="mention" data-id="56696" data-type="work_package" data-text="#56696">#56696</mention>.
* [x] Ensure the description texts inside of the empty status (eg. _Go to the web app to mark projects as favorite)_ uses a 12px font in Regular, fgColor-muted.
### Figma and visuals
https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=127-21249
### Focus
Home tab
### Current implementation
OpenProject version 0.0.39
<img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116035/content">
### Acceptance criteria
* [x] Update the logo used on the top navigation bar [following the new designs](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=127-21264&t=fMvAXNkqOl5XEgPG-4). And double check the spacings between elements. Also ensure the font used on the header is 22px Regular, fgColor-onEmphasis.
* [x] Update the Octicons used in the bottom bar to use _home-24, op-view-list-24_ and _bell-24._
* [x]
* [x] Limit the work packages displayed under _Recent work packages_ (no infinite loading needed) and its content gets divided between Today, Yesterday, and Last week. Ensure the work packages displayed are really the ones I worked on lately.
* [x] Ensure the headers _Favourite projects_ and _Recent work packages_ uses a 14px font in Medium, fgColor-default.
* [x] Ensure the headers inside _Recent work packages_ (eg. _Last week_) uses a 12px font in Medium, fgColor-muted.
* [x] The spacing and fonts of the work packages under _Recent work packages_ seems to not be the same as in [the designs specified](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=127-21264&t=fMvAXNkqOl5XEgPG-4). Double check font sizes and weights and spacings and sizes of elements (eg. size of the avatar). This will of course also affect the scope of <mention class="mention" data-id="56696" data-type="work_package" data-text="#56696">#56696</mention>.
* [x] Ensure the description texts inside of the empty status (eg. _Go to the web app to mark projects as favorite)_ uses a 12px font in Regular, fgColor-muted.
### Figma and visuals
https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=127-21249