Hey,
I'm a digital designer
specialized in UI-UX based in Paris.
I design
Businesses
Experiences
Websites
Services
Processes
Applications
Businesses
SAY HELLO

设计师 デザイナー 디자이너 DESIGNER 设计师 デザイナー 디자이너 DESIGNER 클레멘 クレメント 克莱蒙 CLEMENT 클레멘 クレメント 克莱蒙 CLEMENT
设计师 デザイナー 디자이너 DESIGNER 设计师 デザイナー 디자이너 DESIGNER
클레멘 クレメント 克莱蒙 CLEMENT 클레멘 クレメント 克莱蒙 CLEMENT

Hey

About Me

I'm Clement , a 22 years old student in Digital Design at E-Artsup Lyon. I design Motion, Communication, Print, 3D Scene, Website, and my specialization is UI/UX. I am passionate about designing experiences, services, ergonomy and human-machine interaction.

I'm currently working for PPANAM, a Korean-French Startup linking France & Korean culture, I also studied a semester abroad at the Nottingham Trent University, UK. I am a great fan of Asian culture, watches, Space related stuffs, as well as new technology and design.

Skll

Skills

UI/UX.

A looking-good product but with a mediocre experience that’s not centred around the user is a poorly designed product. UX is my specialty and requires different skills such as communication, the will to understand the user but also the passion to solve problems. in addition I also have a good knowledge of different software for Wireframing, user testing, prototyping, as well as userflow studies.

Graphic.

Graphic design has a great impact in finding inventive solutions to problems. In digital, it requires the knowledge of several tools, the essential tools being the Adobe suite, I also am very familiar with affinity suite.

Motion.

Motion Design is about how to communicate through animation in an effective way. The use of motion design in the user experience is also really important to me because it allows users to understand certain functions intuitively.

Web.

When it comes to formatting a User Experience idea or the final version of an HTML5 & UI project or website, web design knowledge can come in handy and it’s interesting to know some techniques.

3D.

3D has several advantages, including the representation of elements and realistic environments, which, thanks to the ever-increasing performance of hardware, is increasingly used in applications, experiences and websites.

Overview

INTRO

Many dating applications exist and many are developing every day but how can we offer an innovative experience that differs from what the competition offers?

CHALLENGES

Dating applications do not offer real experiences to bring their users to a meeting in the real world, in fact, who has never heard from some people that they are not comfortable in dating applications but much more in reality?

SOLUTIONS

offer a complete experience allowing the user to find a person with the same taste, preferences, hobbies online and bring them to meet in a place that is convenient for both of them.

we obtain the advantage of both worlds: the multitude of online users and the real encounter with reality

DATES

2017

PLATFORM

iOS/Android

DELIVERABLES

User Flow, Sketches, Wireframes, Animated Prototype

TOOLS

InVision, Skecth, Illustrator, Pen and Paper, ProtoPie, Photoshop

Concept

A new concept to dating apps

Budge is a project which proposes the idea of what a dating app can look like, oriented towards meeting up spontaneously in real life rather than just by messaging for weeks on end.

The project was an original idea developed by me and was based on a trend I have noticed that was common among dating apps. The biggest problem with setting up a first date on regular dating apps is that both users usually drag out the meet up date and most likely end up ditching the date.

But with Budge, it allows users to select a meet up date and place which reinforces the chances of actually meeting in real life. My work first started with creating the branding and its graphic style. After that, I designed some prototypes of the application.

Image

Budge. Final Logo

Branding

Searching for love? Just Budge.

Before finding a logo, I wanted to find a simple name. Something easy to remember, and super catchy!

That’s how i choose Budge. But why Budge? Simply because the word budge derives from the French word “bouger” (to move) and also means to make a decision. Giving a strong sense of meaning behind the name and therefore promotes the urge for people to meet in real life.





A friendly and glamorous brand identity

To create the logo, I used two main axes: User-Friendly and Glamorous. To create the logo, I used two main axes: User-friendly and Glamorous. It can be graphically interpreted in two ways: the long version in which the name of the brand is in a stylised way or the short version which consists of just the letter B. depicted as a burning heart which is also an integral part of the long version.

