🎨 [Design] : MVE3: Context driven components for user guidance across spaces

[mike-mcnulty]

Summary

Context driven components

Description

As an admin user, I want to use the preview tools to see how my campaign will look to different types of users at different stages of the campaign, so that I can make sure everything looks good before publishing to my community.

AC:

• Review requirements and decide right approach to dynamic components; how many to use, how much to separate
• Build components that will show different messages in each of the different spaces, depending on the selected campaign phase and / or user type

This task is focused on building the responsive component(s) that will display messages to users at the top of each space based on context. The approach we find here will inform how we tackle responsive behavior across the main content of each space, and will also help validate the design of the preview tools.

Initially, we group all registered users as UNLOCKED, but later will differentiate between registered proposers and voters.

Out of scope

• Treasury space
• Funded project space

Component Requirements

Discovery Space

• campaign launch to proposal submission close
  • GUEST: get started (create account) so you can give feedback or start your own proposal before [PROPOSAL CLOSE]
  • LOCKED: unlock your account, so you can …
  • UNLOCKED: give feedback or…
• Proposal submission close until voting snapshot
  • “Proposal submission is closed”
  • GUEST: register to vote before the snapshot to decide which proposals will win funding
  • LOCKED / UNLOCKED: visit the voting space to make sure you’re ready to vote
• Voting snapshot until campaign end
  • GUEST: proposal submission and voter registration are closed for this round. Create your account now to be ready for the next round
  • LOCKED / UNLOCKED: proposal submission and voter registration are closed for this round. See you for the next one!

Workspace

• campaign launch to proposal submission close
  • GUEST: N/a
  • LOCKED: unlock the application to keep working on your awesome ideas! Only days left!
  • UNLOCKED: only days to finish your proposal. Don’t forget to share your drafts to get community feedback
  • DISCUSS: Should workspace just be hidden until the app is unlocked?
• Proposal submission close until next campaign start
  • UNLOCKED: proposal submission is closed. You can start working on your ideas for the next round starting in days

Voting Space

• campaign launch to snapshot
  • GUEST: create your account and top up your ADA before [SNAPSHOT] so you can help decide which proposals win funding
  • LOCK: unlock the app to check your voting power and make sure you’re ready to vote
  • UNLOCKED
    • You’re all set to vote and earn rewards! Make sure to keep [MIN ADA] in your wallet on [SNAPSHOT] so you stay eligible
    • Uh oh, looks like you’ll need more ADA to participate. Top up your ADA to [THRESHOLD] before [SNAPSHOT] to be eligible
    • Resolve any other errors before [SNAPSHOT]. *Registration errors take priority over warnings about balance
• Snapshot to vote start
  • GUEST: voter registration is closed for this round. Create your account now so you can be ready in the next one
  • LOCKED: unlock the app to check your voting power. Voting start will start on [DATE]!
  • UNLOCKED
    • Get ready to vote! You can start saving your favorites now, and start casting votes in X days
    • You didn’t hold enough ADA at the snapshot. Make sure to top up to [THRESHOLD] before the next round
• Vote start to vote end
  • GUEST: …
  • LOCKED: unlock the app to start casting vote. days until voting closed
  • UNLOCKED: only days left to cast your votes!
• Vote end to results announced
  • GUEST: …
  • LOCKED / UNLOCKED: days until results announced!
• Results announced to next campaign start
  • GUEST: …
  • LOCKED: results are ready! Unlock the app to see how your picks turned out
  • UNLOCKED: results are ready! Go see how your picks turned out

[b-farrington]

I've designed a responsive messaging card component to that we can use in various places across the product (e.g. proposal list pages in the discovery space). This component can be used to advise users of upcoming deadlines and provide relevant CTAs: Figma component in Catalyst UI kit.

I've mapped this base component to the spaces and campaign lifecycle phases in the ticket to create example messaging for those contexts, based on the examples above. These can be used across the relevant product segments (and to demonstrate the effects of the Campaign Preview Tool component).

[b-farrington]

Regarding an approach for dynamically swapping out components or in-page content, a short term approach could be to build component variants according to the examples I've given and dynamically switch between them in the front end (for example when a campaign deadline passes or an admin user is using the Campaign Preview tool). In Figma, I've built a set of applications of the core messaging card component in a similar fashion.

Longer term we may wish to look into appropriately tokenising on screen content to allow us to dynamically adjust the contents of components to different changes in context in a scalable way. This might be necessary for increased contextual awareness within the product, as per the ticket example of a users voting power status (for now, I’ve left out variants based on the status of minimum ADA balances, and tried to write generic messaging that is along the lines of what was intended)

In any case, it seems sensible to have any on-page messaging rooted to the active product segment (space) and dynamically adjust it based on the other vectors (Stage in the campaign lifecycle, the registered roles of users, the status of things etc).