Project Connect

Project Connect Cover Photo

expand Universities in working together for a common goal for compensation and experience.


I created a website that targets college students to work together on projects with other students that are in their University or outside of their University. Aimed to network, receive payment, get experience, and build portfolio-worthy work. One of the biggest challenges I faced was figuring out the right and most beneficial way for students to get behind this platform that can help them succeed with their goals and compete with others. It was a big hurdle that we eventually were able to figure out. In the end, I designed a prototype that answered any problems and challenges for students and worked on proejcts for experience and compensation. We created a platform to help students like me work with others to network and build a portfolio and experience that can help them find a job in that field.

Step One: Market Analysis


Looking through the market, I noticed various platforms resonating with what project connect wants to accomplish. I found many choices that can compete alongside Project Connect, but one of the key differences is that we are pushing to aim toward students either going to college for the first time or getting back into the groove. I also wanted to make this platform a way of helping students get compensated and the experience required for potential job offers. Project Connect is what I want to push and make a difference amongst our competitors and shape up not only our target audience but also the stakeholders.

I found numerous great websites that rivaled Project Connect that were useful and usable designs. But decided to trim off and focus on two great websites that would compete against Project Connect. The two primary competitors in the market were Upwork, a freelancing service for professionals. The other competitor is Handshake, a platform aimed at helping college students find work or internships in their field of study. Both platforms worked seriously, and each had a purpose that helped their target groups. Project Connect aims to be freelancing designed for college students, helping them build a portfolio to show potential clients. Project Connect has a similar idea that makes them competitors in our market. Our goal was to distinguish what made Upwork and Handshake work so well and find the other aspects that could have worked better to build a website that allowed students to work together and help each other with a particular part of that project. I created the pros and cons of each Upwork and Handshake, telling you what worked and what didn't. To see more, click this link here.

criterion table This is a criterion table I made for Project Connect

Once I gathered more information on both competitors using the pros and cons list, I made a criterion table that helped us evaluate what each website had that worked and what were some things that were missing. If the website contained content we wanted to add, we put down a one, and if it did not have that content, I would put down a zero. I would add everything up into a percentage of that row. After creating my criterion table, Upwork contained content we wanted to add, like users getting paid, history of work, and payment method. For Handshake, It had Events for students and see user profiles. Both included users finding jobs, reviews, and portfolios. Making this table helped mold what to create inside the website that needed to be added or worked from both competitors.

Step Two: User Research


The most important aspect of this study is identifying the main audience group that will use project connect. Though we already know we are targetting college students, that is a vague audience as there are numerous major groups, age groups, and goals. My focus was not to target students that majored in any medical or law degree major, but targetting students that are majoring in digital media, art, writing, and computer science. These are the majors I wanted to shift my attention to and focus on students that can fit within those criteria regardless of age and goal.

first year students

First-year students going to college

One of our bigger target audience are students who have just graduated from high school and will enter college or a university in their first year. This group will range from 18 years primarily to students going to college for the first time over 18 years old. This audience is a focus group that we wanted to shift our attention to when creating Project Connect.

Students in college

Students in college

This target group is students who have already passed their general studies and have moved into focusing on one of the leading six roles Project Connect provides. This student would be our primary audience group, as they have figured out what they will major in and can use this platform to grow their portfolio in hopes of a job or as a side gig until they get their degree.

adults

Adults going back to college

This focus group is for older students who are getting back to college. This group can range from adults in their mid-20s to late 30s who want to get back into college after an extended break. Project Connect helps build a platform that can cater to this group and build a solid portfolio to expand on their resume.

Once I found the main user groups, I create an empathy map that will help me better understand a user and what they are thinking, feeling, saying, and doing. Let me give you an example of a potential user.

Empathy Map an empathy map helping me understand a certain type of user.

Alan Wright is majoring in web design and just recently completed his general course to move on, focusing on his upper-level classes in his field. Alan wants to find an internship but only has two projects so far. Alan knows he will add more as time goes on in his University, but he still wants to find an internship in his field. The only thing with Alan is that he lives with his roommates and needs to pay his portion of the bills, so he has to work full-time to do that. Alan only knows a few people and classifies himself as introverted. Alan does not have time but is still looking for an internship that can be paid and cut down his hours at work. This empathy map showcases that there can be guys like Alan who are going to college and have to work full-time and may need to be more extroverted to network with people. What if I can build towards people like Alan that can network with others without needing to speak with them in person and find projects that he can work at the comfort of his own home and get paid while doing it? That's an example of a user benefitting from Project Connect.


User Profiles
User Profile One
User Profile Two

While I have created the user profile, I want to design a SWOT Analysis that will help me understand the business aspect of Project Connect, like Strengths, Weaknesses, Opportunities, and Threats. Making the SWOT Analysis will help me diagnose realistic problems that can face Project Connect and also excellent reasons why it will function.

Strength

  • Students can network with students in the same field.
  • Students can work together on projects like in a classroom but utilize the skills they know and get help from another student who is more skilled in that other area.
  • Build projects that can help them with their portfolio.
  • Get paid and be used as a side gig for students who need to work full time but also try and build their portfolio.

Weakness

  • It can be difficult for students to get paid, especially by other students in the same boat.
  • Competition can be intense against Linkedin and Upwork for connections and freelancing.
  • Our target audience can limit us since Project Connect is only focused on digital media, business, and art.
  • Ensure students use this only for projects and not anything personal or unrelated.

Opportunities

  • An idea centered around helping college students land internships and jobs by working with others or separately on projects they can use for portfolios.
  • A platform that combines freelancing and networking by helping students find what they are looking for and expand their skills.
  • Students can work with students in their University or expand with other universities.
  • Not just for young students but older students who are looking to expand their portfolio and are getting into college later.

