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
banner6
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.

banner7

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.

scan2
card2

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.
contacts2
company2
profile_con2_2
profile_con2_1

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.
info

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.
connection

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.

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.

recycle
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.

photo-1513710281312-7a43f9cdbfcc

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.

5eebd73d1918244c9162a297
04 - Sketches
p3

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.

p1
p2

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 profile

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 profile

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.

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.

wfflow1
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.

layout1 jia
layout2 jia
layout3 jia
layout4 jia

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.

Screenshot_20210224-123917
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.

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
layout5_1

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.

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.

layout5_2
layout5_3
layout5_4
layout5_5

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.
Legibility

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.

Keep exploring 🚀

forbes

01 - Forbes

ABC

03 - ABC of Emotion

Lets Chat!

johnkeefedesign@gmail.com

Lets Chat!

johnkeefedesign@gmail.com

© 2021 John Keefe
 

ig
li
photo