BRYNNE
BRYNNE
UX // UI DESIGNER

 

 
FC mockup clay iphone 3 white.png

keeping super fans in the palm of your hand

app desigN // mobile // hig // tech innovation // startup

 

// CLIENT //

FanConnect

// objective //

Initial Mobile App Design (HIG)

// MY ROLE //

UX research, UX design, UX writing, UI design

// TOOLS //

Sketch, InVision, Miro, Adobe Photoshop, Zeplin, Google Drive

 
 

the business

 
 

FanConnect is working to build a unique software application targeted for use on mobile devices. The software application is a publicity and promotional tool designed to ease the process for athletes, celebrities and promoters to disseminate information to fans and the general public about the athletes, celebrities and promoters including but not limited to, upcoming games, events and promotions.

 

the challenge

 

FanConnect currently does not have any design in place. So, the entire UX process (from research through mobile app prototypes and testing) needs to be built from scratch.

Every individual celebrity, athlete and promoter app should be unique to that specific person’s brand identity. The UX/UI design work should also later include creating modules and templates that will act as the base and the building blocks of each app design. These templates and modules will help promote ease of use and ensure each app layout is unique and an accurate representation of the individual’s brand.

 
 

goals & outcomes

 
  • Design mobile applications for individual professional athletes and celebrities

  • Create high-fidelity mockups of the core screens and main app functions

  • Design a generic interactive prototype of app to use to pitch the FanConnect partnership to professional athletes, celebrities and investors

 

 

project constraints & intentions

 

// sales pitch tool //

This initial app prototype is being used as a sales tool and shown when pitching to professional athletes, celebrities and investors alike. Although this initial designs will continue to evolve and be used as the base for the overall generic app template in the future, that is not the main focus of this design. It is very important to keep in mind the use of the app at this stage of the design process is to excite and intrigue potential clients and prospective partners.

// timeline //

Initially, there was a very loose vague timeline for the initial design of the mobile app. About midway through the research, that changed, and I was given a month to complete the entire UX design process and complete the initial app prototype deliverable.

So, with very limited time and resources, decided to only design the app from the fan users view. The athlete’s view will look very different and have much more capabilities, but decided it was not in our best interest to focus on that side of the design initially and for the purpose of the sales pitch.

// legal constraints //

I had to create a generic athlete app for legal purposes. Initially, I could not tie the app design to a specific athlete or celebrity.

*It is important to note that the generic athlete app design (clickable prototype below) was not designed around a specific athlete or a specific sport. Rather, this generic athlete app prototype includes different variations of the types of content an athlete would post or be featured in as well as various sports this athlete could be involved in. This allows the prototype to be more relatable to professional athletes across a variety of sports and of different personalities and demeanors. Again, being that this prototype will initially be used as a sales tool, it is important to be able to entice and relate to athletes and celebrities of all sports and professions and the wide range of levels of fame they have achieved and plan to achieve.

 
 
 

 

 

 

the agile design sprint

 

A successful UX design uses data, science and technology to elevate human interaction into something convenient and enjoyable. 

An agile UX design process speeds up delivery while maintaining - or even improving - product quality. The agile process is iterative, incremental and user-focused. Agile designs and developments focus on small incremental improvements and helps avoid waste, which means lower cost.

 
 

 

 
FCresearch_discovery1.png

 research & discovery

 

The user research and synthesis phase is when I access the business goals, understand the market and industry, identify user needs and target audiences and synthesize all of the research and data to identify trends and our main areas of concentration.

// Methods //

  • industry & market research

  • business analysis

  • competitive analysis

  • business interviews (2)

  • user interviews (25)

  • online survey (197 responses)

 

 

 
FCreseach_synthesis1.png

research synthesis

 

// athletes //

  • Establishing an athlete brand is extremely valuable for the athlete

  • The more fan support and attention athletes can attract, maintain and maximize, the more their athlete brand is worth to teams, leagues, sponsors, marketing deals and other relevant stakeholders

  • Some leagues and sports admins are putting rules around athletes using social before and after games/during the season in general

  • The trend shows that athletes that play sports which rely more on the individual player (basketball, soccer, golf) have better social media engagement and following from fans

