Mobile Application Design
UI, Visual & Product Design | May 2020
Tools Used | Adobe Illustrator, Adobe Photoshop, Adobe XD & Figma
Starting off as a Graphic Design Intern, and then working as a Lead Graphic Designer, I helped design the visuals of a mobile app which would be used by soccer coaches and trainees to keep track of their progress, exercise, as well as socialize.
**I have only included highlighted pages, not every single page of the app**
Landing Page
This will be the landing page when you first open the app. In the middle are some goals for the user that will play as a carousel while on standby on the page. This screen is where the user would either chose a 7 day free trial or sign in if they are already a member. If the user is a scout, they can click on the link below the buttons which will take them to a different sign in screen.
7 Day Free Trial & Sign In
When the user choses a 7-day free trial, the app will lead them to this sign up page where they fill in their basic information and chose a pricing plan according to their goals which will be placed in the learn more link. If the user choses to sign in as an alreasy existing member, they just have to fill out the basic login informdtion such as their email and password or reset their password if forgotten.
Feed
This is the feed section of the app, where the user can browse like any social media platform. They can engage with other users by liking and commenting on their posts. The user can even create their own posts like photos and videos from their a live camera or their camera roll.
Sessions & Assignements
In this section, the user is able to view their saved sessions which will help them train and practice. They can watch featured videos or select from categories. An example of a category would be technical, and from that too they can pick and chose and log their sessions. The user also has the option to create a new session or add to an existing one as well as see details or insights of each one of their sessions.
Performance & Leaderboard
The user is able to view and track their performance insights by day, week month or a custom time as well as compare their ratings to another player on the team. They can also see which team player is leading and view their profiles.
Profile & Messages
This is the user's profile where there is general information about them, their earned badges and their attributions. The user can also view their club, members, coaches and their respective profiles. Users can message teams, personal messages, scouts and look for updates. Teams can break into topics where users have the opportunity to vote on a topic.
Calendar & Events
The calender helps provide the user with a schedule or planning as well as registering for upcoming events. This section will also give a reminder on upcoming events, sessions and assignments. The user will need to provide a signature to sign up for an event.
