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.
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 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 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.
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.
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?
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?
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
User Flow, Sketches, Wireframes, Animated Prototype
InVision, Skecth, Illustrator, Pen and Paper, ProtoPie, Photoshop
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.
Budge. Final Logo
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.
Budge’s identity is composed of two colors: red and purple forming a gradient which is consistent throughout the branding
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.
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.
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
Add a Date
Search a Date
Final prototypes Budge. Application
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?
Design new experiences and/or improve existing ones in order to give Usbek&Rica readers new opportunities of action on the web platform.
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.
Sketch, Illustrator, Pen and Paper, Photoshop, Google Form
"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.
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
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:
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.
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.
Promoting or highlight some functions
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)
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)
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.
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.
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.
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.
Web, E-Commerce, Mobile, iOS, Android
Sketches, Wireframes, Animated Prototype, User Research, Competitor Analysis, User Flow
Sketch, Adobe Suite, Pen and Paper, Axure, Balsamiq, Principle
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.
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.
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.
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.
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.
Some of the wireframes of our research
5 tabs, 1 Smooth experiences
The idea is that the site is divided into 5 main parts:
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
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.
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.
Mobile app intro concept
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.
How to promote and boost the activities of an association aimed at combatting social inequality through gamification and a mobile application.
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.
Mobile, iOS, Android
Wireframes, Animated Prototype, User Flow
Figma, Omnigraffle, Pen and Paper, Photoshop, After-Effect
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.
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.
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.
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.
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.
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.
Find a way to make the user interact with the external environment by simulating an experience of finding someone / reunion.
Create a "who is it?" application that makes the user interact with the places near the train stations.
Mobile, iOS, Android
Wireframes, User Flow, Prototype
Figma, Pen and Paper, Photoshop, Protopie, Illustrator
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.
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...
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.
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.
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.
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.
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.
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.