Kristie Meyer has the ability to look at something and visualize how it can be designed better, function better, work better. Chock it up to her graphic design background. She’s an artist who sees potential in the bigger picture. “I look at things for how they should work, not how they are now,” she said. But that’s what good designers do – they look for the purpose of an item in relation to the bigger picture. “Design should be useful and practical in nature and service the purposes of others,” she said.
That’s why when it came time for us to make big changes to our Cashnet UI/UX, Kristie, a seasoned Cashnet employee who knows the nuts and bolts of our payments system, was the obvious choice to lead the job. “Kristie is well-positioned to make sure the UI/UX design is handled holistically,” said Don Smith, VP of Payments Product Management, “and to ensure we are not compromising on our vision for these improvements.”
Kristie started at Cashnet 10 years ago, and worked her way through roles in deployment, support, and eventually product. She is now the Senior UI/UX Designer. The entire time she was amassing information about our products and the various ways they are used on campuses across the country.
The larger picture.
In design, it’s often been said if you need to get a grasp on the bigger picture then you need to start small. When Kristie started at Cashnet, functional manuals had not yet been written for many of the modules, so she was tasked with writing them. And while she wrote, she saw things that could be improved. [ I would just take it upon myself] to enter enhancement requests–something related to the product that could be improved– changing existing behavior or functionality, or creating new functionality behavior.” As a Senior Designer, she is able to leverage this experience to develop plans on how the system should look, what it should do, and how customers should experience it.
“There’s no doubt the UI/UX was in need of updating,” said Kristie. She saw there was a tremendous opportunity to make things more intuitive for our users.
Kicking things off.
Things got moving in October 2014 when Cashnet engaged an industry-leading design firm in San Francisco. In daily meetings over the course of a few weeks, a strategy was defined for a significant, multi-release initiative focused on both the administrator and student user experience (UX) and user interface (UI).
One of the most important results to come from this effort was developing Design Principles (see below) to dictate all changes to our UI/UX design. Everything that would ultimately be designed for the new eMarket setup experience would now have to be evaluated against a 5-point checklist. If it didn’t meet these requirements, it was either cut or redesigned. “Basically only fields that were relevant would now appear,” said Kristie.
Kristie gathered every single page together that needed to be accessed for campuses to create their eMarket Storefronts or Checkouts. She then started researching and rearranging everything and grouping like fields together. Kristie took her product knowledge, her insight and awareness of product needs, combined them with the visual design part of her background, and put it all together. The results? A much more intuitive and efficient experience. In the new set up, campus administrators will benefit from a significantly streamlined store creation process.
Smart & intuitive.
The number of separate pages a user needs to access in order to setup an eMarket Storefront has been reduced by more than half. “An average of 21 pages were whittled down to 6,” said Kristie. This was made possible by designing more intelligent screens, which only present the configuration options associated with the goals for the user. “This enables us to streamline setup without compromising the versatility that clients enjoy with our eMarkets,” said Don. The configuration options were also reordered (and in some cases renamed) to form a more intuitive flow that will greatly reduce the amount of training for users.
What are clients saying? A validation.
Steady client feedback has always been an important part of the Cashnet philosophy. In a recent letter to our clients, SVP & GM Matt Dorf wrote how it plays an integral role in the evolution of our products and service. “Our goal is to work with our clients to meet campus needs and to pioneer the latest in payments technology,” he said.
With that philosophy in mind, Kristie took the time to curate conversations with our customers to listen and learn from them. She reached out to a group of power users who agreed to test a beta version to help think through some elements of this design, as well as validate some of the decisions that were made. “Their feedback was really positive, and they also had quite a few good ideas,” said Kristie. “We were able to make really good changes based on their feedback.”
What is UX Design?
It enhances customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.*
The validation of the beta design from these early users was an important step in the process. It helped to cement the design principles and pave the way for future changes to the UI/UX.
“For a long time I’ve wanted to make changes that help make Cashnet easier to use,” said Kristie. “This position has given me the opportunity and freedom to explore the best ways to make that happen.”
5 Design Principles to Guide all UI/UX Decisions
1. Use smart organization
Like elements have been grouped together as much as possible so it’s not necessary to go to multiple places to complete one task.
2. Present information and options only when relevant to context
As store setup selections are made, only the fields that are relevant will appear. It’s no longer necessary to know which fields can be ignored, you simply won’t see them.
3. Reduce the number of decisions a client needs to make
Users will not be asked if commonly used features should be turned on, they will be on and available for use if desired.
4. Use smart default values
In most cases, the choice that is most often selected will already be selected for you. If multiple fields only apply when one of the less common choices is selected, those fields will initially be hidden.
5. Use consistent labeling
It won’t be necessary to learn multiple terms for the same definition. Users won’t need to waste time wondering if multiple terms mean the same thing.
Changes in the .2 release are currently being completed. We will next turn our attention to the payer-facing experience that will be detailed in our next blog.