iOS Business Cards App Design

MY ROLE

UI Design

User Research

Workflow planning

PROJECT

Personal project

TIMELINE

Three weeks (2023)

Overview

In the past, I have found that people around me facing inconvenience while organising business cards. From the earlier practice of scanning them into the computer to the current widespread use of smartphones, I've been contemplating whether it's possible to integrate business cards into a digital format for more versatile use. Therefore, I have decided to design an iOS built-in app that allows users to edit, organise, and share business cards. This way, it can enhance users' efficiency in managing their business cards, leaving them more time for themselves. Additionally, it can reduce paper usage, contributing to environmental conservation efforts.

Project Background

Problem Statement

There are numerous tools available for organizing business cards nowadays, whether physical machines or various apps. However, there lacks a unified platform for users to share and exchange business cards. Organising and searching for physical business cards, such as those kept in a cardholder, can be quite inconvenient, requiring flipping through them one by one. While apps have addressed the physical aspect, they come with some additional concerns.

Firstly, some apps impose limits on the total number of business cards that can be stored, restricting users. Secondly, there are data backup issues, as some apps require manual backups. If a user loses their device or it gets stolen, their stored business card data can be lost. Therefore, I began to think whether a unified app could alleviate users' difficulties in organizing business cards. With a systematic approach to managing these cards, could it potentially encourage more interactions and networking?

User Research

Mobile operating System:

There are two major mobile operating systems in the market, which are iOS and Android. iOS is exclusively available for Apple products, while Android is used more widely across various brands, including Samsung, Google, Huawei, Xiaomi, and others. Consequently, in terms of design, iOS devices have a more consistent form factor. Designing for Android, on the other hand, require responsive design adjustments for different smartphone brands, which can result in a longer development period.

According to a survey by Statista in 2023, iOS is particularly popular among the younger generation. Approximately 35% of those born between 1980 and 1994 use iOS, and the usage rate among the Generation Z is around 31%. Users within these age brackets are typically between 23 to 43 years old, which is a prime age for career development and also represents a demographic with a high level of tech-savviness and acceptance of new technologies.

Interview:

A total of 10 participants were interviewed, with an equal split between males and females. Their ages ranged from 25 to 55 years old. The interviews lasted approximately 15 minutes each. All 10 participants were iOS users. These participants came from diverse industries, including both junior to the workforce and individuals in managerial positions.

I decided to conduct in-depth interview as I would like to understand the respondents' thoughts about business cards and their expectations from the app. Interview questions follow interview guidelines, and some probes questions are added depending on interviewees' responses.

Some examples of interview questions are shown as follows:

Do you remember when you got your first business card? How do you feel?
Do you usually organise business cards? ( If yes, how do you organise them? If no, won't you look back those business cards in the future?)
What do you think about digital business cards?
Which kinds of business card would you like, Paper one or digital one?
What if iOS were to provide a built-in app for managing business cards? what is your thought?
What functions would you expect or you wish to have in the app?

Based on the responses, two main problems are found:

Organising physical business cards takes a lot of time, and it can be challenging to find a specific card when needed. Moreover, it's impractical to carry all business cards at all times.
Currently, available physical business card apps still rely on "physical business cards" as a medium rather than exchanging information in a purely digital form. It's not possible to directly transfer one's business card information to the recipient's device.

The following are the key takeaways from the interview:

The need for organizing business cards and the quantity of received business cards is various from industries and individuals' positions.
Most participants expressed a positive willingness to use digital business cards, and "organise" is the most mentioned anticipated features.
Younger participants showed a higher inclination to use apps for managing business cards compared to older participants. However, older participants also mentioned that they would use the app if it could be user-friendly.
Some interviewees expressed concern about the environmental impact of disposing of unused, scanned, or unwanted business cards.

Persona:

According to the interviewees, the persona are summarised as follow:

Goals

Based on the above findings, I concluded two main design directions:

The app must be convenient and easy to learn; otherwise, it won't effectively reduce the time users spend on organizing business cards.

1

If it's possible to share personal contact information instantly, there would no longer be a need for physical business cards as a medium. Instant sharing would also contribute to environmental conservation goals.

2

Ideate

A. Information structure

▲ Business Card App information structure

B. Wireframe

Interface Design

A. Design kit

B. UI Design

1. App icon & Widgets

App icon is designed in the style of business cards

▲

The reason I decided to design widgets is to enable quick sharing of business cards. Users can add this widget to their home page and, by clicking on the widget, open AirDrop and navigate to the page to share their personal business cards. The colour of the widget (e.g., blue) will match the colour selected for "My Card."

▲

2. Library - All cards

App Default Page

All received business cards are displayed in the Library, arranged in chronological order. Business cards on this page display only the most essential information: name, company, and job title to maintain a neat layout. Other details can be viewed by clicking on the card.

Search Field: Users can enter any keyword, such as last name, first name, company name, etc.
Add New Card: Click on the circle in the upper right corner. Users can manually input the information or scan the cards to save time on typing information.
Select: Select a card to share, delete, or add to a label.

Add new card by typing information themselves

The deisgn is similar with the Scan Documents in Notes, which is to reduce users extra learning time.

Put the card in the yellow frame and take a photo, system will automatically detect the text and build card information.

Users can also upload photos (down left corner) via photo library.

▲

Select the desired labels to display. If the filtering criteria are enabled, the results will only show business cards that fully match both selected labels. In this example, the displayed business cards must have both "Sales" and "Friends" labels simultaneously.

▲

Received business cards page

The tagged label will display at the top of the card. (e.g. Banking)
Cards all information will show in this page, the social media icon can be clicked and linked to the specific platform.
Notes: These will be displayed separately below the card information. The separation is intended to ensure that when sharing a business card, the notes will not be shared simultaneously, preserving the privacy of the user's annotations.

▲

3. Label List

Labels that users created will be displayed on this page. A single business card can be tagged with more than one label, allowing users to customise their categorisation.

Search: Users can quickly find specific business cards.

Add Label: Click on the plus icon in the upper right corner to create a new label.

▲

Add New Label: Select colour and enter the label's title.

▲

Users can add additional labels on selected cards or move them to other labels.

▲

Label page will show all the cards that are tagged with this label (e.g. Sales). Users can click the upper right icon to add new cards to this label, also can edit, share and delete the label.

4. My Card

A simple interface with a share button in the top right corner allows users to share their business cards quickly. Clicking on the bottom right corner of the card allows users to edit their personal information.

Receiver page

▲

C. Prototype

cards

Add card manually

Scan Card

▲

Scan card

edit card information

Users can search cards base on label

▲

Label List

▲

Select / Cancel cards

Move cards

Filter

Add new label

My Card

▲

Edit my card

Share my card

Takeaways

This project made me go through the process of designing an app. I learned to identify user needs and design direction from statistical data and interviews, and I went thoroughly from conducting user research to designing the user interface. I realized the importance of constantly considering workflow fluency and usability. If there were more time, I would have liked to invite users to prototype testing to ensure the final product aligns better with user needs. I also hope to add a Dark mode to the app to better match the style of iOS.

Alison lin