
DEV Labs Platform
SCB TechX, Saber Labs, 2021
The DEV Labs Platform as Idea Sand Box built for software developers empowers them to deploy code and their project online with zero downtime, through automating DevOps process with its in-built infrastructure configurations and test frameworks. This platform helps users quickly bring their ideas, code to life.
Overview
Business Goal
-
Creating software development sandbox and community to support idea implementation for software developers
Issues
-
Complex processes of code and project deployment
-
A difficulty in setting up an infrastructure by their own because they can't do it.
-
Language they used on their local code file might not be matched with the platform
Responsibility
-
Product roadmaps, Stakeholder interview, Wire-framing, Lo-fi prototyping to Hi-fi prototyping, Design system and materials, Interactive prototype
Problems
Business pain-point is about the process of how to implement a project and deploy a code online. There are multiple processes and steps during the process of software development especially in a small team where workforces are not adequate to efficiently work under very time-constrain and several limitations. The business goal is to create software development sandbox to support all software developers and help them implement their project faster by reducing technical tasks through automated process.
%20copy.png)
.png)
Stakeholder Analysis

Potential Users
It all started with listing all people and units who are a possible stakeholder. The stakeholder is illustrated by considering impact and importance connection between inside-out and bottom-up. This map helped our team figure out who the target users are?, who/whom are involved in? and the way to engage with the people. Specifically, The main customer segment is software developers in a small DEV team.

Working factors
.png)
Frustration
- Code deployment flexibility issues
- I don’t use a provided template (It's quite complex and I don't need to change my code to match with the platform template)
- I'm not an expert. I don't know how to set an infrastructure for a project when deploying
- I have a concern on privacy issues when using my private git/ repos
Nat (25)
Software developers in a small DEV team
Software developer who is passionate about creating a new product in a small software development in tech start-up and agile team. (Collaboration 3-4 developers in the team)
Task: Web application development, full-stack deployment
Characteristic: Self-confident, fast learning
Devices : Apple devices and Apple product ecosystem
Macbook Pro, iPhone
Goal and Motivation
looking for a platform that helps me bring my project to live with automated process (build, test and delivery).
by deploying a project from local to the internet but I don't need to set an infrastructure or set up Clouds infra behind the project by myself. Reducing CI/CD process to deliver either product or prototype faster.
Needs
- Database to integrate with the project deployed on the internet without setting up technical tasks.
- Be able to directly upload or import my local code file to deploy.
- support MVP prototyping with provided template with a clear guidance.
Focus group
EXP Mapping & Problem Defining
.png)
User Experience Mapping is based on the process users usually do while coding, deploying the software online. I mapped activities, what they think, feel and frustrate during each step, what they need and possible solutions and opportunities for each step. After analysing user journey and persona, It can be considerably seen that users experience a difficulty in setting up an infrastructure by their own because they can't do it. Also, hey think that it would be beneficial, if there is a service that helps them set up infra and pipeline with their pushed projects. Additionally, user's concern is all about flexibility throughout the platform such as register method, language they used in their local code file which might not be matched with the requirement of the platform.
Problem Statement
How might we help those to shorten the online project implementation process in order to support MVP delivery?
The product direction is an automated in-app process to shorten software development process to help users to build, test, deploy code file with zero downtime, through automating DevOps with its in-built infrastructure configurations, test frameworks, add-ons, database, and plug-ins where users don't need to install or set up any technical things.


Feature list
Main Feature
Why?/ Objectives
Priority
Register and Sign in
High
Individual Dashboard
-
Default dashboard for every user
-
The dashboard provides a workspace for all users to freely deploy a project or use the platform.
-
if they want to create another team they need to subscribe or choose a plan to expand the dashboard
High
Create a project with more
flexibility by allowing user's
external repos
-
A channel which allows user's code file to directly deploy on the platform
-
To enhance flexibility when deploying a project.
High
Create a project with provided
templates
-
Provided templates for users who don't have a code but need to do a project. This features will provide a template that users can write a code to match with a template
High
Marketplace/ add ons services
- database
- plugins
- other micro services
-
Feature that stores additional add-ons and plug-ins
-
To install with deployed projects
High
Dev-Prod mode
-
To increase a testing branch (DEV) before users publish a project to a production (PROD)
High
Payment, uograde to team
-
For a better collaboration with friends or colleagues
High
Team dashboard and management
-
For a better collaboration with friends or colleagues
-
To assign a role to team members. However, only team owner can remove projects or members.
High
Userflow & Wireframe
After I list all possible features and prioritised them, it is time to think about wire-framing together with user flow related to develop to high-fidelity prototype. I found that there are three main levels of user flow including 1) account level, 2) personal or team dashboard level and 3) project detail level. Then, wire frame and low-fidelity prototype was created to illustrate the flow.

Wire-framing and Lo-Fi
Click slideshow to see more wireframe
Usability Testing
I conducted usability test to validate the design and user flow of its platform. Before conducting, I set the research plan to lay down the tasks users need to perform and interact. The objective of the research is to validate a new flow of team and project dashboard.
Method & Tasks
Expected results : Task completion, time to complete, heat-map)
Task direction:
1) Onboarding to creating first project, to validate user flow when user onboard with the platform for the first time and how they create a project.
2) Creating a new team or dashboard, to validate user flow when they create a new team
3) Creating a project in another team (dashboard changing) Task 1+2 to validate the user understanding with the dashboard level
Design system
.png)
Platform Landing page- Users can register and log into their dashboard via
the landing apge

If users want to set up or edit your dashboard, users can click the navigation menu “Setting” below the dashboard name.
%20-%20project%20lists%20(1).jpg)
The dashboard (team or individual) page displays
-
Project Count: The current number of projects
-
status (provisioning or running)
-
type (API or Web app)
-
a button to "View Project" which takes you to "Project Detail" page
Create a project by using ready-made code templates in a selected language.
-
Select from project type tabs whether to create an API or Web project
-
Select language code user prefer

create a project by linking user's external repository and selecting language used in user's code file.
Select where to host the code. Users will be able to host the code either in their platform-built repository or their existing repository.
Provisioning status




.png)


- Name a new dashboard and invite members to the team and choose a team plan and make a payment.
- After users finish making payment, a new dashboard will be created.
Create a project by using ready-made code templates in a selected language.
-
Select from project type tabs whether to create an API or Web project
-
Select language code user prefer

Admin user who creates the team can invite your friend for a better collaboration on a particular project by clicking “add a member” button.
Create a project by using ready-made code templates in a selected language.
-
Select from project type tabs whether to create an API or Web project
-
Select language code user prefer

.png)
Prototyping
What I have learned
I had an opportunity to fully manage the project. I did multiple tasks to achieve the business goal. To be honest, this project is very challenging because it requires a tremendous understanding in software development, technical terms, and the way to communicate with software developers who are the main target group of the platform. After doing this project, I gained more understanding in the process of deploying a project.
However, after delivering, we can't stop developing the platform. Dev Labs platform is needed to improve continually. For the next step, to build a whole ecosystem of DEV Labs, community feature will be developed further to fulfill the need of users.