Unsure on where to store your Crypto’s? Try Gridlock

3-week design sprint working on a Cryptocurrency storage app

The Team

Christoph Duesing, Dilbert Cacayan, Rashmi Uddin and Nico Wiggin (me!)

Cryptocurrency Context

Cryptocurrency app downloads surged 252% worldwide from December 2020 to January 2021

The unlucky ones…

James Howells threw away his hard-drive which stored his Bitcoin during a home clear-out in 2013. The hard-drive is now worth $80m.

This is where Gridlock come in…

Gridlock is a mobile and web app that facilitate the storage and management of cryptocurrencies via online storage (soft wallets).

The USP of the product is increased security made possible by splitting the wallet encryption key into five pieces and distributing those pieces to friends and family called Guardians.

The Brief

1. Redesign the existing desktop design from a mobile-first perspective in the form of a mobile app
2. Design the onboarding and sign-up process that clearly explains the confusing concept of the Guardians
3. Design the dashboard once the user has completed the sign up process

My Role

For this project I facilitated the design sprint from the Discovery phase (Research) through to the the prototyping on Figma.

UX Skills

Discover: Project Canvas, UX Audit, Competitive Analysis, Survey, User Interviews

Define: Affinity Mapping, Experience Mapping, Empathy Mapping, Persona

Develop: Design Studio, ‘How Might We’, Moscow Analysis, Scenarios, User Flow, Wireframing, Sketching, Prototyping, Testing

Deliver: Hi-Fidelity Prototype, Visual Design, Style Guides, 20 minute Client Presentation

Platforms

Figma (Design & Prototype), Miro, Notion, sketchbook, Zoom (a lot)

Introduction

“Does anyone have any experience with Cryptocurrencies?”

“No”.

As the four of us received the brief on the Friday afternoon we asked each other this question before starting. We had a client call on the Monday afternoon so the weekend plan was to get to grips with:

• What is cryptocurrency and how does it work?
• Who are Gridlock’s competitors and what are they doing?
• Can we learn anything from how challenger banks such as Monzo, Revolut etc onboard new users and display the dashboards?

Client Meeting

On the Monday afternoon, we met with Derek (Founder) and Shane (CTO). Both of them seemed really excited to introduce the product and were happy to answer any burning questions that we had.

The key points from the discussion were:

• The target audience for the product was someone with little experience of cryptocurrencies — this was important as it was contrary to our assumptions that it was being designed for a high-experienced user
• The key pain point in terms of UX was the sign-up process where users had trouble understanding the concept of the Guardians
• Argent are the only other competitor that are doing something similar to the ‘Guardians’

HINDSIGHT — the fact that Gridlock was aimed at low-experienced users helped us as we were able to empathise with potential users given our experience. It helped us re-think any jargon and explain the complex processes in layman’s terms.

The key research methods we used to understand Gridlock and their potential users were as follows;

• UX Audit of the existing product
• Competitor Analysis
• Survey
• User Interviews

UX Audit

UX Audit of the existing product highlighted some areas where we could improve

Gridlock already had an existing product that was designed for iPad & desktop. At the time, it was only designed on Figma so there wasn’t a product we could test with users. Instead, we took a look as a team and wrote down points where the product worked, and areas where we thought we could improve. To summarise we found;

• The copy was full of jargon, we therefore had to make copy clear and concise especially for a low-experienced user
• Reduce number of pop-up pages on the site to make it less dynamic and temporary
• Colours, font size etc. were inaccessible
• Visual Design was inconsistent across the product

Competitor Analysis

Between the four us we each chose one direct competitor and one in-direct competitor.

• Direct competitors: other cryptocurrency storage and trading apps
• In-direct competitors: money management apps and also challenger banks such as Revolut and Monzo

Derek mentioned Revolut’s UI as an influence so it was good to get an early understanding on where we wanted to go with the visual design.

Direct and in-direct competitors

We went through each competitor identifying some key areas and features that we could replicate in our own designs.

