IMPROVISING THE RESOURCE MANAGEMENT EXPERIENCE FOR CITI EMPLOYEES
Note: To respect company policy, I have blurred out and prevented adding any confidential company information
PROJECT DETAILS
This online portal was introduced for the employees of the firm to enable a smooth and easy way to perform their daily business activities. The website aimed to provide a unified view and interfaced with over 20 legacy applications, allowing ease in access, transaction status, a dashboard for centralized notifications/action items, training videos, new communications, guides, and resources to improve the user experience.
Although the idea of the portal was well appreciated by stakeholders, the final design of the end product failed to provide the expected user experience to the end user. As a solution, the senior leadership team pushed for a revamp of the site that would result in a design centered around optimum user experience and intuitiveness.
My Role
-
Quantitative and Qualitative research Methods
-
Led card sorting sessions and several usability sessions for different iterations of the designs
-
Wireframing and Prototyping
Methods Used
-
Stakeholder Interviews
-
User Interviews
-
Data Analysis
-
Affinity Mapping
-
Card Sorting
-
Tree Testing
-
Wireframe and prototype
-
Usability Testing
Constraints and Limitations
In order to maintain the branding standards of the company and consider the demographics of our target audience, we had to make sure the designs were not super colorful or fancy, and stick to a simple, yet easy to use format.
Tools Used
-
JIRA
-
Sharepoint
-
Google Analytics
-
Pen and Paper
-
Whiteboard
-
Axure
-
Illustrator
PROBLEM
STATEMENT
USER GOALS
PROCESS
In the prior website, users struggled to complete common resource management tasks and didn't know where to look for the items that needed their attention. The goal was to create a new design that would help users complete these tasks and learn about processes by providing a usable, accessible, and easy-to-navigate platform.
-
To view transactions in order to take action against delays before it is too late
-
To view a subordinates transaction details in order to relay information
-
To view notifications for items that require the user’s attention so they don’t cause delays
-
7 months of Iteration process
-
Engaged end users, stakeholders, SMEs, and used their feedback for design
-
Each version of the design was shown to and tested with users
-
The team went through 6 major iterations of the portlet design
Month 1
Month 3
Month 5
Month 7
OUTCOMES
✓ 3 categories for content structure
✓A task-based approach
✓ A clean, highly intuitive, responsive, and accessible design, allowing for easy navigation on any device
SOLUTION OVERVIEW : Comparison of Old and New Design
Old Design
New Design
User Feedback
-
Cant't find key items or where to complete key tasks (i.e, checking status of an invoice)
-
Labels aren't straightforward, unless users know the name of the system
-
Heavy graphics usage resulting in slow load time, tags, and long scrolling
-
Too much content on the page, especially on mobile
-
Users don't understand what the work to zero dashboard is
-
Inaccessible to those with disabilities
-
New highly-intuitive categories to simplify user selection when figuring out location to perform a task
-
Intuitive overall navigation of all technology proficiency and supply chain knowledge levels
-
A process-based approach providing flexibility, learnability, and transparency
-
Power User options for those who know the systems
-
Considered Accessibility for those with disabilities and/or accommodations
UNDERSTAND AND RESEARCH
In order to gain a holistic understanding of our users, their behaviors and attitudes towards the site, we conducted a series of qualitative and quantitative research. We also conducted heuristic evaluations to assess how the former website complies with established interaction design principles.
Stakeholder Interviews
To initiate the redesign process, we had to understand the product and the end user goals. To gain a deep understanding about the website, we conducted 6 interviews with important stakeholders, who worked on the initial planning and development of the product. These included the project manager, developers, product owners, and the project sponsors.
Based on the interviews, the following information was addressed:
-
The overall objective of the website
-
The importance of the portal
-
What a successful design would look like for the team
-
What went wrong in the initial design
-
Any specific areas to focus on
Usability Tests & Interviews
We met with users of the site individually and conducted usability tests on the prior site, which helped us learn if the users are able to complete specified tasks successfully. Users were asked to conduct specific tasks and think out loud, while researchers observed and took notes.
What people said:
“There’s so much going on. The large images on mobile are overwhelming.”
“I wish there wasn’t so much content on the page. I don’t even know where to go first.”
“When I first logged into the site, I didn’t know what to look for or what to do.”
Key Findings
Findability was an issue to understand what can achieved in the platform
Design inconsistencies caused functionality confusion for the users
The # of individuals that went to portlet pages from home page was very low
Image heavy site affects site performance as it affects load time
Users were jumping out from the site too fast, increasing the site exit rate
Errors and timeout occurred frequently with no notifications or details
Google Analytics and Surveys
Through clickstream analysis, we were able to assess feature usage and page visits. Google analytics allowed us to observe usage trends, where our users were coming from, what region or country they belonged to, and what business line they represented. Surveys also gave us an understanding on users' information and feedback on the usability of the site.
Key Findings
There were minimal clicks on resource button, which showed that users weren't utilizing policy information
Only 25% of the users were from the resource management organization. All the other users were from different businesses
Out of over 200,000 users. only less than 1% of the users used featured in the dashboard
Only one portlet page had the most number of visits in comparison to the other pages. North America had over 50% of the visitors
Users barely viewed their transactions in the dashboard, as the number of clicks were very low.
Most users drop out right after they get on the home page, and the exit rate from the home page was the maximum.
Accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the web. During the research phase, the team found that the company had 400 screen readers, but not a single website considered designing for accessibility in their interfaces. About 26% of US adults are disabled and we believe that design should be inclusive for all people
Inclusive by Design :
Designing for Accessibility
Types of Disabilities to Consider
Vision Impairment
-
Blindness
-
Partial Blindness
-
Color Blindness
Cognitive Impairment
-
Down Syndrome
-
Dyslexia
-
Autism
-
ADD
Hearing Impairment
-
Deaf
-
Partially Deaf
-
Tinnitus
Motor Impairment
-
Cerebral Pals
-
Muscular Dystrophy
-
Multiple Sclerosis
-
Arthritis
Analysis of Old Design
aXe
Once the analysis was conducted, we added the chrome extension 'aXe' to analyze the website. This tests the site for compliance with WCAG 2.0, ranks issues by severity, and offers solutions.
Key Changes Suggested
✓ Create clear hierarchy
✓ Add white space
✓ Add alternative text to images
✓ Use a design that is not image reliant
✓ Use high contrast
✓ Remove hover over for navigation and key information
✓ Use text approved colors
✓ aXe extension for developers
SKETCHING AND WIREFRAMING
Once the research phase was completed, the team began sketching and wireframing new designs. The team went through 4 iterations before selecting a final wireframe to test with users.
Examples of initial sketches for the redesign
Initial Wireframes - Desktop
Separated My History from Needs my Action
This immediately informs the users of their transactions, making self-service capability more apparent, reducing reliance on calling the Service Desk.
Moved News & Training up
Critical information that was previously shown in carousels will be shown under News. This increases visibility and alerts users of capabilities relevant to them. Carousels are also not accessible for our users.
Separated My History from Needs my Action
This is helpful for users who need to view transactions and action items of others (eg, managers, peers, directs) to help ensure that things are processed or reviewed before they become time critical.
Previously, this was a person icon. Users did not intuitively associate it with being able to change the dashboard view to that of their colleagues.
Breadcrumbs
As users drill deeper into the Needs My Action section, breadcrumbs will generate, allowing for quick navigation to previous screens.
User Flow - Desktop
Initial Wireframes - Mobile
User Flow - Mobile
Usability Test and Feedback
“It’s simple & straightforward like it should be.”
Users could quickly see the different actions they could take without having to scroll or hunt for functionalities.
“ I love that the mobile site looks the same as the desktop site. This is so much easier.”
Users were quickly able to navigate the site without feeling like they were learning how to use a new platform.
Additional Findings
-
Examine better ways of presenting the linked feature in the ‘Other’ category
-
Users didn’t know what would be in that category and couldn’t guess either
-
-
Examine whether titles such as ‘Buy’ and ‘ Pay’ could be more straightforward
-
Some users indicated these titles didn't accurately reflect the breadth of work they could get done in those categories
-
-
Investigate showing due dates for items needing users’ attention
-
The portal’s team members suggested that the users may find it useful to see due dates for things that require their action
-
-
Evolving from inclusive design assessment to development
-
Following the inclusive design assessment for accessibility, starting to make menu items clickable for people using screen readers, adding alt-text to images .
-
COLOR PALETTE
New Design Improvements
FINAL DESIGN
Separate 'My History' and 'Needs My Action' Sections
Clear separation for distinct needs
Initial Feedback: Most users didn't realize that the portal allowed them to see items that needed their action.
Evidence- based Solution: We clearly highlight action items in their own section at the top of the page.
Follow-up Research: Users can navigate the top-level categories and see what actions they need to take in each.
Noticeable Dashboard Filter
Key feature made findable
Initial Feedback: Users who needed to view actions or transaction of other employees didn't know how to.
Evidence- based Solution: We changed the visual from an icon to a text description and changed the position to make it more noticeable.
Follow-up Research: Users who knew the portal had this option found the dropdown quickly, and users who didn't know about this option noticed it for the first time.
Relevant and Easy-to-Find News and Training
Section tailored content.
Initial Feedback: Users didn't find RMO news helpful but liked the idea of having relevant information.
Evidence- based Solution: We featured news and trainings that are relevant to the portlet page the user is on.
Follow-up Research: Users liked seeing content that was relevant to the portlet pages, describing it as "helpful" & "informative".
More Intuitive Category Names
Three categories vetted with rounds of testing.
Initial Feedback: "Buy", "Pay", or "Manage Supplier" were not intuitive category labels.
Evidence- based Solution: Users described categories with terms like "Purchasing and Payments", "Sourcing and Third Party", and "Travel and Expenses", so we implemented those labels.
Follow-up Research: In testing, users were able to quickly navigate to the right category.
Streamlined Layout Across Pages
Meeting user expectations of similarity across site pages.
Initial Feedback: Users expected key available features to be similar across different pages.
Evidence- based Solution: We moved "Needs My Action" to the top of each portlet page to mimic layout of home page.
Follow-up Research: In usability sessions, users said that they liked seeing portlet-specific spending items at the top of the page.
Process-based Flow for End Users
Making it straightforward for users to find where to complete tasks.
Initial Feedback: Most users didn't know where to go to accomplish tasks.
Evidence- based Solution: We created a process based layout that emphasizes what users are trying to do.
Follow-up Research: End users were able to get to the right place to complete a task.
Note: Each card opens to direct user to the right system, as well as to relevant guides and trainings. Users liked having these resources directly accessible.
Note: Each card opens to direct user to the right system, as well as to relevant guides and trainings. Users liked having these resources directly accessible.
MOVING FORWARD
Continuous collaboration and analysis to understand users’ feedback, propose enhancements, and ensure a seamless user experience
OUTCOMES
-
After the redesigned site was launched, there was a 70% increase i the number of positive feedback received.
-
The team saw over a 350% increase in site usage. The average number of users that used the site per day increased dramatically.
-
The senior leadership team was satisfied with the new portal and proudly presented the new site and its features in the global systems meeting to all the different regions that attended.
-
Google Analytics and Accessibility design features are being incorporated by other teams after seeing the success of our website and the impact it's had in the firm
KEY TAKEAWAYS
Guess Less:
There is usually a tendency to think of and suggest solutions after hearing about the challenges being faced, which eventually can lead to faulty design outcomes. Trying to guess less and focusing on the design process leads to better outcomes
Empathize, Empathize and Empathize:
Empathy is one of the core elements of the design process. Spending as much time to understand the user’s perspective and context in and out can be very beneficial.
Define a Metric To Test You Success:
For designers, it's hard to judge if the proposed designs will work well in the real world. Additionally, it is not just about the analytics numbers. Setting up a framework helps in exploring the problems in the right way and eventually leads you to an accurate outcome. Therefore, incorporating qualitative methods were very beneficial.
Brainstorm and Get Your Design Critiqued With As Many As You Can:
Always welcome the stakeholders to join the brainstorming sessions. This way you can understand different perspectives like product owners, directors, product managers, etc. Design critique is also a powerful way of getting the feedbacks and chance to unveil few points that you have never even thought of them.