top of page
dltp.png

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.

CICD (1) copy.png
CICD (1).png
Stakeholder Analysis
19.png
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.

Screen Shot 2565-12-27 at 15.05.55.png

Working factors

Frame 657 (1).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
user exp mapping (1).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.

CICD.png
CICD.png
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.

Userflow.png
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
Button design system (3).png

Platform Landing page- Users can register and log into their dashboard via

the landing apge

★ DEV Labs Landing page.png

If users want to set up or edit your dashboard, users can click the navigation menu “Setting” below the dashboard name. 

★★ Individual dashboard (not link git) - project lists (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 

★ Creating a project - template.png

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

Provisioing projects.png
Failed provisioning projects.png
Background.png
Active project.png
★ Project detail - personal -  (dev).png
★ MArketplace- Add-ons.png
★ Marketplace- Add-ons - details.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 

★ Creating team - step 1 _ new team and plan.png

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 

★★★ Team dashboard - members.png
☆ member invitation  (pop-up).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.

© 2024, Sitthichoke Noisri
All rights reserved.


 

Get In Touch

bottom of page