Ana Botto Studios LLC was hired to design the frontend of the TeamUp App for Patrick Alexandre, a freelance app developer. TeamUp is a recreational sports app that seeks to solve the lack of affordable, low commitment adult recreational sports programs.
This app is still in active development, est. completion May 2024.
Patrick Alexandre
IN PROGRESS/ON TRACK
UX/UI Designer
Patrick Alexandre - Software Engineer
Ana Botto - UX/UI Designer
HTML/CSS, Figma, Illustrator, React, Node.js
TeamUp will facilitate a community around pickup sports by having athletes share where they are practicing, what sport they are practicing and if they are open to other users joining. The map will indicate how busy a location is by users checking in when they arrive at a location to play.
Objective
There is a map prototype that needs to be expanded into a fully functioning android and iOS application.
hover to play
tap to play
Front end and back end development will occur in tandem with the following deliverables. Click to see final designs.
| UX/UI Design | App Components |
|---|---|
| Target Audience Research Competitive Analysis User Survey Wireframes Prototypes Visual Design (Logo, Colorway etc.) User Testing |
Login Screen Map (using Google Maps API) Session Direct Messaging Location Details Page Newsfeed (filtered by location) Ratings & Reviews Location Statistics |
From the users' voices to the competitive landscape, this section covers the key discoveries that have informed the creation of this pickup sports app.
I conducted a user survey to determine how we can best serve our target audience. I asked our users what challenges they face when playing recreational sports, with the aim to target and solve those pain points with the app.
I researched what apps exist in the market, downloaded and used them to determine how the TeamUp app can improve on the existing offerings.
From our analysis we know we can differentiate ourselves by offering a 100% community-driven and free to play app on IOS and Android.
Based on user feedback that the most important features are:
I designed the sitemap to make these features easily accessible.
With a clear sitemap in place, the wireframing process becomes more efficient.
The client wanted the UI to be easy to use and approachable for athletes from collegiate to beginner. To answer this need I drew from the user survey which has data from a wide range of athletes and skill levels.
Clicking through the prototype I created in Figma; you can easily start a solo session or join a game with other athletes from the home page. Each user profile lists what sports the user plays as well as their skill level and direct messaging helps connect you with active players.
see in full screen
There are info pages accessible on the login page before you sign up to tell you more about the app and you can easily create your account with google login.
The brand colors were chosen by the users in the user survey from a list of different color palettes. The ‘ball’ in the logo is a combination of a soccer, basketball and volleyball, which when combined look like a map - representing the map in the TeamUp app.
At this point in the project I have conducted user surveys to understand and address user pain points, tested competitors products to improve on existing offerings, and created working prototypes in Figma.
In tandem, Patrick, the client and developer on the project, has laid the groundwork for the backend with the map, authentication and sign up components for the app.
With the completion of the app mockups Patrick will develop the app screens according to the below specifications.
