While participating in the Chingu community, I collaborated with partners from Korea, Japan, and Australia to develop this app in six weeks. Many concepts were proposed during the process, and the ultimate conclusion was to create a platform for directing viewers to specific movie information. Through this open-source project, we polished our web-developing skills, accumulated cross-country/cross-field cooperation experience, and adopted agile development methods. Eventually, I integrated the design into the development process through user research, design system, design handoffs, and prototypes. We successfully launched the platform on time despite the short crew.
People enjoy watching movies, whether at home or in the cinema; we will search for movie information online. Nanum is a movie information website that provides three recommendation ways for hesitant users. It is meant to allow users to enter keywords to search and add favorites, allowing them to acquire movie information while browsing.
At the beginning of the project conception, I did basic user research and a competitive analysis presentation. This report supported my partners in understanding the potential user behavior of the website in agile development, and successfully conceived the framework of MVP in the second week.
Due to the team's need to construct the MVP quickly in the early stage, I transformed three types of user groups from the movie search experience of our relatives and friends. We analyzed the mainstream website’s structure and functions. The presentation inspired my partners to generate more ideas for product development, focusing on the "hesitant" type of target users. We also sorted out the project vision and the direction of service development. Thus, we could prioritize the user needs and assign tasks in the product backlog.
Based on the competitive research, we uncovered the main features of our services that equip users with direction, clarifying the JTBD (Jobs-to-be-done) of each feature.
Under the foregoing considerations, we collaborated to establish the following project goals:
After our discussion, we decided to provide users with sufficient movie information than an intuitive picker-type website. Eventually, we provided users with three main sections to make viewing choices:
In addition to confirming the information architecture, interactive flow, and brand identity, two engineers were unavailable to continue participating the project in the later stages. The team rescheduled our tasks and reprioritized the project goals, flexibly coordinating the progress to complete the project. During the final two weeks of the sprint, I also aided with testing and general design quality control.
The engineering team adopted The Movie Database (TMDB) API as the source for fetching movie information. Faced with a pile of backlogs, I used Notion to organize the estimated schedule on the design side for the engineers to refer to. Then communicated with them remotely in the Discord channel to adapt/prioritize the tasks and pick up the tickets on the Trello board.
MUI is a React component library that implements the Google Material Design guideline. The team consists of four engineers. Four engineers are on the team, and I constructed a design system and components in Figma that fit the team's needs. This setup helps create an operational flow and a high-fidelity prototype rapidly.
Due to the limited Figma components available in the official free version, I designed a wireflow and prototype to confirm the overall platform structure/construction/inspection of each screen while making adjustments and updating the component library in each iteration. Ultimately, I completed a set of the platform design system and design handoff documents integrated into the Figma file.
Besides designing the Figma layers into an easily navigable hierarchy, I constructed different Components. It took some time at first, but it helped me make changes to the design faster and talk more easily about the changes later. During the process, I organized four brand style combinations, and the team finally chose to adopt the first proposal, Neon 24/7. For the color part, neon blue and neon red were preferred as the main and secondary colors, matched with a dark mode of gray.
Further, we used the typeface Nanum Myeongjo & Lato; Nanum Myeongjo came from Korea with the meaning of sharing and is in line with the original intention of our project - "to enable users to make appropriate viewing decisions after using the platform through the presentation of movie information". Therefore, it has also become the name of the platform.
Check out this movie information platform: https://movie-app-geckos-18.netlify.app/
