People collect dozens of business cards every year that all end up either taking up space or being throw out within a week of being printed. Seeing this problem I decided to create a project that streamlines the meeting and exchanging of contact information process and limits that amount of human waste.
Round 1: I made a resume in Unity to test out my idea with a real card. After that, I did a few tests with 4 people and got notes on their feelings about that iteration of the design and the issues with accessibility.
Round 2: I revised my design into a completely different form to accommodate the accessibility issues that were brought up in the earlier version. The final deliverables include wireframes, high fidelity comps of both the phone app and the augmented reality screens, and finally a motion graphics piece.
This opportunity allowed me to practice both my UI/UX and motion design skills. This project also gave me a chance to practice making augmented reality products and learning the processes of making them usable and not just a cool piece of technology.
Augmented Reality is a new field of development and I had to do a lot of testing and research to see what not only I found would be comfortable, but also what less experienced users would find cosy.
For this project, I wanted to tie the design of the product to what is possible with available software. I had to learn a lot of the Unity Game Engine to make simple prototypes that show my design is very achievable and not just sci-fiction.
NECT uses Augmented Reality to take the small amount of information that is on a card and expands it to give as much information as a full resume or online profile. Both taps and gaze interaction are used to explore the application.
Card scanning of QR codes on the back of the business cards allows users to share experience and contact information quickly and easily.
Create your page with your contacts, skills, experience, and more. Show the best side of yourself to others in hopes of moving up in the world.
Many business cards and resumes are collected at career fairs, but that leads to a lot of office space being taken up.
Business cards are small and easy to carry but lack information. Resumes have more information but are a pain to carry around.
The resumes and business cards collected have no connection to common social media apps and websites.
The mass amount of printing using ink and paper eats away at the earth's natural resources.
Make sure that even though the format is small it gives as much information as possible.
Create a stronger correlation between the printed material and the digital experience.
Eliminate the cycle of printing and throwing away paper and ink. Limit to only printing a few times. 10,000,000,000 business cards are printed every year, and within a week of being made 88% of them are thrown out leading to an enormous amount of waste.
Eliminate the cycle of printing and throwing away paper and ink. Limit to only printing a few times. 10,000,000,000 business cards are printed every year, and within a week of being made 88% of them are thrown out leading to an enormous amount of waste.
Create an Augmented reality experience that expands the small amount of information that is present on a business card. This card would be reusable and would not require one to hand off one card to every contact that one meets.
All that would be required to make a connection would be to take your card and to let someone else scan it. This all leads to a process where one does not have to hand out a different card to everyone, just keep the one you have and keep reusing it.
I drafted a system where one can either have a digital card for someone to scan or one can scan someone else's card in the form of a QR code. The process can be compared to a system similar to Snapchat, bringing the quickness of scanning to the world of business.
I sketched out an initial user flow to map out how I anticipated the app to work. This also told me what screens I would need to make.
For my first attempt, I found that pointing the camera at a card to make a display with all the information all at once might meet my goals.
At this stage, I also come up with the idea of having a personal code that you can scan in the phone app.
Jia is a cybersecurity expert that wants to show employers her experience as well as that she has been keeping up with new technologies using NECT.
Kenneth wants a quick way to gather information about possible applicants. He also doesn't want too much clutter later on either.
Kenneth wants a quick way to gather information about possible applicants. He also doesn't want too much clutter later on either.
I created a user flow to clear up in my mind how Jia and Kenneth may interact with each other and how one can move through the experience. This process also allowed me to create wireframes to build the architecture of my user interface.
To test out the usability of my initial idea I used Jia's resume and came up with a few layouts that displayed all the information at once.
After I came up with my personas I put Jia resume into Unity to test out my design. This was to test the viability of the technology, but also to see if any issues with the current idea.
After testing I came up with a few consistent problems.
There was too much info on the screen leading to no piece of information standing out or being especially readable.
To be able to read certain parts of the resume users would have to tilt the card and phone to make it visible in the viewport.
There was a problem with the camera having to look away from the trigger turning to experience off.
As one hand is holding the card and the other is holding the phone that leaves no hands available for solely touching the screen leading to accessibility issues for some users.
As one hand is holding the card and the other is holding the phone that leaves no hands available for solely touching the screen leading to accessibility issues for some users.
To solve the issues with the first 3 problems, I redesigned the experience to have multiple categories so that only a small amount of information is shown at a time. Also, this leads to the camera always pointing directly onto the card stopping desync.
The black transparent background was cut because it leads to the body copy being harder to read. Type would overlay with the background causing it to blend in. The white background with the new design made reading the applicants information a non-issue.
To solve the issues of unaccessible interaction for users with less able hands and wrists I designed a hands-free system of navigation. My hands-free solution is to have little buttons on the side that can be tapped but can also trigger the function by having them in the middle of the screen for a second. This allows a user to simply look at the screen and move to the next bit of information.
It would have helped to show how one makes and customize their profile to flesh out the process of using NECT.
Part of the application's use is for recruiters to find qualified candidates. I didn’t have the time to connect with recruiters and figure out what they need in more depth unfortunately.