Web Development for Wells Fargo Bank
2011While working for the Wholesale Interactive Services department at Wells Fargo Bank, I developed numerous preliminary prototypes and the final prototype for usability research sessions conducted Spring 2011. In addition I explored/developed web-based solutions for presentation of wireframes or other design images for internal review.
User Research Final Prototype | User Research Preliminary Prototypes | Design Review Prototypes | Prototype Tool Evaluation
Per the designer's Fireworks mockup, developed the prototype for usability testing conducted in Spring 2011 as part of the research phase determining requirements for the new version of the Commercial Electronic Office website. This prototype was intended to have a wireframe look since visual design research (colors, logos, etc.) was not included in this round of research tests, and it included interactive elements only in areas pertaining to the particular questions posed and scenarios discussed during the user interviews.
- Features included in the prototype:
- Link targets opening in either dynamic tabs on the home page (some in new tabs, and others overlaying already open tabs where functionality was related), new (child) windows, or the same window (overlay)
- Mega menus
- Drop down search box and other boxes connected visually to the menu bar
- Toolbar in secondary pages similar to menu bar on home page with global menu items
- Tooltips
- Carousel of information for various support personnel
- Help modal dialog
Note that the actual prototype was much 'richer' in appearance, including numerous Wells Fargo screens and graphic elements as well as many more working links (with actual Wells Fargo labels) and other interactivity. This version has been modified/abbreviated to give an approximate idea of the project while avoiding the display of Wells Fargo proprietary content. (Also note: There was no cross-browser requirement since all testing was done with the same browser--Firefox, so display may vary.)
Developed over 20 preliminary prototypes prior to developing the actual prototype for Spring 2011 user research testing. The purpose of the preliminary prototyping was to 1. build a set of reference pages containing interactive elements (in various combinations) that were likely to be used in future actual usability testing prototypes, and 2. provide working tests to help designers in determining the best design directions (because sometimes seeing it in action makes all the difference). Requirements were informal, fluid, and varied in terms of level of specificity.
Interactive aspects included: navigation placement and style/behavior (top vs left, overlay vs expandable push down, expandable categories vs all visible, all levels of navigation menu in 1 container vs split into more than 1 container, activation on click vs hover, standard scrolling vs arrow scrolling, sliding vs fade-in animation); panel behavior (collapsible, flippable, draggable within a grid or not and contained to an area or not); expandable footer bar style/behavior (animating sideways vs up); 'more info' dialog box styles (modal overlay vs draggable popup vs main content area overlay); and dynamic sortable tabs (with or without a fixed home tab).
- Examples:
- Sample Preliminary Prototype 1
- Sample Preliminary Prototype 2
- Sample Preliminary Prototype 3
Developed web-based prototypes for displaying groups of wireframes and other design images for internal review. These prototypes were intended to help serve as starting points for discussing requirements for future development of a full-scale internal review application. Requirements were general: present a few different slide-show options where images can be grouped and comments can be entered.
- Examples:
- Presentation with clickable slideshow (opens in a window) | Presentation with clickable slideshow (opens in a new tab)
- Presentation with slider (opens in a window) | Presentation with slider (opens in a new tab)
- Presentation with thumbnail links and filtering (opens in a window) | Presentation with thumbnail links and filtering (opens in a new tab)
Also explored various WordPress solutions per request.
Evaluated and provided my findings for the Justinmind prototyping tool.