bedeho commented 2 years ago

Context

The product was designed with no consideration of responsiveness, and while the developers have done some work to fill in some gaps, but largely the product does not work for example on mobile devices.

Screenshot 2021-11-19 at 10 47 44

We thought the the primary device for users would be the desktop, for example because the mobile browsers generally do not support extensions. However, it's also clear that some users will end up viewing Pioneer from a mobile device, for example because they are just linked to some screen which has some information, and currently the product would entirely break in many such cases.

⚠️ Focus: > small desktops/ not full screen/ find all places that can be tuned for removal of overflowing content 🆕 : Mobile user agents.

Scope

Suggest to split the scope into 2 parts

Part 1 - MVP -> Focus 🎯

Does not include connecting wallet on mobile phone and signing transactions. Only viewing of the pages is concerned here.

Specifically let's go through all of the modules and suggest the Responsive Updates for the existing features:

My Profile
Working Groups
Proposals
Council
Election
Forum
Members
Settings

Break Points in scope: xxs - 320px xs - 425px sm - 768px md - 1024px lg - 1440px

Part 2 - Out of scope for now ⛔ (let's do it later)

Out of scope breakpoints: xl - 1920px xxl - 2560px

Update the design of the transactional flows Forum

Post to forum Proposals
Create proposal
Vote on proposal Council/ Elections
Apply to council
Vote for council candidate
Reveal vote Working groups
Create opening
Apply to opening

Design Support

Latest Figma assets for Pioneer

Wireframes > Designs > Storybook >

⚠️ Link to Example Figma (for different app, but use it as structure example) LINK>

You may find:

readme (changelog)
Design screens for default resolution
RWD separately for each of the breakdpoint / size
User stories (here will be applicable for only a handful of views, like from list to details, or navigating forum)
Local components (some may need to have a responsive variation fleshed out)

┆Issue is synchronized with this Asana task by Unito

traumschule commented 1 year ago

some users will end up viewing Pioneer from a mobile device

Agree, it's pretty likely that mobile read access without banner/wallet interruption is in high demand.

traumschule commented 1 year ago

Changes needs to be in line with Design Requirements of #48

lend itself to work across a wide range of screen sizes (Large desktop, normal desktop, tablet, phone) and aspect ratios, and also support mobile/pad interactions for input, without a mouse.

and #1850 with regards to:

Should Pioneer 2.0 be distributed through the browser, a desktop application, a mobile application?

Counsellor-sama commented 1 year ago

Figma link to the new design I have been working on - https://www.figma.com/file/Qv22U9IK0ZwSw6d11UP020/Pioneer-Mobile-Design?t=jzXKmi4KTy3YHXTV-0

dmtrjsg commented 1 year ago

@Counsellor-sama thank you for starting on this, as discussed before let's aim to add

Forum and Proposals modules first in the set of following breakpoints:

xxs - 320px xs - 425px sm - 768px md - 1024px lg - 1440px

⚠️ for Forum please use these designs> As it is the latest version. Don't forget to consult how this looks on the actual app.

Feel free to collaborate with the builders WG to get to the dev/ test environment and recreate a specific state of the app if needed. I am sure @ivanturlakov and @polikosi can support you on that.

KubaMikolajczyk commented 1 year ago

@Counsellor-sama I prepared a template file for work on RWD for Pionieer. Please write to me on discord and provide me your email address so I can give you editing permissions for this file to work on.

📄 Template file: https://www.figma.com/file/EaObQEN95O0IWjSVTUQ5NN/Pionieer-RWD?node-id=0%3A1&t=LVzU59SpUkV3d9VM-1

and I recorded a long video instructing how to prepare the RWD for those pages, how to use the file, best practices and I recorded myself recreating one of the pages for RWD:

please watch it before making any further work on RWD:

🎦 Video tutorial: https://www.loom.com/share/279db381fae74f34b6c723fb598a9fe0

Counsellor-sama commented 1 year ago

Proposal design -https://www.figma.com/file/sGGPssf2az8a7jxLRtB1Ro/Proposals-RWD?node-id=0-1&t=dH0AhFPA4szMcAGA-0