eluvio
UX and Interface Design on Etherium Blockchain, 2018
Eluvio is a blockchain and machine learning based start-up tasked with creating software technologies geared towards the requirements of a ‘content-centric’ internet. What the startup is trying to solve is some of the big problems that have existed for a long time around video over the internet--the overall cost of distribution and the inability to monetize meaningfully. The way it currently stands, the market is putting the power in media value to the big companies that control the internet audience. Large internet companies tcan leverage their position over the internet and are now ploughing the profits back into making content. There is the possibility that Eluvio's decentralised approach could change that. First of all, because it cuts so much of the advantage down in terms of cost of distribution; and also because it can allow for contribution and infrastructure resources, in the same way that we see with services like Uber.
*Note: Due to confidentiality reasons, some of the interface design is 'masked' and a large proportion of the UX journey is left out
Landing page of specific user account with dropdown for switching between blockchain addresses
Problem
Eluvio has made big strides in making their decentralized platform a viable solution. In order to to showcase their work to potential clients, they have built out a front-end working prototype depicting core functionalities. However, the technology's needs have almost entirely guided the user experience. And indeed the experience seems more a cyclical sequence of steps than a cohesive platform. Without a single designer or researcher on the team, my friend and I took on this design overhaul to create a more intuitive experience and polished interface. A unique condition felt by the entire team was that they strongly did not believe in 'vaporware'. We should not build out interactions that the system does not currently support. We had to work under the constraint of a complete current-state system. Moreover, it's a startup... they're working fast and meeting deadlines. They were pushing to develop our new and improved interface within two weeks. That gave us 1 week to understand this new technology and redesign it, and them 1 week to develop our solution.
research
With a tight deadline looming, we had to use our time effectively. We understood that a lot of repair had to be redone as Eluvio had already built out a deployed system. Our first objective, as is with most research efforts, was to learn as much as possible about the product, domain, and target users. We conducted a quick workshop with the team to map out the current journey for their top personas. This process was unlike ever I had done before because there really was no system to compare against. It was, to some extent, the first of its kind. As one of the co-founders stated, we were creating a journey and creating personas that didn't yet exist. We eventually did define three typical users and built out a cohesive journey. For lack of time and a lack of user base, we decided to then create a 'site map' in order to create discussion around their current information architecture. We added metadata to the visualization (e.g. user-restricted access, data type, etc) in order to draw more insight.
Full sitemap of Eluvio with shape and color of attributes signifying commonalities across pages
DESIGn Solution
After discussion around the journey and site map, we aligned on creating a cohesive experience with three user personas in mind and a single use-case. By this time, we committed ourselves to delivering 1) user interface guidelines (typography, color, buttons,spacing), 2) clickable prototype, and 3) customized icon that indicated a completed blockchain transaction.
1) User interface guidlines
Our user interface guidelines provided an overview of typography, color pallete, and button styles and were the foundation of the Eluvio product design. The combination of these styles and designs made up the rules that governed all elements and components. We utilized a combination of greys and bold blues to evoke efficiency and security. The product in all its complexity and vast user interactions seemed more a tool than a website of content. We designed around simplicity and called out user interactions using color as the main pre-attentive attribute.
Screenshots taken from user interface guideline document provided (pdf, Sketch)
2) clickable prototype
By pairing the inconsistencies found from the sitemap discussion with the new design guidelines, we created a simplified user journey with a focus on 'intuitiveness'. For example, we created a modified controlled vocabulary that reflected the desired action without losing the real intention. We also found that many interactions were either redundant or unnecessary. The tricky constraint again being how to redesign an experience without introducing new system requirements. One of the biggest changes made was the navigation between accounts. We delivered a clickable prototype using Sketch along with a narrated video.
3) customized icon
Eluvio required a customized icon that represented a successful blockchain interaction. We settled on a Merkle tree and used a simple animation to show current stage and final result.
Success animation
Failure animation