CES WEB APP CREATOR

At CES, I led the end-to-end design of a web-based app generator, enabling developers to quickly scaffold and customize CES applications. We streamlined the process by eliminating error-prone manual steps and providing developers with a fast, intuitive, and customizable workflow. The web app creator integrates drag-and-drop templates, route configuration, and code export, resulting in significant efficiency gains.

Outcomes & Impact

Reduced project setup time from an average of 60 minutes to 15 minutes, achieving a 75% improvement.
Improved onboarding: New team members onboarded 30% faster with tool-generated starter projects.
Objectives achieved: streamlined route setup, simple customization, consistent code output.

COMPANY

CES (CMMI LEVEL 5 IT AND BPM COMPANY)

PLATFORM

WEB (DEVELOPER-FOCUSED TOOL)

IN COLLABORATION WITH

PRODUCT

ENGINEERING

DEVOPS

MY ROLE

UX/PRODUCT DESIGN

UX RESEARCH

DESIGN SYSTEM CREATION

PROTOTYPING

RESEARCH & PROCESS

User Needs:

Navigation/ menu items on every page
Ease to drag and drop within templates
Create and download template code

System Requirements:

User Registration
Login
Dashboard
1. Page analytics for created apps
App List
1. The developer should be able to view all the apps created in a grid/list format
2. The following information should be visible under the grid -
  1. App Name
  2. Base Framework / Lib (React or Angular)
3. Ability to navigate for edit mode
Create App
1. Developer should be able to create an app by filling out primarily information about the app -
  1. App Name
  2. Framework / Lib (Dropdown)
  3. Application Type (SSR / SPA)
2. All fields are mandatory
Edit App
1. Manage Routing
  1. App should contain a by default template / page
  2. Create a new route/edit route
  3. Ability to enter route name and URL name
  4. Ability to link to an existing route
  5. Display a routing in a tree structure
2. Add/Edit template for a route
  1. Select from a predefined template
  2. Edit the template (Redirect to CES S.U.D.O Application)
Export Application
1. Export codebase as a zip file.

System Navigation

Paper Prototype

Feedback & Iteration

After developing a low fidelity prototype we conducted usability tests with CES software developers. Based on feedback we added features to enhance the ease of editing an existing application as that was most important to users. Based on that we were able to develop a high-fidelity prototype for developers to create and start using the new system.

Key Insights

Visual Layout Needed – A tree structure would make nested routing configurations clearer.
Template Flexibility – Developers wanted drag-and-drop or preset module selection.
One-Click Export – The ability to generate a ready-to-use code package was non-negotiable.