The redesign's visual design aims to enhance navigation, especially on mobile devices. It intuitively employs gestures such as swipe, scroll, and tap to simplify user navigation and content consumption.
The visual narrative theme emphasizes 'process', represented by the gradually changing animation of tapped buttons, the dynamic movement of almost all visual elements, and the restructured navigation and content presentation that facilitate growth for the OMG website through future expandable tabbing and card systems.
A clean, bold, and fresh design has been adopted to convey a premium branding impression. This is achieved by avoiding superfluous visual elements, such as the use of noise elements in the background, which break monotony while maintaining a bold and clean appearance.
The redesign's visual design aims to enhance navigation, especially on mobile devices. It intuitively employs gestures such as swipe, scroll, and tap to simplify user navigation and content consumption.
The visual narrative theme emphasizes 'process', represented by the gradually changing animation of tapped buttons, the dynamic movement of almost all visual elements, and the restructured navigation and content presentation that facilitate growth for the OMG website through future expandable tabbing and card systems.
A clean, bold, and fresh design has been adopted to convey a premium branding impression. This is achieved by avoiding superfluous visual elements, such as the use of noise elements in the background, which break monotony while maintaining a bold and clean appearance.
Wireframe
Wireframe
UI Design & Animation
UI Design & Animation
Targeting the primary demographic of 18-24-year-olds/Gen Z, and in line with the trendy-fresh-young-energetic spirit, the new UI design promotes video content as the main banner in a 9:16 format.
Visible 'above the fold', the prominent display of product hints from OMG's two main series (makeup and skincare) ensures users see them before scrolling.
Targeting the primary demographic of 18-24-year-olds/Gen Z, and in line with the trendy-fresh-young-energetic spirit, the new UI design promotes video content as the main banner in a 9:16 format.
Visible 'above the fold', the prominent display of product hints from OMG's two main series (makeup and skincare) ensures users see them before scrolling.
The shop section features tabbing to help admins efficiently add new product categories in an organized manner while keeping search intuitive and easy.
It also includes a Call-To-Action (CTA) as a shortcut to a beauty quiz, assisting users in selecting products based on personalized quiz results.
The shop section features tabbing to help admins efficiently add new product categories in an organized manner while keeping search intuitive and easy.
It also includes a Call-To-Action (CTA) as a shortcut to a beauty quiz, assisting users in selecting products based on personalized quiz results.
The main focus in the Virtual Try On section is the Call to Action (CTA) that directs users from the website to an Instagram filter. This section's design features an eye-catching visual element with parallax effect animation, assisting users who are still exploring the site to remember to try this feature once they've finished browsing.
The main focus in the Virtual Try On section is the Call to Action (CTA) that directs users from the website to an Instagram filter. This section's design features an eye-catching visual element with parallax effect animation, assisting users who are still exploring the site to remember to try this feature once they've finished browsing.
This section is a revamped version of the product testimonials, redesigned to be cleaner but capable of housing more information through restructured navigation and CTAs to other sections. Besides testimonials, this section can also accommodate information about new product releases or highlight the unique selling points of the offered products.
This section is a revamped version of the product testimonials, redesigned to be cleaner but capable of housing more information through restructured navigation and CTAs to other sections. Besides testimonials, this section can also accommodate information about new product releases or highlight the unique selling points of the offered products.
