Quick Overview
Introduction
This project marks my early involvement in the Swarm Ecosystem for one of its biggest projects built on top of the Swarm Blockchain Protocol, Fairdrive.
The development team and I were brought on board to develop both the middleware and UI front end for a file explorer that can communicate with the data on a lower system layer (for instance any database layer, including BEE Nodes on the Swarm Ecosystem).
It would represent user data in an intuitive, designed Dapp made up of both a front end and a backend, namely the Fairdrive Dapp and Fairdrive Protocol.
This first version for the project was considered a sandbox project, one that can inspire both the Fair Data Society and Swarm community and get people as excited to build as we were.
Roles
UX Researcher & UX Design Lead: Michal Shachman
Ecosystem Partner Design Team:
UI/Visual Designer: Sydney Spracklen
UI Designer: Damola Akinleye
Design Contributor: Tian Zhao
Design Challenge
Requirements
We needed to develop 3 types of products as an Ecosystem partner and as a Service Provider, these were:
1) Fairdrive Dapp
2) Fairdrive Protocol
3) x2 Mini dapps, Fairtext and Fairphoto
All of these needed developed front ends, within a dedicated Fairdrive design system, including a neutral but distinguishable brand identity. These frontends should work with the authoriser protocol and the API endpoints connected to the underlying storage layer.
Design Goals
Basic Functionality
We needed to do research on how to develop the basic functionality a user could find useful within an intuitive file explorer, some of these actions like:
1.) Uploading content
2.) Creating files and folders for that content
3.) Sharing those folders and files with others
Research
Research Plan
We conducted an extensive research project interviewing 12 stakeholders of whom were all in separate parts of this decentralised organisation both in the core team and in auxiliary teams.
The research plan mapped out the process, recruitment criteria, chosen method of research with questionnaire and a conclusion of what type of qualitative data would be shown in the final report.
Stakeholder Interviews
Expert Insights and Domain Knowledge
This stakeholder interview round was conducted so that insights could be found from each expert stakeholder’s unique perspective on the project that could inform the:
1.) General Feature list
2.) User Needs and Problems
3.) Product Definition
4.) Product Uses and Assumptions
These interviews were conducted 1 on 1 and so a presentation format was used to guide the process.
Analysis
Affinity Boarding
After all the interviews were conducted and recorded, an analysis was compiled of what was said. All the information was treated and gathered as raw data.
An in depth system of affinity boarding was created to capture the information in themes in order to finally conduct a synthesis.
Synthesis
Qualitative Data
The synthesis and results had a few outcomes:
1.) Talley of definitions and uses for Fairdrive
2.) List of features (both must haves and nice to haves)
3.) List of user needs (accompanied by user problems and persona)
2.) List of features (both must haves and nice to haves)
3.) List of user needs (accompanied by user problems and persona)
All final insights was presented in a report presentation and listed in the official Compact Research Report.
The report carried through the insights captured from these lists and talleys of all the data from where generalised business analysis could be derived for both the current version of the project, and future versions.
Definitions
What is Fairdrive
The definitions portion of the research gave a very good start into defining what Fairdrive is in order to bring all stakeholders onto the same page - a goal of the research project from client side.
User Persona
Who is it for
This user persona was created from asking the stakeholders questions about what they saw were the users pain points, reasons to believe, and what motivations unites all kinds of users together.
This target user persona was then concluded as:
User Needs
List of Must-haves
While every stakeholder described their answers to questions ranging from user needs to user problems and their own assumptions, this below list was concluded as the user needscope or map of what kind of design solutions should be highlighted.
Full list of User Needs:
Research Report
Results
From all the stakeholder research, analysis and synthesis we had a few results to show that informed our design solution decisions in the next stage of the process.
1. Use Case
List of Fairdrive Uses
The main Use Case that was derived was:
"The File Explorer is a place for the user to view, upload and organise/connect to their OWN data - and by using Fairdrive Protocol, also be able to use advantageous web 3 functionalities such as data sovereignty"
From the stakeholder interviews - here is what they thought the best uses of Fairdrive would be in this early sandbox stage:
2. User Journey
Journey Mapping
The aim for the User Journey was to keep things extremely basic for the end user. We did this so that the dapp could remain "hackable" and "open" and create it that so simple tasks can be repeated often.
From the stakeholder interviews - here is what we synthesised as the best User Journey to start off with in order to get the first wireframes designed:
3. Features and UX Flow Sketches
Feature List
The full features list cannot be shown in this portfolio piece, however the insights from all stakeholders was taken into numerous design workshops with client and the development team.
From here the design team was able to get not only a technical idea but a visual and UX feel to take into low fidelity wireframes and prototyping sessions with the development team.
Design Solution
Research Answer
As the research synthesis concluded and the beginnings of the middleware for the protocol in this Sandbox version of Fairdrive was underway, the design team had an answer from which to base all further design solutions on from the insights of the research project, which was:
Competitor Research
Competitive Attributes
Because Fairdrive was a fairly new product in web 3 but a very established product in web 2, we knew we had many features, UI and UX attributes to draw upon and filter through from direct and indirect competitors.
The first set of competitive attributes was resourced from the stakeholder interviews. These were:
Architecture
How it Works
There were a few ways in which the File Explorer could work but given the limitations of the protocol in what its current sandbox version was, we had a few things to consider first, which was the current architecture.
The architecture for Fairdrive mainly consists of a typical "Drive" interface with files and folders paired with a BZZ wallet to manage token balances and key-pairs.
The Fairdrive Dapp itself is a representation of files that is being stored on FairOS (or another storage base) and the user applies/utilises their own credentials created on the blockchain level to get all data associated with their credentials.
Wireframing V1.0
Main Flow File Explorer with Mini Dapp -
Markdown Editor and Photo Album
Another big functionality of the architecture to consider was that a developer could build on top of Fairdrive in any manner needed to render their own end users data. For instance, a map or photo min dapp using an end user's uploaded data.
Therefore for the first designs, the design team took inspiration from the set of reusable react components that can be injected into a developers dapp that can run on top of Fairdrive, most important of which are:
1.) Show files component
2.) Upload component
3.) Login component
These are some of the first designs to explore those kind of flows on a basic level:
Design Iteration V1.1
Low Fidelity Designs
In these low fidelity designs is where we started laying out the flow and more minor interactions, the most impactful of which at this stage was the Right Hand Side Panel. This is a panel in which the user can perform all important secondary tasks, see more detailed info on selected items, and make confirmations on primary tasks.
V1.1 Interactive Prototype
Explorer & Markdown Editor
In these two demo versions one can go through some of the basic features (uploading, downloading, creating) that show how developers can handle content not only on the Fairdrive UI but also on any future apps built in and around Fairdrive Protocol.
Here is a first glimpse of how data and content can be
"on Swarm - yet also shared to Fairdrive"
1.) Demo Primary Flow
Home Pod to Editor
2.) Demo Primary Flow
Home Pod to Photo Gallery
Branding
Fairdrive Messaging
Insights from the stakeholder interview showed that while a few stakeholders had different uses for Fairdrive, the general manifesto for Fairdrive still aligned very closely to Swarm and Fair Data Society's mainfesto, in short:
"Demonstrating the utility of decentralized, self-sovereign storage, Fairdrive can serve as frontend and protocol for individuals and service developers who share the Fair Data Society principles of data privacy to transform the practicality of web2.0 to web3.0.
These principles include data sovereignty, complete decentralization, a basis of consent, Fair Data and striving for a Fair Data Economy, and, open-source and interoperability of the entire ecosystem."
We took this manifesto as inspiration into thematic concepts and mood boards for the logo symbol and wordmark.
Branding Strategy
Brand UI and Style Reference
1.) Logo Thematic Direction, Moodboard & 1st drafts
The first drafts explored what the idea of a Fairdrive could be. This ranged from the idea of visualising a "global library" to an "infinite loop of data connectivity".
2.) 2nd Draft Logos & Creative Elements
These second drafts were about finding the "human moments" and aligning the newly formed brand identity to those in this context, while also making creative assets that reflect those ideas.
These artworks were intended to be used in marketing/branding content such as the brochure website and for community building in public presentations.
3.) Final Draft, Brand Elements, and Brochure Page Design
The final draft brought together the infinite connection idea and the human moments with the brand messaging in a brochure page where a splash of colour was added along with all the other important diagrams and iconography needed.
Design System
with Atomic Design Principles
This first version of the Fairdrive Sandbox was designed to inspire developers and enable them to play with the possibilities of this Universal Data Organisational Interface and see how their own projects can be integrated.
Therefore, it had a neutral palette in terms of branding, and a very open, basic but detailed and functional Design System to form a strong foundation on which to build upon.
1. Typography & Iconography
Design Atoms
2. Buttons & Inputs
Design Atoms
3. Drop Downs & Lists
Design Molecules
4. Display Elements & Modals
Design Organisms
5. Navigation & Search
Design Organisms
6. Galleries & Panels
Design Templates
7. High Fidelity Designs
Design Pages
High Fidelity Prototypes
Iterative Prototyping
With the ever growing design system and all the pieces we needed to create each flow, we created many high fidelity prototypes for Client and development reviews.
1. Mockups
Brochure Page
2. Micro Interactions
File/Folder Navigation
3. Adding/Linking Content
Linking to External Pod and Content
4. Overview Explorer page (Concept)
Navigation through Overview
5. Search Flow
Typing and Searching for Content
6. Uploading Content
Uploading Content from Device
7. File Exploring
Navigating from Shared to Private Folders and Hidden Content
8. Creating Content
Using Mini Dapp Fairtext for Uploading User Created Content
Outcomes
Goals and Requirements
Based on the requirements for this phase of the project, we successfully delivered high fidelity designs and both digital and coded prototypes for:
1) Fairdrive Dapp
2) Fairdrive Protocol
3) x2 Mini Dapps, Fairtext and Fairphoto
2) Fairdrive Protocol
3) x2 Mini Dapps, Fairtext and Fairphoto
+
Included in this was raw research data and synthesis report from all major stakeholders in the team, and we presented all our work in multiple client reviews community calls, presentations, and workshops.
Fairdrive Presentation
Community Launch Demo for Fairdrive
Presenting Fairdrive at Swarm One launch. Michal (Design Lead) and Mustafa (Tech lead (Linumlabs)) presenting an early working demo of Fairdrive (June 2021)
Coded Prototype & App
Fairdrive Beta Dapp
To see the latest in the development of Fairdrive past this first sandbox version, go to the live Dapp here and join the community discord server!
👇
https://fairdrive-mainnet.fairdatasociety.org/
Conclusion
Basic Functionality and Beyond
The evidence of the prototypes demonstrated the basic functionality that was needed in this project, and proved the concept of a Universal UI Data Organisational Tool (just as the research project highlighted) would be the best use case for Fairdrive. This functionality included actions like:
1.) Uploading content
2.) Creating files and folders for that content
However NOT
3.) Sharing those folders and files with others
The limitations of the current form of the project still needs to be developed further including advanced development into credentialing that will allow users to connect and be connected to other users on the blockchain level of Swarm itself.
BUT
Because of the design process, we were able to discover and prove to client that Fairdrive would be a very useful tool for developers building on top with their own UI data "representations" or "visualisations". For example, if there was a meme app that a developer was building, they could use Fairdrive as the means for storing the images, uploading images, and organising/displaying or "representing" the data of the images for their end users.
These representations and the multitude of different forms they could take on could be endless and all decentralised with a software tool like Fairdrive and the Protocol with the authoriser underlying it.
This is shown by the amount of early adopters Fairdive had at the time of this sandbox project (shown above). Here is hoping to many more ecosystem partners and people building on Fairdrive!
see more at
👇
https://fairdrive-mainnet.fairdatasociety.org/
Thanks for viewing!
