Finish porting/updating UI/UX design for the "RO mobile" application in Penpot

• Port relevant components from existing/old design from Figma to Penpot
• Update UI/UX design in accordance with the lightweight design document
• Publish results:
  • Make public in Penpot
  • Push assets/project-files to GitLab

changed milestone to %Finish UI/UX design for RO mobile app

assigned to @chris

changed the description

mentioned in issue #2 (closed)

marked the checklist item Port relevant components from existing/old design from Figma to Penpot as completed

Here is a port (from Figma to Penpot) of the original/old UI/UX design.

And here are the exported project files:

Tahoe-LAFS_Android__Old_.penpot

Tahoe-LAFS_Android__Old_.zip

Here is a port (from Figma to Penpot) of the original/old UI/UX design.

The penpot link is a 404 for me.

Hmm, thanks for letting me know. It works for me (when logged in) but asks me to log in (rather than present a 404) if I'm not. Did you happen to be logged in to an account when you tried? Signups are open on the instance (though I haven't configured SMTP so don't expect account-recovery, etc. work...). I may need to add/invite your account to a "team" in order to add you as an editor.

In the meantime, here is a view-only link for that prototype that any user should be able to click through -- but will require an account to comment on. (Note, however, that this is effectively just a 1-to-1 port/clone of the old Figma prototype for the purposes of removing any future dependency on Figma while preserving what we had/have; it is rather barebones and hasn't been updated for PS.)

It asked me to sign in the first time, so I did register an account, and then once I was logged in it switch to just a 404 - so maybe the team thing is relevant.

The new view-only link is also a 404. :/

It asked me to sign in the first time, so I did register an account, and then once I was logged in it switch to just a 404 - so maybe the team thing is relevant.

Under which email address did you register?

The new view-only link is also a 404. :/

Oops; my bad. It looks like I copy-pasted the wrong link above (which has now been corrected)... This should work (confirmed in a clean browser on a fresh VM).

Yes, that link works. Thanks.

I registered with jean-paul@private.storage

Here is an updated -- and fully clickable/interactive -- penpot prototype for the "RO mobile" application.

Some of the changes against the original Figma design/Kotlin implementation include:

• Replaced/simplified the original "welcome" screen (from 2 steps to 1)
• Easier and more discoverable adding of folders (via Floating Action Button instead of the previous/cumbersome Action Bar -> Menu -> Drawer -> Menu flow)
• Added backward and forward navigation through (sub)directories
• Added folder-removal option (via item menu on main Folders view)
• Simulated QR code scanner with faux camera ;)
• Simulated native file open dialogs
• Added interactions for all other clickable/actionable elements
• Fully updated with official "PrivateStorage" branding (icons, color palette) throughout

And, for backup/portability purposes here is the Penpot project file and here is the "standard" SVG/JSON export (either of which can be imported/loaded on any Penpot instance to edit).

marked the checklist item Update UI/UX design in accordance with the lightweight design document as completed

marked the checklist item Publish results: as completed

marked the checklist item Make public in Penpot as completed

marked the checklist item Push assets/project-files to GitLab as completed

Closing this issue since the above checklist items are completed. We can open additional tickets for any subsequent changes to the design that might need to be made later on.

closed