CitiLogo

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

Process.png
  • 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

Process.png

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

Connect Old Design.png

New Design

Redesigned site.png

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.

aXe.png

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

ColorPalette.png
Inclusive.png
Inclusive.png

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

Screen Shot 2020-12-01 at 10.50.06 AM.pn
Screen Shot 2020-12-01 at 10.50.19 AM.pn
Screen Shot 2020-12-01 at 10.52.06 AM.pn
Screen Shot 2020-12-01 at 10.52.27 AM.pn

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.

DesktopWireframe.png

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.

DesktopWireframe2.png

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.

DesktopWireframe3.png

Breadcrumbs

As users drill deeper into the Needs My Action section, breadcrumbs will generate, allowing for quick navigation to previous screens.

DesktopWireframe4.png

User Flow - Desktop

UserFlowDesktop.png

Initial Wireframes - Mobile

phone 1.png
Phone 2.png
phone 4.png
phone 5.png

User Flow - Mobile

userflowphone.png

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.

WireframeHome.png

“ 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. 

Desktop &PhoneLayout.png

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

Colorpalette.png

New Design Improvements

NewDesignUser Feedback.png

FINAL DESIGN

Redesigned site.png

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.

Final1.png

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.

Final3.png

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".

Final 4.png

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. 

Final 5.png

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. 

Final 6.png

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.

Final7.png
Final8.png

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.

Final 7.png

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

Moving Forward.png

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.