Gateway to NCAA


UX/UI  Adobe CS & Cargo  Design Research  Branding  User Research  Project Management



Providing accessible educational resources to international students interested in competing as NCAA athletes in the States.


  



The Problem:

1. A lack of access to resources for international athletes interested in moving to the States for NCAA sport.
   
2. Overpricing of agencies selling this service to international students
   
3. Misleading or overly-positive information that doesn’t give students realistic expectations

The Solution:

1. Informative educational resources for students
   
2. Free or reduced price information packets which allow students to conduct their recruiting process alone.
   
3. Accurate information which mediates the expectations of users

---

01/ User Research I planned to gain insights from two major groups:

1. Current school aged international students (15-19)
2. Current international students who immigrated to the States

By targeting these demographics, I sought to understand how international students were being underserved from a number of perspectives.

   

---

02/ WireframingIn planning my website, I took into consideration the research to create a basic wireframe of what I’d be willing to offer in my resource:

1. 3 major “stops” - one introducing students to America, two taking them through the recruiting process, and three guiding them through the immigration process.
   
2. Agent hours for students looking for extra advice. 
3. Resources for parents and educators who want to help guide their student.
   

All wireframes generated using Figma.

---

03/ Branding I wanted to balance educational themes with color, fun and a game-like feel. It’s important my brand felt playful while still keeping sports and education as major points. 

I started with a mood board, then broke it up into a general look book. I also went through multiple iterations of a logo.




The look book inspired me to use bright vibrant blues and orange. I want to keep movement and sports imagery central, while keeping a game-like theme.


One of the most difficult parts of my process was working on a logo. There are a huge range of logos I played with, ranging from the “gate” as well as playful or fluid imagery. Keeping the font bright was important.

In concluding my design for my logo, I tried to start with a social identity for my resources. If you’d like to see a full selection of my social and branding, I put all my work in the backlog of this project at the end of this page. In creating branding I want to stay playful and gameful. 

---

04/ Prototyping
Once I worked on the brand, I was able to translate my wireframes into working prototypes before building the site. This stage helped me test and get some early feedback before building the site.

---

05/ Front End Coding
I started my coding process using Cargo Collective (the same web building tool which I use on this portfolio site). Cargo allows me to start coding from scratch and see direct responses to my changes. I used a blank page and built Gateway from scratch. The menu bar is custom JavaScript. The use of bright colors and interactive buttons are there for the young audience of Gateway.

---

 

06a/ User TestingThe primary goal of usability testing was to ensure that essential user journeys on the Gateway to NCAA website were easily accessible and intuitive. The testing focused on three main objectives: locating "Stop 1" for students, finding the "Parent Guide" for parents, and evaluating the ease of contacting support for both students and parents.
Test 1: Locating “Stop 1”

Objective: Ensure students can easily locate the "Stop 1" descriptions of the first module.

Key Pathways Tested:

1. "Start Here" next to the carousel of images on the homepage.
2. Scrolling down to the quick timeline of modules with "Stop 1" as the first entry.
3. Hovering over the "Learn" tab to access the dropdown menu with "Stop 1."

Outcome: This test aimed to verify if users could clearly find "Stop 1" through the provided pathways.

Test 2: Finding the “Parent Guide”

Objective: Ensure parents can easily locate the "Parent Guide" with relevant information about the NCAA system.

Key Pathway Tested:

• Hovering over the "Parent & Teacher" main menu item to access the dropdown menu with the "Parent Guide."

Outcome: This test aimed to determine if additional pathways were necessary for parents to access the information devoted to their education.Test 3: Contact Features Usability

Objective: Evaluate the ease of finding and using contact features for gathering specific information not available in the module system.

Key Contact Options Tested:

1. AI Assistant:
   • Accessible via the "Learn" tab.
   • Accessible via the "Our Agents" tab.
2. Direct Contact Methods:
   • Footer of each Gateway page (email, social media, interactive contact forms).
   • "Contact" tab with options to "Send us a question" or "Make an appointment."
   • "Our Agents" tab -> office hours.

Outcome: This test aimed to gather information on user preferences for contact methods and determine if additional options were necessary to improve clarity and accessibility.

---

06b/ User Testing: Results


Observations

8 individuals took part in my early round of usability testing here. Testing is still ongoing and I’m receiving more participants as the days go on. These observations are as of April 28 2024. 

1. 100% of my participants rated my usability “very clear” for both students looking for “stop 1” and parents looking for the “Parent Guide”
2. Over half of the participants sparked some interest for a Q&A page in response to question 10. None of my participants rated an AI assistant how they’d seek out information. 
3. One participant questioned why I didn’t have a phone number listed under the contact section and claimed “an available phone number will always be best” for questions and queries.
4. 2 users pointed out some technological glitches - one, when you click on the logo, the user should be prompted to the homepage. Two, the drop down list is interacting with the headers meaning that participants aren’t able to click on items which are further down drop down lists. 
5. 3/6 participants commented they like the visuals and branding of the site. 

Conclusions & Adjustments

1. From this usability study, one of the major outcomes is changing some of my contact options. Seeing the amount of interest for a typical Q&A (“typical student questions”) kind of page makes me feel pretty confident that would be needed for my website. I’m considering putting this on the page with the AI assistant - if the Q&A doesn’t answer the question, the AI assistant is the next logical option. 
2. It is clear to me there are still some tech issues with the website (overlays, drop down lists, etc) that need to be resolved over the next week so users don't have feedback on technological issues with the site's CSS/HTML functionality. 
3. I don’t need to make any adjustments to my student or parent user loop. These users have very clear pathways to their given destination. These can remain as they are.
4. I should conduct another set of usability testing on how the site conducts the actual module, but with a smaller group so we can spend time making sure the modules are useful for the given audience (students, parents and educators). 
5. I was not able to do in person testing or witness users use the website, so this set of testing should only be preliminary for now. I want to conduct some more detailed tests as the prototype gets more refined over the next week. 

---