2017 - 2018
Product content specialist
Process: 01 - Understanding the problem space
02 - Exploring solutions
03 - Outcomes & Impact
01 | Understanding the problem space
Project context
For most of it’s history, Merchant Link focused on providing cloud-based payment gateway services to its clients. The hardware program was designed to help the company grow from a purely behind-the-scenes payments processor to an end-to-end payment experience provider. As part of this initiative, Merchant Link began offering clients hardware packages that included all of the equipment needed to process payments in an in-store environment, including Payment Entry Devices (PEDs). I joined the multifunctional In-Store Solutions team tasked with creating a satisfying customer experience for the new program.
Discovery conversations
During initial stakeholder conversations, I learned during the initial phases of launching the payment terminal program, the hardware developers had quickly put together the displays shown to end users during the transaction process to meet tight deadlines. And because there were no designers on the team, individual developers had been left responsible for the user experience without a cohesive plan or strategy.
CHALLENGES👾 Fast development > user experience
Tight launch deadlines had long put the focus on pressing development issues pushing UX considerations to the back burner. While the initial design allowed users to complete the payment process, the design did not adhere to basic heuristic best practices, inconsistent across different devices and at times confusing to navigate, leading to widespread instances of user error.
🤔 Many devices, one solution
Because of discrepancies in different customer environments, Merchant Link had to offer and support more than a dozen PEDs, from 3 different manufacturers with different capabilities and limitations. This made it really difficult to design a consistent user experience across all of the devices.
🤷🏻♀️ To swipe? Or not to swipe?
Right around the time this project kicked off, the US payments industry underwent a huge shift. Banks and merchants were now required to support chip card payments to improve transaction security. Unfortunately, many merchants reported that their customers (our end users) were struggling with the shift from swiping to inserting or tapping their payment cards.
To get a better understanding of the issues, I worked with my product manager to conduct interviews with operations, QA and tech support staff and create a high-level list of project objectives.
OBJECTIVES ✅ Develop a clean, streamlined interface that helps users avoid errors and navigate the transaction process intuitively ✅ Create a design flexible enough to create a consistent user experience across multiple devices and support future capabilities/features ✅ Create a design system of assets and branding guidelines that can be used to quickly create new PED interface packages as needed ✅ Work with developers to make it easier to deploy and install interface updates remotely ✅ Standardize and document governance processes
During these conversations, I also learned that there was a lot of interest from clients with large organizations to deploy payment terminals with user interfaces that reflected their individual corporate brands.
Realizing that this seemingly simple redesign would be a large undertaking, I decided to break the work into 3 phases that we tackled over the course of a year.
02 | Exploring solutions
Phase I: Establishing a design baseline
The first and core goal of this project was to design a default, generic interface package that addresses all major usability issues and has a minimal visual identity that would set the baseline for all additional work.
We began with the Ingenico ISC250, the most popular terminal we sold, and the ISC480, which shared the same screen resolution. Because I knew that the technical limitations of the devices wouldn’t allow us to create a single, responsive design that could be uploaded onto any device, I came up with a grid system that used ratios to set a standard for spacing the different objects that needed to appear on each screen.
I also worked with the team’s Systems Analyst to inventory all possible displays and map out user flows for each possible type of transaction and identify which screens would need major adjustments and testing to improve their usability, and which only needed cosmetic tweaks to match the look and feel of the others. Finally, I used all of this information to sketch out some wireframes and a lo-fi testing prototype in Adobe XD.
I handed off the prototype to QA to test and fix any issues on the technical side, then worked with marketing to create a visual strategy based on the company’s branding guidelines and a built a library of visual assets (buttons, icons etc) in Adobe Illustrator, and write up a style guide for future iterations.
After we had a working development version of the prototype, I worked with the delivery operations team to deploy the new design to select customer sites. These customers sent us feedback on the way the new design performed with users in their live environment. We used their feedback to make changes and edits to the design as needed.
Phase II: Iterating and replicating results
After working with QA and development to iron out technical issues following the initial launch, I attended the company’s Product Summit conference, where I co-led a working session with my product manager to socialize our work with customers and partners. Through this session, we were able to gather some crucial product feedback that helped us make additional tweaks to our design.
I then spent the next few months working sprints to design interfaces for each of the other devices. We continued using the flexible grid system to accommodate each of the different screen resolutions and device features without compromising the uniformity of each individual design.
Phase III: Custom branded designs
In this phase of the project, I worked closely with our team’s Solution Architect to design custom branded interface designs as a value added service for select high profile customers.
The process:
- I attended client stakeholder meetings with our Solution Architect to get an understanding of the client’s needs and brand.
- I held additional meetings with client marketing teams to get more information about their branding guidelines and standards and worked closely with them to add custom branding to our default interface package.
- I created a prototype version to demo for the customer on a test device and collaborated with them to refine the design before packaging it up and deploying it to the live environment.
03 | Outcomes & Impact
Next gen devices
Shortly after we completed the initial phases of the project, Merchant Link’s main hardware manufacturer (Ingenico) released a new line of payment terminals. These devices had a lot more functionality and opened up many new options to make the user experience more interactive. Merchant Link soon announced a plan to begin sunsetting the old line and introducing the new devices to customer sites
My final contribution to this project was to develop a design concept for this next generation of payment terminals and work with QA and Dev to test the devices’ new interface development capabilities.
My new design concept was shown at demos and shows to promote the launch of these new products and later served as a template for the new interface designs.
💡 PROJECT IMPACT The new “base” interface packages were deployed on more than 10K devices in merchant in-store environments across North America and the Caribbean. We also delivered custom branded interfaces for more than 20 clients who deployed them on hundreds of devices, including one well known brand that has used the design in hotels around the world. Shortly after I left, Merchant Link was acquired by Shift4 payments who redeveloped the design to meet their brand standards, but continue to iterate on the initial groundwork we laid during this project. This project really sparked my interest in using design to solve challenges for users and more or less kicked off my career in UX. Although it was my first project and my UX skills were still kind of informal at the time, I grew so much as a designer because of this project and the mentoring I received through it. That’s why it’s still one of the projects i’m most proud of to this day.