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