Development of Sandbox English Conversation Training Applications with Atomic Design

This paper presents the development of a sandbox with atomic design to overcome the difficulty of developing features and harmonizes the design of an English conversation practice application. Our idea to implement a sandbox with atomic design in an English conversation practice application is how the sandbox can be used to maintain and continue the development of an English conversation practice application in a more organized manner and with the same principles as the application development rules. We implement sandbox development with an atomic design architectural model. The initial application system breakdown process begins to evaluate component consistency, then to determine the token value or design variable. After the breakdown process, we redesigned the UI using token variables, then compile it with an atomic design approach to create a complex interface composed of simple parts or vice versa. After the design process, we implement the application UI using atomic design UI design into components, then projected in the sandbox. Inside the sandbox, we isolate components for testing, documentation, and validation. The result of the component after going through the sandbox, we launch it as an application component. We created the system that we propose with the aim of providing a process flow so that managers have the same perception in application development as well as space for managers to be able to strengthen the system or feature before it is launched so that development problems are resolved properly. In a performance test, atomic design was able to accelerate page generation production by 49.9% and reduce interaction costs by 72.7%.