Full demo page.jpg

BLOCKCHAIN WORKBENCH

 

Microsoft Azure Blockchain Workbench

Microsoft's first blockchain application - Public Preview - 2018

 
 
Full demo page.jpg
 
 

OVERVIEW

Workbench was the first Blockchain application launched by Microsoft.

It was also my first project out of design school, and one of the top ten featured products at the 2018 Microsoft Build Conference.

My Role
Owned: UX & UI design, UX production
Collaborated on: information architecture, content strategy, visual design
Also worked daily with: PM’s, as well as front and back end dev teams

Tools
Whiteboard, Sketchbook, Omnigraffle, Adobe XD, Microsoft OneNote, MS Teams

Team & Duration
I was the lead interaction designer, with amazing mentors who guided me through the six month process. After the MVP launch I continued to work with the Azure Blockchain team to improve the Workbench application.

 
 

CHALLENGE

 

Microsoft Azure had built the scaffolding needed to deploy a private blockchain.

Once deployed, users needed a web application with a dynamic UI to manage their
private blockchain's smart contracts, members, and transactions.

 

TWO PRIMARY PERSONAS

 
 


THE APP ADMIN

  • The App Admin is highly technical and an early adaptor of blockchain technology. Their primary goal is to stand up a private blockchain along with a unique instance of Workbench.

  • They are familiar with the Azure portal so we aligned many of our design choices to those used in Azure.

 


THE BUSINESS DECISION MAKER

  • The BDM uses Workbench to manage members, create contracts and take actions.

  • They’re more familiar with the Microsoft Office Suite, therefore some of our design choices were influenced by these products.

 

PROCESS

 

Workbench was designed from the ground up in six incredibly agile months,
and we often joked that it was like building an airplane in the air.

 
 
 

DIAGRAM

 

After initial discussions with my PM’s I diagrammed the App Admin first run experience.

 

WHITEBOARD

 
 

This is one of several rounds of whiteboards I collaborated on with my team. We were designing the ‘Create new application’ user flow here.

 

SKETCH

 

These are my designs for a home dashboard. It would have served as an all-up view of the application, but was cut in order to get us to the MVP deadline.

 
 

CONTENT STRATEGY

Early blockchain terminology was shaped by engineers, not UX designers, and many industry terms like ‘smart contract’ caused confusion.

The initial thinking was to improve industry terminology through the Workbench product offering. Ultimately, we decided to stay with current trends so as to make learning as easy as possible for the new user.

 

EARLY WIREFRAMES

 

An early design exploration of the left navigation bar and application tiles. We initially wanted to include Microsoft’s Fluent for Complexity design system.

 
 

We had planned to provide users with a sample app gallery for a quick proof of concept. This was ultimately pulled to meet our tight MVP deadline.

 
 

An early exploration of the Create New Application experience. This would be a day zero scenario for the App Admin.

 
 

FINAL DESIGN &
INFORMATION ARCHITECTURE

 

Applications are based on the rules defined in their smart contract. Clicking on one of the application tiles takes you into the app’s Contracts page (below).

 
 

Each item in the table represents an instance that uses the rules defined in the app’s smart contract. Clicking on a line item leads to the details page (below).

 
 

This is where actions take place. In this Asset Transfer scenario, users make transactions on items listed for sale.

 
 

Clicking on one of the Activity line items shows the user the details of that transaction, which is helpful before ‘Taking action’.

 
 

The user has clicked on the ‘Take action’ button under ‘Action’. Here they can accept, counter, or withdraw the offer placed by Elvia Atkins.

 
 
 

TESTIMONIAL

From Drew Voegele, Studio Chief - Microsoft Studio X

Sheri worked for me as a designer for Azure Blockchain Workbench and I'd be happy for her to work with me again.

She wasn't given an easy task, with blockchain technologies being so new it came down to a barely existent talent pool or someone that had the skills but at the core could learn, that is exactly what Sheri had. She was able to cut through the ambiguity of the new technology as well as a new design language, tools, and process.

Along with her strong designer skills she is very effective in working with PM and engineering, in terms of making sure the requirements are buttoned up, communicating to the engineers, taking and synthesizing feedback well, and responding to point in time developer needs.

Did I mention she was also a joy to work with? Well, she is, you'd be lucky to hear her story and the breadth of life experience she has.

 
 
Microsoft build_launch.jpg
 

LIVE CODE

 

In order to view the live code, you’d need to deploy a private blockchain in Azure.
Once deployed, you’d get a link to your private instance of Workbench.

I video captured the live code to save you the time and money it would require to do this.

 

Workbench user flows shown here: IA, creating a new application, member management, enabling & disabling an application, and editing contract columns.