// fans //

  • Fans love athlete social content that shows personal life and fun personality (home, family, friends, funny comments, messing around with other athletes, etc)

  • Learning about an athlete’s story/personal life causes you to feel more connected with that person and (usually) like them more

  • Would love to have one place to go to get all content, etc for my favorite players

  • Would love to have one place to find/buy any of my favorite athlete's merchandise

  • Would be great if all athletes with own app sold personal merchandise

  • Fans love seeing the ‘behind the scenes’ from athletes...whether that is in the locker room with teammates, inside view of Zion shoe release, or in a more personal setting where they are giving a tour of their home and showing off new cars, etc.

  • Fans do seek out specific updates about their favorite athletes, teams, sports. And just look at big news highlights and stories for all other sports news

  • It is common for users to follow athletes who are entertaining/have big personalities on social media even if they don't like that particular athlete or their team.

// tech trends //

  • AI (Artificial Intelligence) is starting to make a breakthrough in the sports world

  • Most big athletes have their own websites (although almost done are done poorly/not updated frequently)

 

 fanconnect personas

 
larryfitzgerald-hed-2014.jpg

PROFESSIONAL ATHLETES

 
 
 

// GOals //

  • Athletes need an easier way to engage and connect with fans

  • Athletes need an easier way to manage all of their content, social media accounts and online fan base

  • Athletes need a way to analyze metrics of their overall ‘athlete brand’

// anti-goals //

  • DON’T want this to be another thing they have to update, monitor and manage on a daily basis

  • DON’T want more fans saying negative things about them or ranting about something controversial or fans discussing topics and getting in heated discussions and arguments

 
 
Crazy-Duke-basketball-fan.jpg

SPORTS SUPER FANS

 
 
 

// GOALS //

  • Fans would like one place to find all coverage and content about and posted by their favorite athlete

  • Fans want access to exclusive original content from their favorite athlete

  • Fans want to feel like insiders; they want to be even more connected to their favorite athletes

// ANTI-GOALS //

  • DON’T want content and this app to be solely focused on the athletes professional career

    • Fans want more personality, access to more of their day to day lives, and to see their fans in settings and taking about things that help bridge the gap and make them feel more relatable

  • DON’T want fans to think the app is just a promotional tool

 
 
 

 

 
FCsketching_ideation1.png

 

connecting research and design

 

With the affinity mapping and user personas fleshed out among many other things, it was time to start bringing the user needs to life. Using the trends and insights uncovered through research, I prioritized the core features and functions of this generic app prototype and began to bring the design to life.

I conducted testing as much as possible throughout this design process. Below is a snapshot of the screens while testing and iterations are still being done.

 

wireframes & prototypes

 

 

 

 

 
screencapture-projects-invisionapp-freehand-document-nRBSpvhfu-2019-08-27-15_04_57.png

 features

 
 
1.png
 

onboarding

 

// go straight to app //

// ACCESS REQUESTS //

 
 

home

 

// CURATED FEED //

// VIEWING FILTERS //

// ‘FIRE’ POSTS //

 
Notifications Alert.png
 
 
Active.png
 
 

notifications

 

// PERSONALIZED NOTIFICATIONS //

// PUSH ALERTS //

 

search

 

// SMART SEARCH //

// DISCOVERABILITY //

 
Results.png
 
 
ZW shoe.png
 

shop

 

// EARLY ACCESS & PROMOTIONS //

// ONE STOP SHOP //

 
 

athlete profile

 

// ATHLETE OVERVIEW //

// PROFESSIONAL AND PERSONAL //

 
Athlete Profile 1.png
 
 

 

 

// DELIVERABLES //

RESEARCH & SYNTHESIS // Google Drive // Miro

WIREFRAMES // Sketch File // PDF // InVision Freehand Board

PROTOTYPE // Sketch File // PDF // InVision Freehand Board

INTERACTIVE PROTOTYPE // InVision L. Fitz App Design