Back
Product Design · Mobile · UX/UI

Smart Business Card, Networking Mobile App

Client
SendContact
Role
UX/UI Designer
Summary
UX/UI redesign for SendContact, an NFC-powered networking app that lets professionals create virtual business cards and share them via social media or physical smart cards. During development, poor user feedback cited a non-intuitive interface. I led a full UX process to simplify the experience and make virtual card creation approachable for non-tech-savvy users.
SendContact app hero — iPhone mockup displaying a virtual business card for John Brown, Photographer, with contact details and floating blue app icons against a dark background.

Problem

SendContact lets professionals create and share virtual business cards using NFC. During development, user testing showed the interface was difficult to use, especially for people less comfortable with technology.

Solution

I conducted competitive research and user analysis to find the main friction points, then redesigned the virtual card structure around a minimal, step-by-step creation process. The new interface supports a range of content types: image galleries, videos, audio, text blocks, documents, and social media links, without overwhelming the user.

I also added a guided creation flow that walked first-time users through building their first card step by step, making it easier to get started without prior experience.

Results

The project covered the full design process, from paper sketches to high-fidelity prototypes ready for development handoff. The redesigned app had a clearer card creation flow and a guided onboarding experience for new users.

The redesign addressed the main issues found in user feedback: profile creation, card building, and NFC sharing all became faster and easier to use.

Design Process

Low Fidelity Prototypes

After researching the market and aligning with the client on goals, I redesigned the virtual card structure from the ground up. The initial exploration focused on a minimal interface with a step-by-step creation process, allowing users to add different types of content, including image galleries, videos, audio, text blocks, documents, and social media links, without feeling overwhelmed.

Low-fidelity paper sketches — three hand-drawn diagrams: a mobile app flow overview, a personal info and contact screen wireframe, and a step-by-step guided virtual card creation flow. Wireframe flows — top section: Adding Content flow showing screens for adding media gallery and file types to a virtual card; bottom section: Managing a Virtual Card numbered flow (steps 5.5–6.6) covering menu navigation, deleting a cover image, gallery editing, name and address editing, and social media management.

Design Process Overview

The design evolved across four fidelity stages, from initial grayscale sketches and refined low-fidelity layouts, through mid-fidelity dark-themed screens, to the final high-fidelity UI with photography and refined interactions.

Design process overview — four stages arranged side by side: Low Fidelity (1) grayscale wireframe sketches, Low Fidelity (2) more refined wireframes, Mid Fidelity dark-themed screens with structured layouts, and High Fidelity polished screens with profile photos and blue UI elements.

High Fidelity Prototypes

Key Screens

The final high-fidelity design uses a dark visual style that fits the app's professional audience. Core screens include Login, the My Cards dashboard, the Virtual Card detail view, and the Scan Card NFC sharing screen.

High-fidelity key screens — four dark-themed iPhone mockups showing the Login screen, My Cards dashboard with a New Card button, Virtual Card detail for John Brown Photographer with profile photo and contact options, and the Scan Card NFC screen prompting the user to tap their phone.

Guided Virtual Card Creation

To reduce the friction first-time users experienced, I designed a guided creation flow that walks users step by step through building their first virtual card. Starting from an empty My Cards screen, users are prompted to add a cover image, fill in their name and details, and then progressively add content, making the process approachable regardless of technical background.

Guided virtual card creation flow — six dark-themed iPhone mockups showing the step-by-step process: empty My Cards screen with a create prompt, adding a cover image, adding full name and details, selecting a content type to add, adding media gallery items, and the completed card with a photo gallery.

Saving the Virtual Card into a Physical Card

Physical product in use — two hands holding a black SendContact NFC smart business card above a smartphone. The phone screen displays the Virtual Card view with an address map and a Scan Card overlay prompting the user to tap their device.

Virtual Card Features

Make a Lasting Impression — iPhone mockup showing a virtual card for Sophia Emily, Realtor, alongside a feature highlights grid listing Contact Info, Save Contact Button, Call And Email Button, Media Gallery, Social Media Links, Custom Links, and Address.

Usability Testing

I conducted usability testing to compare two approaches for creating a virtual card: adding sections one by one versus displaying all sections at once. Users completed the task successfully with both methods, but most preferred seeing all sections upfront.

Real-world usage — two candid photos of someone using the SendContact app: left shows a person tapping the NFC smart business card to a phone, right shows viewing the completed virtual card profile on the phone screen.

Changes made based on the users' feedback

Based on the user feedback from testing, I updated the card creation experience to show all content sections at once. This lets users start adding content right away and remove anything that does not apply to them.

New process for creating Virtual Cards:

  1. 1.Tap on 'New Card'
  2. 2.Enter information
  3. 3.Upload images, videos, and files
  4. 4.Start sharing your virtual card through social media or via Smart Virtual Cards.

Custom Icons and Illustrations

Add content type icon picker — six rounded-square icons representing the available virtual card content types: Photos (landscape image icon), Camera, Audio (microphone), Text (aA speech bubble), Music (musical notes), and Document. NFC sharing flow states — six circular phone illustrations showing the scan sequence: cover image display (blue), contact info screen, portfolio grid view, success confirmation (green checkmark), successful NFC tap (green smiley with NFC wave icon), and failed/error scan state (red).

Want to learn more about this project?
hello@irvingsuna.com