The font used is Horatio Bold from Linotype with the letter E slightly modified to be more readable.

Image

Budge. Concept

Colors

Budge’s identity is composed of two colors: red and purple forming a gradient which is consistent throughout the branding

Image

Branding Colors

Fonts

For fonts that are used in the application, I chose two Google fonts: Montserrat for the heading and title part of the application, and Varela Rounded to bring an appealing and user friendly experience to the app.

Image
Image

Prototypes

Two main funtions

Budge is first and foremost a unique experience, Budge's application structure is composed of two main functions, the first one allows users to broadcast a potential date for a meeting in the application, the second one allows for searching date broadcasts on Budge.

To quickly summarise the experience two users, a user we’ll call USER1 organises a date to meet on Budge, this announcement appears on an internal listing of the application.

USER2 is looking for a rendezvous that can correspond to his interests which is also equivalent to that of USER1, he proposes a meet up.

USER 1 sees the proposal and accepts it, the meeting is then scheduled and the users can chat for a time period of 24 hours before the meeting.

Image

Userflow on paper

The structure of the application is composed of three pages

-The main page where the map is located where you can view the listed potential dates, add a date or search for a date.

-The match page on the right where you can access your pending / accepted dates and the chat rooms

-The profile page where you can access and modify your personal account and the settings of the application

Image
Image
Image
Image

Result

Menu Interactions
Add a Date
Search a Date
Image

Final prototypes Budge. Application

  • Image
    Usbek&Rica
  • Image
    PPANAM
  • Image
    NBA Care Fantasy
  • Image
    "Qui est-ce ?" by SNCF
  • Image
    Story of Japan

Overview

INTRO

Usbek&Rica , a French quarterly newspaper that questions the near and distant future has a functional website today, but how could it innovate this website without totally changing its initial functioning?

CHALLENGES

Design new experiences and/or improve existing ones in order to give Usbek&Rica readers new opportunities of action on the web platform.

SOLUTIONS

interview online news readers and rely on the strong points of the competition close to Usbek&Rica in order to be able to focus the research of experience and improvement on a useful basis.

DATES

2018

PLATFORM

Website

DELIVERABLES

Personas, Sketches, Lo-Fi Wireframes, Hi-Fi Wireframes

TOOLS

Sketch, Illustrator, Pen and Paper, Photoshop, Google Form

Analyse

"The magazine that explores the future"

Usbek & Rica is a French quarterly journalism magazine that questions the future. "The near future, the distant future, even the very, very long term".

Usbek & Rica questions the most rapid upheavals in our history. Is technological progress always synonymous with human progress? How can we think about the future in the age of "presentism"? What will the world look like in 2050? These are all questions, and many more, that Usbek & Rica is trying to answer.

Image

Usbek&Rica Logo

A magazine that goes into the essentials

Usbek&Rica's website offers different functions, among which the most important ones are:

-Reading articles from Usbek&Rica and the community.
-Communal interactions such as writing articles, “liking" them or sharing them.
-A point system that gratifies the user whenever they post, comment or publish.
-A shop where the user can buy services or experiences with his points.
-The possibility to subscribe to the magazine and have a preview of it

Research

Two users personas

Due to lack of time and resources, I recovered the vast majority of my app feedback through a survey published to the Usbek and Rica readers. As well as looking through the different opinions found from different sources on the web (google review, competitor analysis, Facebook comments on the official Usbek&Rica page)

Several ideas often come up:

-Usbek and Rica contains a very diverse group of people, generally of curious nature and passionate about the future
-The commentary system is too rudimentary
-The site gives the impression of an empty shell (very few comments, interactions are almost non-existent)
-The point system is still in its early stages of development

After researching, I identified two target user personas:

Image
Image

User personas based on research

Idea & Wireframes

Two experiences to improve

with the people I was able to focus on two experiences to improve: -The social and interaction part of the usbek & rica site including in part a redesign of the basic structure of the site, a side bar allowing to see the different discussions of each article thanks to a "pin" system.

