Javelin: Improving connections with sport teams
Project overview
Time
3 week sprint
Team
3 UX Designers
1 UI Designer
Role
UX Designer
User Researcher
Graphic Designer
User Tester
Programs Used
Adobe XD
Adobe InDesign
Adobe Photoshop
Miro
Google Forms
Who is Javelin?
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.
This app’s main intent is to help people lead more active lifestyles while sharing the love of sports.
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. Their main focus was their chat functionality and screens.
Problem
How to maximize retention and usability by improving the functionality and user delight of the integrated chat function.
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.
Surveys • Affinity Diagram • Comparative and Competitive Analysis
Surveys
Surveyed: 33 Users
Primary Users: Athletes or anyone who has joined community leagues
Secondary Users: Coaches
Key takeaways from the surveys
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
C&C analysis
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. 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.
Personas • Layout
The power of a persona
Britney Amber Thompson
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
Organizing her schedule and coordinating with her teammates
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
Braydon Cunningham
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
Key takeaways from the research and planning
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 layout
Our main focus was to make sure we had everything in the message screens. But still have the other screens of the app in mind.
Primary messaging screens:
Team Messages
Direct Messages
Team Notifications
Features in messaging screens:
video/image sharing
voice note
gif/emoji and Bitmoji
polls.
Secondary screens:
player profile screen
schedule screen
home screen
league screen
team screen
Lo-fi - wireframes • Mid-fi - prototype • User testing • Hi-fi
The lo-fi limbo
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 a part 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.
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.
Mid-fi
Key issues that we were able to resolve through our design
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
User testing
Based on our user testing of our prototype, these were the issues we had to address:
Onboarding
Used onboarding and progressive onboarding (empty state onboarding that would explain what the screen would be populated with)
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
The naming convention from “Calendar” to “Schedule” made it a lot more clearer to our users.
Hi-fi
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.
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.
Learning outcome
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. Good communication was also key to make sure that everyone was on the same page and that the process moved as smoothly as possible.
