Eastern Union Mobile Loan Tracker App: "Add Contact" Page Design

EU Add Contact.png — The Prompt

Design the Contacts section of the Eastern Union Mobile Loan Tracker App

The Status Quo

Currently, the Desktop version of the "Add Contacts" Form leaves a lot to be desired (see below). But the Business (Eastern Union: Mortgage Bankers) was focused on the Mobile First Strategy and wanted this feature to be included in the currently existing Mobile app. Click here to view the App on the App store

"Add New Contact" Modal in the current Loan Tracker Desktop Version.

Discovery

Discussions with the Stakeholder exposed the following pain points: The page is cluttered and most of the Mortgage Bankers avoid it altogether. This means that they maintain data on their local machines and not in Loan Tracker -- which defeats the purpose of the Tool.

Initial Version of the "Add New Contacts" Screen

In keeping with the Android Design Guidelines and a simple scroll for adding information to the sections, this version of the design was reviewed with the stakeholders. Note: They did not want to see wireframes for this particular project, which is … — In keeping with the Android Design Guidelines and a simple scroll for adding information to the sections, this version of the design was reviewed with the stakeholders. Note: They did not want to see wireframes for this particular project, which is why a full blow design was presented. While the stakeholders unanimously agreed on this current design, they mentioned that a redesign of the entire mobile app was the need of the hour. We were prompted to look into various designs for these particular screens.
Deliverable: Clickable prototype.

Design #1: Accordion Style

The accordion style design allows the user to add contact information without scrolling and leaving the page. Deliverable: Clickable prototype. — The accordion style design allows the user to add contact information without scrolling and leaving the page.
Deliverable: Clickable prototype.

Design #2: Vertical Scroll

This design resembled the initial version except that in this design each section heading was highlighted for better usability. Deliverable: Clickable prototype. — This design resembled the initial version except that in this design each section heading was highlighted for better usability.
Deliverable: Clickable prototype.

Design #3: Horizontal Menu

This design was a modern take on the form functionality with menu items / progress bar at the top. This let users know how far they’ve progressed toward completing the entire form and what steps are coming up next. The Step-by-step form breaks the t… — This design was a modern take on the form functionality with menu items / progress bar at the top. This let users know how far they’ve progressed toward completing the entire form and what steps are coming up next. The Step-by-step form breaks the task into digestible chunks, not only reducing the risks of users’ missing fields, but also alleviating user anxiety about the task’s difficulty and the time it will take to complete it.
Deliverable: Clickable prototype.

Final Words

As of this writing more testing (and iterations) are required. The stakeholders are seriously considering Design #3 as the basis for the complete design overhaul of the app.