Getting V2 (MVP) Launch Ready

[wabisabiyo]

1. Landing Page – due 2 Oct 2017

   • [x] layout (https://github.com/legalese/legalese.github.io/tree/master/LandingPage)
   • [x] content, copywriting (alexis, @jobchong)
   • [x] terms of use (alexis)
   • [x] privacy policy (alexis)
   • [x] disclaimer page / pop-up (@alexis @jobchong )
   • [x] make website responsive

2. Form – first cut of full form due 20 Oct 2017

   • [x] UI layout (alexis, @teeragit)
   • [x] fields on vertical accordion cards being linked to back-end (proteus) <-- finish. already in testserver
   • [x] copywriting for user input fields (alexis)
   • [x] interactive captable pop-up (proteus) <-- Finish, already deploy to testserver
   • [ ] mailchimp waitlist (alexis + jobchong)
   • [ ] QuestNet data - need feedback to tell user to move onto the first card (proteus, jobchong) <-- the first card is expanding after search. How do you want the user MSG to move on to next card?
   • [x] set up some mechanism to ensure that questnet auto tops-up / or we do, when the credits run low when v2 is live (@jobchong)
   • [x] shopping cart and preview (proteus) <-- finish. already in testserver
   • [ ] unit tests (@jobchong)

3. Form submission – first cut due 20 Oct 2017

   • [ ] generation of document dependency graph (@mengwong, proteus) <-- Proteus is waiting for document's dependency and where to display it.
   • [ ] Legalese sending the incomplete forms to investors / other parties for their input (proteus) <-- this is not for end of October.

     So. We need to discuss whether we want to build the "viral" signature workflow for the October launch or stick to what @jandetlefsen had in mind.

     what proteus has been building (please correct me if i get any parts wrong)

     • User Leslie goes to legalese.com, clicks on the CTA, populates the form, generates the documents
     • Leslie is brought to a page where ze has to tell us the email addresses of the signatories
     • on our end, Adobe sends the documents to these signatories and Leslie's legalese dashboard is updated with the status of the execution workflow (i.e. who hasn't signed, where the bottleneck is)

     This is simple. That's usually a good thing. And it may very well be good enough for the Oct launch. Nonetheless, my reservations about this approach:

     • From the signatories' (investors and other founders/directors in Leslie's company) perspective, they do not have ready access to Leslie's dashboard on Legalese. This means that they cannot see what's the hold up on the completion of the entire fundraising round unless Leslie shares the login details with them. They only know that they have signed one or some documents (they do not even know that they are signing 1 of XX documents for the entire workflow). Typically, this means status checks via email to the startup founders and within the investor's own work routine to ascertain the progress on the fundraising round. Cumbersome and tedious.
       Moreover, if Leslie's running multiple legalese workflows for different fundraising rounds for different companies, ze may not like or want that)
     • There isn't in-built virality in this execution model as the signatories (investors who usually also execute other fundraising documents for their other investments; other founders of Leslie's company who may have other startups they need fundraising docs for, or who themselves may be investors) interact only with the document they have to execute, and that's done on Adobe. They do not interact with Legalese (save where Leslie shares zir login credentials), and consequently, do not get to track the execution progress of the round or fiddle with our product offerings/ other functionalities like the interactive captable.

     the immediate goal for Oct launch Legalese manages the order in which documents are sent out (not everything will be sent out for signature at the same time). We will do this via AdobeSign. We will manually manage this if we have to, but ideally it's at least a little step up than v1.

the goal, within the next 3 months

