.avif)
Project Overview
Project: Fanmate - a creative platform
Client: Telkomsel
Role: Illustrator, Icon Designer & Motion Designer (as a Freelancer)
Team: Product Design
Timeline: 2022 - Present
Company: Nusaraya.co.id
What I did in this project:
I had the opportunity to collaborate with the UI/UX team at Fanmate (currently in development), where I worked on creating visual assets for landing pages and web applications. I conceptualized and designed illustrations, icons, and motion graphics for various pages to support the overall look and feel.
Challenge:
The challenge was to design illustrations, icons, and motion elements that not only look visually appealing but also clearly convey the intended information.
Goals:
To help users easily understand the information and feel confident in taking any action needed to achieve their goals.
Solution:
Create appropriate and visually appealing illustrations, icons, and motion graphics to support and complement the text.
Design Solution
I will not include any confidential designs. Of all the designs available for display, only select ones will be uploaded to my portfolio website.
I'm not presenting the designs in the order they were created first. Instead, I'm grouping them to make them easier to follow, making the flow more enjoyable to view, read, and understand.
The designs were created based on the needs of each page, specifically where supporting visuals were required. The UI/UX designer works directly with users to understand their needs. Once everything is well documented, especially for pages that require illustrations, icons, or motion, they send a request to me to create the visuals.
Every design goes through the same workflow. Since the user needs are already clear from the UI/UX team, I can jump right into the process: Ideation (Brainstorming with UIUX Designer) → Design → Test (propose to user).
1. Landing Page
A hero section doesn’t always need to rely on illustrations. Sometimes a video, or even just simple text, can work just as well, depending on the purpose. The important thing is that the section creates a magical first impression, which draws visitors in and makes them want to keep scrolling down.
Hero Section
First Design — for Fanmate, users needed an illustration to support and strengthen the headline. This resulted in a concept that combines several key elements:
- Character to represent the creator
- Devices to show accessibility across platforms, as long as there’s internet
- Emoticons symbolizing fan support
- Brushes and creative elements highlighting that Fanmate isn’t limited to one type of creator
The result is a hero design that is not only visually appealing, but also tells a story and is relevant.
Second Design — the second design was created as an adjustment to the landing page’s headline and main image. This time, the character was transformed into a real person, a cosplayer, blended with supporting elements from the previous design. Each detail was carefully refined to align with the new headline: “Support, Reward, and Engage!”
2. Gift Sticker
Fans can now send gifts, a new feature on Fanmate, found on every creator's profile. This feature allows fans to support their favorite creators by sending them tickers, and each sticker has a different value.
First Design — Most Fanmate creators are cosplayers, so the sticker designs often take inspiration from games and films, such as straw hats, PUBG helmets, and more, all in Fanmate's signature style and colors.
Second Design — There are changes to the stickers to make them more general, the colors and styles do not have to be taken from the Fanmate palette. There are several shapes and colors of stickers that are re-adjusted. The selection of sticker shapes takes reference from sticker shapes that are more familiar to many people, usually these sticker shapes can be found on several well-known platforms, such as crowns, coffee, animals, donuts, etc.
Final Design — After receiving feedback, users provided new references, they wanted stickers that felt more realistic. From there, we developed a gift concept with colors and styles designed to appear 3D, so the stickers looked more realistic on screen.
This time, the gift illustration/sticker was created by 2 designers. About 35% of the part I worked on, or 7 illustration out of 20, and illustration I made is blue whale, fireworks, balloons, cats, sheep, dragons, and drinks. Then, all the stickers were animated. For motion design, I did everything.
Animated stickers — Each animated sticker has a duration of around three seconds. The movements are kept simple, following the shape and personality of each character—for example, a whale swimming, fireworks bursting, a dragon flying, or a sheep walking, etc.
