K-Kuitit
K-Kuitit is an e-receipt service for K-group’s K-Plussa loyalty customers, where users can see their past grocery receipts and warranty receipts.
Role: UX & Visual Designer
Time: From August to December in 2019
Tools:
Backstory
The e-receipt service has been one of the most asked features in K-Ruoka's customer feedback for the past years. The outdated checkouts have postponed the development, but in the summer of 2019, we got the change to create a MVP of the service.
It was decided that the service would be implemented with WebView-technology inside K-Ruoka app. This would later give the chance to integrate it to K-Ruoka.fi and other services as well.
Core team
Problems
Physical receipts get lost, scrunched and their ink slowly disappears if they are not stored in a vacuum.
This initial problem has forced many brick and mortar companies to developed e-receipt services. Lately, they have become hygiene features that people expect to be found from companies' mobile apps and websites.
E-receipt services are a good way to give something back to the loyalty customers and provide them with services that can help daily life.
Research
The idea was to get the service out as fast as possible to get feedback from the customers. We had a good understanding of the fundamental needs, but the user interface had to be tested as well.
I ran internal tests with about 10 people where I asked feedback about different aspects of the service. I designed couple of different versions from the most important features, from where people could pick the preferred one.
I soon got a pattern stating that most people preferred a traditional looking receipt and found out which list item would be the most promising for showing the receipts.
The initial warranty receipt that I had sketched, received a very good response so I got some validation for that as well.
These findings were good, but they lacked volume. Because of the schedule, I went with what I got, and started designing the whole service.
Design Process
I first started with pen and paper. I drew the basic structure of the service and tried out different approaches.
After lightly validating the initial designs, I started making the high-fidelity prototype. I shared the prototype internally, discussed it with the developers and iterated on the go.
I wanted to make the somewhat simple service more interesting visually, so I added the balls from K-Plussa’s visual guidelines to bring in the Plussa-brand better up front to remind, that you could only get the receipts to the service by using your loyalty card.
While sparring with my fellow designer Joona Ryödi, we came up with an idea to animate the balls to get some slight movement to the service.
I animated the balls with CSS and implemented it to the service with the developer Teemu Merikoski.
Solutions
Here's some of the most important solutions and the problems behind them:
Login flow
Problem: People don't want to do a strong authentication if there's not a good incentive to do it.
Solution: A frictionless login flow, which teases the main features that the service provides. I designed a receipt animation for the login flow to provide some extra delight.
List view: Receipts
Problem: How might we create a list of receipts that is fast to scan and contains the crucial information?
Solution: A simple, validated list-view with chevrons to guide the user to the actual receipt.
List view: Warranty receipts
Problem: What info might we show in the warranty receipts list view?
Solution: A list view, where the product image and the warranty deadline are the most prominent items.
The Receipt
Problem: How might we design a receipt for the digital world?
Solution: A more structured and visual receipt. We ended up using the frame and store logo from this design, but it was faster and easier to implement the receipt in the same form as it prints out in the brick and mortar store. People prefered the more simple, conventional version of the receipt.
Warranty receipt
Problem: How might we design an appealing and informative warranty receipt?
Solution: A digital receipt with some characteristics from the physical world, topped with the product image and store logo.
Settings
Problem: Users need to have a place where their settings can be managed and where important info can be found.
Solution: A simple settings page with the red item allowing the user to stop using the service and removing all receipt data.
Reflection
K-Kuitit was developed in a very agile way. We got a lot of positive feedback about the service when we launched it in January , but the first version lacks some important features that will be implemented later on. I'm looking forward to getting the time to test the updated version with our customer.
I’m happy to talk more about K-Kuitit in person, if you’re interested to work with me! If you have a K-Plussa membership, you can try out the service yourself by downloading K-Ruoka app.