Onboarding

• Using illustrations to accompany text in the onboarding
• Colourful elements and soft icons help create a friendly tone
• Use of breadcrumbs to track progress

Dashboard

• Using cards to break up content on the dashboard
• Infographics really help engage the user
• All apps use a lower-navigation instead of a hamburger menu

Competitor feature analysis. We looked at how competitors onboarded new users and how they displayed the dashboard

Competitor Brand Matrix

To understand where we wanted Gridlock to position alongside its competitors, we plotted the brands on a matrix against target audience and level/feeling of security.

Competitor matrix looking at where we wanted Gridlock to position itself. The matrix was split into two axis; Experience of the user and level of security. We wanted Gridlock to be the Monzo or Revolut for Cryptocurrencies.

Survey (113 respondents)

We conducted a survey to obtain quantitative data on people’s understanding of not just cryptocurrencies but online banking as well.

We always wanted to keep in mind that we didn’t have to narrow ourselves down to only think about cryptocurrencies. It was important to remember that Gridlock was an online bank for ‘other’ currencies. Much like retail, challenger banks are for centralised currencies.

Some interesting outcomes came from the survey:

1. 90% of respondents ‘Gen Z’ (16–34)
2. 85% associate storing cryptocurrencies as Risky (3–5/5). Compared to online banking which has 17% @ 3–5.
3. 69% of respondents had little-no experience with cryptocurrencies

These results suggest that we were talking to the right people which was positive. We wanted to ask more questions around the storing of keys or passwords and how they felt about it. This relates to the concept of the Guardians where the users key to their crypto wallet would be split between 5 people.

“Would you store a password for a friend?”

• 55% of people said they would
• 70% of these people would download an app which has no functionality to them

These results were really interesting as it was clear that users would help their friends with the storage of keys.

User Interviews

Christoph (R) conducting a User Interview over Zoom

From the survey respondents, we identified 16 people who would be good for a follow-up interview. We based these on how experienced people were with crypto’s. We wanted high-experienced users as it was important to understand the good/bad features of the apps and where the pain points were. We would have struggled to find any pain points with low-experienced users.

The questions revolved around four key areas; Cryptocurrency, Online Banking, Trust and Security (with reference to other brands) and people’s attitude towards ‘Guardians’ specifically.

Many of the insights feature in the persona (I’ll get to that later). For now, we found that:

Summary of our key findings from the user interviews

And with reference to the Guardians…

Most users said they would be a Guardian for a friend but they expect…

“…to have a personal conversation with my friend first”

“… to be informed of the reasons and risks of being involved”

We then moved onto the define phase were we distilled all our data into coherent and understandable insights.

Three Key Words

We had been given some brand values from Gridlock in the brief. However we thought it was important to make sure our designs were related to our own research.

With this in mind, we identified three key words to take into the define and ideation phases. They were;

Security — Gridlock is essentially a bank and therefore security is paramount

Accessibility — We had to ensure we were designing for users with a range of experience. Our content, UI and explanations had to be accessible for all

Clarity — To ensure our users trusted us, we had to make sure we were clear and transparent with how Gridlock worked

Persona

Building a persona allowed us to distil all of our findings from our user interviews and the survey into a simple, humanised person. That way we could always return to our persona to identify with our target audience. So, may I introduce…

Mike Kenji!

Our Persona, Mike Kenji

Experience Map

From the persona, we understood a typical experience that Mike may encounter. We then identified various pain-points where Gridlock could act as a solution.

The map follows Mike on a journey through owning Bitcoin. He buys Bitcoin after being peer-pressured by his friends telling him to get involved. 5 years down the line, he wants to sell his Bitcoin but he can’t access his account. He realises his wallet is stored on his old phone which has the single key. The result is that Mike has now lost access to his Bitcoin he previously bought. He is left frustrated and demotivated about investing in cryptocurrencies.

We summed up the experience map with three key solutions:

Key takeaways from conducting an experience map

