Go up to the top

OP Storybook Web App

scope

UI and UX Design
Motion Graphics

YEAR

2020-2021

INTRODUCTION

Ocean Park Hong Kong (OP) launches personalisable hardcover storybooks that allows children to be a main character of the storybook and start an adventure with their IP characters - Whiskey and Friends. The whole experience will take place in the experiential retail store - OPX.

CHANLLENGE

  • Front-end UI that provides the pre-printed storybook preview for inputting the kid's name and photo (with background removal feature).
  • A content management system for setting up the storybook product specification and image assets that reflect in on-screen preview and print requirement file.
  • According to the gender of the child, the pronoun (eg. He, She) needs to be changed in the story content.
  • Ensure the child's poses match the storyline during the photo shooting session at the retail store.

SOLUTION

We (CG - Custom Gateway) provides an end-to-end solution by setting up the storybook assets in our platform, develops the App to display storybook designs and configures UI with an automatic photo background removal feature. Once the consumer purchased the storybook, they will submit the information form and complete the photo shooting. OPX staff will use this front-end App to configure the storybook design and manage the order in the back-end system.

During the photo shooting session, we provide the instruction UI for guiding the kid to pose correctly. It was displayed with the photo shooting preview on the TV. When the photo shooting booth is not operating, the screensaver animation will be played to attract people's interest.

FUNCTIONALITY

  • Each storybook design has girl and boy version, it simplifies the storybook configuration process for the end-user.
  • Once the children’s name is inserted, it will replace the protagonist's name fields across the whole storybook.
  • Once the photos are uploaded, the App will auto remove the background and apply it to the same pose image fields.

MY ROLE

  • Focusing on the storybook product setup in the CG platform including communicating with Ocean Park’s illustrator to provide the assets.
  • Ensuring the print output file matches the production requirement.
  • Working closely with solution architect and project implementation manager on the product configuration UI, CSS, sales flow, production workflow and user journey.
  • Updating and modifying the instruction UI in Adobe XD, and screensaver designs in After Effects.

No items found.

NEED A DESIGNER?

Let's get in touch >