Eyeball
A student-made sports portfolio web application, built within Boston University's Spark! Innovation Fellowship Program. It won the Judge's Choice Award at BU Spark!'s Spring 2021 Demo Day.
Role
UI/UX Designer
Tools
Figma
Trello
MIro
Trello
MIro
Timeframe
Jan - May 2021
Team
One designer and three developers
Overview
BU Spark! is a "technology incubator and experimental learning lab for student-led computational and data driven projects at Boston University."
I joined a team along with a four student developers for one spring semester.
I joined a team along with a four student developers for one spring semester.
The Problem
When we first started the program, we only had a slight idea of what we wanted to solve with our product. After numerous conversations, we decided on solving two problems that are often faced by amateur sports athletes.
Problem One: It is very difficult for amateur athletes to obtain and broadcast game footage for fans and family to watch
Problem Two: Aspiring players don’t have an efficient way to showcase their skills to scouts and recruiters, and US based teams can’t reliably scout internationally
Problem One: It is very difficult for amateur athletes to obtain and broadcast game footage for fans and family to watch
Problem Two: Aspiring players don’t have an efficient way to showcase their skills to scouts and recruiters, and US based teams can’t reliably scout internationally
Refining the Problem
We had some goals laid down, so we began to defining our target users and find their pain points with current routines/methods.
We used Miro to create user job maps of four potential users: amateur basketball players, their fans, family, coaches, and recruiters. With this, we were able to see overlapping problems amongst users, and ideate features based on common pain points.
We used Miro to create user job maps of four potential users: amateur basketball players, their fans, family, coaches, and recruiters. With this, we were able to see overlapping problems amongst users, and ideate features based on common pain points.
We are able to narrow down three main pain points to our main target user, an amateur basketball player:
- amateur basketball players do not have a solution for professionally showcasing their basketball skills
- it is difficult for basketball players to retrieve game footage for coaches and recruiters
- amateur basketball players have difficulty getting scouted without expensive camps and travel costs
Validating Target Market
While still refining our goals, we began discussing the idea of an international market. With America boasting the top basketball teams and leagues in the world, we found that international players had even more barriers to cross in order to get exposure to American recrutiers.
In order to validate this, we conducted an A/B test using Google Ads. We uploaded two similar ads that promoted to goal of our product - a custom sports portfolio and exposure to basketball recruiters. Ad A was shown to counties outside the U.S, such as Canada, Japan, and Brazil, while Ad B was shown to American users.
Ad A had 6.86k impressions and 93 clicks, while Ad B had 13k impressions and 46 clicks.
From this experiment, we were able to deduct that the website should be catered to international players.
In order to validate this, we conducted an A/B test using Google Ads. We uploaded two similar ads that promoted to goal of our product - a custom sports portfolio and exposure to basketball recruiters. Ad A was shown to counties outside the U.S, such as Canada, Japan, and Brazil, while Ad B was shown to American users.
Ad A had 6.86k impressions and 93 clicks, while Ad B had 13k impressions and 46 clicks.
From this experiment, we were able to deduct that the website should be catered to international players.
User Persona
With elaborate research done on target users, we created a user persona. Meet Bén!
Final User Story Map
We also created a final user story map for our target user. This showed nuances within different types of users, such as recreational students and international players, as well as their goals and features needed on the application for their needs to be met.
User Flow Diagram
Before starting wireframes, I also created a user flow diagram to figure out the flow of the site, as well as possible reasons for users leaving it.
Low Fidelity Wireframes
Wireframe time! Because our site was first-and-foremost a portfolio site, it was important to display student's information in a concise way without overloading a viewer's cognitive load. I created these lo-fi wireframes to show how all this data could be displayed.
Data points included:
Data points included:
- user attributes, like school, age, height, position, and basketball stats, etc
- schedule of upcoming games that can be livestreamed
- game footage highlights and skills tracker playlist
I also created a video editor interface, a feature that was on our backlog at this time.
Brand and Visual Identity
Before adding colors and a cohesive visual identity on the wireframes, I created a simple brand guide for developers on my team to reference back to. This ensured that the overall tone and visual mood of the application would unified.
View the brand guide here.
View the brand guide here.
Adding the Visual Identity
Once colors and typography were decided on, it was time to add to the low fidelity wireframes!
However, I also had to rethink how I was going to present all this information, and it all came down to remembering the goal of EyeBall: to allow students to create a professional showcase of their skills. That meant a simple listing-out of their personal, atheltic, and academic information wasn't going to cut it.
The biggest change from the low to mid fidelity wireframe was how data was visually presented at the top of each profile. Taking inspiration from popular sports sites such as ESPN and NBA.com, I created a header with a more modern design approach.
This carried on with other elements the page. By using soft drop shadows, I was able to create elevations that "pushed out" information while organizing relevant pieces of information together.
However, I also had to rethink how I was going to present all this information, and it all came down to remembering the goal of EyeBall: to allow students to create a professional showcase of their skills. That meant a simple listing-out of their personal, atheltic, and academic information wasn't going to cut it.
The biggest change from the low to mid fidelity wireframe was how data was visually presented at the top of each profile. Taking inspiration from popular sports sites such as ESPN and NBA.com, I created a header with a more modern design approach.
This carried on with other elements the page. By using soft drop shadows, I was able to create elevations that "pushed out" information while organizing relevant pieces of information together.
Final Portfolio Page
After discussions with design mentors, we decided to differentiate the section between information regarding the student's baskbetball skills/videos, and their academic statistics.
I also added smaller, visual cues to buttons and text, such as color coding the wins(green) and losses(red) of games in the game schedule.
I also added smaller, visual cues to buttons and text, such as color coding the wins(green) and losses(red) of games in the game schedule.
Here are also some miscellaneous screens, including the splash screen, log in, and player search functions.
With every page I designed, I continued with the black-and-white color palette, using the orange accent color where necessary. Not only would this carry the same visual language as a student athlete's profile page, but it carried an essence of modernity and professionalism.
With every page I designed, I continued with the black-and-white color palette, using the orange accent color where necessary. Not only would this carry the same visual language as a student athlete's profile page, but it carried an essence of modernity and professionalism.
Final Presentation
After a busy five months, EyeBall was ready to be presented at BU Spark!'s Demo Day! I designed a bunch of content for our team to use while presenting, including a poster, slide show, and of course, Zoom background!
Post-presentation
We recieved one of two awards presented for the Innovation Fellowship at Demo Day, the Judge's Choice Award! We even got an article featured in Boston University's newsletter ☺
