APEC 2022 Thailand Priorities is a microsite designed to showcase the key priorities for the Asia-Pacific Economic Cooperation (APEC) region during Thailand’s host year.
CLIENT/
Asia-Pacific Economic Cooperation
DESIGNED AT/
Ernst and Young
MY ROLE/
UIUX Designer, Illustrator, Animator
CHALLENGE/
To showcase the year's Thailand key priorities in a visually appealing way that is easily digestible.
About
To showcase the unique charm and cultural richness of Thailand, the design of the microsite drew inspiration from iconic landmarks and motifs of the country. Embracing a contemporary illustrative style, the aim was to portray Thailand as a forward-thinking leader while ensuring visual clarity and sophistication.
This project took place across a period of 2-3 months, in which I was the sole designer. I was in charge of art direction, concept proposal, UI/UX design, illustration and animation. I also worked very closely with the front-end developer in the implementation of the final product to ensure that the design vision could be fully realised within technical and time constraints.
Design approach
As part of the early design pitch to the client and stakeholders, I proposed the concept of a 'spotlight,' where the cursor would serve as a beacon to highlight the priorities and initiatives that APEC wanted to emphasize for the 2022 Thailand Priorities.
As users move the cursor around the page, different sections illuminate within the ‘spotlight’ on mouseover, encouraging exploration and active participation in the experience. This theme is extended towards the detail pages as well, where animated illustrations sit within the same spotlight.
Above: Sketches of the concept presented to stakeholders as part of the initial pitch.
Concept iteration
Over a period of a month, the concept and design of the microsite was continually refined based on feedback and reviews with the client and stakeholders.
Low to mid-fidelity wireframes and interactive prototypes were created and shared amongst the team and presented to stakeholders at regular intervals, demonstrating user flow and experience.
Outcomes
In the final implementation of the microsite, the main landing illustration was reworked to improve visual and navigational clarity. In order to introduce an element of storytelling and progression, an animated tuktuk–a recognisable symbol of Thailand–was introduced as a way to connect screens together in a loose narrative, accompanying the user as they 'travel' through the microsite.
Landing page
Priority pages
Clickable hotspots are used within priority pages to further organise complex information maintain a clean, minimal visual aesthetic and prevent information overload. Interacting with these hotspots will trigger a sliding drawer with more information on each point.
Illustrated Animations
In the earlier versions of the microsite implemented and designed by EY for 2021 and 2020, animations were implemented on the front-end using javascript. This method of implementation had two main downsides:
-
Longer development time: The reliance on javascript for animations slowed down the entire development process.
-
Limitations in the style and complexity: The previous microsites could only support basic animations, such as simple movements or fades of static objects on the page.
To address these issues, I proposed using JSON or Lottie animations, allowing us to animate illustrations in AfterEffects. This approach enabled quicker development and more intricate animations while reducing the likelihood of errors, as animations are rendered as pre-composed assets.
This shift not only streamlined our workflow but also offered greater creative freedom, resulting in more dynamic and visually engaging content. By leveraging Lottie animations, we could also ensure consistent performance across devices and browsers.
