MoneyGram Kiosk UI Redesign
MoneyGram has two types of kiosks: a full service version and a staging kiosk. The two have very different UIs and are 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 can have a unified brand and customer experience.
Kiosk Home Screen
Before / After
Service Selection Screen
Before / After
The design process was very iterative and colaborative. While I was the only designer, there was a lot of involvement of product, sales, and engineering in 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 how often for every screen, customer feedback from sales and support teams that outlined common pain points, and engineering and law bsed based limitations on what fields were required, what information could be pre-populated, at what point numbers would be calculated, etc.
Full Service Kiosk
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. 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).