Project Specs
Project Type: Product Design, UX/UI Design
My Role: UX/UI Director
Team: Alex Panagis (Lead UX/UI Designer), Elena Fyseki (UX/UI Designer), Dimitra Kazantzopoulou (UX/UI Designer)
Background
Our client – RedLink – has a unique perspective on how data can be used to help academic publishers, editors, readers, users, and libraries save time and streamline their collaborations. Their solutions cut across platforms and help to unite the scholarly ecosystem.
RedLink’s subscription analytics products include a Library Dashboard, Consortia Dashboard and a Publisher Dashboard.
The goal was to redesign one major component of the client’s dashboards, Users Management.
The purpose of this component is to be able to manage the users having access to the Dashboards. In some ways, the user management has similarities among the 3 dashboards (’cause the client has 3 dashboards in the app, getting pretty complicated at this point, right?), namely with regard to account creation and pin sharing but there are also key differences especially when it comes to setting up user permissions and access.
This project was planned and executed by a team of four:
As the project lead, my role was to oversee and direct the whole project.
Alex’s role was to decipher the brief, break it into use cases, personas, design the IA, the user flows, wireframes (both in analog and digital form) and finally transform the wireframes in UI screens and create a clickable prototype based on them. Elena and Dimitra helped with the UI design and some UX tasks.
The Goal
Business Goals
The client wanted to minimize the number of steps that the user takes to complete a task and thus increasing the quality of the user experience. On top of that they wanted the new component to be an integrated part of the revamped UI of the dashboard.
User Goals
The user would like to have an optimized and simplified version of the current dashboard.
Project Goals
To redesign the component in such a way as to not compromise the business goals within a 4-week timeline.
The Brief
The creation of a user management system where users have different administrative, executional or view only roles in order to interact with each other into teams (groups of users) and finally easily assign or get assigned with tasks based on the access of each user.
The Challenge
The challenge of this task was twofold: the complete documentation of all the user roles along with their respective accesses and rights and how the information will flow from user to user in order to achieve single or multiple task assignments to single or multiple users.
Each user has different views and actions based on their role, therefore feedback is always necessary for each user’s action, in a form of notification messages or dialogue messages with suggested call to actions.
The assignment process needs to be monitored in detail by the administrative users and they must be able to edit assignments and assignees in an easy and functional way, in terms of user experience.
Use Cases | Personas
The client gave us a thorough brief and that helped us a lot both for having a clear understanding of the task at hand and in extracting the use cases and the personas from it.
A user management system with different roles and accesses automatically creates the user personas needed for a functional system, that will guide to the necessary use cases needed for each user. Hierarchy of roles was the first checkpoint to start in order to begin the information breakdown and design the information flow.
PERSONA 1: EXECUTIVE
The super administrator of the user management system that has full access and rights over her teams consisting of several members that she can also create, add, edit information, change role or delete. The executive has full access to all the assignments and can also perform as a stand alone Manager or Sales Representative as described in the next personas.
PERSONA 2: MANAGER
The next user role after the executive in terms of hierarchy. Each team has only one Manager who can also re-distribute tasks to lower level users, (initially assigned from the executive) or execute the assignments herself, acting as a Sales Representative as described below.
PERSONA 3: SALES REPRESENTATIVE
The Sales Representative is below the Manager in terms of hierarchy and she is considered to have the executional role in the system. Each team can consist of several sales representatives. The Manager can also perform as a Sales Representative in a team but not the other way around.
PERSONA 4: AGENT
The last user in hierarchy user. The Agent can perform similar tasks to a sales representative with the only difference that she has a view only access. The Agent can view all the assignments of her team in addition to the Sales Representative that she can only view the tasks assigned to her.
Information Architecture
Once the user personas were defined, the breakdown of the information begins in order to define levels, views and actions across the system’s pages and sections. Appropriate filters were also defined in order for the user to easily find any user or assignment record since the information can be daunting in some cases. Additional sortable information has also been considered such as member/assignment counting and category breakdown.
User Flows
Since the bigger part of the information architecture has been defined, it is now the time to design the journey of the information and how it flows through the different kinds of users.
Version 1: Paper User Flow
In the first attempt of the user flow, it has been clear that the system will consist of two main “pools” – users and assignments. The flow will help both the client and the designers agree on a common ground of how the information is going to be manipulated through the system and what types of database connections users and assignments have, based on their role. (ex. One to many, many to many).
Version 2: Updated Paper User Flow
In the second version for the user flow, the paths from the administrator to user and assignment management are now seamless and can be executed asynchronous. This approach limits the navigation clicks for the users to perform a specific series of actions and at the same time, it gives more control in terms of management and monitoring of the assignments and users, especially the administrative ones.
Version 3: Digital User Flow
In the digital flow it has been confirmed with the client that the information can flow seamlessly through the users and assignments via the executive user who is considered to be the starting point. Some extra restrictions have been added in the task assignment flow that will lead to functional dialogue messages in the process of wireframing and user interface design.
No matter how experienced you are, or how many tools you know or how powerful your new Macbook is, the “You need to write that down” mentality is vital in order for you to break it into a thousand pieces and build it again from the ashes; only better.
Wireframes
Having the user flow confirmed with the client, the next step is to convert the flow into functional and logical wireframes. The addition of different toggle views for multi-dimensional components of system that contain a lot of information helped in clarifying and visually grouping elements that can be combined together in order to build a functional and simple user experience.
As described in the Information Architecture section, the appropriate filters where defined. In the wireframing process these filters are applied in the left side, displaying the content right next to it. The vertical approach of the filters combined with expandable filter sections provide freedom in terms of placing numerous filters since there is the ability to scroll down/up to view them all.
Showcasing the breakdown of a team and its members (initially described in the Information Architecture section) where the breakdown numbering labels are sortable tabs. Once the user selects the type of members that she wants to see, the system will filter those members along with their respective total numbering and will show expandable sections for each member, containing her assignments and relevant details.
Takeaways
As User Experience Designers, we are always challenged by complicated problems that need solutions; that will make people’s lives easier and happier — and as an extension, make us happier too.
Approaching the third decade of the ’00s, where all our analogue actions and habits are transformed into digital systems, we believe that the paper and pencil will not and must not disappear from our lives. No matter how experienced you are, or how many tools you know or how powerful your new Macbook is, “You need to write that down” in order for you to break it into a thousand pieces and build it again from the ashes; only better.
In the second part I’ll show the feedback from the client, the iterations, the UI Design process and the handoff to the dev team.