I decided to use Apple Keynote to build my mockups after watching a presentation by Apple on how they build prototypes for projects. You can watch it and read my notes by clicking here.

I think they came out pretty good for the minimal effort it took to build. My next step is to test it with my target audience, get feedback, and then iterate.

Here are the mockups:

  • User arrives to landing page:
  • User clicks “SIGNUP”:
  • User clicks “LOGIN”:
  • User has logged in:
  • User clicks “+ Contacts”:
  • User click “Manually Insert Info”:
  • User has uploaded or manually inserted contacts”
  • User clicks on contact card to view more info:
  • User clicks “Update Contacts” and selects fields to update:
  • User waits as contacts are updated:
  • Processing is complete and now user sees updated contacts:
  • User clicks on contact card to view more info:
  • User is satisfied with contact updates and clicks on “Export Contacts”
  • User confirms export settings
  • User waits as contacts are exported:
  • Processing is complete and User now has his contacts update:

All the mockups were built using the free tools: Apple Keynote and GiphyCapture.

Overall, I think building the mockups was extremely benefitial. Just the process of actually having to translate an idea onto paper, really helped clarify some questions I had about how the app should interact with users and what features are key and which are not. Having mockups that are easy to build and iterate is going to save me alot of time during development, as I wont have to waste time re-writing code over and over.

If you have any comments or suggestions feel free to leave them in the comment section below.