Screen Shot 2014-10-04 at 9.14.04 am



throughtout the actual desing of the app i chop and changed and variated the design from the wire frames to get the right look and feel for the app. few resources i looked at often were UX links from nadc esp iloveui & general google seaches for buttons, screens and more. One other resource i used was a ebook about uxpin_mobile_ui_design_patterns_2014 which helped me with current mobile application examples.


Dan had a look though the app in last weeks class and advised of a few things to be changed

  • Spacing of the logo
  • More defined home button as it currently looks more like a upwards arrow
  • $ – payment sign to be changed as it doesn’t blend in with other design elements.
  • Spelling to be corrected throughout app
  • Update confirmation page with correct colour scheme

Your order number is dead

Throughout the whole process of designing the application i wanted to include a feature that would show what order number will be. design challenge was to include in to fit the style of the app so i have decided to leave it out.

This is based on the fact the it would like the coffee shop to interact with the app on there end and therefore cost more to develop. I propose to add this in as a feature in the next update of coffee project.

Wire Frames & Live testing

Final Illustrator wireframes have been completed and tested.

User issues in test :

  1. Me fumbling around with pieces of cut out paper and telling person what will happen next .
    Solution – next person i tested, i laid out all the screens and only advised that they have to choose the buttons and find the appropriate next screen. outcome was that app seed to flow.
  2. No member input for “forgot your password ” solution – input screen added for email address and an email will be sent to address. one of two emails will be sent, 1st with link to reset password and 2nd if there is no email match on database then a new member sign up link will be added.
  3. Need to access settings to update without leaving ordering process eg, credit payment failed, fav our changed
    solution, credited links in all ordering pages and pop up menu
  4. Personally testing it i found that i was using to many different selection methods in app ( click select, scroll, data input )  To me the coffee ordering process is really simple and the app should mimic that same process so i have changed the whole ordering system to be dropdown selections only and ability to move to next data set whilst in dropdown.
  5. tester didnt like menu button being same size as logo and right next to it, will play around with location and size

wire frames1Screen Shot 2014-09-15 at 10.57.39 pm


I have been sold on app with clean sharp images as the background with clean strong lines/text/icons. 

have tried a few different ones that have worked but have now after almost finishing the app found one that works the best. 

I really like the coffee beans as the image is light and the existing design elements look really good and achieve the look i was designing too.

Throughout i am using a blue/aqua colour box as the header and for the logo to sit on top. this was done to emphasise the logo and provide some brightness to the app but with the new background i have decided to remove it. please let me know which one you like better