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)
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.
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.
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.
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.
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.
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.