This project’s objective was to redesign the Coinsource Bitcoin ATM (BTM) interface to improve user experience and more closely align with updated brand guidelines. New features - including the ability to enter promo codes and expanded cryptocurrencies available for purchase - also were included in the redesign.
Hands on experimenting with large touchscreen kiosks guided design standards.
Throughout this project I had many questions about the best practices regarding UX/UI design for a large touchscreen. Not finding any clear guidelines, I set out to test and document every touchscreen kiosk I could find, as well as a few competitor BTMs and Coinsource BTMs. In doing so, I developed a strong feel for standards of text size, buttons, and navigation on large touchscreens.
Performing a heuristic evaluation and collaborating with the support team helped identify points of emphasis for the redesign.
Because I didn’t have any original design files, I used the photos I took while testing the Coinsource BTM to reverse-engineer the designs and perform a heuristic evaluation. I came away with several issues I wanted to fix: a lack of text hierarchy, inconsistent alignment, system-oriented/confusing language, and redundant screens. Because we were unable to speak with our actual users, we used insights from our support team about when customers most often needed help. We learned customers would sometimes get stuck when they tried to scan their wallet’s QR code with the BTM camera instead of the QR code scanner.
Flow diagrams and wireframes set the foundation for final designs.
Prior to creating any wireframes, I created flow diagrams for our current flow, our competitors’ flows, and several new flows that incorporated the new features I was implementing. This helped me identify edge-cases around the expanded cryptocurrency library and promo codes. Once I identified all the flows, I moved forward designing wireframes that solved the issues outlined in the define phase. To solve the issue with scanning wallet QR codes, I created a GIF showing how to properly scan the QR code which loops on the screen while the user is scanning their wallet.
Led by the new brand guidelines, the wireframes began to come to life
I began the high-fidelity designs by creating a library of fonts, colors, icons, and other components which fit into our newly defined visual brand guidelines. I was able to strike a balance between showcasing our new brand identity while maintaining a minimalist design conducive to a strong user experience.
Strong communication with the development team was key to a seamless handoff.
In the final walkthrough with the product manager and development team, I went over the design library and high-fidelity mockups. I used Figma to create working prototypes and flow diagrams for our development team to reference if they were confused about accessing certain screens.
Usability testing was planned for continuous improvement.
At the time of this project we did not have the systems in place to contact existing BTM users. If we had, I would have emphasized the need for conducting usability tests with our existing BTM interface. I also would have gathered users’ thoughts on new designs before the handoff. I had planned out future usability testing that could begin once those systems to contact users were established.