UX/UI for an enterprise product
Parlay Concepts: Launching a Project Management Tool
Parlay is a project management application helping teams optimize their processes. It provides a customizable framework allowing teams to integrate their already established workflow process in the application.
The team was looking to design and build some of the product's complex features as well as improve on the initial designs of the Dashboard and project page experiences.
I worked on the Dashboard and project page redesign and led the end-to-end design and development of a complex feature for the product.
The redesign and enterprise features helped Parlay successfully launch the MVP and sign its first client.
Deep dive into the Problem:
Previously conducted research had revealed that there are two different sets of users for Parlay's product. The first set of users is an executive who typically wants a snapshot of all projects and the ability to quickly see the status of each project in her portfolio. The other user is an individual contributor to a project who has to regularly perform tasks associated with the project, add relevant information, follow the workflow process and update the status of each phase of the project.
Based on these findings, Parlay's workflow consists of the Dashboard and Project Page. Dashboard displays all projects laid out on a single page grouped by their current status: active, inactive, completed or closed. Project Page is a cluster of pages that has details of an individual project including phases that the project has to follow as part of the process, the status of each phase, navigation for different phases and a place for users to update the content for a particular phase of the project.
Early usability testing had revealed the following problems:
1. Since Dashboard is the entry point into the application, both sets of users felt that the existing cards didn't offer much information on the projects
2. Individual contributors found the Project pages, especially the top part of the pages, too overwhelming. It was hard for them to follow the different status elements making the application difficult to use and impacting the "time taken to complete the task."
Dashboard design Solutions:
After carefully studying the user feedback, we decided to keep the overall structure of the Dashboard unchanged and focused on making improvements to the cards.
1. One of the first changes was adding a brief summary and image to the cards. While this increased card size, it reduced the user effort in having to click through different pages to find the relevant information. Also, adding images to the cards allowed users to get a visual understanding of the project.
2. Another design introduction to the cards was the "status marker" that indicates whether a project is "NEW" or "Blocked." This was designed keeping executive users in mind so that they could easily scan what new projects were added to the queue and which projects, if any, need their attention.
3. To let users easily track the progress of a project, all projects under each phase were arranged in the order in which they are updated. This gives users a quick overview of project that are actively progressing vs. those that may need a push.
4. We also employed a visual design solution to the problem. Since each phase within a project was assigned a color, I extended that visual element and added a color bar on top of each project to visually connect projects to phases.
Usability testing on the prototypes revealed that Executive users felt they needed to see even more details without having to navigate through all the phases of the project.
Adding more information to the Dashboard cards meant making the cards wider or longer thus compromising the scalability and usability of the Dashboard.
To solve the problem, I decided to add an interim layer between Dashboard and Project Pages that would show users more details of a particular project without impacting Dashboard experience.
The interim page was added as a pop-up that users could find by clicking on a project from the Dashboard.
We quickly prototyped the design and performed targeted testing with only Executive users. The design tested successfully and I created high-resolution design mock-ups ready for development.
Project pages design:
Users found the different status notifications on top of pages confusing and hard to update.
Additionally, a different feature, with a completely different landing page experience, added at the end of the phases, confused the users.
Based on user feedback, I decided to eliminate some of the status notifications and cleaned up the remaining project-level and phase-level notifications as following:
1. Bucket similar items together
Separating features not part of the project workflow was the obvious first step. I created a dedicated space for existing and potential features in the application keeping user behavior in mind and affording a distinct place for other features that the product had to offer.
2. Making sense of the statuses
Keeping information where relevant was the next step. By adding project status to the "Overview" page and phase-level status information in each phase page, I was able to remove the noise from the top of every page, yet provide relevant information as needed.
THE PHASE STATUS PROBLEM:
Prototyping and testing the design solutions showed that while users were now not overwhelmed by the status information, they did not like that phase-level status information was now hidden inside phase tabs. Since the application was aimed at Agile teams, with multiple contributors to a project, it was critical for users to know the status of each phase at all times.
An early proposal to solve the problem was to create a status bar on top of each page that would let users know the phase-level status.
One big problem with this design was that it duplicated the phase navigation bar and confused the users. Also, this was not a scalable design because the phase bars would become clunky and difficult to use as more phases were added.
After some discussions and design iterations, I proposed loading the existing phase navigation to perform double duty: inform users of the phase statuses and navigate between the phase pages.
My idea was to introduce visual cues (icons or text) that will let users know the status of each phase, without having to jump from one tab to the other.
Since a user can mark a phase as complete only from within the phase, we removed the dropdown and instead placed an action item in each phase page. Also, since the navigation was designed to be scalable, the status bar automatically scales with it.
Usability testing of the revised prototypes were successful and with the final approvals signed off, I created visual mock-ups and moved on to build the designs using angularJS, HTML and CSS.