1. To inform and educate users to make them feel secure
2. Protect users from losing assets with the ‘Guardian’ technology
3. Ensure assets remain safe yet easily accessible

Problem Statement

Before going into the ideation stage, we created a problem statement to help frame our understanding of Mike’s problem:

Problem Statement

Now that we were clear on what the problem was, we moved into the ideation phase where we started thinking of solutions to Mike’s problems.

‘How Might We?’

How Might We’s are a great way to get thinking how we might be able to solve certain problems for Mike. We each thought of five ‘HMWs’ and voted on the three that best summed up Mike’s problems.

How might we…

1. … make onboarding (Gridlock explanation) simple, educational and easy to understand?
2. … communicate security and safety whilst keeping the app fun and engaging?
3. … imagine the functionality of the dashboard?

Design Studio

Design studios are a really interactive and engaging way to brainstorm solutions as a team. Derek and Shane joined us again for this, the guys were so enthusiastic which was great to see. They gave us a totally different view of they imagined the product which was really helpful.

We had loads of great ideas that were voted on by the team using sticky notes. Even Clippy! Or should I say… Gridbot. Remember him? Shane thought about having an e-bot that helped you set-up your accounts and also to guide the user through the onboarding.

Clippy! Remember him?

Again, we distilled this down to three main ideas that we got from the ‘how might we’s’.

Three key ideas from our Design Studio

1. Onboarding: Punchy text that simplified what Gridlock did. The text would be accompanied by fun illustrations of friends and family holding shields protecting the main user.
2. Guardian Set-Up: The Radial theme of five ‘Guardians’ surrounding the user followed into the set-up. As the user waited for Guardians to confirm their support, the guardians would light up indicating if they had accepted or not.
3. Dashboard: inspired by the competitive analysis, we thought of having infographics showing the wallet sums in an engaging way. Cards would then feature below with tips, news, trading rates etc.

Feature Prioritisation

We scanned the results from the design studio for any possible features. We then mapped these onto a feature matrix, ranking the features by their level of impact and their level of effort.

We scanned the design studio for any features that we came up with. We plotted them on an axis determined by their level of effort and how essential they were

As this was our first project working with a client, we had to be careful we weren’t designing anything too far-fetched that wasn’t feasible for engineers. Christoph was really helpful in this regard as he has experience working with developers and knew which features we should prioritise and which ones to leave out.

User Flow

Simplified user flow taking Mike through the account set-up and arriving on the dashboard

From the design studio we had an understanding on what screens we had to develop. We put them into a really simple user flow to highlight the stages that Mike had to go through to get to the dashboard. We knew that we would have to expand on them but it helped break down the user journey into clear sections.

User Testing

As we reached the prototyping stage, I had finished my facilitation duties. I had successfully led the team to this stage in good time which was really pleasing. We had 10 days to build the prototype up to high fidelity and to finish the presentation.

To summarise the overall testing, let’s take a look at some numbers

The prototypes went from low-fidelity — high-fidelity. We went straight onto Figma for the low-fidelity wireframes as we all felt it was much easier to collaborate on Figma as opposed to doing individual sketches and creating an inconsistent design.

We also managed to get some expert feedback too as Dilbert had some pretty cool connections including:

Dilbert managed to call upon some former colleagues who were now industry experts for user testing

Instead of taking you through every single change, it’s much easier to explain a summary of the challenges we faced.

Recurring Design Challenges

1. Users were having trouble understanding the ‘Guardians’
2. We needed a seamless flow to allow users to contact potential Guardians
3. Users were eager to explore the app but they needed to set-up ‘Guardians’ before they could access the app

Onboarding — Explaining Gridlock

We were having trouble explaining Gridlock in the clearest way with the least amount of text. Removing terms such as ‘key’ and ‘nodes’ and just using ‘Guardians’ made everything much clearer.

“Terminology could be more accessible, using jargon like leverage isn’t very user friendly” — Test Candidate

Problem

