The last article in our UI/UX Series explores how techniques enable a design to re-orient into a mobile-optimized layout.

 

The rapid evolution of mobile has delivered a dramatic shift in a customer’s purchase journey. How could it not? There are more smart devices in the world than there are people! The prevalence of smart phones and tablets has helped higher education evolve to support students both in and out of the classroom. Leveraging technology has made classes more accessible and expanded hours of operation with self-service portals. An important element of this evolution has been how payers interact with the business office. How can a higher education institution support an increasing number of payers using a mobile device to make payments? By making it easy for them.

Welcome to the 3rd installment of articles in our UI/UX series—changes to Cashnet Mobile payments, specifically for the payer-facing eMarket checkout experience! Cashnet faced its usual challenge of giving a face-lift to an old design into something more streamlined to benefit the customer. The Mobile payer-facing checkout screen needed to be more flexible in order for customers to view it on any mobile device. The old experience was not responsive, which made it difficult to navigate if the payer was using a screen size not considered for the original design. The solution? Redesign the flow in a responsive structure so we can offer an optimized user experience to all payers; regardless of screen size.

Kristie Meyer, the senior UI/UX Designer responsible for revamping the UI/UX eMarket checkout designs, was once again tapped to design updates—this time for the Mobile eMarket checkout process. It was a natural fit as she could easily apply her design principles from streamlining the payer-facing and admin-facing designs to the Mobile payer-facing design.

Responsive Design

What is responsive design?

A responsive design is a solution that offers flexibility for your entire site layout to fit into any possible screen resolution. It is essentially a design that reinvents itself by resizing for each screen. Designers no longer have to design for each device.

How did Kristie accomplish this with the Cashnet eMarket Mobile payer-facing checkout screens? She worked with the same outside design firm she used for the other applications. “We began with the check-out screens and process, focused on the same strategy of streamlining and updating all the pages to look seamless,” said Kristie. “We also worked on making these [same] pages mobile friendly and responsive to any device.” This involved a lot of consideration to the arrangement of how the images and text will adapt to various screen sizes. As with any design project, they went through a few iterations until they found one that worked.

CASHNet Mobile Payments

*Concept image shown may not represent final design.

Updates to the payer-facing checkout screen now include:
  • Design buttons are wider and bigger for more ease of usability
  • Text size is larger and consistent across the board for better readability
  • Order summary is not visible the entire time allowing for decluttered screens and a simpler user experience

Cashnet is dedicated to improving the payer-facing experience to make life easier and better for clients. The product team has worked hard to understand their needs and deliver the best possible solutions with a streamlined interface and an improved user experience. The changes to the checkout experience that will occur in October will remove friction making for an easier user experience. The product team will continue to roll out additional changes to the payer facing experience in subsequent releases, leveraging additional feedback from payers to influence product design.

“We are excited to invest in the payer-facing experience and evolve the technology to meet the changing and growing needs of payers,” said Don Smith, VP of Product Management. “There is a tremendous opportunity for us to improve the product for payers and to help them on their path to graduation.”