We could then drag the discussions that interest us onto the side bar to be able to see their constant update and not miss a debate. Moreover, this bar would allow a system of notifications informing new comments or debates likely to interest the user.

Image

The notification & activity side bar

-Create a notification system as well as use cards allowing the recall of certain operations and functions such as shop operations related to certain items, cards promoting items based on the activity and user searches.

Image

Promoting or highlight some functions

Result

A complete redesign of the site while keeping its original functions

After the several rounds research of structure on the lo-fi wireframes I created the hi-fi mockups of the app.

First of all, now the website is composed of two sidebar:

-The left bar allows intuitive navigation between the different parts of the site, a summary of the account statistics can be viewed from this bar and a more detailed analysis can be accessed by clicking on it.

The Right bar contains 3 menus: Notifications (All new content (community/articles), Messaging that allows you to view current discussions on different content and finally Shop that allows you to view and quickly access experiences/articles added to the shopping cart.

The ease of access to the "social" tools is now enhanced by the addition of buttons highlighted on each content element of the site. (Like buttons, Save the article, Share)

Image
A design that adapts to the users

Both bars are retractable when the user wishes to allow a better readability of the site whose main content is blocked on a width of 850px.

Now the orange colors of the Usbek&Rica graphic identity are used for the CTA functions and to highlight different content (Top comment, article that makes the most debate, notifications most likely to interest you, etc.)

there is also a focus on related content (the experiences of the blind in relation to the article you are reading, similar articles)

Image
Creation of questions topic

Finally, the addition of a new feature that allows the creation of question topics related to a particular article as well as their highlighting on the main navigation page of the Usbek&Rica site or at the end of an article or similar questions.

Image
Image
Image
Image
  • Image
    Budge.
  • Image
    PPANAM
  • Image
    NBA Care Fantasy
  • Image
    "Qui est-ce ?" by SNCF
  • Image
    Story of Japan

Overview

INTRO

PPANAM, a Korean startup created in 2017 whose core business idea was the diffusion of culture and sharing between France and Korea wants to develop and create a centralized platform "Social-E-Commerce" where users can exchange their experiences and news. But they can also buy and promote products there.

CHALLENGES

How to create an attractive and multi-service platform that offers a unique experience to its users allowing them to have easy access to several types of information/products/experiences on the subject of Korea and France and to be able to carry out all their relative purchases on the same platform.

SOLUTIONS

Design an ergonomic platform bringing together different services (News, community, shop, travel), create a system linking the e-commerce functions of the platform to the social function in order to create a complete ecosystem and think about a system of remuneration of users. Propose a system allowing a global vision of all the information on a single tab and this in an algorithmic way, adapted to all the needs and preferences of the users.

DATES

2018

PLATFORM

Web, E-Commerce, Mobile, iOS, Android

DELIVERABLES

Sketches, Wireframes, Animated Prototype, User Research, Competitor Analysis, User Flow

TOOLS

Sketch, Adobe Suite, Pen and Paper, Axure, Balsamiq, Principle

About

Link France & Korea

PPANAM is a Korean Startup created in 2017 in Cheonan, Korea whose goal was to share culture between France and Korea in different aspects (Historical, Fashion, Food, Art, etc...) on different social media platforms such as Facebook, Youtube, etc.

Image

PPANAM Logo

A desire for development, a rebranding

In 2018, PPANAM decided to develop their own platform of sharing and create a "Social-Shop" where users will be able to promote products but also to create reviews of products, experiences & travel that are sold on the website. This is a concept that works well in Asia and is similar to what Taobao does with the Tencent that adds a lot of social features to its shop.

But also, PPANAM wanted to construct an entire rebranding.

Re-Branding

Image

Old Logo / New Logo

A desire for development, a rebranding

After extensive research, we came to the final design logo, the colors were slightly modified and adapted to the main support of the PPANAM platform: the web.

The shape of the logo still represents the particular shapes of traditional Korean Buildings. The main font of PPANAM became Rubik, a choice that is explained by the fact that this rounded typography adds a friendly side to PPANAM, exactly what the startup was looking for, being close to its users. This typography will also be used for the titles and subtitles of the final PPANAM platform.

Image
Image

PPANAM Font

Image
A Motion Animated Logo

In addition to the stationary logo, it was necessary to produce a dynamic logo for PPANAM's video media.

Website & App

Social-E-commerce, a formula that works in Asia

Developing the UX and the experience of the PPANAM platform was a very rewarding experience for me because it allowed me to study experiences rarely used in western countries.

PPANAM here is trying to introduce the total integration of a social network system in an E-Commerce platform to the French public. This is a really large scale and ongoing project and I'm still currently working with them to this day.

Image

Taobao Website, many social functions

Lots of user questions, lots of wireframing

Most of the research done was mainly on how to adapt a concept that well known to the Asian market for a Western market, so we interviewed PPANAM users on instagram, Facebook and Youtube with several questions related to our concept.

Then we produced several userflow and wireframes before finding what we thought was the most accurate. Most of the work had been made on Paper, Balsamiq or Axure for some examples that required interaction.

Image
Image

Some of the wireframes of our research

5 tabs, 1 Smooth experiences

The idea is that the site is divided into 5 main parts:

-Home
-News
-Community
-Shop
-Traveling

In these parts, all the content is generated on a system of cards or tiles. in the 'Home' area, the cards of each category would be mixed algorithmically, while by clicking on one of the dynamic tabs, it would have access to a part only. The goal is to get a smooth and seamless experience.

Demo of the prototype menu on Axure
Mobiles Prototypes

The cards can also contain sub-cards containing content related to the parent content, for example, a photograph of an Internet user showing a dress sold on the PPANAM site may be under-referenced in the card with the agreement of this users.

Finally, the platform having been designed to be totally responsive, there was only one thing left to do: readapt it into the mobile format.

Image

Mobile Wireframes

Result

And finaly the Hi-Fi Wireframes

After several wireframing and some tests with our internal team, we moved forward with the Hi-Fi wireframes with what we had in our minds.

Image

Home preview

Image

Desktop preview

Image

Mobile prototype

Image

Mobile app intro concept

  • Image
    Budge.
  • Image
    Usbek&Rica
  • Image
    NBA Care Fantasy
  • Image
    "Qui est-ce ?" by SNCF
  • Image
    Story of Japan

Overview

INTRO

With the development of mobile platforms, the possibilities are always endless. To such an extent that in each company, associations would like to have their own platforms in order to promote their services, this is the case of this fictitious application for the NBA Cares.

CHALLENGES

How to promote and boost the activities of an association aimed at combatting social inequality through gamification and a mobile application.

SOLUTIONS

Propose an application that makes NBA fans want to download it and encourage these users to participate in the NBA care activity either by voting or even by taking real action.

DATES

2018

PLATFORM

Mobile, iOS, Android

DELIVERABLES

Wireframes, Animated Prototype, User Flow

TOOLS

Figma, Omnigraffle, Pen and Paper, Photoshop, After-Effect

Intro

Promoting NBA via an application

As part of a school project, we had to develop a gamification system in pairs.

Allowing the promotion of an association of our choice. With my colleague, Terry Soleilhac, we chose the NBA cares which is a league that specifically addresses social inequality in the USA and around the world.

For that we have imagined a Fantasy league system centered around the NBA.

Image

Application

Vote for who will be the best players

The concept would be to allow the user of the NBA cares Fantasy application to be able to put together a fictional team of the best players within the NBA Cares according to them.

Image
Image
Participate in missions too

The application is also equipped with grouping missions.

These missions come with a wide choice of possibilities. They will be proposed by local associations in partnership with NBA cares.

Users will then also be able to participate missions near them.

Image
Image
Image
Image
A point system for rewards

In addition, there is a point system. When a user completes an action or gives a donation in the application, this user will win a proportional number of points equal to what the mission was worth.

Image
Image
Image
Image
Multiplication and reward purchase

The user will be able to use the points in the awards part of the application that offers tickets to matches, goodies or meet ups with the NBA players.

He may also choose to accumulate the points and see them multiply in case of getting a Good set of fantasy league players.

For example if in the season play, there is a result of the 3 players selected by a user are in the top 5 of the players who have done the best social work in the NBA care.

So they will see their points multiplied by 5 and will allow them to buy larger and attractive award items.

Result

Prototype demo
Promotion Video
Image
  • Image
    Budge.
  • Image
    Usbek&Rica
  • Image
    PPANAM
  • Image
    "Qui est-ce ?" by SNCF
  • Image
    Story of Japan

Overview

INTRO

For a fictional school group work: the french railway company, SNCF, wants to promote its services on Valentine's Day with an outdoor experience on the theme of meetings and reunions.

CHALLENGES

Find a way to make the user interact with the external environment by simulating an experience of finding someone / reunion.

SOLUTIONS

Create a "who is it?" application that makes the user interact with the places near the train stations.

DATES

2018

PLATFORM

Mobile, iOS, Android

DELIVERABLES

Wireframes, User Flow, Prototype

TOOLS

Figma, Pen and Paper, Photoshop, Protopie, Illustrator

Intro

Branding & concept

"Who is it?" by SNCF is a group project where we had to create an outdoor experience on Valentine's Day on the theme of reunions and to put people out there to find each other.

First of all, we chose to take inspiration from the Branding of Oui-SNCF (the Web platform: in charge of listing and selling SNCF to get tickets), the reward for participating in the game being ticket discounts or free travel tickets.

Image

Wireframe

A life-size "who it is"

The experiment will therefore be carried out using a PWA application (progressive web app), there is no need to download an application for a single use.

The concept of the experience on this Valentine's Day would be to develop a life-size "who it is".

The user would be invited to participate in the experience by promotional posters in front of the stations via a QR code Linked by a link...

Image
Create your profile

- The player must go to a game promotion panel and scan the QR code that will open an online application without the need to download it. They will have to fill out a small form and indicate their physical description in order to create their "Who is this?" profile.

They will also have to take a profile picture for the final step of the game. The player must identify himself, indicate their gender, hair color, etc.... And once the profile is confirmed, the game can start.

Image
Image
Image
Image
Find the unknown

- The user will participate in a game of "Who is it?". Its objective will be to guess a player's profile randomly selected by the application by finding it within a mosaic of several faces. However, he will have to travel to specific places to ask questions and obtain clues on the profile to guess.

Image
Image
Image
Image
Receive your reward

- There will be 5 steps with 5 questions. Once the 5th step has been completed and after taking into account the information and questions of the "Who is it?", the player will have to click on the picture of the person who he thinks the profile fits.

- If he finds the right profile, he will be rewarded by getting a hidden message written by the profile in form of a question at the time of registration. Otherwise, he may restart to a new game.

Image
Image
Image
Image

Result

Some final prototype

Finally we have made some final prototypes of the application, adding new functions such as facial recognition to recognize the user's physical features automatically.

Image
Image
Image
Image
  • Image
    Budge.
  • Image
    Usbek&Rica
  • Image
    PPANAM
  • Image
    NBA Care Fantasy
  • Image
    "Qui est-ce ?" by SNCF

Overview

INTRO

For a school motion project, we had to create a fictional credits for a film or a TV show on a subject of our choice, there was no real creative limit except that we had to make this animation in a single camera shot and with inking effects like the credits of the marco-polo TV series.

SOLUTIONS

Being passionate about Asian culture, I chose to create a credits for a show that would be about Japan and broadcast by the BBC. I decided to use an old paper effect as well as inking colours from the Asian art inking style in order to best represent the "old-japan" in the generic.

DATES

2018

PLATFORM

Video

DELIVERABLES

Motion-Design

TOOLS

After-Effect, Photoshop, Illustrator

Promotion Video

  • Image
    Budge.
  • Image
    Usbek&Rica
  • Image
    PPANAM
  • Image
    NBA Care Fantasy
  • Image
    Story of Japan

AT

Contact

Linkedin

Behance

Dribbble

Vimeo