Prototypes

This page will showcase prototypes that I have created for various projects… or simply for fun.


Sign-up

Early stages prototype for a NGO mobile app.
I have used logic and conditions to reproduce the expected behaviour under certain input scenarios:

  • CTA or dropdown menu are dimmed out and disabled until a condition is met
  • input fields are showing a warning when an error is detected

Onboarding splash screen + slider

Prototype related to the onboarding of a mobile app that encourages and rewards plant-based diet:

  • Users can either swipe or use navigation buttons at the bottom (in case the pagination affordance wouldn’t work—for ‘less tech-savvy’ users)
  • The bottom pagination dots have a custom animation style
  • When swiping, there’s an overlap/parallax + fade-out effect

Live prototype available here.


Twitter subtle animations & transitions

I made this prototype to see whether I could reproduce the subtle transitions and animations of the Twitter native app. This was made for an iPhone 7. Live prototype available here.

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.