NECT
Bringing accessibility and reducing clutter to the business environment.
Project
UX/UI + Augmented Reality
Roles: Concepting, Visual Effects, Visual Design, Coding (Independent)
Timeline: 4 Weeks, Spring 2021
Tools Used: Figma, Cinema 4D, After Effects
00 - Project Overview
Problem
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.
Outcome
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.
Gains
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.
Challenges
Accessibility in Augmented Reality
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.
No Scifi
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.
Augmented Reality
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.
Easy to Share
Card scanning of QR codes on the back of the business cards allows users to share experience and contact information quickly and easily.
Building a Network
All scanned cards are entered into an app-based network giving one the ability to not only find people but also retain them. Contacts are saved as both people and companies.
Micro Interactions
I decided that I wanted to have more sliding motions in the game as opposed to taps. This adds a greater level of player interaction. It also gives the player a greater eye candy.
Personal Mark
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.
01 - Problems
01 - Clutter
Many business cards and resumes are collected at career fairs, but that leads to a lot of office space being taken up.
02 - Lack of Information
Business cards are small and easy to carry but lack information. Resumes have more information but are a pain to carry around.
03 - No Connection
The resumes and business cards collected have no connection to common social media apps and websites.
04 - Not Eco Friendly
The mass amount of printing using ink and paper eats away at the earth's natural resources.
02 - Goals
01 - Informative
Make sure that even though the format is small it gives as much information as possible.
Micro Interactions
I decided that I wanted to have more sliding motions in the game as opposed to taps. This adds a greater level of player interaction. It also gives the player a greater eye candy.
02 - Make a Connection
Create a stronger correlation between the printed material and the digital experience.
Micro Interactions
I decided that I wanted to have more sliding motions in the game as opposed to taps. This adds a greater level of player interaction. It also gives the player a greater eye candy.
03 - Reduce 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.
Micro Interactions
I decided that I wanted to have more sliding motions in the game as opposed to taps. This adds a greater level of player interaction. It also gives the player a greater eye candy.
03 - Solutions
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.
04 - Sketches
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.
05 - User Stories
Jia Chunhua - Potential Applicant
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.
Micro Interactions
I decided that I wanted to have more sliding motions in the game as opposed to taps. This adds a greater level of player interaction. It also gives the player a greater eye candy.
Kenneth Ramsay - Recruiter
Kenneth wants a quick way to gather information about possible applicants. He also doesn't want too much clutter later on either.
Micro Interactions
I decided that I wanted to have more sliding motions in the game as opposed to taps. This adds a greater level of player interaction. It also gives the player a greater eye candy.
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.
06 - User Testing
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.
Problems
Issues With Full-sized Display
After testing I came up with a few consistent problems.
01 - Overwhelming Information
There was too much info on the screen leading to no piece of information standing out or being especially readable.
02 - Spread Out
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.
03 - Desync
There was a problem with the camera having to look away from the trigger turning to experience off.
04 - Hard to Touch
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.
07 - Fixing User Issues
More Professional Display
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.
Micro Interactions
I decided that I wanted to have more sliding motions in the game as opposed to taps. This adds a greater level of player interaction. It also gives the player a greater eye candy.
Legibility
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.
Micro Interactions
I decided that I wanted to have more sliding motions in the game as opposed to taps. This adds a greater level of player interaction. It also gives the player a greater eye candy.
Gaze Based Interaction
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.
Micro Interactions
I decided that I wanted to have more sliding motions in the game as opposed to taps. This adds a greater level of player interaction. It also gives the player a greater eye candy.
08 - If I Had More Time
01 - Overwhelming Information
It would have helped to show how one makes and customize their profile to flesh out the process of using NECT.
Micro Interactions
I decided that I wanted to have more sliding motions in the game as opposed to taps. This adds a greater level of player interaction. It also gives the player a greater eye candy.
02 - More Options For Recruiters
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.
Micro Interactions
I decided that I wanted to have more sliding motions in the game as opposed to taps. This adds a greater level of player interaction. It also gives the player a greater eye candy.
Lets Chat!
johnkeefedesign@gmail.com
Lets Chat!
johnkeefedesign@gmail.com
© 2021 John Keefe
