L’optika

UX / UI / Illustrations / 2018

L’Optika it’s an upcoming WordPress theme shop that shows experiments with content creation, HTML&CSS, animations and other technologies.

Online presence

With a focus on content creation and personalization the layout is only a mean to display it in the most basic way to allow quick changes.

Category page shows the products in the same category in a mansory layout. Campaign products are highlighted. Sorting and filtering by user as well as by content manager to best suit the current promotion.

Personalize.

Product page was design to focus on the product. Mood images accompany the product images. For each frames recommendations are being made in order to offer the right information and help the user make the best decision.


Checkout

The Checkout flow was designed using UX best practices and UI Patterns. The user has an accessible mini cart from where it can view items added. The user can make the purchase in a “one page checkout”, thus always having a complete overview. On a mobile device, after completing a section, the user is automatically taken to the next section.

Research

Glasses we wear them because we need them or just to look cool – YAY Shades! But when it comes to choosing the best model for you, you’ll need to take into consideration the following aspects: your face shape / color of your skin / occasion. We’ll leave the personality to you. 🙂

The face shapes icons were build based on jawline and face length, forehead, chin and cheekbone width.

Face shapes were build in order to show why certain frames are more recommended than others. The knowledge behind it helped build the face shapes icons and the configurator.

Prototyping

Checkout flow – wireframes created in ‘SKETCH’, then imported in ‘PRINCIPLE for MAC’ for creating the interaction. Prototype can be previewed on an iPhone and works just like it’s implemented. TAP TAP SWIPE.

The Configurator

Characters

The purpose of using illustrations is to give the content its identity. With each campaign new characters will be created in order to achieve a thematic approach.

NEXT Mediatic SEE NEXT PROJECT