Design Sports Mobile App FIXED PRICE – Graphic Designer
We are searching for a talented UI designer to create a visually appealing and intuitive user interface for our sports mobile app. The app focuses on fitness tracking, training programs, and personalized recommendations. The designer will be responsible for designing themes, selecting appropriate fonts, and creating engaging layouts for various app pages, including login, dashboard, profile, training, exercises, and questionnaires. The ideal candidate should have experience in mobile app design, a strong understanding of user experience principles, and the ability to create designs that align with our brand and target audience.
Designer Documentation: Sports Mobile App
Project Description:
App Name: Sports Mobile App
Themes: Light theme and Dark theme
Font: Utilize a suitable FREE font that aligns with the app's purpose.
App Pages:
Login Page:
Provide users with the ability to log in using their Google and Microsoft accounts.
Specify that in the future, it should be easy to add other login options.
Dashboard:
Display the progress over the past 7 days in percentages.
Include a section with the recommended meal intake for the current day for the user.
Profile:
Read-only mode displaying the user's photo, name, and surname.
Toggle button to switch between app themes.
Logout button.
Language settings for changing the app's language (currently supporting Ukrainian and English).
Training:
Active program display, clickable to navigate to the detailed program page (page 5). Or banner to navigate to Questionnairte page (8), if user doesn’t have active program
List of previous programs with distinct styling but also clicable to go to program details page (5) in the same way as for the active program.
Detail Program Page (Days):
Display a list of training days with minimal information for each (exercise count, possible progress).
Clicking on a training day navigates to page 6.
Exercises:
Show a list of training exercises for a specific day.
Each exercise should display minimal information (possible progress, etc.).
Clicking on an exercise navigates to page 7.
The list can include individual exercises as well as supersets, which should have a distinct visual style.
Detail Exercise Page:
Page containing detailed information about the exercise.
If it's a superset, provide detailed information about each exercise within the superset.
Include exercise name, possibly with a photo or video, and indicate whether it's a superset.
Present exercise data with columns: Set, Reps, Rest, Weight.
For the weight column, use input fields.
Add a notes section for each exercise.
Provide the option to view previously saved data and statistics for each exercise. Clicking on this (button) should open a modal displaying the last 1-3 saved results for that exercise. Include a "Load more" button to load previous (1-3) results.
At the bottom of the page, include "Save" and "Cancel" buttons when all data on the page is filled.
Note that for completed programs, data should not be allowed to fill and to be saved, and only previous results can be viewed. Therefore, the "Save" and "Cancel" buttons should be absent.
Questionnaire:
Page displaying various questions used to generate a personalized program.
Each question should show the question title, a brief description if applicable, and an optional tooltip icon.
Some questions may have a text input field, some require selecting a single option from multiple choices, and others may allow selecting multiple options.
Include "Back" and "Save" buttons at the bottom to navigate to the previous question and proceed to the next question (if the current question is answered), respectively.
On the last question, change the "Next" button to "Finish," which triggers a loader and displays the server's response in a modal window.
Required UI Components for the App:
Modal window
Loader
Text input
Radio button
Select (dropdown)
Checkboxes
Forms
…
All these components should have styles for both light and dark themes. Additionally, they should have warning/error/active/focus/disabled styles with corresponding messages.
The app should implement a bottom navigation bar, including the following pages:
2) Dashboard
3) Profile
4) Training
Other pages not included in the bottom navigation should have a top navigation bar with a "Go back" arrow and the current page's title.
Please note that this is a general outline of the information to be included in the documentation for the designer. Further discussions with the designer can cover specific details for each page and any additional requirements.
FYI: See screens attached.
Budget: $85
Posted On: April 18, 2024 15:27 UTC
Category: Mobile Design
Skills:Figma, Mobile UI Design
Country: Ukraine
click to apply