top of page
Beige Paper

MoneyGram Alloy UI/UX Update

Alloy is a product that MoneyGram bought from a startup called Nexxo. It is a software used by bank tellers to process checks, murchase money orders, send money, and so on. While it's an incredible product, the UI and UX of it is completely outdated and frankly, "un-designed." MoneyGram has spent most of its hours expanding and supporting the core mechanics, but neglected to update the UI. Thus I was given the task of updating the aesthetics, interaction, and the overall user experience.  

Old Alloy UI
NEW Alloy UI/UX (spec)
Alloy Home
Cart Panel at Home
Cart Summary_ Error
Bill Pay_ Transaction Details (One Page Design)
Card Swipe Error Messages
Checkout design options
Checkout Step 1_ Cart Summary
Checkout_ Acknowledgement Step
Checkout_ Error
Checkout_ Step 3
Customer Search by Card Swipe
Check Processing Flow
Customer Session Menu
Tile Hover Behavior_ Functions with Shortcuts
Tile Hover Behavior_ Single-Function Items
Transaction Added_ Success
Transaction History
New Customer Registration_ Error
New Customer Registration_ Form on Desktop
New Customer Registration_ Information Review
New Customer Registration_ No Search Results
New Customer Registration_ Search
New Customer Registration_ Search Results Found
Send Money Flow
Send Money_ Confirmation
Send Money_ Register New Receiver
Send Money_ Select Receiver
Send Money_ Transaction Details

Here you can see some of the pages from the spec that I created. This document became the base document for product, engineering, and QA to base the building of the new UI. Additionally, I created a styleguide to document the new MG branding that was used in this redesign.

Alloy Styleguide
Alloy 2.0 UI Style Guide_Type
Alloy 2.0 UI Style Guide_Text Box and Dropdown
Alloy 2.0 UI Style Guide_Search
Alloy 2.0 UI Style Guide_Search Results
Alloy 2.0 UI Style Guide_Progress Bar
Alloy 2.0 UI Style Guide_Menu
Alloy 2.0 UI Style Guide_Home Screen
Alloy 2.0 UI Style Guide_Home Screen Widget
Alloy 2.0 UI Style Guide_Error Messages
Alloy 2.0 UI Style Guide_Dialogue Modules
Alloy 2.0 UI Style Guide_Colors
Alloy 2.0 UI Style Guide_Chceckout
Alloy 2.0 UI Style Guide_Cart
Alloy 2.0 UI Style Guide_Buttons and Links

Some core design considerations + decisions: 

 

  • A cohesive, flat, modern UI

  • Visually pleasing use of white space to leaverage grouping properties and to make the application feel lighter + easier to use. 

  • Creating a UI that would work on desktop as well as mobile / touch based devices. 

  • Striking a balance between offering robust functionalities while maintaining a minimalistic and clean interface. 

  • Proper IA and hierarchy of navigation and menu options. 

  • Offering shortcuts and other smart features to minimize the click count and optimizing the "happy path." 

bottom of page