At A Glance
Allocation is an internal resource allocation tool for engineers, product designers, operations and sales team members to use. Any user should be able to know the status, role and progress of the projects and teammate allocation efficiently.
Oct 2018- Dec 2019
OVERVIEW
Allocation is an internal resource allocation tool as stated above. Originally the tool did not meet existing user’s needs and had slow performance issues. This project aims to create an enhanced version of the tool to help team members utilize it with a more efficient and pleasant approach.
MY ROLE
As the main designer on this project, I worked with our product manager, engineers, stakeholders, which led to a very open and collaborative process. We conducted user research to find out the users' needs and pinpoints. I audited the usage of the tool internally and also externally studied some relevant industry tools for inspiration.
Previous Version Problems
The Dashboard
After the user logs in, he will be redirected to this default dashboard screen. It is very hard for users to efficiently accomplish their primary goal which is to see his own task, designated project, relevant project info, teammates of the project, allocations, timelines. Normally users need to spend more than 10 minutes to figure out the navigation and information..
The Resource Card
Each worker in the company is considered as a resource, so on each resource card, there are legends to indicate the role, allocation information of the resource. The iconography is not intuitive for users to understand at first glance. And multiple icons on a single card adding lots of cognitive loads for the user’s memory. Users struggle to decipher the information on the dashboard and waste a lot of time.
The Allocation Indicator
The four different colours indicate allocation type, e.g. Orange is for vacation, Red is overallocated. And the shape represents the percentage of the allocation time. Without proper visual guidance, barriers are added for users to understand this information.
Design Solutions, Testing and Iterations
Option 1
This dashboard has a collapsed and expanded view for each project. Collapsed view indicates the overview team member and allocation information of the individual project. When users click on the project title, this directs them to the expanded view which shows each team member’s allocation on the timeline with their name and profile photo. By using team name abbreviations as a side category rather than icons, this presents the role clearly.
Option 2
This concept using one main dashboard view, presented team allocation status and project information on the left-hand panel, gives a good overview of the resources. On the timeline, using colour and the thickness of the bar graph represents different team and allocation statues. Users love the left panel design which gives them a quick glance at the resources, but they find the bar graph on the timeline is not so intuitive to understand the meaning for allocation other than it only indicates the start and finish time.
Option 3
This concept does a good job of presenting the project information and also resource allocation statues. The breakdown of the allocation statues on the timeline clearly represents the percentage of the resource allocation. Allow the user to browse the relevant information efficiently and have a good understanding of their own allocation status as well as that of their project team members. Users favour this option most - the good balance of the information provided on the project & recourse panel vs allocation statues on the timeline.
Branding in High Fidelity Design
Based on the user’s feedback also leverage technical constraints, we decided to develop the high fidelity design based option 3 concept which is the most appropriate MVP. Since it is an internal product, I worked on several combinations of the interface to bake our brand elements into the concept.
Classy Look
EB Garamond is our primary brand font, I used this font on the project title to have a nice combination with the non-serif descriptions. The light grey on the left panel is calm and peaceful, is low-key and calm, which sets off the pastel colours on the right timeline. The dashboard has a sleek and clean look and feel.
Clean Set
This design scheme uses a black navigation bar on top, which is clear and simple. The project panel on the left has a concise white background while the timeline uses high-saturation eye-catching colours. The whole scheme is relatively neat and practical.
Premium Choice
This design scheme is relatively mature and professional, shows a premium look. The headline adopts shining brand yellow, sets off the black project background, elegant without losing the details. After gathering users and stakeholders feedback, this becomes the majority choice.
The Outcome
The final design creates a simple and intuitive MVP version of the allocation tool, keeping the browsing experience light and quick. It requires minimal cognitive load to find relevant information. It introduces the mouse tracking behaviour which helps the user and gives users proper visual hints about their reading location. The next steps are to evaluate the product in the live phase, to future iterate based on user’s feedback and other data measurements.
