MogoCrypto

MogoCrypto | 2018

Role | Lead UX UI IxD iA

Toward the end of 2017, interest in cryptocurrency in Canada was growing. There were risks, challenges, and huge barriers to entry which left many of those interested on the sidelines. At Mogo (a customer focused online financial services company) we were exploring new ways to bring value to our platform. We investigated the interest among our MogoMembers, feasibility, challenges involved in a cryptocurrency product. After deliberation, we were set on introducing a cryptocurrency service to our portfolio.

Goals

  • Deliver Key Performance Indicators provided by leadership on an ongoing basis
  • Meet and exceed expectations which was measured by member satisfaction and success using Google Analytics, User Story, User Testing, customer interviews and discussions
  • Put the user first in all aspects of the experience and throughout the process
  • Make it easier and faster for MogoMembers to buy and sell Bitcoin when they think the time is right
  • Minimize barriers on funding and cashing out
  • Bring clarity to the cryptocurrency experience for non-technical and first time users
  • Design and serve the product in a way that aligns regulatory and legal requirements
  • Ensure the experience is consistent as possible across all platforms, while taking considerations for each

Approach

Throughout the 3 month MVP project, and during the ongoing design and development of MogoCrypto post launch, the members of the Mogo UX team were invaluable and greatly appreciated. Not only did they provide invaluable feedback and guidance, when the workload grew they allowed me to delegate flows and screen sequences to help push the design forward. Every screen was meticulously crafted, reviewed, iterated upon — from copy, iconography, animations, structure, to revising the shades of colour to ensure it was visually rich and appealing.

  • With guidance and mentorship from the (amazing) design leadership at Mogo I took on the role of design lead for this project
  • By conducting surveys with MogoMembers and requesting feedback we were able to learn how they felt about cryptocurrency. These surveys included information such as their experience with cryptocurrency, perceived challenges, and desired functionality
  • We ran a 4 month Bitcoin contest in which MogoMembers could win 1 Bitcoin a month. This helped us gauge interest in cryptocurrency
  • With tools like Jira, Confluence, Slack, Abstract, Google Docs, and Google Sheets we were able to create a flow of information which helped keep team members involved from leadership, legal, copywriters, and developers in sync
  • Prototyping and user testing informed our decisions and iterations. MogoCrypto was tested many times through InVision, Proto.io, Validately, UserTesting, and UsabilityHub
  • When we considered meaningful, impactful, design revisions I made sure to get as many representatives from teams in a room as possible to gauge impact and the various challenges across platforms. With this, we were able to catch decisions that weren't feasible or required more input
  • With the support of the incredible UX and Creative teams I was able to maintain a consistent cadence and of solid and comprehensive work. Not only did the UX team share the screen sequences and flows to help push the product forward, they provided constant invaluable feedback, recommendations, and counsel

Product shots

MogoCrypto product shot
MogoCrypto product shot
MogoCrypto product shot
MogoCrypto product shot
MogoCrypto product shot

Design process

MogoCrypto product shot

iOS UI mockup animations

Information architecture (example)

iA was key to identifying flows and behaviours on the Mogo platform. Early in the process many of the key flows and technical affordances were fleshed out through charts like this.

MogoCrypto product shot

Prototyping (example)

With user panels and tools like Sketch Cloud and Proto.io we were able to rapidly test many, many iterations of the dashboard and various flows!

MogoCrypto Prototype

MogoCrypto alpha UI

This is a very early version of the MogoCrypto interface! On this foundation we were able to more readily test the experience with very early access members and internal team members.

MogoCrypto product shot

iOS dashboard

MogoCrypto product shot
MogoCrypto product shot
MogoCrypto product shot
MogoCrypto product shot
MogoCrypto product shot
MogoCrypto product shot
MogoCrypto product shot
MogoCrypto product shot

Buy UI flow

MogoCrypto product shot

Sell UI flow

MogoCrypto product shot

Web UI

We introduced standards like side panels on web to help more closely maintain parity with iOS and Android. Through testing we found it helped foster a sense of ease and speed in the web UI as it enabled MogoMembers to remain on the dashboard while executing other actions like buying and selling their bitcoin.

MogoCrypto product shot
MogoCrypto product shot
MogoCrypto product shot
MogoCrypto product shot
MogoCrypto product shot

Outcome

MogoCrypto successfully went from alpha, to beta invite-only, to launch! We continued to research, iterate, analyze, and test to improve based on feedback, testing, and analysis. With our ongoing roadmap iteration, consistent user testing, regularly A/B testing theories, and evolution of our own knowledge and skill set we made continuous wins across key metrics while improving the user experience. These included:

  • First time users (to both Mogo and cryptocurrency)
  • Overall engagement with Mogo services
  • Return users
  • With improvements over time the amount of cryptocurrency bought, sold, held, and cashed out increased
  • Growing amount of positive feedback received through surveys, feedback, interviews, and testing