Select Page

Visual Design, UX research, UX Design, Workshops

B2B Mobile Banking

Yokoy aimed to revolutionize its B2B mobile banking by introducing a seamless mobile experience for corporate VISA card users. Previously, users were bound to a desktop app, hindering accessibility and causing multiple issues.

My Role: UX Designer
Additional Team Members: UX Researcher, Product Manager, Frontend & Backend engineers, QA engineer
Methodology: SCRUM
Tools Used: Miro, Figma, Condens, Pen & Paper, Confluence, Jira, YouTube

The Vision

Create a mobile app for the Yokoy Pay product and address issues:

  • People can’t carry desktops around.
  • Business travelers need easy card access.
  • Corporate cards should have instant blocking for security.
  • A complete user experience by adding corporate cards to an existing spend management feature.

Design goals:

  • Move all card features to mobile and optimize for mobile use.
  • Make the app feel like a top-tier consumer product.
  • Simplify the business expense process.

Understand Our Users

  • Preliminary Research: Conducted by UX researcher, focusing on user needs and insights from colleagues.
  • Target Users: Company staff, known as “submitters,” who own at least one company card.
  • Customer Feedback: Collected and analyzed for card-related concerns.
  • Competitor Analysis: Identified strengths and weaknesses of competitors.

Confluence, Customer requirements research report

ProductBoard tickets with customer feedback

Choose Our Focus

  • Feature Identification: Listed absolute must-have features based on user stories.
  • User Flow Creation: Developed simple, user-centric flows.

Miro, assigning user flows to various user stories and sections of the app

Generate & Prioritize Ideas

  • Brainstorming: Organized multiple workshops and interviews with stakeholders to brainstorm
  • Prioritizing: Prioritized ideas together with the scrum team and product manager using impact-effort scale.

In-person workshop, Crazy 8’s exercise

Remote workshop, dot voting exercise

Remote workshop, prioritizing top ideas using impact-effort scale

Bring Ideas To Life

  • Sketching & Digitizing: Created simplified screen sketches and digitized the best solutions in Figma.
  • Low-Fidelity Prototyping: For usability testing, involving extensive collaboration and feedback.

Early design iteration sketches

Figma, low-fi wireframes

Figma, testing prototype

See If Our Ideas Work

  • Usability Testing: Conducted in-person sessions, evaluating user interactions and noting observations.
  • Learning & Iteration: Identified and improved unexpected issues based on testing results.

Miro, testing planning, creating test script

In-person moderated usability testing

Condens, report from first round of usability testing

Finalize Everything

  • Technical Review & Final Mockups: Discussed functionalities and created high-fidelity mockups focusing on prioritized screens.
  • Development: Involved constant communication, consultation, and design reviews during the development phase.

Figma, high fidelity mockups with annotations ready for handoff

Jira, delivery sprint planning

Key Learnings

  • Information Architecture: The existing architecture didn’t support the new features effectively, creating navigation challenges.
  • User-Centric Dashboard: Users needed a central dashboard to navigate through the app more effectively.
  • Clear Wording: Identified confusing terminologies used in the product, prompting the need for clearer communication.

Business Value

  • The mobile app brought unparalleled convenience to the users, allowing easy access and management of their corporate cards.
  • The project was a success and highlighted other areas for improvement, underscoring the importance of usability testing.
  • The app’s enhanced usability and features have set the stage for further refinements and developments in our pursuit of delivering top-notch digital banking experiences.