Competency

In this project, you will demonstrate your mastery of the following competency:

• Apply user-centered design principles and industry standards in the development of a mobile application

Scenario

Congratulations! Your App Development Proposal has received approval after being shared with both your client and the mobile application development team at Mobile2App. It is now time to construct a UI based on your original proposal. You must supply the client with a complete UI design that is easy to understand and demonstrates a creative theme and layout for the finished application.

Directions

Open the Android Studio Layout Editor to begin creating the UI for your app. Be sure to use the Install Android Studio resource and the Build a Simple User Interface resource, both linked in the Supporting Materials section, to get started with this software. Throughout this project, continue to reference the App Development Proposal you completed in Project One while paying particular attention to the section on UI Design. Also be sure to let the Android Design and Quality Guidelines document, which is linked in the Supporting Materials section, guide your decisions.

Your completed UI should include all of the screens needed for your app to operate but the UI will not yet be functional. You will only be creating the UI components for this project as the supporting code will be completed in Project Three.

1. Create UI with appropriate design elements to support a user logging in (1 screen). Your UI must include a login screen, that contains the following:
   • Fields for the user to provide a username and password
     • Note that the password element should be configured in a way that obscures any text that is typed into the field. This means the text will need to be visually converted into dots.
   • A button for the user to submit their username and password
   • A button for the user to create a new login if it is their first time using the application
     • Note that to simplify the account creation process, you can use the same login screen for this purpose. Create a button that will add the username and password into the database if it does not already exist.
   • Any other fields or elements that are necessary to make your application visually appealing, intuitive, and usable

1. Create UI with appropriate design elements to display database information as a grid (1 screen). Your UI must include a data display screen, that contains the following:
   • A grid for displaying data
   • Logical labels and headers for the data that will be displayed
   • A button for adding data to the grid
   • A button on each row for deleting that row of data from the grid
   • A mechanism that allows a user to change the value associated with each grid item (e.g. the number of a specific item in an inventory or the date of an event)
   • Any fields needed to add data to your grid, though this can be on a new screen if you feel the layout is better for your app

1. Create UI with appropriate design elements to prompt a user for permission to communicate with the text messaging app and display information based on permission (1 screen). Your UI will need to include a button, or alternate mechanism, that would cause the app to ask a user for permissions so it can communicate with SMS messaging. A user that grants permission will then receive automated system notifications based on which option you chose in Project One. These notifications would be low inventory, an upcoming event, or reaching a goal weight. If the user denies access to the permissions needed for the app to interact with SMS, then your app should still continue to function overall but should not provide any notifications.

1. Develop visual hierarchy and consistency between UI elements on different screens. The layout for each screen should follow an intuitive visual flow, have a consistent theme, and be creative but still easy to understand. Ask yourself the following to help determine if your visual hierarchy is successful:
   • Does my focus order match with the steps a user would follow when completing a task?
   • Does my grouping organize content in a way that makes sense for the user?
   • Do my transitions have consistency between screens and tasks?

What to Submit

To complete this project, you must submit the following:

App UI Design

Your final design should be submitted as a ZIP file including the full contents of your Android Studio project. Remember to title the file with your name and the app option you previously selected.

Supporting Materials

The following resource(s) may help support your work on the project:

Install Android Studio
Use this guide to download and install Android Studio depending on the operating system you will be using.

Build a Simple User Interface
Follow these instructions to access the Android Studio Layout Editor from Android Studio to begin building the user interface.

Android Developers – Design for Android
Your app will need to meet specific requirements so it will look and behave in a way that is consistent with the Android platform. This website details the material design guidelines for visual and navigation patterns along with the quality guidelines for compatibility, performance, security, and more.

Material Design Accessibility
These visual hierarchy guidelines set forth by Material Design will serve as a useful reference when creating focus order, grouping, and transitions.