• Leslie goes to legalese.com, clicks on the CTA, populates the form, generates the documents
  • Leslie is brought to a page where ze has 2 options: (1) Leslie could download the PDFs, and then go on to get them executed by each signatory in the correct order (we could even be cheeky and send them lengthy instructions on how they're supposed to get this done); or (2) Leslie could tell us the email addresses of the signatories. What happens then is that the signatories get an email telling them that for Leslie's angel fundraising round, said investor will need to execute X document now and Y and Z document after the others have signed X2, for example. Each signatory will also get a link to Legalese telling them that with their email, or some code or whatever, they can log in to Legalese to access the dashboard for that round in Leslie's company. This allows them to fiddle with the captable, track the progress of the round, and affords them the opportunity to generate independent and new rounds of investment docs for other investments they probably have. In fact, one of Legalese's tranche I investors had initially passed on our idea, but took an about turn when he used us to generate a round of fundraising docs for another investment of his

• [x] generation of PDFs in the workflow based on form input – due 20 October 2017 Finish already deploy to testserver
• [x] document management / dashboard (alexis, @teeragit, proteus) – due 20 October 2017 <-- already deploy to testserver
• [ ] signature management and document execution (proteus) – due 20 October 2017 <-- have signature service, implementing terminate signing workflow

[wabisabiyo]

Comments on latest check-in on the test server:

TO FIX

UI colours

• [x] My preferred green for user-completed items and any kind of CTA is: #52f2ce (RGB 82, 254, 206)
• [x] Black text: (i don't want us to use full black anywhere because it's too harsh on a white background) so please use #333333 (RGB 51, 51, 51) instead
• [x] @jobchong links should be the same electric blue and dotted line format that we're using for the landing page
• [x] the "current field" UI indicator to the user as to where they are currently at should also be a border glow in the same blue
• [ ] still unclear how it's a vertical accordion. the cards aren't displayed like a vertical accordion
• [ ] a dismissable pop up bubble to let people know that the documents in the cart are previewable at any time? I don't yet know what i feel about the pop up tutorial UI the way people like SeedLegals does it, but perhaps we can give it a shot for now

title bar of the page

• [ ] it should disappear as the user scrolls down, but re-appear when the user scrolls up
• [ ] the items in the title bar should also follow those in the moqup

'first tell us...' section -- @teeragit to give comments?

• [x] font size is too big – reduce it about 30%
• [x] search company search bar font size is also too big
• [ ] subtitle should be "we’re pulling (public) data from ACRA so you don't have to manually fill them in (you will get to review this later)”
• [ ] clicking on the singapore logo on the search bar should have a notification / on-screen popup that says 'we are only supporting Singapore companies right now, but you can put yourself on our waiting list here' -- the link should be on "here". Discussion below

mailchimp waiting list

• [ ] need to fix the interface – alexis will work with @jobchong unless proteus wants to work on it

give this round a name section

• [ ] nothing happens after i click enter -- there should be (1) a tick at the end of the field entry bar to indicate that we are accepting that entry and (2) a move to the next field so that the user can continue filling the form in
• [ ] after the field is entered, i.e. the user has named the round, then the content should just become the title/header for the entire vertical accordion list of cards
• [ ] default name should be the Company name entered above with "Angel Round" at the end of it then there should be (edit) in parenthesis so that users know they can edit it.
• [ ] no need for (i) button for the section where users are asked to give the round a name
• [ ] subtitle should be "this does not affect the workflow or documents generated in any way. it is just for your reference (you can always change it)."

left menu bar & presentation of the forms

• [x] should be floating, i.e. as the user moves down the fields / cards / page, etc, it should always be seen so that the user always know which stage of the process they're at
• [x] should start at the top.
• [ ] the only section that should move as the user goes down the list of fields / questions etc is the content in the card that is being featured -- see: it should look like the accordions here https://www.w3schools.com/howto/howto_js_accordion.asp the rest of the page should not change that much as that's too much movement and is distracting.
• [ ] already decided that there would not be an 'Add-ons' card for this iteration -- that should be removed
• [ ] what are the percentages tied to? not all fields are weighted equally
• [ ] why is the progress bar 5% even before we entered anything? it should be 0 -- if there is a reason why it shouldn't be, let me know.
• [ ] 40% to completing the full doc-set -- we can discuss the copywriting further
• [ ] MAYBE: set a subtitle that marks the time to completion? (the way Medium does it for the reading time of their articles) E.g. Taking 5 mins as the time to complete the whole form, 40% complete’s subtitle will say (that’s 3 mins to completion!)

drawer on the right

• [ ] the drawer should be an obvious pull out / slide out drawer which displays the content of the cart. Right now, it does not seem clear that the cart is a pull out.

interaction fixes

• [ ] once we input a field (e.g. the name of the company) and hit enter, the user should be brought to the next field to be filled in

cart

• [x] the shopping cart should be more clearly delineated from the form to show that it’s tagged to the entire workflow this is not a pretty example, but it shows what a clearly segmented shopping cart looks like http://ui-patterns.com/uploads/image/file/322/best_old_150.jpg

[wabisabiyo]

More comments based on changes checked in on 19 oct 2017:

• [ ] after i fill in a field, it's even more unclear what i should do next -- as said in the above comments, it should automatically bring me to the next field that i need to fill in/
• [ ] there should also be a way for the company to undo an action -- e.g. deletion of a director box
• [ ] what happens when there is no company secretary listed? Is this a bug or is that detail not retrieved properly? I used legalese pte ltd as an example
• [ ] when i delete a director box (which is pulled from acrA), there should be a warning popup -- deleting the director here doesn't update ACRA of the change. please confirm that you wish to proceed even though this change is not updated with ACRA.
• [ ] NEXT STEPS onwards should be on a next page after the user decides to save & proceed (the other options are: abandon & delete, save & exit
• [x] it is unclear which is the first field that i need to fill in as a user -- this needs to be more obvious (checkout how SeedLegals does it)
• [x] the right drawer (for the cart of docs) as discussed with teera hasn't been integrated
• [x] discount field is way too long. fields should always be proportionate to the content we expect them to fill in
• [x] the discount and valuation cap fields do not have suggestions that tell the user what kind of input we are expecting
• [x] when i click on the second card, the progress bar disappears, the right panel/drawer is also no longer visible -- this should not happen
• [x] size of round field -- the subheading should be under the title / question
• [x] all fields to be filled in by the user should have
  1. an indicator of the details to be input (e.g. "5 million, 5,000,000 or 5000000)
  2. a field size that is commensurate with the length of details to be filled in.
• [x] there is a typo under "registered address"
• [x] Jurisdiction of the contract – Singapore (the smart default is to be SIngapore, we don't need the " - Singapore" in the title

[wabisabiyo]

• [ ] smart defaults that we chose for them should have a clear colour or symbol to tell users that we picked these for them (at least some are defined here)
• [ ] Jursidiction -- modal popup for wait list for other countries
• [ ] captable should not be formatted as a section -- it is more a side window within that card (discussion below)
• [ ] CTA for investor popup should be "ADD"
• [ ] Generate & review UI &UX -- what happens after? i don't see any updates.
• [ ] Move CTAs to above 'Next Steps', CTAs are: [Reset} [Resume Later] [Send for signing] (if it's not ready, 6 fields missing)
• [x] "Features of this instrument" as a header for choosing fundraising structure (right side of the panel)
• [x] information colours makes it seem like it's disabled
• [x] floating left menu bar
• [x] default country for investor -- singapore
• [x] incorporation number pulling for investor is backwards -- should just ask for name of coy then we pull the data automatically. all fields should follow the Google UI good practice of: question [field]
• [x] default investor should be individual
• [x] Passport / IC request should be responsive to what people selected as country above
• [x] cart should also be floating, and words should be "5 docs in progress" with "Preview" in the next line
• [x] Add exit button on disclaimer for user to navigate back to landing page if they reject the disclaimer

[DustinWehr]

Don't know what CTA for investor popup should be "ADD" means.

[wabisabiyo]

oh it means that after you fill in the new investor's details in the popup, the call-to-action button to complete the entire action should say "ADD"

[DustinWehr]

Need a more specific recommendation here:

captable should not be formatted as a section -- it is more a side window within that card

If the captable is not affected by anything in the first of the three sections of that card, can we just merge the 2nd and 3rd sections?

[DustinWehr]

smart defaults that we chose for them should have a clear colour or symbol to tell users that we picked these for them

Check out https://github.com/legalese/v2-web/blob/9ba669c2a3d70086f3339a42bee6e55ea8454408/src/modules/common/schema/round.js#L670 Is this everything that constitutes a smart default?

[DustinWehr]

when i delete a director box (which is pulled from acrA), there should be a warning popup -- deleting the director here doesn't update ACRA of the change. please confirm that you wish to proceed even though this change is not updated with ACRA.

Jursidiction -- modal popup for wait list for other countries

@wabisabiyo is there a modal popup in use by the app already that we should reuse for consistency?

[wabisabiyo]

Need a more specific recommendation here: captable should not be formatted as a section -- it is more a side window within that card If the captable is not affected by anything in the first of the three sections of that card, can we just merge the 2nd and 3rd sections?

this is something that @jobchong was already working on. @jobchong do you want me to guide dustin on this, or have you got it?

[wabisabiyo]

when i delete a director box (which is pulled from acrA), there should be a warning popup -- deleting the director here doesn't update ACRA of the change. please confirm that you wish to proceed even though this change is not updated with ACRA. Jursidiction -- modal popup for wait list for other countries @wabisabiyo is there a modal popup in use by the app already that we should reuse for consistency?

@DustinWehr yeah it's the same popup to mailchimp that is under the search bar right at the start of the form.

[jobchong]

@wabisabiyo upon second thoughts I can do that.