Moneygram Kiosk Redesign
MoneyGram has two types of kiosks: a full service version and a staging kiosk. The two have very different UIs and were created by different teams on different hardware platforms. I was tasked with creating a new kiosk UI that can be used for both kiosks so that MoneyGram could have a unified brand and customer experience.
The design process was iterative and collaborative. While I was the only designer, there was a lot of involvement of the product team, sales team, and the engineering team. We had check-in meetings to make sure that the design would work on all levels. Due to the base code limitations (.NET), we chose to keep the workflow and screens relatively unchanged, and the redesign was focused on the front end only.
I utilized heat map data from IT that showed what buttons were clicked on and how often for every screen, customer feedback from sales and support teams that outlined common pain points, and engineering and legal limitations on what fields were required, what information could be pre-populated, and at what point numbers would be calculated.
Kiosk Home Screen
Before / After
Service Selection Screen
Before / After
Notes:
Some of the design decisions that I implemented or advocated for were:
-
Create a "quick calculator" menu option that allows users to look up fees and exchange rates. While product wanted to put that (fee calculation) in the beginning of "send money" work flow, sales/support observed that our users preferred to enter their personal information first, then the sender's info, then the amount. To accommodate this mental model but still offer the convenience of seeing the fee first, I broke out the calculator function so that those who wanted to get that information first would be able to do so explicitly from the home screen.
-
Creating a menu option and hiding the "exit" function (not shown above). Product was concerned with the new design of not having an exit button readily available on every screen. However, our goal as MG kiosk is not to encourage people to drop out of their work flow, so having that negative action button so visible and saliant was not ideal. Instead, I nestled the options from the home screen in the menu panel on the left, a similar UI behavior to web and mobile.
-
Using: larger buttons, bold fonts, more neutral colors, new MoneyGram Online's brand color schemes (blue [calm/trust] rather than red [error/urgent]), slightly rounded button corners, adding drop shadows to buttons (i.e. affordance principle), more intentional and well balanced white space (within the constraints). Button properties (i.e. buttons will look inactive until necessary fields are filled but not absent [how it is currently])
-
Simplifying (or at least, making it appear to be) the work process. It was often remarked that users found the work flow process daunting and long. I added an "overview" page that a user will see upon selecting a menu option that explained the general process that they can expect to go through. This built a mental map of the process so that the user could prepare for the flow. Additionally, adding a progress bar at the top, consolidating certain data fields into fewer pages, and showing all the fields upfront and then walking them through each of them (rather than not knowing where the goal was).