Project Connect

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.

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.

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.

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.

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.

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

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.

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.

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

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.

Icons

Hi-fidelity Design

Hi-fidelity Design

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.