Programmatic User Page
Providing Programmatic Users with a Better User Experience
Overview
Product Summary
The Programmatic User page allows pre-bid users that connect to the Index Exchange app through its API the ability to add, manage, and delete their internal users.
Solution
The solution to the problem stated above is to design a dedicated Programmatic User page that provides pre-bid users a unique page to manage their own users while providing an overall better user experience for publisher admins. In addition, the chosen upon solution should not over-complicate the main account user page to avoid negatively effecting the user experience of our other user types.
Problem Statement
In the Index Exchange app UI, there are several different user types that the publisher admin manages through the central accounts user page. However, since pre-bid users interact with the Index Exchange platform through an API, rather than through the actual Index Exchange app UI Itself, pre-bid users must manage their users outside of the Index Exchange app entirely. The problem is: how do we provide pre-bid users the ability to manage their users when their user types are unique from the other user types within the main account users page?
Role
Product Designer, Prototype Designer
Tools
Sketch, InVision, Abstract, Craft
Research
Product & User Research
When first assigned this design project, there were two vital sources of information that I felt was a requirement to review as part of my research. The first source was that since I was designing a unique user page for pre-bid users, I should not only review the design of the main accounts user page but also speak to the designer who developed it. I felt this was imperative since it was likely that the problems I was inevitably going to run into when designing my solution had already be researched and solved when designing main accounts user page. Therefore, it was very important to review the overall account user page design, its different version progressions, while also speaking directly with the designer to learn what problems they faced and how they chose to solve these.
“As a programmatic publisher administrator, I want an accounts page so that I can manage my users.”
The second source of information to review was the user stories, which I needed to review to better understand what features I were to include and why. These user stories that had previously been completed for this project by both the Product Manager and Engineers, which is included n the table provided. Better understanding these user stories and the problems each of them was attempting to solve was imperative in my research.
Paper Sketches
Once my review of the user stories and the accounts user page was complete I began to sketch out ideas of what I believed was the best way to solve the problem. My next step was using these sketched as a point of discussion in my upcoming meeting with the Product Manager, which I scheduled prior to investing time in designing a hi-fi solution within Sketch. This way, my Product Manager can guide me and determine if my ideas are heading in the right direction.
Meeting w/ Product Manager
While sketching out my proposed design solution, I identified two key issues that I would need to further clarify with the Product Manager to help direct the best way to move forward with this design.
“Where is the page meant to live? If other users are already using the main account user page, will this page cause confusion to those users?”
The first key issue was where the page going to live. If other users are already using the main account user page, will this page cause confusion to those users?
“What elements of a user account are meant to be editable through this feature?”
The second key issue was managing the central user feature which was meant to be included as part of the solution. What elements of a user account were meant to be editable through this feature? Was it simply just reassignment of the user name or was it to edit the role as well?
Design
Design Iteration
Throughout the entirety of this design project, I made several different versions for the different components that were needed to solve the problems stated above in the user stories. As the users for the Programmatic User page contained different attributes than the users stored in the main Accounts User page, I had to try different ways to achieve the same result while providing that new information to the user admins.
I have provided sample images from one of the components I needed to address, which was the best way to create a new user. Originally, I had designed it as a dropdown list in which the correct user role could be selected and assigned to the user. However, in a follow-up meeting with the Product Manager, I discovered that a future plan would be to assign multiple user roles to each user, which led me to the more simplified checkbox design.
Design Critique
Design Critiques are by far the most valuable resource a designer can have when designing any new product or feature. I came to realize this very early on, as each week I provided an updated version of my design, which the Design team would then critique and point out alternative ways in which I could design a component to either maintain UI continuity throughout the app or to provide a solution that was less complex while improving the overall user experience.
Overall, design critiques made me more inquisitive in finding furthering my research, either through our Design System or by posing these new questions to the Product Manager during our next meeting.
Prototype
After weeks of iterative designing, I completed six versions of the Programmatic User page. Each version was the product of my Design Critique weekly meeting feedback in addition to the meetings I had with the Product Manager and my 1:1 meetings with the Product Design manager.
The final version not only solves the current problem posed by the user stories but also provides both solutions and options for the future of the Programmatic User page. Please view the final prototype below.