--- tag: product --- # User Dashboard These are designs relating to the user's dashboard in both Web and Mobile (Full + Empty states). There are a few different component which make up this design: - **Companies You Manage** - Action 1: View All - Action 2: Create/Add - Action 3: Click on Company - **Your Portfolio** - Action 1: View All - Action 2: Click on a Shareholding - **Deal Rooms** - Action 1: View All - Action 2: Click to Enter Deal Room - **Activity** - This is an overview of the users account activity and the activity related to any of their companies/involvements - Action: Click to be taken to the area of the app that relates to this activity - **Make a Referal card** - Action 1: Open Referal Modal and Invite Friends ## States & Variables These are the different states of the user dashboard. For now we can split these into empty and full states. Empty states are what the user will see if they sign up but don't take further action to Add a company. Furthermore, if the user hasn't been invited to any companies or deal rooms this will also show as empty. In the instance that a user enters the application through a Deal Room invite or company invite, these will show as the first listed items within the different components. ### Full (Happy) State This is what the user will see if they are involved in multiple companies, deals, and have multiple shareholdings. #### Web <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%2FW26Lo2Rw2WIFd21zjEMivw%2FUser-Dashboard%3Fnode-id%3D340%253A1" 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%2FW26Lo2Rw2WIFd21zjEMivw%2FUser-Dashboard%3Fnode-id%3D340%253A917" allowfullscreen></iframe> ... ### Empty State This is what the user sees if they are not yet involved with any companies, deal rooms, or shareholdings. #### Web <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%2FW26Lo2Rw2WIFd21zjEMivw%2FUser-Dashboard%3Fnode-id%3D340%253A575" 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%2FW26Lo2Rw2WIFd21zjEMivw%2FUser-Dashboard%3Fnode-id%3D341%253A0" allowfullscreen></iframe> ... ## Components These are the required components in their different states for the user dashboard. ### Companies You Manage The user can see an overview of the companies they manage, as well as a couple of different actions available, such as: - View All (Goes to Company Tab) - Add/Create Company - Click on Company and enter the company view/portal <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%3D2133%253A218" allowfullscreen></iframe> ... ### Your Portfolio These are the listed shareholdings a user owns. Actions include: - View All (Goes to Portfolio Tab) - Click on Shareholding (View in Portfolio Tab) <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%3D2133%253A525" allowfullscreen></iframe> ... ### Deal Rooms These are the listed Deal Rooms that a user has been invited to. Actions include: - View All (goes to Deal Rooms page) - Click on Deal (Enter Deal Room) <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%3D2133%253A730" allowfullscreen></iframe> ... ### Activity This is a list of the activity relating to the user's account, as well as any companies they are involved in (admin, employee/IC, shareholder). Actions include: - Click to go to relevant company/page/action <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%3D2133%253A432" allowfullscreen></iframe> ... ### Make a Referal Card This card encourages users to invite their friends to the Raise platform via a [referal modal](https://hackmd.io/BNdZcTKGQGKwAya5zL_UPw#). <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%2FW26Lo2Rw2WIFd21zjEMivw%2FUser-Dashboard%3Fnode-id%3D350%253A4906" allowfullscreen></iframe> ---