Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing the Cardstack Builder

Chris Tse
October 24, 2019

Designing the Cardstack Builder

Full Talk: https://www.youtube.com/watch?v=PkpVR2U554k
Blog Post: https://medium.com/cardstack/the-ultimate-card-building-tool-25c442e22bed

Cardstack’s Founding Director Chris Tse introduces the Cardstack Builder: the product that makes the complete full-stack Cardstack Experience possible. All the work done by back-end engineers, front-end engineers, and Web developers now empowers the users—the people who don’t know how to code, but who are comfortable using Excel and SaaS software like Salesforce or Airtable.

As a user, you will never need to ask a developer to build you an entire app from scratch again! The Cardstack Builder enables you to create apps yourself, by choosing cards and fields from the Card Catalog and assembling them to your heart’s content with simple drag-and-drop tools, and finally editing the content of your cards. You end up with a real working app that you have configured yourself, and quickly too! But it doesn’t end there. If you want additional customization for certain parts of your app, you can always hire a developer to help you adjust, extend, or theme your card to your exact specifications.

Chris Tse

October 24, 2019
Tweet

More Decks by Chris Tse

Other Decks in Design

Transcript

  1. CARDSTACK
    CHRIS TSE
    Founding Director
    Cardstack Project
    [email protected]
    Designing
    Cardstack Builder
    OCTOBER 2019 - PRODUCT TALK
    V6

    View full-size slide

  2. Power Users
    Web Developers
    1,000,000+
    100,000+
    Front-end Engineers
    10,000+
    Product Team
    100+
    Back-end Engineers
    1,000+
    Framework Team
    10+
    PREVIOUSLY…
    CARDSTACK
    CARD MAKERS:
    INVERSE PYRAMID MODEL
    NUMBER OF POTENTIAL
    CONTRIBUTORS
    Requires
    coding
    skills

    View full-size slide

  3. Power Users
    Web Developers
    1,000,000+
    100,000+
    Front-end Engineers
    10,000+
    Product Team
    100+
    Back-end Engineers
    1,000+
    Framework Team
    10+
    CARDSTACK
    NUMBER OF POTENTIAL
    CARD MAKERS
    Coding skills
    NOT required!

    View full-size slide

  4. Account Card
    BUILT-IN : FIELDS : VIEW
    Accou
    BUILT-I
    EDIT >
    < SAVE
    Add
    CUSTO
    Send Invoice Provision Services
    VIEW CARD
    FIELD
    FIELD
    FIELD
    ACTIONS CARD TYPE

    View full-size slide

  5. Account Card
    BUILT-IN : FIELDS : VIEW
    EDIT >
    < SAVE
    Send Invoice Provision Services
    VIEW CARD
    “Everything
    is a card.”
    FIELD
    FIELD
    FIELD
    ACTIONS CARD TYPE

    View full-size slide

  6. Account Card
    BUILT-IN : FIELDS : VIEW
    Account Card
    BUILT-IN : FIELDS : EDIT
    EDIT >
    < SAVE
    CONFIGU
    < DONE
    Address Card
    CUSTOM : WIDGET : EDIT : INLINE
    PA
    < FUSE
    Send Invoice Provision Services
    EDIT CARD

    View full-size slide

  7. Account Card
    BUILT-IN : FIELDS : CONFIGURE
    CONFIGURE >
    < DONE
    Address Card
    CUSTOM : WIDGET : EDIT
    POP >
    < PACK
    CARD CATALOG
    QUICK BROWSE
    PART >
    < FUSE
    CONFIGURE
    CARD
    CONFIGURE
    CARD

    View full-size slide

  8. BUILT-IN : FIELDS : CONFIGURE
    Address Card
    CUSTOM : WIDGET : EDIT
    POP >
    < PACK
    CONFIGURE
    CARD
    CONFIGURE
    FIELD

    View full-size slide

  9. nt Card
    : FIELDS : CONFIGURE
    Card
    IDGET : EDIT
    POP >
    < PACK
    Address Card
    BUILT-IN : FIELDS : EDIT
    PROPERTIES
    SCHEMA | LAYOUT
    CONFIGURE
    CARD
    FIELDS AS
    CARDS

    View full-size slide

  10. Account Card
    BUILT-IN : FIELDS : CONFIGURE
    Address Card
    CUSTOM : WIDGET : EDIT
    POP >
    < PACK
    Address Card
    BUILT-IN : FIELDS : EDIT
    CARD CATALOG
    QUICK BROWSE
    PROPERTIES
    SCHEMA | LAYOUT
    SEQUENTIAL FLOW
    FOR INITIATION
    CHRONOLOGICAL FLOW
    FOR COORDINATION
    Configure
    CARDSTACK
    BUILDER

    View full-size slide

  11. Account Card
    BUILT-IN : FIELDS : VIEW
    Send Invoice
    ACME Inc
    Address:
    Account #:
    Account Card
    BUILT-IN : FIELDS : EDIT
    Account Card
    BUILT-IN : FIELDS : CONFIGURE
    EDIT >
    < SAVE
    CONFIGURE >
    < DONE
    CUSTOM
    LAYOUT 2
    -
    LAYOUT 1
    FIELDS
    >
    >
    Address Card
    CUSTOM : WIDGET : EDIT
    CUSTOM
    FIELDS
    DISMISS
    OVERLAY
    >
    >
    Address Card
    CUSTOM : WIDGET : EDIT : INLINE
    Address Card
    CUSTOM : WIDGET : EDIT
    POP
    PACK
    >
    >
    POP >
    < PACK
    Address Card
    BUILT-IN : FIELDS : EDIT
    Address:
    Account #:
    ACME Inc
    Address Card
    CUSTOM : WIDGET : EDIT
    < SAVE
    CARD CATALOG
    QUICK BROWSE
    PROPERTIES
    SCHEMA | LAYOUT
    PART >
    < FUSE
    Send Invoice Provision Services
    CUSTOM : LAYOUT 1 : VIEW
    Send Invoice
    ACME Inc
    Address:
    Account #:
    START
    FLOW
    >
    ACTION: STEP 1 : FILL
    ACME Inc
    Next: Payment
    Progress: 25%
    ACTION: STEP 2 : FILL
    Drag accepted
    payment
    methods here
    Progress: 100%
    Complete & Send
    ACME Inc
    << SLIDING VIEWPORT >>
    SEQUENTIAL FLOW
    FOR INITIATION
    CHRONOLOGICAL FLOW
    FOR COORDINATION
    INVOICE CARD
    WE ACCEPT
    MESSAGE 1
    ACME Inc. joined.
    LIFT &
    PLACE
    >
    MESSAGE 2
    PAYMENT CARD
    Tue 7:23 am
    DUE UPON RECEIPT
    TO:
    FROM:
    AMOUNT:
    View Edit Configure
    EVERY CARD
    HAS 3 MODES

    View full-size slide

  12. Account Card
    BUILT-IN : FIELDS : VIEW
    Account Card
    BUILT-IN : FIELDS : EDIT
    Account C
    BUILT-IN : FIE
    EDIT >
    < SAVE
    CONFIGURE >
    < DONE
    CUSTOM
    LAYOUT 2
    -
    LAYOUT 1
    FIELDS
    >
    >
    Address Card
    CUSTOM : WIDGET : EDIT
    FIELDS
    OVERLAY
    >
    Address Card
    CUSTOM : WIDGET : EDIT : INLINE
    Address Card
    CUSTOM : WIDGET : ED
    POP
    PACK
    >
    >
    CARD CATALOG
    QUICK BROWSE
    PART >
    < FUSE
    Send Invoice Provision Services
    Send Invoice
    SEQUENTIAL FLOW
    FOR INITIATION
    BUILT-IN
    FIELD LAYOUT

    View full-size slide

  13. Account Card
    BUILT-IN : FIELDS : VIEW
    Send Invoice
    Address:
    Account Card
    BUILT-IN : FIELDS : EDIT
    EDIT >
    < SAVE
    CONFIGURE >
    < DONE
    CUSTOM
    LAYOUT 2
    -
    LAYOUT 1
    FIELDS
    >
    >
    Address Card
    CUSTOM : WIDGET : EDIT
    CUSTOM
    FIELDS
    DISMISS
    OVERLAY
    >
    >
    POP
    PACK
    >
    >
    Address: Address Card
    CUSTOM : WIDGET : EDIT
    CA
    QU
    Se
    AC
    Add
    Acco
    START
    FLOW
    >
    SEQUENTIAL
    FOR INITIATIO
    ALTERNATE
    LAYOUTS

    View full-size slide

  14. Account Card
    CUSTOM : LAYOUT 1 : EDIT
    Account Card
    CUSTOM : LAYOUT 1 : VIEW
    Send Invoice
    ACME Inc
    Address:
    Account #:
    CUSTOM
    LAYOUT 2
    -
    LAYOUT 1
    FIELDS
    >
    >
    Address Card
    CUSTOM : WIDGET : EDIT
    CUSTOM
    FIELDS
    DISMISS
    OVERLAY
    >
    >
    Address:
    Account #:
    ACME Inc
    Address Card
    CUSTOM : WIDGET : EDIT
    EDIT >
    < SAVE
    START
    FLOW
    >
    THEME-ABLE
    TEMPLATES

    View full-size slide

  15. Account Card
    CUSTOM : LAYOUT 1 : EDIT
    Account Card
    CUSTOM : LAYOUT 1 : VIEW
    Send Invoice
    ACME Inc
    Address:
    Account #:
    CUSTOM
    LAYOUT 2
    -
    LAYOUT 1
    FIELDS
    >
    >
    Address Card
    CUSTOM : WIDGET : EDIT
    CUSTOM
    FIELDS
    DISMISS
    OVERLAY
    >
    >
    POP
    >
    Address:
    Account #:
    ACME Inc
    Address Card
    CUSTOM : WIDGET : EDIT
    EDIT >
    < SAVE
    Account Card
    CUSTOM : LAYOUT 1 : VIEW
    Send Invoice
    ACME Inc
    Address:
    Account #:
    START
    FLOW
    >
    SEQUENTIAL FLOW
    FOR INITIATION
    IN-PLACE
    EDITING

    View full-size slide

  16. Account Card
    BUILT-IN : FIELDS : VIEW
    Account Card
    BUILT-IN : FIELDS : EDIT
    Account Ca
    BUILT-IN : FIELD
    EDIT >
    < SAVE
    CONFIGURE >
    < DONE
    CUSTOM
    LAYOUT 2
    -
    LAYOUT 1
    FIELDS
    >
    >
    Address Card
    CUSTOM : WIDGET : EDIT
    CUSTOM
    FIELDS
    DISMISS
    OVERLAY
    >
    >
    Address Card
    CUSTOM : WIDGET : EDIT : INLINE
    Address Card
    CUSTOM : WIDGET : EDIT
    POP
    PACK
    >
    >
    CARD CATALOG
    QUICK BROWSE
    PART >
    < FUSE
    Send Invoice Provision Services
    Send Invoice
    FLOW
    <<
    SEQUENTIAL FLOW
    FOR INITIATION
    SHARING
    EDITING VIEWS

    View full-size slide

  17. Account Card
    CUSTOM : LAYOUT 1 : EDIT
    Account Card
    CUSTOM : LAYOUT 1 : VIEW
    Send Invoice
    ACME Inc
    Address:
    Account #:
    CUSTOM
    LAYOUT 2
    -
    LAYOUT 1
    FIELDS
    >
    >
    Address Card
    CUSTOM : WIDGET : EDIT
    CUSTOM
    FIELDS
    DISMISS
    OVERLAY
    >
    >
    POP
    >
    Address:
    Account #:
    ACME Inc
    Address Card
    CUSTOM : WIDGET : EDIT
    EDIT >
    < SAVE
    Account Card
    CUSTOM : LAYOUT 1 : VIEW
    Send Invoice
    ACME Inc
    Address:
    Account #:
    START
    FLOW
    >
    SEQUENTIAL FLOW
    FOR INITIATION
    IN-PLACE
    EDITING

    View full-size slide

  18. Account Card
    CUSTOM : LAYOUT 1 : EDIT
    Address Card
    CUSTOM : WIDGET : EDIT
    CUSTOM
    FIELDS
    DISMISS
    OVERLAY
    >
    >
    POP
    >
    Address:
    Account #:
    ACME Inc
    Address Card
    CUSTOM : WIDGET : EDIT
    EDIT >
    SAVE
    Account Card
    CUSTOM : LAYOUT 1 : VIEW
    Send Invoice
    ACME Inc
    Address:
    Account #:
    START
    FLOW
    >
    Create Invoice
    ACTION: STEP 1 : FILL
    ACME Inc
    Next: Payment
    Progress: 25%
    Set Up Payment
    ACTION: STEP 2 : FILL
    Drag accepted
    payment
    methods here
    Progress: 1
    Complete & Sen
    ACME Inc
    << SLIDING VIEWPORT >>
    SEQUENTIAL FLOW
    FOR INITIATION
    TRIGGERING
    ACTIONS

    View full-size slide

  19. Account Card
    CUSTOM : LAYOUT 1 : EDIT
    dress Card
    TOM : WIDGET : EDIT
    CUSTOM
    FIELDS
    DISMISS
    OVERLAY
    >
    >
    POP
    >
    Address:
    Account #:
    ACME Inc
    Address Card
    CUSTOM : WIDGET : EDIT
    Account Card
    CUSTOM : LAYOUT 1 : VIEW
    Send Invoice
    ACME Inc
    Address:
    Account #:
    START
    FLOW
    >
    Create Invoice
    ACTION: STEP 1 : FILL
    ACME Inc
    Next: Payment
    Progress: 25%
    Set Up Payment
    ACTION: STEP 2 : FILL
    Drag accepted
    payment
    methods here
    Progress: 100%
    Complete & Send
    ACME Inc
    << SLIDING VIEWPORT >>
    SEQUENTIAL FLOW
    FOR INITIATION
    LIFT &
    PLACE
    CHAINING
    CARDS

    View full-size slide

  20. Account Card
    CUSTOM : LAYOUT 1 : VIEW
    Send Invoice
    ACME Inc
    Address:
    Account #:
    START
    FLOW
    >
    Create Invoice
    ACTION: STEP 1 : FILL
    ACME Inc
    Next: Payment
    Progress: 25%
    Set Up Payment
    ACTION: STEP 2 : FILL
    Drag accepted
    payment
    methods here
    Progress: 100%
    Complete & Send
    ACME Inc
    << SLIDING VIEWPORT >>
    SEQUENTIAL FLOW
    FOR INITIATION
    CHRONOLOGICAL FLOW
    FOR COORDINATION
    INVOICE CARD
    WE ACCEPT
    MESSAGE 1
    Thread
    Global Vendor joined.
    ACME Inc. joined.
    LIFT &
    PLACE
    >
    MESSAGE 2
    PAYMENT CARD
    Mon 9:12 am
    Tue 7:23 am
    DUE UPON RECEIPT
    TO:
    FROM:
    AMOUNT:
    ACCEPTING
    OTHER CARDS

    View full-size slide

  21. ce
    FILL
    rogress: 25%
    Set Up Payment
    ACTION: STEP 2 : FILL
    Drag accepted
    payment
    methods here
    Progress: 100%
    ACME Inc
    INVOICE CARD
    WE ACCEPT
    MESSAGE 1
    Thread
    Global Vendor joined.
    ACME Inc. joined.
    LIFT &
    PLACE
    >
    Mon 9:12 am
    Tue 7:23 am
    DUE UPON RECEIPT
    CARD INSIDE
    THREADS

    View full-size slide

  22. Payment
    Drag accepted
    payment
    methods here
    Complete & Send
    ACME Inc
    VIEWPORT >>
    CHRONOLOGICAL FLOW
    FOR COORDINATION
    WE ACCEPT
    ACME Inc. joined.
    PLACE
    >
    MESSAGE 2
    PAYMENT CARD
    Tue 7:23 am
    TO:
    FROM:
    AMOUNT:
    CARD INSIDE
    THREADS

    View full-size slide

  23. Account Card
    CUSTOM : LAYOUT 1 : VIEW
    Send Invoice
    ACME Inc
    Address:
    Account #:
    START
    FLOW
    >
    Create Invoice
    ACTION: STEP 1 : FILL
    ACME Inc
    Next: Payment
    Progress: 25%
    Set Up Payment
    ACTION: STEP 2 : FILL
    Drag accepted
    payment
    methods here
    Progress: 100%
    Complete & Send
    ACME Inc
    << SLIDING VIEWPORT >>
    SEQUENTIAL FLOW
    FOR INITIATION
    CHRONOLOGICAL FLOW
    FOR COORDINATION
    INVOICE CARD
    WE ACCEPT
    MESSAGE 1
    Thread
    Global Vendor joined.
    ACME Inc. joined.
    LIFT &
    PLACE
    >
    MESSAGE 2
    PAYMENT CARD
    Mon 9:12 am
    Tue 7:23 am
    DUE UPON RECEIPT
    TO:
    FROM:
    AMOUNT:
    CARDSTACK
    WORKFLOW

    View full-size slide

  24. Account Card
    CUSTOM : LAYOUT 1 : EDIT
    Account Card
    BUILT-IN : FIELDS : VIEW
    Account Card
    CUSTOM : LAYOUT 1 : VIEW
    Send Invoice
    ACME Inc
    Address:
    Account #:
    Account Card
    BUILT-IN : FIELDS : EDIT
    Account Card
    BUILT-IN : FIELDS : CONFIGURE
    EDIT >
    < SAVE
    CONFIGURE >
    < DONE
    CUSTOM
    LAYOUT 2
    -
    LAYOUT 1
    FIELDS
    >
    >
    Address Card
    CUSTOM : WIDGET : EDIT
    CUSTOM
    FIELDS
    DISMISS
    OVERLAY
    >
    >
    Address Card
    CUSTOM : WIDGET : EDIT : INLINE
    Address Card
    CUSTOM : WIDGET : EDIT
    POP
    PACK
    >
    >
    POP >
    < PACK
    Address Card
    BUILT-IN : FIELDS : EDIT
    Address:
    Account #:
    ACME Inc
    Address Card
    CUSTOM : WIDGET : EDIT
    EDIT >
    < SAVE
    CARD CATALOG
    QUICK BROWSE
    PROPERTIES
    SCHEMA | LAYOUT
    PART >
    < FUSE
    Send Invoice Provision Services
    Account Card
    CUSTOM : LAYOUT 1 : VIEW
    Send Invoice
    ACME Inc
    Address:
    Account #:
    START
    FLOW
    >
    Create Invoice
    ACTION: STEP 1 : FILL
    ACME Inc
    Next: Payment
    Progress: 25%
    Set Up Payment
    ACTION: STEP 2 : FILL
    Drag accepted
    payment
    methods here
    Progress: 100%
    Complete & Send
    ACME Inc
    << SLIDING VIEWPORT >>
    SEQUENTIAL FLOW
    FOR INITIATION
    CHRONOLOGICAL FLOW
    FOR COORDINATION
    INVOICE CARD
    WE ACCEPT
    MESSAGE 1
    Thread
    Global Vendor joined.
    ACME Inc. joined.
    LIFT &
    PLACE
    >
    MESSAGE 2
    PAYMENT CARD
    Mon 9:12 am
    Tue 7:23 am
    DUE UPON RECEIPT
    TO:
    FROM:
    AMOUNT:
    OVERALL MAP OF CARDSTACK BUILDER + WORKFLOW CA

    View full-size slide

  25. CARDSTACK
    • Track 1: Card Schema (V2) Data Architecture
    Covered in a previous talk. Follow along the work on Card Host in our main Github repository.
    • Track 2: Boxel Design System
    A new composable user interaction system for making real apps with cards. Demo in a few weeks.
    • Track 3: Catalog of Pre-built Cards for Common Use Cases
    Unify and publish common cards needed for data collection, content management, asset
    encapsulation, workflow orchestration, etc.
    WORK-IN-PROGRESS FOR CARD BUILDER

    View full-size slide

  26. CARDSTACK
    © 2019 CARDSTACK FOUNDATION. CARDSTACK® IS A REGISTERED TRADEMARK.

    View full-size slide