Website User Interaction Design

Website User Interaction Design

This project is confidential (2016/2017 – still under development).
Conception and Webdesign of a responsive website: from early pencil sketches to detailed wireframing, final UI and CSS animations/transitions.
Working closely within a team of several designers/developers from different countries and different locations. The website being part of a global service targeting a large audience across multiple platforms.
Contact me for more details.

Luxury Real Estate UI Design

Luxury Real Estate

Objective

To build a one stop Luxury Property Service Solution Platform and the first Asian Luxury property o2o portal.

Core Target

Asia ultra HNWIs (the next wealth engine) and international developers.

Specifications

  • Premium look and feel
  • Desktop and mobile friendly
  • Portal: e-commerce + high-end digital publication + advertorial

Tasks

  • UX Design
  • Prototyping
  • Art Direction and UI Design
  • Interaction Design

UX flowchart:

Real-Estate-Diagram

Early wireframes in order to quickly try out directions within an interactive prototype:

UX Design: setting the structure through mock-up

Some desktop interfaces:

Desktop UI Design

One example of the UI on iPad:

iPad version of User Interface

Some screenshots of the mobile App:

Luxury Real Estate UI Design for mobile device

Crafting micro interactions on Quartz Composer with Facebook Origami

Crafting micro interactions on Quartz Composer with Facebook Origami

Feel free to contact me to see more about this project

Backend UI design

Kiosk backend management

Context

The work below is part of the Concept of an Interactive Kiosk and its Ecosystem.
I've been leading the UX and UI Design for both the Kiosk itself and the Backend Management Application.

For more informations about the Kiosk itself, you can have a look at this project

Mission

Designing the app that will empower the Shopping Mall Directors to enhance their Kiosks Marketing just from an iPad.


Starting with a quick diagram to keep the goals in mind

Kiosk management diagram

UI Design after validation of the interactive prototype

iPad app UI Design

iPad App UI Design
iPad App UI design

Different skins for different clients

iPad app UI Design
iPad app UI Design

Luxury feeling and emphasizing the affordance of buttons for some clients

UI & UX Affordances
Design under Prezi software

Storytelling under Prezi software

Context

The client was a company conducting big changes in its organization (implying relocation). In order to make everything clear for the employees and explain them the benefits of this restructuring, the executive committee planned an event to introduce everything in details. It would be held in a classy parisian restaurant established in the building of a former railway station.

Mission

My mission was to design an engaging and memorable presentation that would visually support the speeches of the managers.

The weapon: Prezi

Prezi was the perfect option for this job. A good storytelling would be visually and efficiently supported thanks to the way we can make the focus on specific areas of the canvas (zoom) and navigate between them, following a consistent path.

The Concept

I chose to use the metaphor of construction work, which provides a clear image of the process the company was going through. Architecture elements came into the picture as well: we can easily draw a parallel between a company reorganization and the renovation of a building. This parallel would be stressed at the very end of the presentation by a nod to the place where people would be, while attending the event: a former railway station which became an outstanding high-end restaurant.


Researches: gathering elements related to construction work. Trying to mix graphic elements and text and to figure out where the content can be slot into. The final goal is to create a global picture in which we can navigate using zoom-in/out, translations, rotations, etc.

Design researches: trying to convey construction work for a better organization


Carrying the metaphor of construction work on some specific acronyms. Refining and polishing the letters meaning making the company better.

Conducting change's metaphor: refining acronyms' letters


Concept of a structure: resorting to architecture elements. Starting with pencil doodles.

Concept sketches


Bringing together graphic elements and starting to create the ‘big picture’.

Design researches: trying to convey change and refinement's process

Design researches: trying to convey change and refinement's process

As the final presentation contains confidential datas, I cannot showcase it here. To know more about this project, don’t hesitate to contact me.

Interactive kiosk

Interactive Kiosk

Context

A both innovative and ambitious project is being developed: the creation of an interactive kiosk concept as well as its whole management ecosystem.
As a Senior Designer, I am leading the UX & UI Design, working closely with the Product Design Team (shaping the product itself) and the Development Team (in charge of the programming).

Target

Shopping centers across China

Purpose/goal

Satisfying both the customers and the retailers.

Shopper’s benefits:

  • Enhancing the entire shopping experience using latest technologies
  • Offering relevant answers and offers to the customers
  • Instantly triggers a reveal of in-store promotions, sales, discounts and offers relevant to a search keyword, thus instantly exposing shoppers to offers in line with their interests

Shopping Centers and Retailers’ benefits:

  • Monitoring instantly the degree of interest that a specific brand/product/offer is generating
  • Stimulating retail sales by generating customer-relevant, traffic-generating and profitable retail promotions

Characteristics

  • The most advanced 4k multimedia display technology
  • Stream Media Network
  • Multiple Languages
  • User-friendly Screen Height Options
  • Customized Display Units
  • Digitally animated sales promotion displays
  • Real-time Data
  • Instant and Easy Management
  • Customizable skins

Features

  • Wayfinding system
  • Keyword search programme
  • Full directory search programme
  • Amenities and Services search programme
  • Current discount and sale offerings
  • Intelligent Link to Relevant Promotions and Offers
  • Specific retailer/tenant informations and profiles
  • Online to Offline (020) QR Code Convenience

3 types of Kiosk

Different-Types-of-Interactive-Kiosk

The 4K screen is divided into 3 parts:

  • the upper part playing advertising videos
  • the middle part devoted to user interaction (the one I’ll mainly focus on)
  • the lower part displaying promotional coupons, generated randomly first and according to user’s search input eventually

Interactive-Kiosk-Screen-Details

The simplification and stylisation of the floor plans required a painstaking work. I determined the process to get a consistent design from the Autocad files we were given by the different shopping malls. All the floor plans of a mall had to be perfectly aligned following the global structure, so that the lifts would always appear at the same place, especially during the animations (when floor plans appear successively on top of each other to show the route). I’ve set a visual distinction between the units related to the mall and the ones without relevance for the customers (like office units).

Then I determined all the areas customers could walk in, with specific vector shapes, so that the developers would inject it in their wayfinding system and determine the fastest routes for specific searches.

Interactive Kiosk Design Process

Interactive-Kiosk-Floor-Alignment

Quick diagram to keep in mind the most common users’ needs.

Interactive Kiosk Flowchart

I worked closely with technical engineers and came up with these UIs, willing to comply with technical constraints while delivering the best user experience. Providing shoppers with the maximum efficiency was the motto.

Interactive Kiosk UI explained

After several UI proposals and tests on the 4K screen, we realized that some colors were not rendered correctly (chromatic aberration), especially at the edge of overlapping blocs. The solution turned out to be the adoption of this pastel warm brown hues for the global interface: quite a neutral tone that wouldn’t conflict with the colors of malls’ specific categories.

Design details: facilities’ buttons

Kiosk Design details: facilities' buttons

Here are two interactive prototypes I made in order to choreograph some animations and communicate on how elements should appear on screen.

Some extracts of the promotion brochure I’ve designed.

Interactive Kiosk's promotion brochure

Emailing e-commerce

e-commerce emailings

Here are some emailings I designed (graphic design + code)