White Block.png
 
Real Copy 5.png
 
White Block.png

QuickCard

QuickCard is a passkit-based iOS app that allows users to share their networking details with people they meet directly from their apple wallet.

Design Challenge

The OBJECTIVE

Make networking more manageable for working professionals that are in the midst of changing their career.

Tools

Paper & Pen, Photoshop, Sketch and Principle

 
White Block.png
Page Break.png
White Block.png
 
The Process.png
 
White Block.png
Page Break.png
White Block.png

Define

Business cards are still used as a legacy way to connect with new people, even after the introduction of LinkedIn, due to their low-barrier of use but they are not without their limitations. While cost is not inherently a problem for physical business cards, unless one gets really fancy cards, the issue is their static nature. Buying physical cards does not allow a user to update the information contained on them without having to buy completely new cards. This is not a problem for people that have a set job and are not looking to change their career, but even then they are still limited by how many cards they purchased. Creating a digital version of a business card would alleviate these two issues by allowing users to update their information on a whim while not having to worry about how many cards they have left.

White Block.png
Cards.png

The Lens

As someone who is currently in the process of looking for a job in the tech industry, I am faced with figuring out the best way to network myself. While I was lucky to be given physical cards upon graduating from BrainStation, these cards only provide a static snapchat of my career as a designer, as they do not evolve with me as I further my career. Not to mention, these cards do not have a link to my portfolio which gives a better idea of who I am as a designer. Since I now view myself as being more aligned as a product designer, rather than a UI/UX Designer, I now question whether I should invest in new cards or just mention what I am more interested in. Should I wait for my current stack to run out before I invest in new ones?

White Block.png
Page Break.png
 
 

How might we make networking for a career more manageable and dynamic?

- Design Question

 
 
Page+Break+3.png
White Block.png

Frame

In order for a digital business card to be feasible, it would need to be as versatile as its physical counterpart. This means it would have to be capable of being transferred to another person at a moments notice, stored by that person, and then accessed by that person so that they can reach out to the original transferee. The clear barrier that comes to mind with a digital business card is the need for both parties to have the downloaded app in order to connect with one another. With a physical business card both parties only need a wallet, or a pocket really, to store these details. Luckily, anyone with an iPhone comes with a digital wallet known as Apple wallet that can store cards and passes in a similar way to how a physical business card functions. A full breakdown of how this experience would likely function can be viewed below:

White Block.png
Double New.gif

How it is Used

Integrating this digital business card into the Apple wallet ecosystem makes sense as it connects to a familiar place users would typically store a physical business card, so this would be a natural place to look for a digital equivalent. Furthermore, with the introduction of Apple pay and tap payments, along with Apple’s increased focus on this space with the upcoming Apple card and Apple cash coming to other countries, this space has been gaining traction over the years and will continue to do so. Due to this, users are becoming more familiar with how to access their cards or passes within the Apple wallet and are doing so at an increasing rate.

White Block.png
What it Does.gif

What it Does

When a user completes a transaction with their apple wallet, the most recent transaction is displayed below the card used to indicate information about the transaction and to allow the user to know that the transaction went through. Using this as a template, when a user shares their pass with someone they met, that person’s information could be pulled server side and be displayed within a user’s pass. Like the transaction example, this would allow the user to quickly view details on the person they just met and would additionally serve as a confirmation that the details were exchanged between the two parties.

White Block.png
Share Pass.gif

How it Works

Using the Starbucks pass as a template for what a pass-kit based app can do, I envision that this digital card could be shared through either a QR code on the main screen or through additional methods, primarily airdrop, when the more option is accessed. While sharing one's networking details would be nice through the same NFC technology that powers the tap functionality of payments through this space, iPhone's before the latest iPhone Xs models are unable to read NFC tags in the background and instead require a dedicated QR reader app. Due to this, supporting more legacy methods of sharing information would be more accessible to more users at this point in time.

Blank Space.png
Get App.gif

How it Adapts

Using the Starbucks pass once again as a template, when a user shares their pass to a friend, the exact pass is duplicated and stored in their friends’ wallet. Accessing this pass as the friend prompts the user to download the full app (that is connected to pass) if they don’t currently have the app themselves. This is important for this digital card experience as it allows a user to send and store their details in another person’s phone who doesn’t have the app while opening up the ability for that person to become a user so that they are able to do the same.

White Block.png
Page Break.png
White Block.png

Refine

The closest experience to how this digital business card would function can be seen through the Student ID badges that can be connected to the Apple wallet ecosystem through the eAccounts mobile app. Apps that are currently available that solve this specific problem, such as CamCard, scan pre-existing business cards to add to an index of users rather than seek to create a fully digital card. Using the Student ID badges as a template for a digital business card, and CamCard for the type of features a user would likely expect this experience to have, this product would provide the following value to our users:

