Works > Web Development

Utopia - A Web App for Energy Education

Utopia is a web app for energy education. My team developed user-side and provider-side sub-apps. This app features an energy diary, a web comics with audio autoplay, and a book viewer system.

Period July 2017 - Aug 2018

My Role Director, Front-end Developer

Client Plant (sponsored by Samsung)

Designer Cindy Oh

Back-end Developer Jinsu Eun (Ruby on Rails)

Concept & Communication

This project was requested by a energy education start-up, Plant. Since they had only an overall plan for this project, it was our mission to effectively adjust its scale and specify which features to include. This indicates that my role as a director was important. I treid to suggest realistic plans with the client's limited resource. For example, their original plan was to operate a competitive system based on users's energy usage. However, I and the back-end developer discovered that they had limited time and computing resource to implement and run such system, and it had also legal issue regarding collecting personal information. Hence, we suggested an enhanced monitoring and sharing system.

Another issue was its design. This project was planed as a serious game for young students, yet the client's ideas were less likely to be a game. Thus, the client wants its appearance to look like a game, which demanded the designer to investigate game design. There were several options and took a long time to fix this current idea.

Energy Diary

The energy diary is the main feature of this project. Users can make a record of their daily energy use by entering their time of use appliacne, transportaion, and network. Each card in diary represent the energy usage of the corresponding sector, and users can unfold and fold these cards for detail usage.

Since this application was planned to be distrubted through web, it was key to provide them both on desktop and mobile devices. Adding a new record is important to this kind of applications, so the add button (red button) needed to be always accessible. If its position in the desktop version is maintained on the mobile version, it becomes less visible due to the extended scroll length. So, I decided to adopt a different type of interface while keeping its visual style.

Monitoring Energy Diary

This project was for educating energy issues and making young students use less amount of energy. This required a monitoring panel for reminding users how much energy they used.

Energy Diary Tutorial

A step-by-step tutorial was necessary to spread this application among elementary students because they are less familiar with use a new computer application. Thus, this tutorial was provided to first-time users.

In order to make this tutorial effective, hihglighting focused objects and dehighlighting the others were needed at each step. While keeping original interface and back-end functions, I should precisely control CSS by JavaScript and HTML. Also, the text description had to be comprehensible for young students, so I discussed this issue internally with the teammates and consulted with the client.

Web Comics with Audio Autoplay

The client demanded us to provide a web comics (webtoon) with audio autoplay, which means that audio clips (e.g. background music, and sound effects) are automatically played at their preset positions as reading comics. This was because their project was initiated this web comics series and already prepared some audio tracks for the comics. This way of presenting comics was famous in the Korean web comics market, but not in the world-wide scale. This meant that there were no open source library for this feature, and I had to develop from the scratch because it belonged to front-end development.

Thus, I added invisible grid over comics images for audio cues and utilized scroll event of JavaScript so that audio tracks are played and stopped at their desired scroll position. There were two issues when adopting this grid system. First, the interval of the audio cue grid had to be relative because the absolute size of web comics changed according to screen size. Second, the appropriate interval of the grid needed to be decided because if it were too fine, it would be difficult for authors to control the system, otherwise, it would be less timely. Therefore, after few demo test, I set the grid size as 100px when the width is 1000px.

Another concern was to offer provider-side interface because the author of the web comics were also the user of this app. When registering a new episode, the author first upload the image files of the episode and audio tracks. Then, in another page (the second screenshot), the images are rendered and the grid is visibly overlaid. The interactive dialog box at the bottom side allows the author to select the starting and ending points of each audio track, and those points appear on the grid. Fading option was also available for fluent transition of audio tracks.

Web-friendly Book Viewer

More descriptive contents were provided through textbooks developed by the client. Our issue was how to provide the textbooks on both desktop and mobile. The client wanted a page-turn effect, and zooming must be available for user convenience. Moreover, they all had to be web-friendly (without third-party application) for mobile service. Therefore, I made use of turn.js which is an open-source JavaScript library.