Vista, a Y-combinator company, is a managed platform for B2B SaaS companies to easily grant/restrict user access on their platform. I was tasked to define the main user flow within the dashboard interface and create an early stage solution that will allow the users to intuitively assign “permissions”.
Design Strategy
Design Strategy
The timeline for this project was 3 months. As the lead product designer, I had the opportunity to work directly with the co-founders to determine the deliverables that would provide most impact to the users.
The timeline for this project was 3 months. As the lead product designer, I had the opportunity to work directly with the co-founders to determine the deliverables that would provide most impact to the users.
Requirements
Requirements
Key focus on determining the User Journey and experience
Key focus on determining the User Journey and experience
Deliverables included a working prototype that solved key user issues
Deliverables included a working prototype that solved key user issues
LIMITATIONS
LIMITATIONS
Vista is an early stage startup and does not have a solid user base or any active competitors that can be utilized for primary research.
Vista is an early stage startup and does not have a solid user base or any active competitors that can be utilized for primary research.
Determining a solid style guide was out of the bandwidth for this project.
Determining a solid style guide was out of the bandwidth for this project.
Empathize
Empathize
I spent time conducting research to thoroughly understand the product at hand, user permissioning system designs, and the flow a user would take to assign permissions. This allowed me to really understand the focus problem that a user might face while interacting with Vista’s interface.
The stakeholder interviews were most important in defining the problem and creating a design focus. I conducted open-ended interviews with two of the company founders. This allowed me to gain a deep insight on the business goals, target users, information hierarchy, and any additional expectations regarding the design and the project timeline.
I spent time conducting research to thoroughly understand the product at hand, user permissioning system designs, and the flow a user would take to assign permissions. This allowed me to really understand the focus problem that a user might face while interacting with Vista’s interface.
The stakeholder interviews were most important in defining the problem and creating a design focus. I conducted open-ended interviews with two of the company founders. This allowed me to gain a deep insight on the business goals, target users, information hierarchy, and any additional expectations regarding the design and the project timeline.
Let’s summarize the stakeholder demands:
Let’s summarize the stakeholder demands:
Reduced number of user clicks
Reduced number of user clicks
User should be able to grasp an overall view of the branch from one page
User should be able to grasp an overall view of the branch from one page
Clear hierarchy and user direction
Clear hierarchy and user direction
Define
Define
Understanding the problem
Understanding the problem
To begin to address the needs of the product, I had to understand the key steps involved in authorizing a "permission" to a user. To do this, I created a brief sitemap of what encompasses a permission. I then defined the flow a user would take to create and authorize a permission.
To begin to address the needs of the product, I had to understand the key steps involved in authorizing a "permission" to a user. To do this, I created a brief sitemap of what encompasses a permission. I then defined the flow a user would take to create and authorize a permission.
Steps to build a permission
Steps to build a permission
01
Define Resource Type
Define Resource Type
02
Define Roles
Define Roles
User Flow to grant a permission
User Flow to grant a permission
01
Building a Resource Type
Building a Resource Type
02
Creating a Role
2. Creating a Role
03
Assigning Permissions
Assigning Permissions
Defining the Problem
Defining the Problem
The following are screenshots of Vista’s current product interface. I have outlined the user problems for each screen, as discussed with the stakeholders.
The following are screenshots of Vista’s current product interface. I have outlined the user problems for each screen, as discussed with the stakeholders.
01
Stakeholder wants to see roles, resource types, actions and attributes within each branch on the front page
02
Within resource types, all action and attribute names must be visible to users, even as they create new ones
03
Within “User Roles”, all permissions must be visible to users, even as they create new permissions
04
When creating a new role, one can select inhertance first which will autopopulate any resource types, and then create a template that the user can build on
Ideate
My ideation process involved whiteboarding and brainstorming potential solutions with the team, and then using this information to build out basic wireframes. The wireframe below is the 5th iteration, which finally attended to all user problems.
My ideation process involved whiteboarding and brainstorming potential solutions with the team, and then using this information to build out basic wireframes. The wireframe below is the 5th iteration, which finally attended to all user problems.
A very messy but productive brainstorm
A very messy but productive brainstorm
Wireframing the User Journey
Wireframing the User Journey
Prototype
Prototype
I prototyped the ideal solution that solves key problems highlighted by the Stakeholders.
I prototyped the ideal solution that solves key problems highlighted by the Stakeholders.
Landing Page
Landing Page
Created a user dashboard as opposed to a data heavy landing page. This dashboard features clientele and user statistics giving a user a brief overview of their journey with Vista.
Created a user dashboard as opposed to a data heavy landing page. This dashboard features clientele and user statistics giving a user a brief overview of their journey with Vista.
RESOURCE TYPES TAB
RESOURCE TYPES TAB
To ensure visibility of information, an overlay will slide in which will allow the user to easily switch beetween tabs and access more data at once.
To ensure visibility of information, an overlay will slide in which will allow the user to easily switch beetween tabs and access more data at once.
ROLES & PERMISSIONS
ROLES & PERMISSIONS
Users are now able to create, edit and delete permissions all within one screen.
Users are now able to create, edit and delete permissions all within one screen.
final screens
final screens
Here are the screens I designed for the final prototype.
Here are the screens I designed for the final prototype.
Dashboard
Dashboard
Resource Types
Resource Types
Roles
Roles
All Branches
All Branches
Actions & Attributes within Resource Type
Actions & Attributes within Resource Type
Role Permissions
Role Permissions
Create New Branch
Create New Branch
Create New Resource Type
Create New Resource Type
Create New Role
Create New Role
Takeaway
Takeaway
Given that this was a short project, there is alot more prototyping that could be done with inidividual elements, but working this closely with the stakeholders helped me focus on the target problems that they need solved. I really enjoyed the depth of problem solving that this project took.
Given that this was a short project, there is alot more prototyping that could be done with inidividual elements, but working this closely with the stakeholders helped me focus on the target problems that they need solved. I really enjoyed the depth of problem solving that this project took.
