NEXT
UX & UI Designer on Agile Team of 6. A B2B SaaS providing NCAA Athletes a place to connect with brands.
Role:
Lead UX/UI Designer on a Team of 6
Process:
-
Discovery
-
Ideation
-
Design
-
Dev Handoff
-
Reflection
Duration:
6 Weeks
Tools:
-
Figma
-
Zoom
-
Slack
-
OneNote
Overview
NEXT is a B2B2C SaaS that leverages social networking and data visualization to standardize and bolster the process of connecting young, ambitious athlete influencers with brands. NEXT empowers athletes to profit off of their previously unpaid labor by providing an intuitive, clean, and safe atmosphere that bridges the gap between college athletes and brands.
The Problem
On July 1, 2021, the NCAA Division I Board of Directors introduced a new policy regarding endorsement deals between athletes and brands — colloquially referred to as “Name, Image, and Likeness” — empowering athletes to profit from their likenesses. Athletes have to go out and find brands to partner with, submit applications, or have brands reach out to them. However, there is a disconnect between communication, and there needs to be a way to make this process simpler.
The Solution
NEXT provides a solution for the 'micro' to 'macro' athletes to find brands that fit them well within their regulation region. Additionally, NEXT provides solutions for brands to find and filter athletes (including e-athletes) within their desired region, location, and sport. Finally, NEXT provides solutions for both the brand and the athlete to ensure fluidity and partnership between the parties.
Discovery
Kickoff
The client is starting from scratch, as we assisted with this StartUp on complete design. Our team was tasked with creating the onboarding process, profile page, home page, NIL Deal page, and messaging/posting pages. We created a style guide from scratch and created components to ensure the design could be consistent for the next team.
Client Questions
We developed a list of questions for our client to ensure that we could create user flows for what the client wants the user to do throughout onboarding and the main pages.
Our findings were:
-
Easy to find NIL deals based on what applies to the athlete.
-
The onboarding process is smooth, and assessing who this athlete is.
-
Simple and clean design- nothing but what is needed
-
User-friendly feel- ensuring the user can easily navigate and connect with their other platforms.
Competitive Analysis
Our team researched the main competitor's mobile and desktop apps to gather data on what the needs would be for our users and what the client liked and disliked about each of the competitors. Since we were designing the first iteration of this product, we examined onboarding processes and profiles for inspiration. We also completed a competitive analysis to assist us in this process.
Ideation
Before we could start designing, our team had to identify the most important functions this part of the website needed. User flows help us understand how we want to lay out for users to complete their tasks. We decided on 6 different user flows to give high user functionality and a clear objective. I had ownership of UF1 and the messaging User Flow.
Medium Fidelity Wireframes
As UX designers, our team decided to each create our own wireframes to develop creative concepts. We individually started with our designs and then presented them to each other.
We started with a mobile frame. Everything was evenly spaced and aligned to ensure the developer could have consistency.
From there, we all decided what would be most influential on each screen and what design type we liked the most.
Design
UI Design Iterations
Our client wanted us to have 3 different iterations to help them to decide which style and color they would like to take for the app and specific parts of the home screen.
As individuals, we each came up with our designs and presented them to each other. We decided on three designs to present to the client. Our team was able to have multiple colors and options to provide for our client, dealing with cards and icons within the cards.
The client decided on the screen shown on the right. Helping the user have simple but clean designs allows them to focus on their goals within each user flow.
Style Guide
Our team collaborated to modify the style guide throughout the project. Once we received feedback from our client, we aligned the style guide and added a cohesive color palette, buttons, typography, and icons to the existing style guide.
Our team organized the design by creating an information blueprint, developing efficient components, and adding new icons and images for a better user experience.
High Fidelity Wireframes
We all worked as a team to ensure pages were well organized, spacing was perfect, and all of our UI transferred over. I prioritized making the designs feel clean and simple to stay on the theme of the client's wants. I accomplished this by even spacing, visual hierarchy, and a simple but visually elegant.
Developer Handoff
Our team collaborated to deliver clean and efficient annotated notes that outline the customer journey from login to messaging, connecting, and posting. This resulted in a successful user experience.
See both the annotations and measurements below for user flow 1.
Reflection
I was impressed by the collaborative capabilities of our team at NEXT, a B2C company catering to NCAA athletes. We had the challenge of creating a brand new social media network for student-athletes to find NIL Deals with brands.
Message from Client: "Tysm for delivering a stellar product timely and communicatively. It’s been a blast working with y’all. I’ll loop back with you in a few months to share more about the investment meetings we have lined up (won’t take place until the other phases of this project are completed). Great work, team!"
Given the competitive nature of the social networking industry, I understood the importance of helping NEXT stand out. I dedicated significant extra time to this project to ensure our designs met the client's expectations and had a consistent and distinctive look. I wanted to create an easy navigation experience for users, providing quick access to essential functions like project invitations, customer information editing, and deletion.
Utilizing Figma as our design tool, we leveraged its component library and local styles to streamline the design process for our team. By incorporating color palettes and establishing a clear text hierarchy, we aimed to minimize errors and foster efficient collaboration among designers.