Threat

  • Cat fishers trying to use this platform to meet people that are in college.
  • Competition can expand their ideas, aim toward college students, and even expand their studies.
  • Different age groups can cause issues with people since the target audience is college students. This can range from 18 to 40-year-olds.

Step Three: Wireframes & Site Map


As Steve Jobs once said, "Design is not just what it looks like and feels like. Design is how it works." I know how important a design looks, but is very important that a design WORKS. Before designing my website, I like to create a black-and-white mid-fidelity design that will help show the client how the website will flow. This will help me lay the ground work to eventually add color, content, and graphics. To see the complete mid-fidelity design, click this link here!


Page Structure


Information Architecture Page

I begin constructing now that I've created an identity of who Project Connect is for. I first start making the information architecture, which helps me break down what will go inside each website page and their relationship with one another. I started creating the landing section: About Us, login, sign up, be inspired, and the landing page where the user will land, learn more about Project Connect and decide whether to sign up. Once the user signs up with their email, phone number, and password, it will lead to creating a profile page, which is one page regarding important information regarding the student. As the student completes the profile, they will be asked a question (which they can skip) about their goals using Project Connect. As they pick their choice, the student will be taken to the Connect page, where the user can see the feeds of other students, list their projects, or help others with them. The user can navigate to messages to send messages to other students and receive notifications regarding reviews, projects, goals, and more. The user will also see different rankings of the leading six roles with their sub-sections and list a project they need help with. Students can also view their profiles and see all the information they input earlier. If you want to see the complete information architecture, click here.

Site Map Page

Now that I have completed the information architecture, I move on to the next phase, making the site map of all the pages for Project Connect. I had in total of over 30 Pages and with many including tabs that will provide different content like the settings, rankings, and be inspired page, to name a few. At the bottom is the site map and where everything would lead. If you want to see the complete site map, click here.

Responsiveness
Breakpoints

I wanted to check how the website would look by figuring out the layout structure and evaluating how to make the design responsive for all screen sizes. I always make sure to create four different screen sizes that match each breakpoint for: Large monitors like iMacs Laptops Tablets (vertical and horizontal) Tablets (vertical and horizontal) Smartphones I made sure that each design fits those breakpoints. Next, I created 16 column grids for each page to help me lay out each section and breakpoint containing the max width of 1200px.

Wireframes


Landing Page
About Page
Inspire Page
Contact Page
Current Projects Page
Events Page
List Page
Ranking Page
User Profile Page
Events Page

Step Four: Styling & Content


The main colors of Project Connect are midnight blue, mango, lemon, and medium-state blue. The typography that I decided to go with was the Lexend Deca font. Students should see this font and know what this website wants to represent with its services. I designed the icons and all come in 2 sets, for businesses and campus. I also designed a hi-fidelity prototype, to see the full prototype, click here.

Color Palette


Colors Page

Typography


Typography

Icons


project connect Icons

Buttons


Buttons

Hi-fidelity Design


Landing Page

Hi-fidelity Design


About Page
Inspire Page
Connect Page
Ranking Page
List Page
User Profile Page

Step Five: User Testing


Now with the hi-fidelity completed, I conducted user testing on the hi-fidelity designs to examine the pros and cons of Project Connect. I tested the website out on a 24-year-old who is majoring in software development and see what she thought about the website. I asked her what were the pros and cons of the prototype and she listed the:

    Pros
  • Great Design
  • Like the flow of the website
  • Message page is very detailed
  • Log out pop up is a nice touch
  • Detailed filter that helps break down what the user is looking for.
    Cons
  • Add a link to the how it works step one to sign up
  • Add a link to the how it works step two be inspired page.
  • Make Calendar Bigger in Events page.

This helped me gain an idea of what me and my team needed to get done for maintenance and fixing those issues in the future. The testing is completed and now I am going to track down what that user does in each step by creating a user flow.

User Testing

With the user flow, I tracked down everything the user did from beginning to end and see what were some of the pages that she went through.

1. Scroll down the page and Clicks about us in the footer

2. Presses logo and Goes back to the landing page

3. Clicks the be inspired paged

4. Presses logo and Goes back to the landing page

5. Clicked Contact page in the footer

6. Clicked Be Inspired on the footer

7. Clicked Sign Up

8. Goes to create your profile page

9. Goes to What is your goal page

10. Clicks skip on your goal page

11. Selects Connect link in navigation

12. Uses filter section in connect page

13. Selects Event link in navigation

14. Clicks Search icon

15. Exits out of Search by clicking X

16. Selects Message link in navigation

17. Hover user image for dropdown in navigation

18. Selects Current Projects

19. Hover user image for dropdown in navigation

20. Selects Events link in navigation

21. Selects Notifications link inside user image dropdown

22. Hover user image for dropdown in navigation

23. Selects Settings inside user image dropdown in navigation

24. Hover user image for dropdown in navigation

25. Selects View Profile inside user image dropdown in navigation

26. Presses Portfolio Tab

27. Presses Review Tab

28. Presses Listed Tab

29. Presses Assisted Tab

30. Selects Connect link in the navigation

31. Hover user image for dropdown in navigation

32. Select Log out

Final Results


After completing every step, for this project, I was able to build a design that centered around those main targets and how users that go to college and with those majors can work together with other students. Not only is it a way for students to work together but also builds experience and even finds projects to get compensation. That was the end goal was to identify how to design an interface that can cater to certain audience groups that can also answer stakeholder questions about the project.