WorldSportsLeague

Overview

Create a portfolio site for amateur athletes. This site would allow these athletes to connect with recruiters if they are looking to take the next step to college. If they are looking for sponsorship we can connect them with our sponsors the company has already established relationships.

My Role

  • UX Research: Interviewed potential users, researched competition, generated wireframes
  • UX & Visual Design: Brand creation (logo and styleguide), interactive prototypes, HTML & CSS
  • Project Management: Created project in Asana, generate tasks for stakeholders and contributors, discussed key milestones with project team.

My Process

Empathize

Spoke with 4 potential users of the product (2 athletes and 2 coaches). I discussed with them the problem this product was looking to solve. We talked about the process in it current state is. Ask what steps are needed. You don't want to get into the product itself because then you start to guide their point of view.

Define

Business stakeholders give you and idea of the objective of the product but the users are the ones that will define it. This project pivoted from what the stakeholders thought would be a social media site. Most users had an established social media presence. So this product pivoted to a portfolio site that would aggregate the social media presence into one page that they would be able to promote to colleges and sponsors.

Ideate

This part of the process starts with some pin and paper. Jotting down the 5 must have items of the app. Add photo/personal info, link social media content, view videos/images on page, simple URL to send out to target audience, and receive communication from that target audience. Start working on user flow and getting some ideas out of my head.

Prototype

Wireframing overlaps with the previous steps and this one. I take some wireframes from paper and get them into illustrator and start getting some structure in place. After each iteration I shared with the project team from feedback. I then slowly created higher fidelity wireframes and then transitioned that into visual prototypes using PhotoShop.

Testing

To get this into some hands without coding it out for initial iterations I used the interactive prototyping too InvisionApp.io. Started with the mobile designer and gave the user tasks to complete and see how efficiently they are able to complete them. Based off of their feedback I would made iterations to the prototype.

Examples of Work

Wireframes - Mobile

Prototypes - Mobile

Prototypes - Desktop (Guest)

Tools Used