CardScanner

CardScanner helps business manage contact lists by scanning business cards to ensure the efficient and accurate.

Team

Developers

Project Manager

Tool

Figma

After Effect

Tımelıne

9 Weeks

My Contribution

Front-Facing Camera: Implemented for desktop contact scanning with PMs and engineers.

Contact Adding Methods: Designed real-time scanning, image upload, and manual entry.

Final Metrics

The Problem Space

Current CRM platforms rely on manual input for adding contacts, which is time-consuming and often inaccurate when managing large customer volumes.


Our Solution

We use scanning to add contacts, enhancing efficiency, and a review page to ensure accuracy.

How Did I Achieve This? Let's rewind to the beginning of the project...

How Did I Achieve This? Let's rewind to the beginning of the project...

Overview

CardScanner is a customer relationship management (CRM) platform designed to help businesses manage customer relationships, sales, marketing, services, and other business processes. A crucial and fundamental feature of our platform is Adding Contacts.


Our primary target audience comprises sales representatives, marketing managers, and business development managers.

Current Situation I - The challenge businesses faced...

Current Situation I - The challenge businesses faced...

According to data from our research team, business people in companies, especially during peak summit seasons, can receive up to 50-70 business cards at a time.

Current Situation II- Existing platforms offer the following solutions...

Current Situation II- Existing platforms offer the following solutions...

Salesforce, Hubspot, Pipedrive, and Zoho are the CRM platforms most businesses use. Here’s how they add contacts:

The insight I got from current situation:

The insight I got from current situation:

While most platforms provide the basic information needed to add contacts in a clear, form-based UI, they don't address the core issues users face when managing large volumes of contacts: Time and Accuracy.

My Solutions:

To solve this problem, my first thought was to use the computer's camera to scan the cards. The team agreed that this was indeed an effective approach. The developers noted that when scanning a small number of cards at once, it worked well, but when scanning more than 30 cards at once, errors would occur. So, to ensure accuracy, we decided to add a review page after scanning.

Once we confirmed the solution, I began building the information architecture.

Once we confirmed the solution, I began building the information architecture.

During this process, the team added new requirements of upload files and keep manual input, and I worked closely with them to ensure the technical feasibility.

From Bold to Specific I - Scanning wireframes

From Bold to Specific I - Scanning wireframes

In the early stages, I experimented with various approaches. Even though some were rejected, these attempts helped me gain a clear understanding of the technical limitations, guiding me toward a more feasible direction.

By the mid-design phase, I developed three scanning navigation patterns’ wireframes from the angle of efficiency, focus and clarity that were both feasible and met the requirements.

Efficiency

Clarity

Focus

Now, we’re having different opinions. The team preferred the left one, which had tabs with 3 options at the top and the scanning process below. However, I recommended the right design, where we provide three options at the start, guiding the user to focus on one task at a time.

Efficiency

  1. View all options at same time

  2. Save unnecessary steps

  3. Interface is fulfilling

Focus

  1. Show scan card is our preferred choice

  2. After selecting an option, hiding others helps users focus, increasing efficiency. Click back button to choose an option again.

Ultimately, we decided to do user research to figure out, then we got...

Ultimately, we decided to do user research to figure out, then we got...

Efficiency

  1. 8/10 target audience preferred Team Choice.


  1. B2b interface that supports complex workflows.


  1. Chance options without clicking back button would be more efficient.


  1. The three functions usually is arranged from left to right without occupying the entire tab area.

Be Specific II - Reviewing wireframes improvement

Be Specific II - Reviewing wireframes improvement

Before

  1. Too many options on the same screen proved unfeasible.

  2. Additionally, our initial review requirements weren’t fully addressed.

After

  1. Allowing users to selectively or batch save, edit, delete, or rescan cards.

  2. Most importantly, it enables users to review multiple cards at once.

What I learned from our conflict:

What I learned from our conflict:

While principles are important, they don’t always apply in every situation. Design isn’t necessarily so black and white.


Although my idea was not ultimately adopted, this experience taught me how to use my knowledge as evidence to demonstrate its benefits in team discussions.


It also gave me new insights into B2B products. I realized the importance of truly considering my users' situations and the business needs.

Final Results

Efficiency: Multi-card scanning and delete: quickly manage business cards.

  1. Given the large number of contacts, we offer multi-card scanning, displayed like an album.


  2. You can easily delete unsatisfactory or unnecessary scans with the undo button.

Efficiency: Supports Excel/CSV file uploads for bulk contact entry.

We support image and file uploads to help you manage a large number of contacts. You can edit contact information in the file review interface.

Accuracy: Versatile review interface for easy edits.

  1. You can save individual cards, select specific cards to save, or save all at once.


  2. Not satisfied? Rescan the unsatisfactory cards. You can also edit inaccurate information or delete cards as needed.

Clean UI: Manual input option is retained.

  1. We retained the traditional manual input method for adding contacts, but also offer the ability to add multiple contacts at once by clicking the plus sign for the next card. This ensures your efficiency.

Clean UI: A clear contact management panel.

  1. First-time users start with the scan-to-add page if no contacts exist. Existing users see the contact panel first and can click +Add Contact to choose a method.


  2. Quick Actions allow fast interaction with contacts.

Takeaways

  1. Cross-Team Collaboration & Communication

In my collaboration with team. I recognize the importance of providing evidence and reasoning when discussing design aspects. Maintaining a professional and polite attitude, I engage in discussions to find the best solutions together. Designers, PMs, and developers must work as a unified team to create successful products.


  1. Adapting to Different Product Philosophies

In different products, learning and quickly adapting to various philosophies is crucial. B2B products focus more on efficiency and require design considerations for multitasking, differentiating them from B2C products.


  1. Not Fearing Seemingly Foolish Ideas

In the initial stages of brainstorming, where some ideas may seem foolish, it's important to think boldly. Rejection is normal, and every dismissed idea holds potential for success.

Let’s Connect: cocofan200@gmail.com

Made by Passion, Patience and Americano

© 2025 Design by Coco Fan

© 2025 Design by Coco Fan

Made by Passion, Patience and Americano

© 2025 Design by Coco Fan