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.
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.
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 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
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 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.
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.
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!
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.
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.
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:
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.
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
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.