Fantasy Island Challenge

Summary

Fantasy Island Challenge is a narrative-driven, social steps challenge focused on individual achievements. It aims to promote healthy habits and reinforce a positive, healthy workplace culture for employees. Conquering the 20 levels in the Challenge unlocks rewards. This project has been one of the most interesting and challenging endeavors I've undertaken. I was deeply involved in every aspect of the project, from brainstorming ideas with the product team, creating mockups with product designers, designing the 20th-level fantasy islands with visual designers, to crafting animations and testing with the engineering team. The feature was fully launched in Q4 2018 and has since become a significant driver of user engagement in our app.

My role

My team is responsible for designing these 20-level fantasy islands. I personally designed four of them and created animations for ten of them.

Process

Draft Sketch > Illustration Design > Design Critique > Defining Theme > Finalization

Draft Sketch

We began with hand drawings, encouraging every designer to generate their unique ideas through sketches, without any restrictions on styles. The picture below displays my sketch of Peach Blossom Island, which drew inspiration from the movie "Eternal Love." Finally, we shared all of our drafts within the team.

Illustration Design

We transformed the hand drawing into an illustration. I chose the sea island as the starting point because I had some creative ideas during the drafting process. I proposed two designs. The first design aims to evoke a mysterious feeling, featuring an unmanned boat floating on the sea with a bright oil lamp. The second design expresses a sense of the future, depicting a geometric-shaped dolphin leaping out of the sea.

Design critique

When the first version of Fantasy Island was created, we organized a project review with related cross-functional teams. Our goal was to give a visual experience of our design to teams like engineering and product, confirming that our design aligns with our product vision and is well-thought-out and achievable.

Define theme

Afterward, we shared our designs with all internal employees by posting them on a board. This approach garnered tons of valuable feedback, including comments like "Can there be more colors?", "Is it a bit too realistic?", "Too many cool tones!", "The styles are not consistent.", "Some emphasize too much detail, while others are too simple," and so on. We also received positive feedback like "They truly deserve to be called Fantasy Islands because at first sight, I can't pinpoint their location; some remind me of the Canyonlands, while others evoke a sense of the future world."

Results

The picture below shows the entire process from the second round to the finalization.

Animation Implementation

Issues
Most designers in our team get used to make animations using After effect and export to MOV format. As we know, not all media players, devices, online file storage services and websites support the MOV format. Also the file size of MOV is usually bigger than other formats. Even if we support the MOV format, when 20 islands are animated together, It will dramatically slow down the loading process, resulting in a bad user experience.

Solution

Analyze CSS animation and SVG animation

CSS. Animating a small graphic like a logo, an icon, button transitions, sliding panels, expanding divs, loading bars, rotating graphics etc.
SVG. Animating an illustration, which is scalable vector graphics.
After discussing with the developers, we came to the conclusion that SVG animation is a better choice, and the most consistent way to animate SVG is through Javascript, just as our web/mobile app is built with Javascript.

Find a tool to create SVG animation

SVGator: It’s not as powerful as Adobe After Effects, but it’s a lot more adaptive. It really speeds up the process when making simple SVG animations and exports everything in code, ready to use on the web. I created 10 island animations through SVGator with significant processing time speed up.Click here to see the High-Resolution SVG Animations

Fantasy Island Challenge Enhancement

During a company hackathon, by collaborating with three developers, I designed a new feature, “Daily Bonus”, and integrated into Fantasy Island Challenge in order to increase daily login, boost time spent in app and encourage peers. Click here to see the complete proposal