Create Object Mobile Pattern Workflow Wireframes & High Fidelity Prototype

THE CHALLENGE

DESIGN A MOBILE PATTERN WORKFLOW THAT DESCRIBES THE PROCESS OF ADDING A NEW ENTRY INTO AN iOS MOBILE CUSTOMER LIST

My Goal was to plan and design the wireframes required to add a new entry into an iOS mobile customer list. I would then translate the wireframes into a high fidelity prototype within the Alta Mobile UI Design System by designing the following screens:

1. Customer List Item Page.

2. Add Customer with Hint Text page.

3. Text Entered Page.

4. Modal View with Popup Sheet Page.

5. Photos Page.

6. Portrait Page.

7. Portrait with new Avatar Page.

8. Customer List Screen with New Entry Page.

My Role

I planned the user interface layouts and the navigation workflow of all the mobile pages listed above. In addition, I also designed the following:

1. All graphic assets for the wire frame images.

2. Translated all the wire frame images into high fidelity layouts.

3. Created the “Add a new entry into an iOS customer list” workflow navigation animation.

THE IMPACT

I think the Create New Object Pattern workflow wireframes and the resulting high fidelity pattern animation is successful in that it communicates the user interactive process in adding a new customer to an iOS contact list.

If a picture or UI layout says a thousand words, I think an interactive pattern animation says even more!