Get in touch

Marlowe

Powerful financial agreements without the need for a bank

Duration: 8 months

My scope of work

What is Marlowe?

Marlowe is a suite of products which enables developers and pioneers to build, discover, and run financial smart contracts on the Cardano blockchain.

Read the documentation

1/2 Marlowe Run

Example of a smart contract loan at the first step after deductions

An empty dashboard

A running contract in the dashboard

Generate a demo wallet

Running a contract on a mobile device

Repayment summary of the loan

The problem

Missing pieces

So far, the project was focussed on Marlowe as a programming language and the developer Playground; a cloud-based IDE for developers to build, compile, and simulate smart contracts on the Cardano blockchain. However, it was fraught with tech and UX issues.

It lacked essential tools that developers need, the simulator didn't visually represent what a contract would look like to the consumer, and debugging was a pain. General UX best practice was also lacking.

The project when I started

The original Marlowe Playground - Choosing a language

The original Marlowe Playground - Simulator

My role

What I worked on

As the only Product Designer, I started the product development lifecycle from the beginning. I had to quickly understand the pain points and user needs for the Playground, as well as understand what Cardano pioneers need from a consumer app (Marlowe Run) in order to choose, set up, and run financial smart contracts.

In turn, this enabled me to define and design an entire suite of products which would close the loop from smart contract creation by developers, to execution by the consumer.

getting started

After meeting with senior stakeholders, the Product Owner, developers and SMEs, I established who our broad user groups were and discovered areas to focus on, I could then begin to translate these discoveries into a research plan to move forward with.

User interviews / recurring themes

Sticky notes with user pains written on them

Pains

Sticky notes with user needs written on them

Needs

Sticky notes with user gains written on them

Gains

User interviews / strong signals

Mike

What do you understand about Cardano?

I know that you can develop apps on it.

Mellisa

Why Cardano?

I've been waiting for Smart Contracts!

Mary

How can Marlowe help?

By giving me full financial control.

Matt

What types of Smart Contracts do you want to see?

Anything I can use day to day!

Recurring themes

Problem statement

What types of problems are we solving?

Juan is a landlord who needs a DeFi way to automate rent payments from his tenant's wallet to his wallet because agency fees are high, as well as variable, and he needs more control and visibility.

Other strong signals

More recurring themes from the interviews

Discord poll

Insight at scale

Foundational research findings

In the research findings, I discuss what I discovered from the foundational research phase, the insights, patterns and themes, and what I found out about our user groups. I also provide recommendations on how to proceed with the project after discovery.

Personas

Cardano pioneer

Early DeFi adopter

Tech-savvy business leader

Fiat currency user

Picturing success

A successful Marlowe Ecosystem will help Cardano Pioneers to:

  • Find and initiate smart contract templates through a marketplace or library
  • Offer a fast and easy way to execute and automate smart contracts
  • Show every step of the agreements as they take place
  • Ensure funds are securely held in an account until agreements are met
  • Facilitate the terms of the agreements to keep everything fair

Ideation / Crazy 8

Contract card

Multiple wallets

Steps of a contract

Tree view

Time limits

Contract setup

Step cards

Real-time transactions

ideation / Building on the best ideas

List of running contracts

Contract step carousel

Choose templates and assign wallets to roles

Actions vs results

What will we build?

From a single web app, to an entire ecosystem of integrated products.

All that was initially thought to be required was the consumer web app for running smart contracts (Marlowe Run). Now, after the foundational research phase, we've discovered that in fact, users need an entire suite of products for Marlowe to reach its full potential.

Of course, we can prioritise the end-user app, but what this means is we can dive into the ideation phase with a suite of products and a design system in mind and account for related edge cases from the start.

User journey / ecosystem

New user entry into the ecosystem

Choose from the library, run in the app

user journey / Marlowe run

Requirements

Results from Requirements Workshop

Design planning

Branding and brand collateral

Terminology and naming

Statement of work

Features and requirements

Wireframes

User journey with in-scope and out-of-scope features

Dashboard and setup

