Mastercard Navigator

Date:

August 2022 - December 2022

Role:

Design & Research Manager

Teams:

Lead a team of UX Researcher and Designers using qualitative research (User Interview, Usability Testing, Surveys and Focus Group) to develop enterprise B2B internal tool software at Mastercard M.S. capstone project, while aligning with executive stakeholders..

Mastercard Navigator
help circle

Problem

At the time of our project, due to information inconsistencies across Mastercard internal tools, finding information to people and connecting one another has resulted in a large disconnect.

define icon

Hypothesis

Through various brainstorming sessions with Mastercard stakeholders, the team and I hypothesized the lack of access to digital literacy services are caused by the accessibility to to local resources to digital literacy and connectivity.

alert circle

Solution

After a series of both qualitative and quantitate research using methods like survey, journey maps, 1:1 interview and contextual inquiry. We have discovered 3 themes to the current issues at hand: Information Completeness, Onboarding, and Connectivity between Employees.

star icon

Outcome

In the end of the project, we successfully developed 3 scalable design recommendations for Mastercard Employee Experience team. The design recommendations were approved by our team at HCI Master's professors for further development and our client Mastercard was impressed with the UX Research Report and design solution. Particularly our unified design solution to include all information into one platform are currently in development for future implementation!

Process

01. Research Planning

Project Background: Mastercard Navigator

Due to inconsistencies across Mastercard internal tools, finding information to people has resulted in a large disconnect. Thus, our project focuses on building B2B software that combines information from internal tools to make connecting easier. We hope Navigator will reinforce connection by simplifying collaboration and information sharing within Mastercard.

Navigator is an internal tool to assist with searching & finding information for people, products, and programs within Mastercard

  • Collaborate and find connections
  • Ease of use
  • One stop shop for internal information

Navigator User Populations

We recruited via email and internal referrals inside the Mastercard teams. I created a survey screener that filtered out the direct user population and stakeholders for Navigator. Then researchers distributed the email with the screener. A total of 15 users were selected for in-depth 1:1 interview and unmoderated usability testings.

Demographic Info

  • 15 Mastercard Employees
  • 2 UCSC Students
  • 26% Female, 74% Male

Departments:

  • HR
  • Sales
  • Technology 
  • Program Manager
  • Business Operation

02. Collecting Data

Research Methods

Below are a list of research methods used to collect data from the Navigator user cohorts. At first surveys were distributed to recruit and screen users. Then we conducted 1:1 in-depth interview with our users from Mastercard.Usability Testings were used to validate our prototype design followed up by a usability rating survey I created.

  • Competitive Analysis
  • Surveys
  • 1:1 User Interviews
  • Affinity Mapping
  • Usability Testings

Design methods

Below are a list of of design methods used by our UX Designer influenced by the insights collected from the UX research report.

  • User Journey Maps
  • Wire-framing
  • UI Design via Figma
  • Rapid prototyping

03. Analyzing Data

Themes founds through User Interview

Current Pain Points:

  • Out-of-date info
  • Lack of Context
  • Spread Out Information
  • Reduce Points of Contact

Categorized Themes from Affinity Mapping

  • Incomplete Information
  • Centralizing Data
  • Onboarding
  • Finding and Searching Resources

Theme 1:Completeness

Aspect 1: Synchronization

Number 1 theme we discovered was the lack of information completeness. From missing information to inconsistencies, users felt their searches led to incomplete information.

Recommendations:

  • Users update or augment their profiles
  • Report an issue feature

Theme 2: Onboarding

Onboarding is the 2nd theme we found through the interview data we collected. During onboarding at Mastercard, there were unnecessary overhead for new hires due to unfamiliarity.

Recommendations:

  • Different methods of contact
  • Descriptive search cards & Tags
  • Open to Mentorship Feature

Theme 3: Connectivity

We discovered a need to collapse the distance between people, products, and programs. Many users were often slowed down by the time it takes for them to connect with a product owner, program manager or the stakeholder they need to reach out.

Recommendations:

  • Filter & sort information
  • Easier to find info and make connections with people
  • A need for Org Chart (Visual structure of the company)

Conducting Competitive Analysis

In addition to the User Interview and Usability Testings, our team felt the necessity to cross-reference the best and most popular search and networking website and softwares. By conducting a competitive analysis, we can further verify the design we later propose is valid for Mastercard Navigator's users and customers. Thus me and another UX Researcher set out to explore 6 different companies and non-profit organization in digital search and social networking industry: Google, LinkedIn, Workday, JSTOR, CruzPay, and Synergy Education Platform. In order to give insights driven design recommendation, I made understanding these organizations and their users/customers a priority.

04. Design Recommendations

We began our design based on these following recommendations.

  • Unified and synchronized information system
  • Address out of date & incorrect info
  • Direct contact options
  • Improved finding/Searching Info

UI Sketches

Different sketch concepts for the Navigator interface

Low Fidelity Prototype Designs

By typing in the key words, the user will be able to search for a list of most related Mastercard product owners, program or products.

The low fidelity prototypes were designed via Figma with the help of our UX Designer and I was over-seeing the content design for each page. After the low fidelity prototypes were created, I hosted multiple rounds of design review and feedback sessions from the stakeholders we began to go onto the next phase of High-Fidelity Prototype design.

High Fidelity Prototype Design (Validated via Agile Process)

Inclusive Design

Contrast and color use are vital to accessibility. Users, including users with visual disabilities, must be able to perceive content on the page. Therefore, color pairings were chosen if they had higher color contrast ratios.

05. Conclusion & Limitations

Project Blockers & Limitations

  • Time limitations
  • Access to Mastercard Interviewees
  • Lack of access to Mastercard systems & Navigator

To overcome these blockers, interviews and design work were done in tandem.

  • Initial Testing with UCSC students
  • Immediate incorporation of Feedback 
  • Fewer Testing iterations

Conclusion

This has been an amazing learning experience to collaborate with industry folks from Mastercard. We could not have done it without the help of our Capstone sponsors. Thank you to the Mastercard digital technology department for giving us constant feedback to further improve our design and research integrity. By having industry stakeholders as our reviewer, I was able to hold myself to the highest standard as a UXer.

Even with the time limitation and the difficulty of starting from scratch, we were able to answer the stakeholder's research questions, inform their decision and as well as delivering a interactive design recommendation. Kudos to our UX Designer Julian Davis and UX Researcher Mireya Leon has for an incredible job to support the design and research. We have submitted our design and research report to our stakeholders and I look forward to Mastercard to implement this design into production!