Wireframes: User Testing & Refinement

Wireframes are visual tools to communicate content and user flow in a mobile application or website. I think of them as skeletons because they aren’t meant to define color stories and refined visual design, they are used to lay the foundation for a system.

Over the past 5 weeks I’ve worked to improve the interaction in my mobile banking app. I use USAA’s app weekly and have always been satisfied with the established tools and usability but this wireframe project has forced me to see the app’s inconsistencies and failure points.

The process I went through includes,

  • Concept Mapping the existing system
  • Creating a new Concept Map to reflect a more fluid and cohesive system
  • Storyboarding User Scenarios
  • Drafting initial Wireframes based on user needs and priorities uncovered in Storyboarding and the simplified Concept Map
  • User Testing Wireframes
  • Refining and User Testing again

Below is a quick snapshot of my wireframe evolution beginning with the last tested version followed by the 2nd version. You can see a shift in UI elements like the buttons and hierarchy of labels but you also notice a shift in organization. This week I user tested Version 4 and reported critical fails in the app below.

Version 4:

mobile_banking_wireframes_rnd2-69

 

Version 2:

Mobile_Banking_Prototype_Rnd_1-02

User Testing helps me quickly see the flaws in functionality and pushes forward rapid ideation of the app. It involves sitting down with strangers and asking them to complete several tasks in a prototype of the app. I used Think Aloud which is a more specific testing method that challenges the designer to simply listen and encourage the user to “keep talking” or “think aloud” so that you don’t interrupt their train of thought and you hear as their un-biased perception of each screen and function. Each time a user can’t proceed or attempts the wrong path in a flow it is considered a “critical fail”. I’ve documented 5 critical fails from this week’s user test.

mobile_banking_wireframes_rnd2-67 mobile_banking_wireframes_rnd2-68

After testing and sitting down with a more experienced designer to review my work I,

  • Removed “Accounts” from action bar
  • Replaced the date picker with a calendar
  • Designed 3 alternatives to review with the cohort for adjusting fixed payment amount in bill pay
  • Moved the option to make a one time payment in bill pay

Version 5:

mobile_banking_wireframes_rnd2-65

mobile_banking_wireframes_rnd2-67 mobile_banking_wireframes_rnd2_Artboard 118

check_balance_notificaitons_v5-66