project#1

MOKO

june - july , 2024

a product showcase web page for a leave-on gel cream moisturizer. The design emphasizes a natural and minimal aesthetic, aligned with the product’s branding. The site utilizes Parallax Scrolling to create an immersive and visually engaging user experience.

banner section

ingredient section

product section

parallax animation 01

parallax animation 02

parallax animation 03

parallax animation 04

parallax animation 05

mockup

mockup

userflow

elements

elements from PDF

elements from PDF(2)

problem - solving

problem

One of the main challenges was designing an engaging web page for product presentation without a defined user experience direction or emotional goal for the users. The only available content was a PDF containing basic product information, which had to be manually screen captured and edited in Adobe Photoshop to create usable web elements.

problem - solving

solution

The website is designed as a single-page experience, emphasizing storytelling to showcase the product through engaging animations and parallax scrolling on the landing page. Each section features contrasting color schemes to enhance visual interest and draw attention to the product’s key highlights.

wireframe

prototype