UX/UI Design Brief in Figma– Check Driver License Mobile App
Budget: $30 – $250 USD
Purpose of the Application
Need to design about 15-20 screens in Figma for mobile app.
The “Check Driver License” mobile app allows users to verify the status of a driver’s license, manage driver profiles, and handle basic user login and registration. Key functionalities include checking license validity, adding driver profiles, and configuring user settings.
Application Structure
1. Dashboard
• Main panel with the primary menu.
• Large buttons (cards) with spacing:
• Check Driver License
• Driver List
• Add Driver
• At the top: a hamburger menu or button opening a side menu with:
• Dashboard
• Settings
• Log in / Log out
• Note: If the user is not logged in and selects “My Drivers,” they should be redirected to the login screen.
2. Check Driver License Screen
• Fields to enter:
• First and Last Name
• Driver’s License Document Number
• Check button.
3. Driver License Check Result Screen
• Shows the status:
• Green check – license is valid.
• Red check – license is invalid.
• Displays additional license information and the categories held by the driver.
4. Add Driver Screen
• Note: If the user is not logged in, redirect to the login screen.
• Form for adding a new driver.
5. Login Screen
• Fields:
• Email
• Password
• Log In button.
6. Registration Screen
• Fields:
• Email
• Password
• Confirm Password
• Selection:
• Private Individual
• Company (with an additional field for Company ID Number + a button Fetch Company Data, which then displays the retrieved company details)
• Register button.
7. Email Verification Screen
• Field to enter the code sent to the user’s email.
8. Redirection After Successful Registration
• After successful registration, the user is redirected to the login screen.
9. Forgot Password Screen
• Form to reset the user’s password.
10. Driver Addition Confirmation Screen
• Confirms that a driver has been successfully added.
• Go to Dashboard button.
11. My Drivers Screen
• Displays a list of drivers with:
• Name
• License Document Number
• License Status
• Reserved space for an advertisement banner.
12. Settings Screen
• Options:
• License Status Refresh Frequency
• Notifications
• Change Email
• Change Password
13. Login/Logout Screen
• Allows the user to log out and log in again if needed.
Additional Requirements
• Advertisements: Planned ad banner placements on the following screens:
• My Drivers
• Add Driver
• Dashboard
• App Icon and Splash Screen: Should reflect the driver’s license theme (for example, an icon resembling a license document).
Notes for the UX/UI Designer
• The app should be intuitive and easy to navigate.
• Key buttons should be clearly visible and easy to tap.
• Use a modern, professional design style, consistent with the app’s theme.
Need to design about 15-20 screens in Figma for mobile app.
The “Check Driver License” mobile app allows users to verify the status of a driver’s license, manage driver profiles, and handle basic user login and registration. Key functionalities include checking license validity, adding driver profiles, and configuring user settings.
Application Structure
1. Dashboard
• Main panel with the primary menu.
• Large buttons (cards) with spacing:
• Check Driver License
• Driver List
• Add Driver
• At the top: a hamburger menu or button opening a side menu with:
• Dashboard
• Settings
• Log in / Log out
• Note: If the user is not logged in and selects “My Drivers,” they should be redirected to the login screen.
2. Check Driver License Screen
• Fields to enter:
• First and Last Name
• Driver’s License Document Number
• Check button.
3. Driver License Check Result Screen
• Shows the status:
• Green check – license is valid.
• Red check – license is invalid.
• Displays additional license information and the categories held by the driver.
4. Add Driver Screen
• Note: If the user is not logged in, redirect to the login screen.
• Form for adding a new driver.
5. Login Screen
• Fields:
• Password
• Log In button.
6. Registration Screen
• Fields:
• Password
• Confirm Password
• Selection:
• Private Individual
• Company (with an additional field for Company ID Number + a button Fetch Company Data, which then displays the retrieved company details)
• Register button.
7. Email Verification Screen
• Field to enter the code sent to the user’s email.
8. Redirection After Successful Registration
• After successful registration, the user is redirected to the login screen.
9. Forgot Password Screen
• Form to reset the user’s password.
10. Driver Addition Confirmation Screen
• Confirms that a driver has been successfully added.
• Go to Dashboard button.
11. My Drivers Screen
• Displays a list of drivers with:
• Name
• License Document Number
• License Status
• Reserved space for an advertisement banner.
12. Settings Screen
• Options:
• License Status Refresh Frequency
• Notifications
• Change Email
• Change Password
13. Login/Logout Screen
• Allows the user to log out and log in again if needed.
Additional Requirements
• Advertisements: Planned ad banner placements on the following screens:
• My Drivers
• Add Driver
• Dashboard
• App Icon and Splash Screen: Should reflect the driver’s license theme (for example, an icon resembling a license document).
Notes for the UX/UI Designer
• The app should be intuitive and easy to navigate.
• Key buttons should be clearly visible and easy to tap.
• Use a modern, professional design style, consistent with the app’s theme.