Digital Business Cards

Company Name: Vipa Corporation | Project Duration: 2 weeks | Role: UX/UI Designer

Project mockup with mobile application and card

The product

Vipa Digital Card is a product designed to read a QR Code or use NFC from a physical card in order to exchange a business contact. The product was created as an inside project for the Vipa Corporation group as a way to facilitate connections in conferences with prospective clients and partnerships.

Problem statement

As a company with a variety of services and branched out companies, handing out the traditional paper business cards was not scalable. Information can change and staff moves around, resulting in tossing out the paper business cards, which is a huge cost on the resources and quiet inefficient.

Paper business cards still serve a purpose for exchanging information quickly, however besides the obvious printing costs they are easily forgettable, often tossed out and lost amongst other business cards.

Needs assessment

  • Mainly as a tech company, we wanted to be able to quickly convey to clients/partners that we are working towards adapting the traditional solutions into a more sustainable process;
  • We wanted to be able to reduce on paper/printing costs for all the services we provide;
  • We wanted to be remembered in conferences and meetings by handing out our contact information as quickly and efficiently possible, while keeping our branding interesting and fresh.

The solution

After assessing the company needs, we decided to tackle the following use cases:

  1. Create business cards with company information;
  2. Create business cards with staff information;
  3. Change contact information easily while recycling our resources as much as possible.

To cover .1 and .2 we decided to create two separate types of card. Card no1 would contain all the general company details such as:

  • Logotype;
  • Company name;
  • Company slogan;
  • Phone number;
  • Website
  • Company email address;
  • Physical address;
  • Social media links.

Card no2 included information from previous card and also more specific information about the company member, such as:

  • Company Role (CEO, HR, Developer, etc.);
  • Both company's phone number and personal mobile number;
  • Work email address.

To cover .3 we opted for having a QR Code image to read from. This approach worked well because even if any contact details were changed in the database we could recycle the same QR Code.

Design and implementation

Upon deciding on what contact details we wanted to use and how we wanted to exchange the business card information, we started to work on the design and implementation of the project.

We knew that we wanted:

  • Each card type to have at least one physical card containing relevant small information such as the company name, person's role and name, contact and the QR Code.
  • Besides using the QR Code, to also use RF-ID cards to enable exchanging the contact using NFC.

Once the QR Code was scanned it would take the user to a contact page with all the company/staff details, in which the user only had to press “Add as a new contact” and the contact information would be automatically added to the user’s contact list.

We also tested this solution with an RF-ID card which would open the contact info upon touching the card with a mobile phone, provided that the NFC was enabled.

I used Figma to build the interface and create the components for the developers team. The interface uses a list component for the contact details, along with icons to give more contextual cues to the user.

Component library for the application prototype
Figma component library for development hand-off.

After building the components it was easier to create a simple prototype and the overal look and feel of the app. The colors of the elements could be changed according to the company branding to have a more personal touch.

Mobile mockup with detail explanation
Final prototype and details of the app.

Final design shots

We created the printed card version along with the app. The card contains the sumarized information from the contact, and the QR Code to be read during the contact exchange.

Screenshot with the final design for the mobile app and printed cards
Final app and card design for the company and staff members.

Learned lessons and future implementations

With this project I learned that:

  • The approach we used lead to a more interesting way to exchange a business contact (people showed curiosity towards this approach and were excited about getting our contact in a new way);
  • In this format we can properly benefit from sharing all the relevant contact information while not compromising readability on a small printed card.

For the future I would consider:

  • Including the Phonetic name as an option.
  • Create more inclusive options such as pronouns that the contact prefers to be referred to as;
  • Give the user alternative options to share a contact, for example reading the QR code directly from the phone.