Published on <a href="https://blog.prototypr.io/an-open-source-blockchain-design-story-d39d17f36371?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Ed Moffatt 
Hyperledger Composer is an open source Blockchain project. It’s a way for application developers to mirror real-world behaviours (e.g. supply chains, commodity trades…) as models, and then script transactions in JavaScript.
It has a bunch of other stuff going for it, but in a nutshell that’s what you get: simpler modelling (which in turn leads to simpler APIs and simpler integration) plus some lovely JavaScript.
Every week, the team delivers a new build of Composer, and if you’re interested, a fun place to start is the web Playground: <a href="http://composer-playground.mybluemix.net/">http://composer-playground.mybluemix.net/</a>
Anyhow, that’s quite enough intro to Composer! What I thought I’d share is a little glimpse into some of work that I and the other Designers who contribute to the Composer project do.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*My9i4Eyu9PLZ9NOcdnswKA.png">Composer Playground’s “My Business Networks” panel today
If you clicked on that tasty web Playground link earlier, you may already have seen the panel in the above screenshot. This is what the product looks like today… But it didn’t always look that way! Originally, it wasn’t possible to work on multiple Business Networks in the Playground, so when we made that possible, we had to think about how to expose the function to users.
Lets take a look at some of the options we considered…
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QTsfcWVIjRXA8q7oF5b7Ew.png">Option 1: Connections panel in the main UI
The most obvious solution was to add a new panel to the existing UI navigation, where users would manage and switch their connection profiles, IDs, and Business Networks. If you don’t know what all those things are, don’t worry: you’re probably not alone! Basically, they’re the 3 bits of information you need to know what blockchain you’re trying to access and what proof you’re offering that you’re allowed to access it.
The thing is, with 3 bits of info to pass in, flows became complicated. When switching between them, things got particularly painful, with the UI needing to prompt the user for multiple bits of info in phases…
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*k2K-h6gOkW0UN4969RvBbg.png">Step 2 in the flow, after selecting a connection profile, and before picking a business network
Little aside… In case you’re wondering what these mockups were made with? That’s Adobe XD (eXperience Design) you’re looking at. It’s one of my favourite tools because it’s got really stripped-back features for creating your wireframes (“elegantly minimal”!) plus it lets you easily share clickable wireframes online, and viewers can leave comments on each panel, all from within the one application.
That’s enough evangelising for Adobe XD, lets move on… (Tho if anyone from Adobe is reading and wants to send me some XD swag, I’m a Medium men’s t-shirt, and I like laptop stickers 😉 ).
Ahem.
So, the team weren’t really feeling that first idea. Wireframing it out helped us realise that the most obvious UX solution didn’t feel very satisfying… So, time to explore other ideas.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lle9fZ6Rm_S3ZFM7lFnmTg.png">Option 2: Connection Profiles pulled out to a higher level
When having too many variables to concurrently set within a one-level UI hierarchy is getting you down… Why not try adding a second level to the hierarchy! That’s exactly what I did in option 2: pulling Connection Profiles out into a kind of “landing-screen”.
This felt better, but it got us all talking and whiteboarding: as soon as we had the idea of another level in the hierarchy, we realised there were more funky things we could do with it!
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BOjLe1xCBGkZD-jka1sjIw.png">Option 3: My Wallet
Option 3 is where we started getting close to the final design. The names of things changed, and my colleague <a href="https://medium.com/u/54293ec42947">Sam Winslet</a> took over to handle the Visual Design, but you can see here that we had the idea of bundling all 3 pieces of information into what ended up a “Business Network Card”, then having the user manage these on the “My Business Networks” screen, as well as clicking them to dive into an individual network.
To me, this is a great example of why we do Design at low fidelity: we got everyone in the team discussing ideas, and came out with an interesting solution that improved our product. We didn’t end up just changing the UI, we also updated our APIs and introduced new concepts to the product.
Hopefully this article has shown that open source projects are not just for Developers — Designers can get involved too! If you’d like to come join me discussing or working on Composer, head on over to Git and get stuck in! <a href="https://github.com/hyperledger/composer">https://github.com/hyperledger/composer</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d39d17f36371" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/an-open-source-blockchain-design-story-d39d17f36371">An Open Source Blockchain Design Story</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

An Open Source Blockchain Design Story

Top Stories