Step cards

Design research

Moodboard

UI style

Tone of voice

Grown-up, yet creative

Official, yet bright

Initial designs

Initial contract setup

Initial running and timed-out steps

Initial contract cards and wallets

Initial payment summary and balances

The brand

A team effort

I can't take credit for the brand, this was the work of Richie Chew, the Senior Graphic Designer at IOHK. However, it played an important role in influencing the UI and my design system components would need to adhere to it.

Our heads would bounce around with different influential decisions on accessibility and usability, making it a solid team effort.

A profile picture of Richie
Richie Chew

Senior Designer, IOHK

Brand vision

Overarching mockup

Logo icon

Text logo

Logo mockup

Logo mockup inverted

Fonts

Text and image

Marlowe Run Logo

Marlowe Play Logo

Marlowe Market logo

Usability study

After advising that we put interactive prototypes together for usability studies, I got to work putting together a plan for the moderated study sessions.

Download the usability study presentation for a deep dive into the planning, matrix and insights.

marlowe run after usability studies

Example of a loan smart contract at the first step after deductions

Repayment summary of the loan

Design improvements based on insight

Contract cards before testing

Contract cards after testing

Contract setup before testing

Contract setup after testing

Components

Primary buttons

Secondary buttons

Step card headers

Step card slot parents

Text inputs

Wallet status

Figma colour variants

Figma string variants

2/2 Marlowe Play

New developer playground design

What is Marlowe Play?

A cloud-based smart contract IDE

If Marlowe is the code for writing smart contracts, and Marlowe Run is the app for running them, where do smart contracts get built?

That's where Marlowe Play comes in.

Marlowe Play is a cloud-based IDE designed for writing, compiling, debugging and simulating smart contracts for the Cardano blockchain.

Smart contracts can be written in Haskell or Javascript and then be compiled into Marlowe or its visual representation in Blockly.

The old playground

The original Marlowe Playground - Choosing a language

The original Marlowe Playground - Simulator

The problem

Missing important features

Through short discussions with the team, it was apparent that the current playground was missing important features which were essential to a developer's workflow.

Some of these included:

  • Debugging tools
  • Split code views
  • Predictive text
  • Intuitive navigation
  • File browsing
  • Contract configuration


It also had many design flaws and accessibility issues. So, it was time to conduct some user interviews with some developers and gather some valuable feedback at scale to get the ball rolling.

Developer interviews / strong signals

Mica

What frustrates you about the current playground?

We really need a split-screen view.

Michelle

What frustrates you about the current playground?

I want to see what users see on the front-end.

Mariah

What frustrates you about the current playground?

It doesn't feel like a fully-featured IDE.

Marshall

What frustrates you about the current playground?

Multiple files open at once would be great.

Recurring themes

Developer interviews / recurring themes

Sticky notes with user pains written on them

Pains

Sticky notes with user needs written on them

Needs

Sticky notes with user gains written on them

Gains

Discord poll

Insight at scale

Discord poll results

Other cloud-based IDEs

Map

While collaborating closely with developers I was able to quickly come up with a new site map devised from the insights which incorporated a greatly improved navigation as well as all the missing important features required to complete tasks.

Wireframes

Simulating a contract and previewing it in Flow

Building a contract in Marlowe and previewing it in Blockly

Building a contract in Blockly and previewing it in Marlowe

Designs

Developer's view of their contract in the simulator with front-end preview

A custom Marlowe Escrowe being edited in Marlowe and previewed in Blockly with the edit details tab open.

A custom Marlowe Escrowe being edited in Marlowe and previewed in Flow.

Wrapping up

What's next?

My time on the developer playground was short as I needed to also create the design for the marketing website. But, we now had a clear vision of what the new playground could be.

Prototyping, testing and design would follow, of course. The most important thing here is that we successfully improved the playground and tightly integrated it with the work on Marlowe Run by providing a detailed front-end view for simulations and integrating it into the design system.

Marlowe Play will prove to be incredibly powerful in smart contract development and testing.

Want to see more?