UX Case Study - Inhouse Network
Backstory

I am always interested in attending hackathons, meetups, conferences etc. as they provide a lot of exposure and I get to see what the awesome people in the community are doing.
Hackathons are my favourite among them as they are very fast paced and the excitement of delivering a minimal product or POC in a time constraint is a different feeling altogether. Apart from hours of designing, prototyping and coding, the best thing about them are the wonderful people who despite being in a competitive state are ready to help you out.
But then again, you don’t know who to reach out to for a specific skillset (say reactjs) in a swarm of people unless you’re a hyperactive social guy who talks to everyone in a short span of time. This inspired me to create a network of people in one of the hackathons conducted by the startup I’m currently working it.

Problem

People attending an event find it difficult to connect to similar minded people in a short span of time.

The Challenge

Create a functional webapp in 16 hrs, 8 hrs prior to the deadline of a 24 hr hackathon, to give attendees time to connect with each other.

Team

Me, Myself and I - the designer and developer

Plan

Design a visually appealing interface which attracts users to fill in their information. Also, keep it simple and easy. Given the time constraint I planned on using Google Forms to get user information and fetch data from the Google Sheets to populate on the interface.

Personas

At a broad level, there were 3 user personas.

User Personas

Initial Research
Results from the interviews

Before this hackathon, I interviewed a lot of people who actively attends these kinds of events and got to hear things like

  • “Being an introvert, it is always challenging for me to go to a team’s table and talk about the hack they are working on. You can usually find me sitting on my table for the entire span.”
  • “I don’t know who’s an experienced guy in AngularJS whom I can talk to for help”

Also, it was quite challenging for Hiring Managers at our startup to reach out to potential candidates given the large number.
People are never keen on filling survey forms until they get value from it. Thus a visual representation was required where they can get haptic feedback to their responses. (The Aesthetic Usability effect)

Finding the right connection

There are many factors as to which people might want to connect with others. These can be education institution, skill expertise, skill interests, organization etc.
For this hackathon, the most suitable was skill since most attendees were developers looking for learning or job opportunities.

Data Visualization

It started with a basic sketch on paper where I divided the app into 3 components.

  • Skill user aspires
  • Skill user masters
  • User Profile

which were to make the entire network. I had envisioned the network to be somewhat like stars connected to each other by an imaginary line in the universe (like the visual representation of constellations).

Initial Draft

I wanted to use d3 library to make the network but it renders static elements. On further researching, D3 force came to my rescue.
D3’s force layout uses a physics based simulator for positioning visual elements and these forces can be set up between elements.
Using d3 force directed graph, i tried to experiment with sample data and it was captivating.

Though it was looking good but it lacked insights. For example

  • Which all elements/users represented the mentors ?
  • Which is the most desired skill ?
  • There was no help guide for the users


To incorporate these, I added a help guide for the following insights

  • Size of bubble - No. of connections to a skill
  • Color of bubble - Attendee or Mentor
Setting up the backend

Now with visualization done, I needed to get the data from the users. Given the limited time, I chose our favourite Google Forms. For the POC purpose I needed only these data points

  • User Profile
  • Skill aspiring to learn
  • Skill expert at
  • Location (the table at which the user is sitting)

Next, I fetched the data from the Google Sheets using the api, manipulated the format to allow d3 to render the graph.

And it was set free

After setting up on github and initial testing, it was sent to all the attendees and in no time I could see the entire network growing. Thank God, it was still 4 hours to go for the deadline ! Phew !
I was very happy with the results and the entire process was an exhaustive but great experience.

Key Findings
  • People are really interested in finding themselves on the graph once they fill the form
  • Machine Learning and AI : the most aspired skills. (Looks like Elon Musk must be happy)
  • More set of features requested like social network integration, geolocation, chat feature, filters on the basis of skills
  • Playful visualization had people sticked to it.
Future Scope
  • Large Scale Implementation including regions or large organizations.
  • Interactive Data Visualization for different kinds of data.
  • Searching and Filtering capabilities.
  • Complete Profile of users.
  • Mobile app to find someone near you with a particular skillset using the gps location.

You can try the live version here