Pioneer Responsive Design

[bedeho]

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.

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]

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]

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]

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

[dmtrjsg]

@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]

@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]

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

[msmadeline]

Hello, Proposals RWD is designed from scratch and ready to be reviewed: https://www.figma.com/file/EaObQEN95O0IWjSVTUQ5NN/Pioneer-RWD?type=design&node-id=478%3A204255&mode=design&t=DMdu1Nw0DDyvd5qz-1

[msmadeline]

Hello, I finished working on RWD for Forum. It's ready for review: https://www.figma.com/file/EaObQEN95O0IWjSVTUQ5NN/Pioneer-RWD?type=design&node-id=568-157637&mode=design&t=fzv3Ge350xamnvF2-4

[msmadeline]

@dmtrjsg I just wanted to let you know that I added a flow you requested:

• Create a thread modal: https://www.figma.com/file/EaObQEN95O0IWjSVTUQ5NN/Pioneer-RWD?type=design&node-id=598-97053&mode=design&t=DZjuVGp9Whk2e2D9-4
• Create a thread: Authorize Transaction modal: https://www.figma.com/file/EaObQEN95O0IWjSVTUQ5NN/Pioneer-RWD?type=design&node-id=599-98544&mode=design&t=DZjuVGp9Whk2e2D9-4
• Create a thread: Succes modal: https://www.figma.com/file/EaObQEN95O0IWjSVTUQ5NN/Pioneer-RWD?type=design&node-id=599-99837&mode=design&t=DZjuVGp9Whk2e2D9-4

[msmadeline]

I finished working on RWD for Council. It's ready for review: https://www.figma.com/file/EaObQEN95O0IWjSVTUQ5NN/Pioneer-RWD?type=design&node-id=5%3A6465&mode=design&t=DZjuVGp9Whk2e2D9-1

[msmadeline]

I finished working on RWD for Election. It's ready for review: https://www.figma.com/file/EaObQEN95O0IWjSVTUQ5NN/Pioneer-RWD?type=design&node-id=593-91321&mode=design&t=duSNWyKySDZLcXHG-4

[msmadeline]

I created the top navigation for mobile for Pioneer RWD. I documented the side nav opening and closing behavior in a user story and created a prototype to show it.

📁User story: https://www.figma.com/file/EaObQEN95O0IWjSVTUQ5NN/Pioneer-RWD?type=design&node-id=706-202434&mode=design&t=mn7hq2HS5K3k3isW-4

➡Prototype: https://www.figma.com/proto/EaObQEN95O0IWjSVTUQ5NN/Pioneer-RWD?page-id=703%3A21201&type=design&node-id=733-110109&viewport=12399%2C-184%2C2.03&t=VYX0t4dq7BvnO4Jj-1&scaling=min-zoom&starting-point-node-id=733%3A110109&mode=design

[msmadeline]

Hello, I finished working on RWD for My Profile. It's ready for review: https://www.figma.com/file/EaObQEN95O0IWjSVTUQ5NN/Pioneer-RWD?type=design&node-id=671-171577&mode=design&t=WJa5Wi6UIoupoXC3-4

[msmadeline]

Hello, I finished working on:
➡ RWD for Working Groups:
https://www.figma.com/file/EaObQEN95O0IWjSVTUQ5NN/Pioneer-RWD?type=design&node-id=789-129378&mode=design&t=IdRiWtsJjbJpIoJY-4
➡RWD for Mmebers:
https://www.figma.com/file/EaObQEN95O0IWjSVTUQ5NN/Pioneer-RWD?type=design&node-id=1081-180557&mode=design&t=IdRiWtsJjbJpIoJY-4
➡RWD for Settings:
https://www.figma.com/file/EaObQEN95O0IWjSVTUQ5NN/Pioneer-RWD?type=design&node-id=1154-202347&mode=design&t=IdRiWtsJjbJpIoJY-4
It's all ready for review🌸