White Block.png
Update Anytime.png

UPDATE ANYTIME

Unlike physical business cards, the details contained on this digital card can be changed whenever a user wants without the start-up costs of printing and then waiting for new cards to arrive. Additionally, this digital card could contain more data than a traditional card without the need to manually input the contact details as this responsibility could be delegated to a button.

White Block.png
Ease of Access.png

EASE OF ACCESS

Apple wallet is an easily accessible space from anywhere on the iPhone. By double tapping the power button, opening up the wallet shortcut through the control center, or even just accessing the standard app on the home screen, there are plenty of methods to get to one's digital card at a moment’s notice.

White Block.png
Analytics.png

Trackable Metrics

Did the person actually check out your business card or was it neglected? With a digital business cards, data such as whether a person checked out your portfolio or viewed your experiences can be sent back to the original user to let them know how effective their business card actually is.

White Block.png
Page Break.png
White Block.png

Sketch

Designing this experience with the Apple wallet ecosystem provided clear constraints on what the general structure and features that would be allowed. When drawing out these sketches, I made sure to only use designs and features that already existed for Apple wallet passes and cards. It is worth mentioning that these sketches are based on a previous version of Apple wallet as the app was updated after I finished my sketches.

White Block.png
QuickCard Drawings.png
White Block.png
Page Break.png
White Block.png

Design

Using all the information above, and the rough sketches I made, I created a quick mockup of how a user would interact with this experience. The specific task that I focused on was a user opening their Apple wallet from the lock screen so that they could share their networking details with someone they just met at a networking event. I decided to focus on this specific task as it would showcase how quickly a user could share their details at a moments notice (from the lock screen) and then view the details of the person of they just met without having to navigate their phone. The full task flow can be seen below:

White Block.png

Step 1: OPEN Apple WALLET

From any screen on the iPhone a user can double tap their power button, swipe down on their control centre or select the wallet app to quickly access their Apple wallet that contains their QuickCard.

White Block.png
 
Open Wallet.png
 
White Block.png

Step 2: Select QuickCard Pass

Once in their Apple wallet, a user can tap their QuickCard to be presented with the full view of the pass. The user can share their pass to their intended audience directly with a scan-able QR code, or continue with the “more” button to see more options.

White Block.png
 
Select Pass.png
 
White Block.png

Step 3: VIEW MORE OPTIONS

After tapping the “more” button, users are presented with a variety of additional options. Users can adjust how the app interacts with them in the way of notifications, how the information they are providing is updated or even access the standalone QuickCard app for the full range of features.

White Block.png
 
More Options.png
 
White Block.png

Step 4: SHARE WITH AIRDROP

If a user wants to share their networking information without their intended audience having to go to their camera app (on iPhone) or a QR-scanning app, they can do so with the “share card” button. Pressing this gives the user a variety of ways to share their details over channels that may be more frequented by their intended audience.

White Block.png
 
Share Pass.png
 
White Block.png

Step 5: VIEW New CONTACT

Once the user has shared their networking details with their intended audience through airdrop, both parties will be able to view the exchanged passes through the “recent interaction” section. By tapping this section, the user can learn more about their new contact as well as reach out with social links that the other party has linked.

White Block.png
 
View Contact.png
 
White Block.png
Page Break 3.png
White Block.png

Scale

The experience I focused on for this design challenges was the sharing of networking details between two people, but the standalone app experience that enables this experience to exist still needs to be designed. Building off of what the pass-kit portion seeks to accomplish, the type of features that the standalone app would need to enhance this experience would be the following:

White Block.png
Discover Logo.png

Discover NETWORKING OPPORTUNITIES

If the ultimate goal of this app is to help people network, the next logical step is to connect users with opportunities where they are most likely to meet people they want to network with. The standalone app would help a user find events or meetups where they can meet more people to grow their network.

White Block.png
Network.png

Store All Interactions

As it is currently setup, users are only able to view their most recent interaction. By downloading the full-app, users would be able to store, filter and search through all their interactions. Limiting the Apple wallet cap to the most recent, rather than all interactions, further promotes a user to actually download the full app at the risk of losing the details of a person they met.

Blank Space.png
Shareable.png

Edit SharEable Content

Ideally being able to connect to one’s LinkedIn and pull data from their API would be the best for a seamless experience. However, in the case that a user doesn’t have a LinkedIn accounts or LinkedIn as a company doesn’t allow this app to pull data from their API, users would need a way to manually add content they want to share with the people they are connecting with.

Blank Space.png