TX Labs Design Internship: Blockless Developer Console
Designing interfaces for Developer Console that offers infrastructural web services to developers in our decentralized global network.
OVERVIEW
As the first UX design intern at TX Labs, I created user experiences for the first-generation Blockless Developer Console offerings and reported directly to the design lead and PM. For deliverables, I crafted interfaces including both onboarding and in-app experiences for developers in Blockless, a serverless, decentralized cloud service platform dedicated to deploying and maintaining blockchain-based applications in milliseconds.
COLLABORATORS
1 Design Lead, 1 PM, 1 PM Intern
WORK
Wireframing to High-fi Design, Research
TOOLS
Figma, Illustrator, Photoshop
DURATION
June 2022 - August 2022
Background
In the worldwide increasing popularity of using Web3 applications, the profound need for developers to deploy and maintain blockchain-based applications, as well as to access accounts with more transparency in a secure and reliable service platform is notable. However, there lacks a way for developers to efficiently execute and stay informed in their functions when tapping into Web3, while these applications can be intelligently distributed to maximize performance.
Goal
Designing experiences for Developer Console in Blockless, a serverless platform that allows developers to deploy and maintain blockchain-based functions, and access their accounts and products in distributed and decentralized ways.
My responsibilities
As the first and only UX design intern in the team, I designed interfaces for Blockless Developer Console from wireframing to high-fi prototypes. I also worked closely with my design lead, product management intern and a product manager who led the research phase to help us understand user needs, as well as defined product and business goals.
Product and design focuses
-
Multiple ways of deploying a Function when using Blockless Functions, and developers can decide based on their natural habitat and preferences
-
Fast and affordable: Blockless functions are serverless, lightweight programs that take a short period to execute cheaply.
-
Clear guidance: Blockless Console pages are designed with clear instructions in every step throughout the whole process, allowing both new and experienced developers to quickly onboard and deploy.
Outcome
Introducing Blockless Developer Console:
Our solution is a decentralized web app serving developers (primary users in this stage) who seek distributed, decentralized and affordable web services and applications. The app provides them with access to their accounts and products, and allow them to deploy decentralized functions in milliseconds. Blockless' value propositions first phase focus on user experiences of developers in two scopes: decentralized, and distributed.
Research
The research phase involved three angles to understand about serverless functions and decentralized function deployment process. I closely worked with product managers who led the research effort to document our assumptions and together define goals through our growing knowledge.
Research insights
Our team collected all the notes and synthesized into three key insights, which are the principles for designing the first-generation of Blockless Developer Console.
Research findings
01
Existing serverless functions (traditional function-as-a-service products) feature highlights such as 1) no servers to maintain, 2 ) exceptionally affordable, and 3) write in JS, Rust, C, and C++. This method execute deployment usually in milliseconds.
02
Some developers might have not been familiar to the frameworks due to lacking practical experience, so it could potentially take more time to onboard.
03
The general knowledge to deploy a Function is a big process in the web app, this including design, code, configure, package and finally deploy. Developers pointed out that process could be time-consuming if it takes more than a few seconds to load, and get back a response from a traditional webpage.
Product and design spaces
—>
Apart from the basic features of serverless functions, Blockless Functions highlights its being distributed and decentralized. For example, Blockless Functions is “trustless” where developers’ applications run on multiple nodes, achieving decentralized deployment.
—>
Blockless Functions provides guidance at each step, including both written and visual information for both experienced and new users throughout every single step of the process.
—>
Two ways to deploy a Function: distributed and decentralized. Developers either connects a Git Repository as source code and asks Blockless to automatically deploy new commits, or deploy Functions from CLI (command-line interface) at the codebase’ directory in a more natural habitat that saves time and effort.
Synthesis
Ideation
After collecting insights from our user research, we started to address the challenges by brainstorming new concepts for how we could upgrade the performance of serverless functions, while still maintaining the usability of account access and function deployment in Developer Console. To note, the concepts were based around serverless functions that aim to provide serverless, exceptionally affordable cloud computing services written in some "first-class citizen" programming languages such as JS, Rust, C and C++. To start on that, I began with iterating on low-fi wireframes to better picture the interfaces for the Console pages.
Target user
We created a representative persona, Will who represented the group of developers to capture his primary needs and goals, as well as pains we learned during the research phase. His scenario also represented use cases of web3 enterprise applications likewise.
.png)
Challenge 1
How might we allow Will to deploy a Function in multiple ways to save time based on his natural habitats?
Solution v1: Deploy from CLI or Connect to a Git in pop-up window
Will is able to deploy a function either directly from CLI, or connect to a Git (not in use) to create the environment. Both ways are supported by Blockless functions (with serverless features) that takes usually milliseconds to complete the process.
The first version incorporates the idea of side-by-side design with pop-up window to ask Will to configure and deploy if he chooses to do so by connecting a Git. This can indicate information hierarchy of deployment process if chosen different ways.
v1. two ways to deploy decentralized functions
Solution v2 (iteration): Deploy from CLI or Connect to a Git showing guidance
With team's critique feedback, the second version was inspired by the idea of the current deployment process by including breadcrumbs to guide users each step. This way shows we can guide users to quickly find their best way to deploy by showing clear written or visual guidance for both new and some-experienced users throughout each step.
v2. two ways to deploy decentralized functions
Challenge 2
How might we maintain transparency in Will's deployment process and allow him to monitor multiple deployments at the same time?
.jpg)
Solution step.1: Evaluate Function metrics
Will is able to understand important details about the performance of his Functions with status, invocation URL, Metrics showing its requests, resources, memory and errors based on different time frames.
Solution step.2: Monitor multiple deployments across the system
Will can monitor multiple deployments at the same time under the main Functions page if he clicks the navigation. Here he will find three kinds of status for each function: deploying, deployed or stopped. He can also review deployments filtered by name or by request.
End-to-end
solution
Our Developer Console prototype consisted of web interface that included screens like signing in, landing page, dashboard, deploying functions, deployment monitoring and account access.
Core functionality walkthrough
I created a diagram walking Will through his steps using Blockless Developer Console.
Sign in by connecting crypto wallet
Will will be able to use Blockless Developer Console by signing with his crypto wallet.
Deploy by CLI
The first way Will can create a Function is to deploy from Blockless CLI, The process was completed in the lightweight serverless frameworks with provided codes that make deployment faster.
Deploy by connecting a Git repo
Another way Will can create a Function is by connecting an unused Git repository and asking Blockless to automatically deploy new commits. Like deploying from CLI, this way also adopts serverless functions that make the process more natural and faster, usually in milliseconds.
Monitor and manage functions
Will is able to monitor and maintain each deployment from his deployment dashboard and access the detailed information for each as well, including visualized metrics, status, invocation URL. In the meantime, he could go back to the deployment history page to track status for each Function.
Account access and payment history
Will can access his Developer Console account to see details such as wallet balance, changing payment authorization and spending limit. In the meantime, he could find out all transaction history regarding the functions usage respectively. This step, provides more transparency as he maintains the deployment status.
Key screens overview
Impact
My internship ended at hi-fi prototypes and successfully delivered to the team. I was able to discuss opinions while internally testing with developers, and received feedback even from the leadership team:
Showed clear guidance on Blockless Functions for both new and experienced developers when they create functions in the developer console
Workflows can support Blockless a stronger brand identity in the decentralized and dynamic web hosting demo
Design handoff
I also created detailed specs of screens that I was responsible for and deliver to the engineering team. Along with my demo video showing the clickable user flows, they help to drive alignment between my design and engineering side. (Design handoff have been minimized in the image below due to partial NDA.)
Reflection
More opportunities
How can we bring node operators to contribute their idle computing resources to Blockless networks?
.png)
Takeaways
-
Different understandings towards contexts between stakeholders -guidance should be carefully designed in a 0-to-1 product to serve better comprehensions
-
Bearing complex constraints in mind when designing workflows, being autonomous and collaborative in a fast-pacing environment.