The Final Product
Below is a video of the final prototype we created: A panel that displays information about features on a specific page. This tool is content aware, so depending on the page, the information in the panel updates accordingly.
While the video shows our prototype, I'd like to note that we also deployed a fully functioning version of this tool, made with React, TypeScript, ElasticSearch and Vite .
Designs
Below are some images of designs. I can’t share the actual Figma file due to no longer having access to the NCR Figma, but here are some screenshots. I'd be happy to share more of this project in a 1 on 1 conversation!
The first image is of the document we created for developer handoff and the second is of some high-fidelity prototypes I made.
Below are some images of designs. I can’t share the actual Figma file due to no longer having access to the NCR Figma, but here are some screenshots. I'd be happy to share more of this project in a 1 on 1 conversation.
The first image is of the document we created for developer handoff and the second is of some high-fidelity prototypes I made.
The Process
UX and Market Research:
Before we could start designing, it was important that my partner and I had a good sense of what makes good and bad self-help tools. To do this, we read research done by several UX research groups, as well as studied the existing tools offered by companies that create help tool as a SaaS offering.
At the end of our research phase, we determined the current offerings were insufficient for NCR's needs, and proceeded to begin designing solutions that would meet NCR's specific requirements for a help tool.
Design:
My partner and I chose to do our designs using the double-diamond approach. What this means is that we diverged in our original brainstorming process, then converged on what features we wanted to have in our tool. Then we once again diverged when creating our designs, then converged to create the final design.
During this, I created multiple high fidelity protypes and wireframes, so that my partner and I would have a wide variety of ideas to choose from when settling on our final concept.
User Testing:
When creating designs, it is extremely important that perspective of the end-user is taken into account. To do this, we continuously tested our designs using UserTesting.com, and used the critiques from those user tests to make better designs. We selected users who met the demographic of those who would use our project once it was deployed in order to get the most relevant feedback.
We also ran the iterations of our designs through accessibility experts at NCR to ensure that this tool would be accessible to all that have access to it, as that’s extremely important.
Development:
Once our designs were finalized, we hit the ground running with development.
We used TypeScript and React.js to create the tool, with Material UI being the component library of choice. We also used Vite as our frontend tooling and Yarn as our package manager.
After developing the frontend, we optimized the backend search functionality by using Elasticsearch.
“I estimate that your tool would cut down on hundreds of support calls each month ”
John Doe (pseudonym used for privacy)
UX & Customer Research Lead @ NCR
Business Impact
Beyond helping NCR software users better understand the products that NCR has to offer, what are the business impacts that our project had?
There were three main business impacts:
Increasing NCR’s Net Promoter Score
Reducing Support Costs
Drives Revenue by Increasing the Perceived Value of NCR’s Products
Increasing NCR’s Net Promoter Score (NPS)
Net Promoter Score is an industry standard benchmark used to gauge customer loyalty and satisfaction. Businesses, especially in the Fortune 500, constantly look for ways to increase their NPS.
When NCR’s customers see that the products they purchase come with built in, self-service help, they are more likely to stay loyal and recommend the product to others, as it shows that NCR isn’t just committed to the sale of the software, but the continued success of their customers, as they created a tool that allows them to get the full potential out of their products.
Reducing Support Costs
This business impact is pretty straightforward. While at NCR, my partner and I ran our project by the support team, and they estimated that hundreds, if not thousands of support calls would be addressed by the tool we created and that it would save NCR thousands in support cost.
This reduced support cost in turn drives revenue up.
Increasing NCR’s Perceived Value
What do I mean by perceived value?
Imagine you gave a $1000 dollar camera to a random person. Chances are that the person isn’t a professional photographer, and the camera would be just as valuable to them as their smartphone camera. Because of this, they probably would never pay $1000 dollars for a camera.
Take this same person, and give them the camera and a professional photographer as their personal teacher for $1000. The perceived value of the product goes up because they have continued support after the sale of the camera.- The tool I worked on does the same thing. It’s the professional photographer giving the buyer support after they’ve purchased the product. So, the perceived value of NCR’s products go up, and revenue is ultimately driven up as NCR can price products higher due to the after-sales support.