--- tag: product --- # Sign Up/In Redesign The first area of focus will be Raise's sign up/onboarding of new users. This flow starts on either the webpage/email invite, and ends once the user has confirmed the syncing of their Teams, Portfolio, and Deal Rooms. **User Journey:** **Starting Point** (Email/Webpage) -> **Sign Up** (or Sign In) -> **Verify Email** -> **Optional KYC** (Using Mono, Plaid, Tink APIs) -> **Sync Teams, Portfolio, Deals** --- ### Prototypes from Different Starting Points 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...` --- ## Mobile Responsive Design ***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>) --- ## Figma Components ### Sign Up Form <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%253A5489" allowfullscreen></iframe> #### Sign Up w/ Google <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%3D16453%253A410" allowfullscreen></iframe> #### Sign Up w/ Microsoft <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%3D16453%253A452" allowfullscreen></iframe> ### Sign In Form <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%253A5565" allowfullscreen></iframe> #### Sign Up w/ Google <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%3D16453%253A494" allowfullscreen></iframe> #### Sign Up w/ Microsoft <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%3D16453%253A525" allowfullscreen></iframe> #### Forgot Password This flow relates to users who have forgotten their password and require a reset. The corresponding email is below. The designs have also been completed on mobile (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%3D18273%253A8750" 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%3D18273%253A8852" 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%3D18274%253A9686" 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%3D18274%253A9937" allowfullscreen></iframe> ### Email Verification **Step 1** <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%253A5507" allowfullscreen></iframe> **Step 2** (See below for details on Email designs) <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%253A13127" allowfullscreen></iframe> **Step 3** <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%253A5521" allowfullscreen></iframe> ### Background Shapes These shapes are centred on both mobile + web and are displayed at 25% transparency to create a subtle effect. <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%3D1019%253A14" 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> ... 5. **Reset Password** - This email is sent when users request to reset their passwords. <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%3D18274%253A12460" allowfullscreen></iframe> ### Email Headers <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%3D1019%253A585" allowfullscreen></iframe> ---