Javelin: Improving connections with sport teams
Let the games begin
Who is Javelin?
“help people lead more active lifestyles while sharing the love of sports”
While Sharing an active passion for sports in university, Justin Ford and Coleman Chan created an app called Javelin. This app’s main intent is to help people lead more active lifestyles while sharing the love of sports.
Javelin hopes that through this application, they can help people connect with the exuberance for sports that they had as kids while providing a safe and competitive environment.
The dream team
Roles and job specs
My team consisted of 3 UX Designers and one UI Designer. We would collaborate as a unit to give our client the best outcome possible with our combined skills. A 3-week sprint.
My roles:
UX Designer, User Researcher, Graphic Designer, User Tester.
The game plan
Client meetup
When we met with Javelin, they briefed us on what the app was about. They told us that leagues would have to go to the app from a website portal where administrators would populate their teams and their members. We discovered that a redesign of their app had been previously been done by other RED Academy students. As we were discussing what the client’s needs for their app were, we realized very quickly that their main focus was their chat functionality. So we figured out that their scope was not a redesign of the entire app but the focus on only the chat screens. Once we had established the client’s needs, we delved into the problem and goals.
Their problem:
How to maximize retention and usability by improving the functionality and user delight of the integrated chat function.
Their goals:
-Increase the number of messages sent in the application by making the app more engaging.
-Increase the functionality and overall flow so that the users stay on the application.
Let’s play ball
The research process: Surveys
To understand our users we first had to determine who our users were. From there we also had to make sure we asked the right questions.
Who are the users?
-Athletes or anyone who has joined community leagues
-(Secondary users) Coaches
What questions did we ask?
-General demographics
-Technology use and competency
-Chat app usage
-Sports league involvement
-Interest in a team chat app
What were the results?
We surveyed 33 people and the key takeaways were the following:
-81% Use WhatsApp to text
-94% Consider themselves active
-84% participated in leagues that are self-managed
-72% Say they would feel more engaged with a team chat app
The face-off
Comparing Javelin to their competitors
After further analysis of Javelin’s app vs its competitor’s apps, we realized that the user interface flow and certain functionalities were not there. We determined this through the process of comparing other similar apps such as Sports Engine, Team Snap, Yahoo sports, and a few other relatable apps to Javelin, as well as using Heuristics (overall usability of the app). Through this process we decided that we needed to redesign some of the other screens such as the home screen which only had a calendar, to make sure the entire app had a proper flow to it, while still focusing mainly on the chat functionality.
Batter up!
Planning: The power of a persona
Based on our research, it was important for us to create a persona and their journey map to have a deeper understanding of the user needs, goals, motivations, feelings, and pain points. We used 2 primary personas to get a strong grasp on the way the app would be driven.
Our first persona is 22 year old Britney Amber Thompson who joined a summer Co-ed softball league. Due to some miscommunication and changes to the location of one of her games, she was late for her game and did not perform as well as she wanted to. She was also not able to track how her team was doing overall.
Her goals:
-Enjoying the season while making new friends
-Organizing her schedule and coordinating with her teammates
Her motivations:
-Loves being competitive in team sports
-Being active in a work-life balance
Her frustrations:
-Want to figure out a way to know how to get a ride to her games
-Doesn’t feel the team is organized for team socials
-no team messaging on any sort of app
Her potential opportunities:
-Ability to keep track of game schedules
-Wants to share her experiences for her team sports
-A communication tool to chat with her team and other teams and to share team engagement on social media
Our second persona is Braydon Cunningham, a 24 year old intramural men’s basketball league player. He has been apart of the league for 3 years. Braydon uses WhatsApp group chat to communicate with his team. He wants to know who is going to the games as well as team standings and schedules. He feels that an app specifically for the team to chat and to share highlights would bring the team closer together.
His goals:
-Wants a boost in team morale
-Be the best team in his league
-To win as many games
His motivations:
-To be able to keep track of team scheduling and standings
-To know who is attending games so the team can sharpen their skills
His frustrations:
-Doesn’t always get the notification for venue changes or cancellations
-Doesn’t feel his team is cohesive enough and would benefit with a group chat app
His potential opportunities:
-An app that pings him about upcoming games
-A localized place that displays an up to date feed as well as notifications for attendees
-A messaging functionality that facilitates a tighter bond with his teammates
-A feed for highlights to show pictures and videos to attendees
To have a further understanding of our persona we created user stories to know the users wants and the reasons behind it.
As a basketball player, I want to know who is going to the game so that I can be mentally prepared for the game.
As Braydon, I want to contact my team so I know where the game is.
As Braydon, I want to know my basketball team’s standings so that I know how my team is doing and how we can improve on our skills.
As Braydon, I want to know my basketball team’s schedule so that I know where and when my games are.
The final stats
Key takeaways from research and planning
After we had completed gathering our research through the surveys, comparing similar apps and creating personas, we had a clear key takeaway of what the user wanted out of this application:
-Simple, clear and easy to navigate screens
-Creating announcements and notifications for any changes or updates to game whereabouts and cancellation
-Capability to communicate with teammates and individuals both on their own team and within the league
-Sharing media of games
-Clear way of knowing attendees
-Stats of both individuals and team
-Game scheduling
Planning the preliminary
Preparing the layout
Before heading into the design process, we wanted to make sure that we weren’t missing anything on any of the screens. Our main focus was to make sure we had everything in the message screens. Since it was clear to us from our research that we needed a very interactive app, we felt that we could incorporate video/image sharing, voice note, gif/emoji, and Bitmoji and polls. We also wanted to make sure we had the following primary sections: Team Messages, Direct Messages, and Team Notifications.
From there we laid out the other secondary screens such as the player profile screen, schedule screen, home screen, league screen, and team screen.
We were now ready to get into the Lo-fi’s since we felt that all the screens had everything that was needed.
Designing the path for the win
The design process: The lo-fi limbo
During the lo-fi process, iteration was the key. We were faced with a challenge that we were struggling to find a solution for. The challenge for us was when we realized if a user was apart of multiple leagues, how would the Message nav button work, and where would it lead to when you first pressed the Message nav button? Because the Message nav had Team Message Direct message and Announcements options, we had to decide what route we thought would make the most sense to the user.
First, we thought it would be a good idea to have the Message button lead directly into a league page where they would be able to see all of their different leagues they were apart of (if they had more than one league they were apart of). Then we had two tabs leading to either “team messages” or “direct messages” and then below that, we would have secondary tabs of “announcements”. We realized this was too cumbersome and did not have an easy flow for the user to follow.
After some brainstorming, we came up with an idea. It was to simplify the Message nav button to pop up 3 sections when pressed: Announcements, Team message, and Direct message. From there the user would be able to press one of the three options and either their leagues would show (if they were under Announcements or Team messages) or it would bypass that screen if they were only apart of one.
Design Map
To make sure that we had a proper flow with the messaging system, we created a Design Map of the messaging screens. This was a good way to reassure our concept worked and that the navigation made sense.
Once we had figured out how our messaging navigation would work, we proceeded to create the other screens.
Mid-fi
We divided the screens amongst our UX team to create the mid-fis. Here is what we designed based on our research and planning:
- The messaging system — Here users would be able to see Announcements (controlled by the coaches) where team members would be able to find changes to games, cancellations and voting polls, Team Chat where the user would be able to talk to their teams and Direct Messages where the user would be able to message with individual teammates and other league members. The user would also be able to make group chats in this section. We also gave the user the capability to send images, videos, gifs, and emojis for more engaging usage.
- The home page — The original screen had just a calendar but based on our results we knew we had to show more than that for our users to get a better experience when first opening the app. We had quick alerts, which were the announcements that showed up on the top and if anything urgent like game cancellations happened, there would be a popup with that information before the home screen loaded. We also included a card for upcoming games where the user could view the next few games, who was going, the date and time of the game, the weather forecast, and which team they would be facing. We knew this was important for the user as we saw with our personas that these were some of their major needs for the app. We also included overall game standings and highlights (videos and images) that users can upload for the league to view.
- Calendar — Here we created a schedule where the players can choose by month, week or day and can choose what type of event they would like to view. Either practice, game or tournament. Once the user chooses the options they wanted, a card would populate below. The user would also be able to go back in dates to see past game results. We felt that it was important that the users were capable of seeing quickly and efficiently as to how they were doing and what events were upcoming.
- League — On this screen users would be able to see their league and team. Nested within they would be able to view their team members, their coaches, overall standings, stats, records, highlights, and upcoming games. This would give users another access point to be able to message their own team and other team members as well.
- Profile — We decided to put this in the hamburger menu. Here users would be able to see their info, posts, stats and awards. As well as the capability to add an image of themselves.
Instant replay
What we were able to resolve
Here were some of the key issues that we were able to solve:
-Able to separate messaging capabilities for easy use for users
-An interactive and engaging messaging system that would allow users to come back and communicate with their team more often
-Organized scheduling and quick views of upcoming games
-An intuitive and straightforward way of communicating changes in games
-Keeping track of standings and stats
-Interactive media that makes the app constantly updating and more enjoyable to come back to
-After constructing a well thought out design, we were now ready to get this prototype tested.
Testing out the field
User testing
We had a great group of testers who were able to help us tweak some details that we missed:
Onboarding — It was clear that proper onboarding and progressive onboarding (empty state onboarding that would explain what the screen would be populated with) was needed.
Messages — We originally had abbreviated text when you pressed on the Messages tab and this was not clear as to where these buttons would lead. So for the abbreviations “An” we changed it to “announcements”, for “TC” we changed it to “Team Chat” and for “DM” we changed it to “Direct Messages”
Calendar — This was a simple change in the word that made more sense. We originally had the word “Calendar” for the scheduling of games and it was evident that just having “Schedule” was a lot more clear to our users.
Once we made all the adjustments, it was time to pass it along to our UI Designer to give it its final touches.
UI Process
During our process of research, planning and prototyping, our UI Designer was doing her own research and planning.
Through her research, she looked through many different types of apps to get an idea of what the competitors had done. She looked through team management, fantasy sports, fitness, and messenger apps for inspiration.
It was important to note the tone and visual language of the app. Since it had to be an engaging, fun and interactive app she came up with some moods to work off of such as, energetic, welcoming, active and social, to name a few. She also focused on what type of spacing, shape, movement, and colours the app should represent.
Based on the language she moved into visual mood boards and style guides. She had two styles that she ended up infusing. She went with both cool and warm colours and very vibrant eye-catching colours and themes. Bringing in rounded edges to give it more of a “fun” feel to the overall look.
Hi-fi
The final high fidelity showcased and reflected a great combination of both the UX research and design as well as the design and constancy of the UI.
We presented the work to the client and they were very pleased as to what they saw. Not only did we go above and beyond their expectation in such a short time frame but they really saw a lot of value in the chat functionality and the additional work we put in that was separate from the scope.
The final score
Conclusion
The end product came out to be a total success. We were able to solve the most challenging issue that the client was facing which was the chat, by trial and error. We came up with a clear, easy, and entertaining method for users to communicate with one another. This resulted In a very satisfied client who got exactly what they wanted with the scope of the project and then some. By giving them more than what they asked for, they saw great value in our effort to make the whole app work together harmoniously. We listened to the users and understood that beyond the chat functionality, they wanted more information about the game and ways to connect with one another through different media. This is why we felt that the overall job was such a success. We adhered to both the client’s and user’s needs.
Finishing with a lesson
Learning outcome
“good communication was also key to make sure that everyone was on the same page”
This was a great experience for me as the scope of the project was not daunting and gave us the flexibility to work on other parts of the app. This was a valuable lesson for me though because the scope of the project should always be key and sometimes it is only part of an app or website that the client may be looking at for enhancement. Making sure all members of the group stayed in good communication was also key to make sure that everyone was on the same page and that the process moved as smoothly as possible.
