--- tag: product --- # Raise Product Cycle (May) For the last few months we have spent a great deal of time a). organising Raise's design system and syncing storybook w/ Figma, and b). testing Raise's onboarding experience with a focus on the sign up flow. We discovered that Raise's platform was failing to cater for multiple user groups because it's MVP had an overly-heavy focus towards founders. However, now that investors, consultants, and lawyers are starting to use the platform, it's time to cater for multiple user groups and needs. 1. [**Sign Up/In Redesign**](https://hackmd.io/p2rS22ibRMioR0Ri-Uo4RA) 2. [**Intergrating KYC APIs**](https://hackmd.io/RNvLo0khS0mu4HDdA6h8Yg) 3. [**Email Syncing for Teams, Portfolio, Deals**](https://hackmd.io/OX8fJe1VReKRPjDhUrxHWQ) 4. **Account & Billing Designs** 5. **A look towards next cycle** - New Personal Dashboard (Onboard@getraise.io) - Wizards for Create Company/Find Deal - Build a cap table / verify a cap table - Product Tours (Personal Dashboard + Company Dashboard) ### Figma Files [Sign Up/Onboarding Redesign](https://www.figma.com/file/a9FkhiYKeR5MUvlVSx7x4x/User-Onboarding?node-id=13667%3A5488) [Account & Billing](https://www.figma.com/file/NwJdWqTE8d9BRIgrzkVuHl/Account-and-Billing?node-id=3%3A3048) --- ## 1. Sign Up/In Redesign The first area of focus will be Raise's sign up/onboarding of new users. The Raise sign up flow can be accessed from 3 different entry points *(click to view prototypes)*: 1. [**Website (Front Door)**](https://www.figma.com/proto/a9FkhiYKeR5MUvlVSx7x4x/User-Onboarding?page-id=13667%3A5488&node-id=13715%3A1003&viewport=546%2C629%2C0.125&scaling=min-zoom) - This flow caters for all user groups that enter the Raise platform via the landing page on the website. 3. [**Deal Room Invite (Back Door)**](https://www.figma.com/proto/a9FkhiYKeR5MUvlVSx7x4x/User-Onboarding?page-id=13827%3A7563&node-id=13827%3A8361&viewport=2081%2C392%2C0.25&scaling=min-zoom) - This flow caters to investors/employees that get invited to the Raise platform for the first time via a Deal Room invite (email). 5. [**Company Invite (Side Door)**](https://www.figma.com/proto/a9FkhiYKeR5MUvlVSx7x4x/User-Onboarding?page-id=13827%3A12684&node-id=13827%3A14452&viewport=1980%2C338%2C0.25&scaling=min-zoom) - This final flow caters to employees, contributors, or shareholders of companies who get added to the "Members" section of a company, and end up getting an email inviting them to the platform to help with collaboration. The main difference between these 3 flows is where the users starts & ends their journey. For the Deal Room + Company invite flows, it makes sense for the user to end their journey in the places they were originally invited too... `However, it was also noted by Marvin that if an investors profile syncs and they see they have been invited to more than one deal, perhaps they should end on an overview page of the Deal Rooms they've been invited to...` ***We will also be developing this flow in mobile too...*** <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13722%253A8034" allowfullscreen></iframe>) ### Required Emails The following emails need to be designed and created in response to certain user actions: 1. **Confirm Your Email Address** - This is a very standard email verification practise which users are familiar with when signing up to new platforms. It can also be replicated for any secondary/tertiary email addresses users decide to link to their accounts. <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13882%253A0" allowfullscreen></iframe> 2. **Company Invite** - This email is for founders, employees, secretaties, consultants, or shareholders who have been invited to the members section of a company on Raise. They will have certain levels of access (Admin, Editor, Viewer) which allow them to take certain actions when inside the platform. If they have not yet created their account using that email address, they should go through the sign up flow above... however, if they have an account linked to that email they can be directed straight to the Company page (depending on their browser/history, they might be asked to log in first...) <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13735%253A0" allowfullscreen></iframe> ... 4. **Deal Room Invite** - This email is for those who are invited to a company Deal Room on Raise. If they have not yet created their account using that email address, they should go through the sign up flow above... however, if they have an account linked to that email they can be directed straight to the Deal Room (depending on their browser/history, they might be asked to log in first...) <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13735%253A2378" allowfullscreen></iframe> --- ## 2. Integrating Mono, Plaid, and Tink Founders, Investors an almost all other users will need to go through some sort of KYC at some point... We have argued about where and when is the best place to do this, however we've have found a way in which we might be able to show the benefit earlier on if done via an API. Mono is a service that provides cross-party identity verification in Africa, as do Tink & Plaid in America and Europe. If users connect their Mono account to Raise it will not only save them time with KYC, but it will also allow us to scan their Mono account for another companies under management or shareholdings they own. We can then sync this data with their Raise account for them. <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13667%253A6056" allowfullscreen></iframe> <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13667%253A6102" allowfullscreen></iframe> --- ## 3. Email Syncing for Teams, Portfolio, Deals Another fantastic feature we can implement during this sign up journey is the ability to view any Teams, Portfolio, or Deal Rooms associated with the email used to create your account (or + Mono if used for ID Verification). This gives users the knowledge that they are already involved with companies either as a contributor or a shareholder, as well as knowing that there are Deal Rooms they have received invites too. This automatically informs users they will have some "business" to attend to when they open the application and won't be surprised to see companies on their dashboard. ### States Of course, like any good page/component it comes in different states of completeness. The first point to mention is that there will show 3 tabs which the user can click through: 1. My Teams 2. My Portfolio (Shareholdins) 3. My Deal Rooms Different users (and their emails) will have different amounts of companies (if any), that will vary in name, logo, etc. ... #### Full State To avoid the issue of having too many companies on a page, the table should be scrollable once the number of rows passes 6 (or the amount that can naturally fit on the screen). The same can be applied to the table in My Teams, My Portfolio, and My Deal Rooms <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13695%253A0" allowfullscreen></iframe> ... #### Empty State The following state will show if there are no companies in either of the tabs marked above... <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13827%253A15029" allowfullscreen></iframe> <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13827%253A14979" allowfullscreen></iframe> <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13827%253A14929" allowfullscreen></iframe> ... #### Syncing State Prior to the users Teams, Portfolio and Deal Rooms showing, Marvin would like there to be some sort of "Security check" loading screen whereby the user gets the impression we are providing some sort of security check along with the account syncing. I guess the idea of syncing accounts is to "securely check" that they are who they say they are...? For this, I have used the same [badge](https://www.figma.com/file/Kbc4pBtdY9MEVzDxAdSnXN/Raise-Design-System?node-id=65%3A3241) used here, along with a loading bar to show the state of the syncing... The three stages are: - Performing security check... - Scanning Raise database... - Syncing your profile... <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FKbc4pBtdY9MEVzDxAdSnXN%2FRaise-Design-System%3Fnode-id%3D840%253A37" allowfullscreen></iframe> ... ### Other Variables #### Checked/Unchecked Another variable within these tables are the checkboxes located next to each company logo. If the box is unchecked (everybox starts as checked), the company will not show in the users dashboard/profile... <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FKbc4pBtdY9MEVzDxAdSnXN%2FRaise-Design-System%3Fnode-id%3D356%253A12" allowfullscreen></iframe> #### Table Column Headings/Information ***My Teams*** For My Teams the table will show the following information: - Logo (if applicable, if not empty grey circle) - Company Name - Your Relationship to Company - Access Level <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13695%253A0" allowfullscreen></iframe> ***My Portfolio*** For My Teams the table will show the following information: - Logo (if applicable, if not empty grey circle) - Company Name - No. of Shareclasses (Only ones the user holds, not total) - Ownership (Expressed as a percentage with option of dilution change -/+ %) <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13695%253A367" allowfullscreen></iframe> ***My Deal Rooms*** - Logo (if applicable, if not empty grey circle) - Company Name - Round Name - Round Status (Active, Paused, Closed) <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13735%253A2915" allowfullscreen></iframe> --- ## [3. Account & Billing](https://www.figma.com/proto/NwJdWqTE8d9BRIgrzkVuHl/Account-and-Billing?page-id=3%3A3048&node-id=3%3A3049&viewport=1057%2C563%2C0.25&scaling=min-zoom) These are designs relating to a company's account/subscription plan and their ability to up/downgrade + enter and manage their payment details. This part of the Raise application is only viewable for admins of companies, and should show on the left hand side menu of the Raise platform... *It would also be viewable for the onboard@getraise.io account so they can assist companies with their accounts and billing.* ### States Here are a few of the states included in the Account & Billing page. #### Empty State <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FNwJdWqTE8d9BRIgrzkVuHl%2FAccount-and-Billing%3Fnode-id%3D3%253A3049" allowfullscreen></iframe> #### Full State <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FNwJdWqTE8d9BRIgrzkVuHl%2FAccount-and-Billing%3Fnode-id%3D3%253A3121" allowfullscreen></iframe> #### Mobile <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FNwJdWqTE8d9BRIgrzkVuHl%2FAccount-and-Billing%3Fnode-id%3D3%253A2857" allowfullscreen></iframe> ### Variables Here are some of the variables involved with the Account & Billing page... **Your Current Plan** Below are the following states and variables for the Current Plan card located at the top of the Account and Billing page. <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FKbc4pBtdY9MEVzDxAdSnXN%2FRaise-Design-System%3Fnode-id%3D850%253A179" allowfullscreen></iframe> **Payment Methods** <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FKbc4pBtdY9MEVzDxAdSnXN%2FRaise-Design-System%3Fnode-id%3D850%253A972" allowfullscreen></iframe> ### Modals **Add New Payment Method** <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FNwJdWqTE8d9BRIgrzkVuHl%2FAccount-and-Billing%3Fnode-id%3D3%253A3242" allowfullscreen></iframe> **Upgrade Plan (Desktop Only)** <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FNwJdWqTE8d9BRIgrzkVuHl%2FAccount-and-Billing%3Fnode-id%3D3%253A3270" allowfullscreen></iframe> --- ## A look into the following Cycle (June) ### New User Dashboard <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13667%253A8413" allowfullscreen></iframe> <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13667%253A8767" allowfullscreen></iframe> ### Product Tours We'd like to implement a few product tours throughout the application to ensure users understand tasks and don't feel overwhelmed within the application. These tours can be created using Intercom to keep costs low. #### User Dashboard <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13667%253A5582" allowfullscreen></iframe> <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13716%253A8227" allowfullscreen></iframe> <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13716%253A11149" allowfullscreen></iframe> We'll also look to implement product tours for the company dashboard, the cap table, and the deal room. ### Wizards #### Create a Company <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13667%253A7980" allowfullscreen></iframe> <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13667%253A8187" allowfullscreen></iframe> #### Find a Deal <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fa9FkhiYKeR5MUvlVSx7x4x%2FUser-Onboarding%3Fnode-id%3D13667%253A8028" allowfullscreen></iframe>