🦄 designer / developer
Nectar.png

Nectar

Nectar

 

I led a team to design Nectar, a web application that helps students at Virginia Tech connect and work on projects together based on skills that they have/need.

 
 

Problem

As president of Entrepreneur Club at Virginia Tech, the most frequent request I received was from somebody looking for another student with a particular skill. I would often hear, "Jordan, I'm working on this business idea, but I need someone who knows online marketing." The club created an event called Built With to solve this problem, but that event only happens once a semester. We wanted to create an ongoing solution to help students connect and collaborate on projects.

 

Initial Idea & MVP

Myself and the former VP of Entrepreneur Club at Virginia Tech (E-Club) came up with the idea in the fall of 2015.

The minimum viable product (MVP) of this idea was a large Google Sheet where we entered all the names and skills of those who attended Built With that semester. We dubbed it the Hokie Talent Pool. 

We then sent the link to the spreadsheet to the hundred plus who attended the event. E-Club served as the middleman for all connections.

screenshot of the  Hokie Talent Pool

screenshot of the Hokie Talent Pool

 

Initial findings

We saw a positive response to the idea and ~10 connection requests per semester. Though, it's possible we weren't able to track all connections (i.e. if you knew or knew of the person already, or used Facebook to connect).

 

Problems with the Hokie Talent Pool

- E-Club was the middle man, both in adding skills and providing connections
- A 200+ row spreadsheet was cumbersome to navigate

 
Nectar design and development team

Nectar design and development team

moving forward

In spring 2016, E-Club gave the idea more attention. The former VP of the club along with two underclass mentees, began building out the basic backend functionality that would be needed. Over the summer and fall of 2016 I led a group of designers for Nectar. During brainstorming and wire framing, both developers and designers worked together.

Brainstorming

As a team we held multiple (4-6) brainstorming sessions where we discussed and worked on
- goals of the product
- needed & desired features
- branding of the product
- wireframes
- aesthetics of the UI

IMG_7370.jpg

Wireframes

As a team, we wireframed the flow of the application on white board, then produced more detailed wireframes using Balsamiq.

ThE UI Style

I had the idea to keep the visual style of Nectar bare, white, and plain. I got this idea after talking with a designer at my summer internship about how every element in an interface competes for a user's attention. By removing attention from other UI elements and keeping Nectar plain, we could use color exclusively for the skills. The skills would not be competing with anything else; all the attention would be on them.

There was also a deeper, symbolic meaning I was trying to create. Think of the website as a blank canvas. It's only once skills are added to the site that it starts to become something special. Similarly, once people with the proper skills are added to a project or business idea, it can become something truly great.

Lastly, being a developer myself, I liked this style. I wanted something that looked good, but would be easy to build.

5. Homepage.png
 

Full DesignS

 

Current Status

An alpha version of the site was launched spring 2017. It's still under development and there are current talks for Nectar to become a separate entity from Entrepreneur Club and receive university sponsorship and engineering mentorship from a local company.

You can test it at www.nectar.build