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
See Presentation
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.
My Contribution
I collaborated with the PM and engineering team to implement a desktop front-facing camera for scanning contacts. I designed and refined three methods: real-time scanning, uploading images, and manual input.
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. However, a common issue with existing platforms is that they only offer manual input methods. This approach increases time costs and reduces accuracy when managing a large volume of customers.
Our Goal
I collaborated with a product manager and full-stack engineers. Supported by our team the goal was to help businesses efficiently and accurately add a large volume of customers, thereby improving future CRM.
Our primary target audience comprises sales representatives, marketing managers, and business development managers.
FINAL IMPACT
How Did I Achieve This? Let's rewind to the beginning of the project...
CURRENT SITUATION - 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.
Challenge 1: Time-Consuming
It takes an average of 3 hours to input names, emails, and phone numbers from business cards into the computer.
Challenge 2: Low Accuracy
The average error rate for names is 25%. For emails and phone numbers, it's 15%.
Challenge 3: Clean UI Style for Managing Bulk Information
The UI needs to handle large volumes of client information efficiently and without confusion.
COMPETITOR ANALYSIS - How other platform solve these issues?
Salesforce, Hubspot, Pipedrive, and Zoho are the CRM platforms most businesses use. Here’s how they add contacts:
What I learned 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.
Thus, I broke down the challenges into two steps:
I asked the 1st HWM:
HMW help businesses quickly input user information to add contacts?
Front-facing camera to scan cards in real-time by simply holding up the card toward Desktop.
HOWEVER, We got technical issue!
The engineer team proposed: when processing over 20-30 business cards at once, the error rate increases significantly.
Then, I asked the 2nd HWM:
HMW ensure the accuracy of the added contacts?
Review Page
With these requirements in mind, I began the design process.
ACTION 1 - VISUALIZE LOGIC TO GET ALIGNMENT WITH REQUIREMENT & UNDERSTAND TECH LIMITATION
ACTION 2 - ACHIEVE ALIGNMENTS & STRUCTURE UI
Help businesses quickly input user information to add contacts by Scanning
Option 1: Use a modal display: scanning on the left.
Status: Reject
Reason from engineer team: Not feasible due to too many options at one page.
Option 2: Use tabs to allow users to intuitively select between options.
Option 3: Provide a single entry point with a hierarchical structure, guiding users to start with the scanning method.
We got conflict!
Team: Preferred Option 2
Reason:
View all options simultaneously, improving efficiency
Save unnecessary steps
Interface is fulfilling
Me: Preferred Option 3
Reason:
Show Scan Card is our preferred choice
After selecting an option, hiding others helps users focus, increasing efficiency.
Each of our perspectives has its own merit. Ultimately, we left the decision to User Testing, and we found:
Final Direction: Most of our target users prefer Option 2.
Reason: Our target audience, primarily professionals, needs an interface that supports complex workflows and multitasking without causing confusion.
However, the tabs need improvement. The three functions should be arranged from left to right without occupying the entire tab area. This will leave space for adding new contact methods in the future.
What I learned from our conflict
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.
Help businesses accurately input user information for an effective CRM by reviewing.
Option 1: Use a modal display: review on the right.
Status: Reject
Reason from engineer team: Not feasible due to too many options at one page.
Option 3: Still use a single page but extend the review page to nearly full screen. Each card has a re-scan option.
Status: To be determined
Reason from engineer team: Feasible and meets all requirements, but it can be improved.
Final Direction: Option 3. Change "Approve" to "Save" for accuracy. Add a "Save All Cards" option and a "Back" button. Reconsider the placement of text and numbers.
Finally, I asked the 3rd HWM:
HMW help businesses maintain efficiency and accuracy while ensuring our UI is as simple and clean as our competitors?
ACTION 3 - Promoting user Interface
Efficiency: Multi-card scanning and delete: quickly manage business cards.
Given the large number of contacts, we offer multi-card scanning, displayed like an album.
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.
You can save individual cards, select specific cards to save, or save all at once.
Not satisfied? Rescan the unsatisfactory cards. You can also edit inaccurate information or delete cards as needed.
Clean UI: Manual input option is retained.
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.
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.
Quick Actions allow fast interaction with contacts.
TAKEAWAYS
What I learn from this project
Let's connect!