We were having problems explaining Gridlock in the simplest way. In low-fidelity we only used text to explain the concept of the key-splitting but users were having trouble with terminology such as nodes, devices, Guardians etc. We then experimented with animation which turned out to be too distracting and looked very clunky.

Solution

I came up an idea to show the main user as a king knighting his Guardians. We then had really simple text below explaining the process. As the onboarding screens are often skipped it was important that we kept it very short and direct. We also added a ‘learn more about Guardians’ swipe up option on the Guardian set-up page. This way users could have all their questions answered when they have more time.

Assigning Guardians (Guardian Set-Up)

Users were reluctant to sync their contacts from their phone

“I don’t feel comfortable connecting my contact list, I don’t want them accessing my personal data” — Test Candidate

Problem

How the user contacted his potential Guardians was something we were having trouble with. We weren’t going to include an integrated messaging function as it would have been too complex. We thought about allowing the user to sync their contact list so they could quickly share a link for the Guardian to click on. In the testing, users were very skeptical about giving Gridlock access to their contacts so we thought of a different way.

Solution

We created an additional flow (below) where the user would click ‘add a guardian’ and a slide-up window would appear. The user then adds the Guardians name and shares the link via either a ‘copy link’ function or directly to WhatsApp. There were no further issues as users had multiple choices of sharing the link.

Instead of syncing users contact list, we created a new flow that allowed users to use third-party messaging services to contact their Guardians.

Waiting for Guardians…

Getting the Guardians to accept the request was a very manual process which could take up to a couple of hours. We had to allow users to complete the Guardian set-up process instead of making them wait.

“I feel stuck here, I would like to go into the app whilst I wait. Add continue button. Much better as it means I can complete the flow” — Test Candidate

Problem

Going back to the design challenges, users felt stuck at this stage as they had to wait for Guardians to click on the link. This could have taken hours or even days. We tried a ‘take a tour’ option but we felt it was too much effort for the time we had. Users were getting frustrated that they couldn’t get onto the dashboard and move forward.

Solution

To solve this problem, we simply added a ‘continue’ button that allowed users to continue with the sign-up process. This way we could reduce drop-off on the sign-up. When Mike then lands on the dashboard certain features are locked as Mike must wait for Guardians to be confirmed.

Once we had completed all of the tests, we finalised the high-fidelity prototype on Figma.

High-Fidelity Prototype

Style Guide

To keep consistency with the previous design, we kept the same brand colours that the team at Gridlock gave us. The only change we made was using the accent blue much more. We felt that it was important to display a friendly tone across the app. We agreed the lighter blue was better at showing this than the darker primary blue.

Next Steps

As we handed over the design to the team at Gridlock we included some next steps.

1. Create the Guardian app onboarding pages
2. Implement a ‘freeze your wallet’ feature that came up in the design studio
3. Design additional pages on the navigation bar
4. Design for desktop and tablet

Learnings

1. As Steve Krug said, designing screens is very similar to designing billboards. It’s important for information to be scannable, not readable. We were having a lot of trouble simplifying the complicated key-splitting process. As a result we were using lots of text on the onboarding screens which users just weren’t reading. Simplicity can often mean clarity.
2. Working on a client brief as opposed to working on concept projects made me focus much more on the business problems and also designing what was feasible. In the concept projects you were able to design whatever you wanted whereas this project was much more specific. I preferred this as it’s much more realistic.
3. Don’t worry about not being an expert in a certain field. At the beginning we were quite daunted about working with cryptocurrencies. It actually turned out to be a blessing in disguise as our inexperience really helped us empathise with users.

Conclusion

Overall I really enjoyed the project, I was nervous before doing it as there was a lot of hype around the client projects. I really enjoy facilitating group projects, it helps me get much more involved and also allows me to use my organisational and communication skills.

It was great to get experience working on a fin-tech product. I find the financial sector of technology really interesting considering it’s been so disruptive over the last couple of years. I hope having this project on my portfolio can help me move into the fin-tech space in the future!