Project
Bitcoin ATM Interface Redesign
Summary
This project’s objective was to redesign the Coinsource Bitcoin ATM (BTM) interface to improve user experience and better fit with updated brand guidelines. New features - including the ability to enter promo codes and expanded cryptocurrencies available for purchase - were also to be included in the redesign.
Responsibilites
UX Design, UI Design
Process
Research
Hands on experimenting with large touchscreen kiosks guided design standards.

I had many questions about designing for such a large touchscreen and what the best practices were. 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 a Coinsource BTMs. In doing so, I developed a strong feel for standards of text size, buttons, and navigation on large touchscreens.

Define
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, as well as some redundant screens. Because we were unable to speak with our actual users, we did get 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.

Wireframe
Flow diagrams and wireframes set the foundation for final designs.

Prior to creating any wireframes, I created flow diagrams for our current flow, each competitor flow, 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 had identified all the flows, I moved to 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.

Design
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 that 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 that would enable good user experience.

Handoff
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.

Test
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 valued doing usability tests with our existing BTM interface, as well as getting user’s thoughts on new designs before the handoff. None the less, I had planned out future usability testing that could begin once those systems to contact users were established.

More Images
Arrow to move image slider
Arrow to move image slider