Works > Web Development

Utopia - Energy Education App

Utopia is a web app for energy education. My team developed user-side and content provider-side applications. The user-side application features an energy diary, a web comics with audio autoplay, and a book viewer system, and the content provider-side application provides management tools for those features.

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

The client of this project was an energy education start-up, Plant. At first, they suggested a general plan for this project because they was not able to envision how challenging it is technologically, so it was our mission to adjust the scale of the system and specify which features to include. I led this discussion as a director. I often revised their plans to realistic one in line with the client's limited resource. For example, their original plan was to operate a competitive gamification based on users's energy usage. However, I and the back-end developer discovered that they had limited time and computing resource (maintenance budget) to implement and run such system, and it had also legal issue regarding collecting personal information (at that time they were not ready for legal advices). Hence, we suggested an enhanced monitoring and sharing system.

Another issue was its appearance. This project was planed as a serious game for young students, yet the client's idea lacked core elements to be a game (e.g., goal and reward were abstract). Instead, teh client suggested a game-like appearance.

Energy Diary

The energy diary was the main feature of this project. Users can record their daily energy use by entering their time of using an appliacne, transportaion, etc. Each card in diary represents the energy usage of the corresponding sector, and users can toggle these cards for detail usage.

In terms of responsive design, for example, adding a new record was critical to this system as a 'diary,' so we adjusted the add button (red button) to be always accessible.

Monitoring Energy Diary

This project was intended to teach students about energy issues, ultimately leading them to reducing energy consumption. As a baseline approach to such a toool, a monitoring panel indicates users about how much energy they have used.

Energy Diary Tutorial

A step-by-step tutorial was necessary to increase the usability of this application among elementary students because they might not be familiar with this. Thus, a system provides a first-time tutorial.

In order to make this tutorial effective, we dehighlighted non-focused objects at each step, while keeping original functionalities. Also, the text description had to be comprehensible for young students, so I often led the discussion with the client based on general user-centered apporaches.

Web Comics with Audio Autoplay

The client requested a web comics (webtoon) feature with audio autoplay, which means that each audio clip (e.g. background music, and sound effects) is automatically played at its preset position as readers progress. This way of presenting comics was famous in the Korean web comics market, but a proprietary resource, which meant no open source library suited for this feature was available. I developed it from the scratch.

I added invisible horizontal grids 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. I concerned with the following two issues in developing the grid-based audio autoplay. First, the interval of the audio cue grid had to be relative because the size of web comics changed relative to screen size. Second, the appropriate interval of the grid needed to be decided because the finer the grid, the more difficult authors to control; otherwise it would be less timely. Therefore, after a few demo tests, I set the grid size as 100px when the width is 1000px.

Second, offering a content provider-side application required an easilty testable interface. When uploading 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

The client wanted to provide the textbooks they developed. 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.