kilometry.studio

Designing 0 to 1 for a blockchain infrastructure startup

OVERVIEW

In a month-long proof-of-concept sprint, I designed the initial brand identity and MVP webapp experience for a startup focused on infrastructure tooling for blockchain developers.

This included a full brand identity & visual language, the core user experience, and pixel-perfect component-based experience designs.

Role

Lead designer

Duration

1 month

Responsibilities

Product strategy, interaction + visual design

Challenge & Goals

I worked with two founders to build a B2B blockchain infrastructure tool for developers, to streamline the management of testing environments and the monitoring of chain transactions and network performance.

The challenge was turning a complex and technical process into a simple and intuitive experience. Competitors in this space (like Alchemy and Tenderly) have complex user flows, and overwhelming amounts of features.

Our goals were to stand out by being great at a few things:

Prioritization of the most-used actions on the dashboard

Showing important stats at-a-glance (like request counts and response times

Reducing the friction of setting up and managing projects

Creating a fresh, distinctive look in a space filled with generic out-of-the-box design

Defining MVP scope

With a limited schedule, we had to make a lot of tradeoffs when creating our MVP scope. I worked closely with the founders to cut mobile support, complex inspector tools, a chain explorer, and a code playground tool.

A dashboard showing key stats and recent activity

Process for adding and managing a test environments

Tools to manage API keys and security settings

A way to filter and sort transactions happening in the system

Rapid iteration

Through wireframing and user flow exercises I visualized how the experience would support the core actions, while maintaining scalability for future updates.

Multiple iterations at low-fidelity let us quickly explore solutions and identify pain points.

A vertical navigation menu would create scalability, and translate well into a mobile version in the future. Being intentional with modal dialogs would help focus the user on new tasks without distractions.

Navigation affordances ensured users knew what page they were on. Monetization & upsell opportunities communicated plan limitations and supported business needs. Sort & filter options helped users navigate through large amounts of data.

Through wireframing and user flow exercises I visualized how the experience would support the core actions, while maintaining scalability for future updates.

Multiple iterations at low-fidelity let us quickly explore solutions and identify pain points.

Visual Identity

In parallel, I started exploring the visual brand. We aligned on a 'neon gradient' visual style inspired by common Web3.0 aesthetic that focused on dark-mode, high contrast, futuristic gradients and geometric typography.

Early logo concepts explored geometric representations of the blockchain, the theme of connectivity, and historical Greek patterns (playing off the name 'Elara').

Two rounds later we arrived on a brand expression that balanced 'technical' and 'welcoming', avoiding overly boxy or static aesthetic, and focused on abstraction, maturity, and the theme of 'interlinked.'

In parallel, I started exploring the visual brand. We aligned on a 'neon gradient' visual style inspired by common Web3.0 aesthetic that focused on dark-mode, high contrast, futuristic gradients and geometric typography.

Early logo concepts explored geometric representations of the blockchain, the theme of connectivity, and historical Greek patterns (playing off the name 'Elara').

In parallel, I started exploring the visual brand. We aligned on a 'neon gradient' visual style inspired by common Web3.0 aesthetic that focused on dark-mode, high contrast, futuristic gradients and geometric typography.

Early logo concepts explored geometric representations of the blockchain, the theme of connectivity, and historical Greek patterns (playing off the name 'Elara').

In parallel, I started exploring the visual brand. We aligned on a 'neon gradient' visual style inspired by common Web3.0 aesthetic that focused on dark-mode, high contrast, futuristic gradients and geometric typography.

Early logo concepts explored geometric representations of the blockchain, the theme of connectivity, and historical Greek patterns (playing off the name 'Elara').

Final deliverables

Combining everything together in a final direction highlighted the core interactions, introduced upsell moments, and delivered on user needs by providing helpful statistics, at-a-glance information, and reducing interaction costs for common actions.

The final deliverables, all contained in a single Figma file, contained pixel-perfect UI for each screen and modal, a set of common re-used components, and a branding package that included an SVG logo, color tokens, and typography styles.

Combining everything together in a final direction highlighted the core interactions, introduced upsell moments, and delivered on user needs by providing helpful statistics, at-a-glance information, and reducing interaction costs for common actions.

_WORK

_ ABOUT

_WORK

_ ABOUT

_WORK

_ ABOUT

_WORK

_ ABOUT

Designing 0 to 1 for a blockchain infrastructure startup

OVERVIEW

Role

Duration

Responsibilities

Challenge & Goals

I worked with two founders to build a B2B blockchain infrastructure tool for developers, to streamline the management of testing environments and the monitoring of chain transactions and network performance.

The challenge was turning a complex and technical process into a simple and intuitive experience. Competitors in this space (like Alchemy and Tenderly) have complex user flows, and overwhelming amounts of features.

Defining MVP scope

With a limited schedule, we had to make a lot of tradeoffs when creating our MVP scope. I worked closely with the founders to cut mobile support, complex inspector tools, a chain explorer, and a code playground tool.

Rapid iteration

Through wireframing and user flow exercises I visualized how the experience would support the core actions, while maintaining scalability for future updates.

Multiple iterations at low-fidelity let us quickly explore solutions and identify pain points.

Through wireframing and user flow exercises I visualized how the experience would support the core actions, while maintaining scalability for future updates.

Multiple iterations at low-fidelity let us quickly explore solutions and identify pain points.

Through wireframing and user flow exercises I visualized how the experience would support the core actions, while maintaining scalability for future updates.

Multiple iterations at low-fidelity let us quickly explore solutions and identify pain points.

Through wireframing and user flow exercises I visualized how the experience would support the core actions, while maintaining scalability for future updates.

Multiple iterations at low-fidelity let us quickly explore solutions and identify pain points.

Visual Identity

In parallel, I started exploring the visual brand. We aligned on a 'neon gradient' visual style inspired by common Web3.0 aesthetic that focused on dark-mode, high contrast, futuristic gradients and geometric typography.

In parallel, I started exploring the visual brand. We aligned on a 'neon gradient' visual style inspired by common Web3.0 aesthetic that focused on dark-mode, high contrast, futuristic gradients and geometric typography.

In parallel, I started exploring the visual brand. We aligned on a 'neon gradient' visual style inspired by common Web3.0 aesthetic that focused on dark-mode, high contrast, futuristic gradients and geometric typography.

In parallel, I started exploring the visual brand. We aligned on a 'neon gradient' visual style inspired by common Web3.0 aesthetic that focused on dark-mode, high contrast, futuristic gradients and geometric typography.

Final deliverables

Combining everything together in a final direction highlighted the core interactions, introduced upsell moments, and delivered on user needs by providing helpful statistics, at-a-glance information, and reducing interaction costs for common actions.

Combining everything together in a final direction highlighted the core interactions, introduced upsell moments, and delivered on user needs by providing helpful statistics, at-a-glance information, and reducing interaction costs for common actions.

Combining everything together in a final direction highlighted the core interactions, introduced upsell moments, and delivered on user needs by providing helpful statistics, at-a-glance information, and reducing interaction costs for common actions.

Combining everything together in a final direction highlighted the core interactions, introduced upsell moments, and delivered on user needs by providing helpful statistics, at-a-glance information, and reducing interaction costs for common actions.

Designing 0 to 1 for a blockchain infrastructure startup

OVERVIEW

Role

Duration

Responsibilities

Challenge & Goals

I worked with two founders to build a B2B blockchain infrastructure tool for developers, to streamline the management of testing environments and the monitoring of chain transactions and network performance.

The challenge was turning a complex and technical process into a simple and intuitive experience. Competitors in this space (like Alchemy and Tenderly) have complex user flows, and overwhelming amounts of features.

Defining MVP scope

With a limited schedule, we had to make a lot of tradeoffs when creating our MVP scope. I worked closely with the founders to cut mobile support, complex inspector tools, a chain explorer, and a code playground tool.

Rapid iteration

Through wireframing and user flow exercises I visualized how the experience would support the core actions, while maintaining scalability for future updates.Multiple iterations at low-fidelity let us quickly explore solutions and identify pain points.

Through wireframing and user flow exercises I visualized how the experience would support the core actions, while maintaining scalability for future updates.Multiple iterations at low-fidelity let us quickly explore solutions and identify pain points.

Through wireframing and user flow exercises I visualized how the experience would support the core actions, while maintaining scalability for future updates.Multiple iterations at low-fidelity let us quickly explore solutions and identify pain points.

Through wireframing and user flow exercises I visualized how the experience would support the core actions, while maintaining scalability for future updates.Multiple iterations at low-fidelity let us quickly explore solutions and identify pain points.

Visual Identity

In parallel, I started exploring the visual brand. We aligned on a 'neon gradient' visual style inspired by common Web3.0 aesthetic that focused on dark-mode, high contrast, futuristic gradients and geometric typography.

In parallel, I started exploring the visual brand. We aligned on a 'neon gradient' visual style inspired by common Web3.0 aesthetic that focused on dark-mode, high contrast, futuristic gradients and geometric typography.

In parallel, I started exploring the visual brand. We aligned on a 'neon gradient' visual style inspired by common Web3.0 aesthetic that focused on dark-mode, high contrast, futuristic gradients and geometric typography.

In parallel, I started exploring the visual brand. We aligned on a 'neon gradient' visual style inspired by common Web3.0 aesthetic that focused on dark-mode, high contrast, futuristic gradients and geometric typography.

Final deliverables

Combining everything together in a final direction highlighted the core interactions, introduced upsell moments, and delivered on user needs by providing helpful statistics, at-a-glance information, and reducing interaction costs for common actions.

Combining everything together in a final direction highlighted the core interactions, introduced upsell moments, and delivered on user needs by providing helpful statistics, at-a-glance information, and reducing interaction costs for common actions.

Combining everything together in a final direction highlighted the core interactions, introduced upsell moments, and delivered on user needs by providing helpful statistics, at-a-glance information, and reducing interaction costs for common actions.

Combining everything together in a final direction highlighted the core interactions, introduced upsell moments, and delivered on user needs by providing helpful statistics, at-a-glance information, and reducing interaction costs for common actions.

Through wireframing and user flow exercises I visualized how the experience would support the core actions, while maintaining scalability for future updates.

Multiple iterations at low-fidelity let us quickly explore solutions and identify pain points.

Through wireframing and user flow exercises I visualized how the experience would support the core actions, while maintaining scalability for future updates.

Multiple iterations at low-fidelity let us quickly explore solutions and identify pain points.

Through wireframing and user flow exercises I visualized how the experience would support the core actions, while maintaining scalability for future updates.

Multiple iterations at low-fidelity let us quickly explore solutions and identify pain points.

Through wireframing and user flow exercises I visualized how the experience would support the core actions, while maintaining scalability for future updates.

Multiple iterations at low-fidelity let us quickly explore solutions and identify pain points.