Ruolan Xi_Una visial identity_ui & ux deign_poster_exhibition design experimental editorial_sketch,tattoo,photography
a little more_
Catalogue for works
Yes , it is for you.
Lancome Pos tool 01_ui & ux design Ciao Ciao Art Museum 02_visial identity Gill Sans Ă— 1933 03_poster design Marshall Live ! 04_exhibition design A body project 05_ experimental editorial design Other works 06_sketch,illustration,photography
Ruolan Xi Bachelor Degree with Outstanding Results Majored in Visual Communication Design @ Shanghai Normal University
Skills_
Work experience_
Adobe Photoshop / Illustrator / Indesign / Lightroom / Fireworks / Cinima 4D (In learning) / Sketch / Sktech up
Jan - Mar.2015 Julian Communication ( Swedish Web Agency ) Web Design Intern
Language_
Threesixfive ( City guides books ) www.threesixfivecity.com _
Mandarin / Shanghainese Mother tongue
Aug - Nov.2015 Meng Jinghui Theatre Graphic Designer
English IELST 6.0 ( Competent user )
Posters, Publications _
Education_
Dec.2015 - Mar.2016 Interbrand ( Branding Consultancy ) Web Design Intern
Sep.2012 - June.2016 Shanghai Normal University Visual Communication_GPA:3.5/4 Sep.2014 - Jan.2015 Hangyang University ( Kr ) Visual Communication_GPA:3.38/4
Interest_ Music Folktronica / Experimental / Ambient / Minimal Director / TV René Laloux / Alejandro Jodorowsky / Christopher Nolan / David Fincher / Black Mirror Travel on a budget China based Graphic Designer who was born in Shanghai.Working as designer for 2 years.With a background of visual communication in a prestigious university, Rolan has been trained for half year in Korea and involed in vaiours cross-cultural projects. She specializes in brand/ editorial/Ui/web design.Stay curious and passionate with all new stuffs.She is also an amateur photographer and tattooist.
ZTE Corporation ( Multinational telecommunications equipment and systems company ) www.ztedevice.com.cn _ May- Oct.2016 ReflexGroup ( International boutique agency ) Freelancer Visial Designer L’Oréal Travel Retail LANCOME POS Tool ( iPad app ) L’Oréal Travel Retail E-learning ( app ) Hongqiao Hub Indooor installations
02_ ui & ux design
Lancome Pos tool
Background / Research / UX design / Wireframe / Process & Result / Postscript
1_Background Lancome pos tool is a iPad application to assist the beauty adviser in airport duty free shop to comunicate with Chinese customers,help they during shopping, combining with their internal beauty adviser (BA) training program, simplify and digitalize the process of saling by the application through mute tool, as well as with their products catalogue included.The ultimate aim is to pump up sales, especially the best sellers and new products with link and cross sale technique.
a_Research She did a marketing research (see next two pages) both online and offline before meeting the client. By online,she did some research of the target customers, consumer behavior,consumer psychology and the existing applications or stores with digital strategy. By offline,she went to several cosmetics departments in Shanghai with digital service experience personally.She comes up with a flow chart (see next second pages) about the possible action a customer may do when using the application. From the client side,except the internal informations,they provide the guideline with colors, typography and GUI of their website.
It was one of the projects she did during May - October 2016,when she working in Reflex group as a principal visial designer of this project. Client: L’Oreal Travel Retail
b_UX design Base on the research,she carried out with the first version wireframe (see the next third page, with shade parts).In addition to the app on iPad, during the final step is going to combine with an app on the BA’s phone,the final bill will be sent directly to consignees who taking goods from warehouse,which will save the waiting time of customers.She also suggested to add a skin test in the mute tool except the common questions and answers,for rapid screening the products.A caculator with link and cross sale products in the final steps.As well as the mode which allows customer to login by themselves when BA was busy or not avilable.Even phone app, customers can download and place their orders before they arrived at the shop if they know what they want to buy. But the client declined all these ideas for some reason,what they want is a simple app mainly with homepage,mute tool,catalogue,best sellers page,detail page with calculator.So it ends up with the seconed version (without shade part).
0 . VEDIO ADS OR ANIMATION
1 . LOGIN PAGE Two systems (BA and Client)
* MUTE TOOL AM
42%
AM
iPad
BA CLIENT ID
ID
BA CLIENT
LANCOME
Globle shopper
SKINTEXT
MAKEUP
FRAGRANCE
Globle shopper
2 . HOME PAGE AM
iPad
ENGLISH
LOGIN
LOGIN
NO
Globle shopper
* CLASSIFY - SKINCARE
SKINCARE
MANDARIN
ENGLISH
LANCOME
LOGIN
YES
42%
EXCHANGE RATE
MANDARIN
ENGLISH
Welcome to our counter Do you prefer to be served in Mandarin?
Logo
AM
iPad
BA CLIENT
EXCHANGE RATE
MANDARIN
* SKINTEXT
42%
42%
6 . SHOPPING LIST ( BA’s phone )
* SHOPPING LIST AM
iPad
42%
AM
iPad
42%
iPhone
42%
LAMCOME NIGHT CREAM
1
Gift with percase
Top 10 products
Brand Introduction
Latest products
Gift with percase
Latest products
Brand Introduction
Gift after percase
Brand Introduction
LAMCOME DAILY CREAM
1
AM
iPad
42%
42%
Logo
$300 SHOPPING LIST REMOVE
TEXTURE Latest products
* MULTIPLE TOOL-CLOSE AM
iPad
Logo
SKIN TYPE
Top 10 products
AM
Logo
GIFT
$300 REMOVE
Subtotal
$600 10% OFF $540
LAMCOME NIGHT CREAM
1
LAMCOME DAILY CREAM
1
Subtotal
2
Top 10 products
Latest products
Gift with percase
Brand Introduction
Top 10 products
Latest products
Gift with percase
Brand Introduction
42%
¥3472.20
SKINCARE ROUTINE | Multiple choice YOU MAY ALSO LIKE
Wait a minute. I will bring the products.
SKINCARE FUNCTION | Multiple choice
Skincare
Makeup
Fragrance
SKIP
Skincare
Gifts
Makeup
Fragrance
Makeup
Gifts
Fragrance
Gifts
Skincare
Makeup
Thank you. Looking forward your next visit.
Fragrance
Skincare
Gifts
Makeup
Fragrance
Gifts
RECOMMANDATION
5-5 SEND TO BA
* CLASSIFY - MAKEUP
3 . TOP 10 / LATEST PRODUCTS
MAKEUP
FRAGRANCE
3 . GWP
AM
iPad
SKINCARE
42%
3 . BRAND INTRODUCTION AM
iPad
TOP 10
GIFT
42%
AM
iPad
ABOUT LANCOME
GWP
42%
AM
iPad
SKINCARE
MAKRUP
FRAGRANCE
GIFT
MAKE UP ROUTINE | Multiple choice
MAKE UP FUNCTION | Multiple choice
SKIP
RECOMMANDATION
2-3
* CLASSIFY - FAGRANCE
4 . RECOMMANDATION ( 1 LINE )
SKINCARE
MAKEUP
FRAGRANCE
4 . RECOMMANDATION ( 2 LINES )
AM
iPad
42%
RECOMMAND
GIFT
AM
iPad
42%
RECOMMAND
FRAGRANCE TYPE
p To r le Sel
NOTE
$300
SECENT GROUP | Multiple choice
¥1800 Renergie Eye Cream MORE DETAILS
SKIP
RECOMMANDATION
2-3
* CLASSIFY - GIFT
5 . DETAILS - LINK SALE AM
iPad
SKINCARE
MAKEUP
FRAGRANCE
1-2
5 . DETAILS GIFT
42%
DETAILS
AM
iPad
42%
DETAILS
GENDER
$300 ¥1,800
AGE
$400 ¥2400
$350 ¥2100 10% OFF
RELATIONSHIP ADD 1 MORE CALCULATOR
CATEGORY
SKIP
CALCULATOR
ADD TO LIST
ADD TO LIST
RECOMMANDATION
2-3
2-3
6 . CALCULATOR ( BA ONLY ) AM
iPad
42%
FINAL PRICE
378.80 RATE
6.23
-50%
PRICE
60.00
-30%
7
8
9
4
5
6
+
-25%
-10%
× 1
2
3
.
0
/
÷ =
GIFT
42%
3 . PRODUCTS PAGE (SKINCARE / MAKEUP / FRAGRANCE / GIFT)
The first & second version wireframe
iPad
2_Process & Result Base on the learning and understanding of their brand culture, she intends to design app which is full of feminine and romantic breath.
1_Best seller page 2_Homepage 3_Detail page 4_Catalogue page From top left to bottom right
She comes up with two versions in the end.The one of the above was inspired by the negative space of gift packing,small gaps on the coners as a main visial element throughout the entire design, without too many decoration,showing a delicate and elegant appeal. In contrast,the one below is more lively and cheerful,inspired by the Paris street and the travel theme of this app.Using plane tickets as the menu of mute tool match up with the duty free shop in airport. In order to make the app more practical, her aim is to maximize the text information visualization, because there will be people from other countries shopping in the dutyfree shops as well, although at present the target customer group is Chinese.So for detail pages,with lots of text introduction, she did a icon system (see the next page) outlines all keywords of the product.
1_The movement from homepage to best sellers page 2_Mute tool 3_Homepage 4_Mute tool menu From top left to bottom right
3_Postscript Another project from L’Oreal is E-learning which is a phone application for training the BA to encorage them learning products features,sales skills during spare time.So it should be a interesting and joyful app,more like a game,which is able to attract them learning actively,or even with competition between other BAs. Since L ‘oreal is a big company with several brand branchs and BAs are manoeuvrable,so if a BA want to work for another brand,he or she is free to go learning the corresponding tutorial. It’s like a space travel, from one planet to another,so she comes up with several concept pages for this idea.
01 _ visial identity
Ciao Ciao Art Museum
Background / Explore Result / Practices
1_Background �� (Cao cao) is the first contemporary art platform in China started from 1979, which is the seed and start of Chinese contemporary art exhibitions.But cause of the pressure and critique from different aspects and organizers,Cao cao,as a flash in the pan,disappeared in the 80s. As a contemporary art lover,Una did the visual system for Cao cao,saluting to predecessors.This is a course project without client so there are not too many restrictions. Ciao Ciao,with similar pronunciation to Cao cao,means hello and goodbye,in a relaxed and anthropomorphic tone to reduce the sense of distance perception between visitors and art works.The whole experience is a both-way features. _ She wants to build a not-profit art musuem for young artists to show their works.As well as a platform to improve the knowledge of art of citizens.Except exhibitions,the museum will organize lectures or events terminally as a terrace to promote the interchange of ideas and thoughts. There are 4 themes of the museum: new media,fine art,sound and photography.
About logo Graphic in Identity design is made up of bold and mild lines to show a youthful, inclusive and open sense like a contemporary art playground and reactor.Four Ciao represents four themes of the museum.
2 _ Explore She tend to build a strong identifiability system but with less emotional influnce cause the main part of the museum is the art works.So she choose black and white,the neutral colours as the main color,grey as complementary color.
Typeface_ Helvetica CE ( Bold / Regular / Thin ) LantinHei ( Bold / Medium / Light )
Style_ Minimalism Inspiration alrtist_ Ellsworth Kelly
Main Color_ Black,white Complementary color_ Grey
Basic communication elements & style Visual Elements Brand impression_ Modern , friendly , pure , simple
Helvetica - Bold Helvetica - Regular Helvetica - Thin
1
1_Tickets She did a fictitious exhibition for artiest Januz Mirlles to show the visual system in reality usage. 2_ Stationeries in souvenir
2
The posters for the exhibition of artiest Januz Mirlles.
1
Identity in Evironment To put the new logo graphic real office space, can very good fuses in together.
2
03_ poster design
Gill Sans Ă— 1933
Background / Inspiration / Analysis / Result
1_Background This is a result of a workshop which themed to explore Western typographic form, using the Latin alphabet. She was asked to choose an existing western font and design a “ type specimen sheet ”: a poster meant to encourage commercial sales of the font primarily through a compelling presentation . To establish a textual narrative for which the selected font could be used, she were instructed to choose a place with which she were intimately familiar or had a close affinity.
a_Inspiration She was captivated by the 1933 Old Millfun which is a fantastic creative industry park.Set in historic Hongkou District, Shanghai.1933 was built amidst the vibrant urban landscape of turn-of-the century Shanghai. It was a former cattle slaughterhouse and derelict factory that dates back to the 1930s bulit by a British architect. The buildings are arranged into a square with an inner circle. Four buildings in each direction constitute the square factory area and are linked to the central 24-side main building through stairways. Buildings at different heights and spiral galleries are designed with the complexity of a maze but in clearly demarcated orders.
b_Analysis Extract the crisscrossed in the building, the memorable experience of always getting lost,the deliquescent round columns decorated as well as the unique arrangement of square with an inner circle. With the building’s English history, Gill seems a suited choice. As a matter of fact, Eric Gill designed the font inspired by cutting letters with a chisel and “Gill” works particularly well when used with and on architectural features.
2_Result Capitalizing on both the structure of the building and the history of the font,the poster released. Although the different reading directions do require some extra effort on part of the audience cause she tend to present the anfractuosity structure of the architecture, at times almost poetic reading, makes for a memorable experience. The subtle differentiation between seeing the capital letters VS lowercase showing the different typeface of gill sans. The consistency between front and back is rewarding as well. And even though the visual rhythm on the front is more engaging, the highly structured presentation of full alphabets on back, is convincing in its own right.
Size_
29.7 Ă— 42.0 cm
Materical_ Tracing paper Recycled paper 150g
2_Result The reverse side of the poster,with a special folding method,it will turn it to a brochure of showing the different typeface.
1
3
2
The reverse side of the poster is a brochureh of showing the fonts different typrfaces.
1_One od the main pages 2,3_Front and back cover
04_ exhibition design
Marshall Live !
Background / Inspiration / Element extract / Process / Result
1_Background Marshall is one of her favourate brands in headphones and speakers,but back in 2015 when she did this project,Mashall is not so popularized in mainland except the professional musicians and rock music addicts.So to promote the brand,she decided to build a pop-up shop in a popular shopping mall.It is a course project,luckily there are not many limits.
a_Inspiration Since Marshall accompany the global tour of numerous rock band,they move from one place to another frequently,so second-hand containers as a metaphor of this process, symbolic the procedure of move and migration. On one hand,second-hand materials with historal feelings is arouse people’s emotions facility.On the other hand,it is also easy to handle and environmental protection. b_Element extract Handmade leather surface, gold-plated grid grain guitar wire connectors,and lined with special materials plaid are the iconic features of the brand. In order to consolidate the brand image, these elements are necessary to add into the shop as well.
The event Slogan_ LIVE! ( Global Tour ) Marshall brand promotion Date_ June-July 3, 2015 Location_ ipam Trade Center,Shanghai Background_ brand consolidation Purpose of participation_ Promote the brand Grasp the market demand
c_Process After been to an auto show, with a better understanding of space concept,she did the CAD drawing (see the next page).
Front view
Left side view Right side view
Top view (F1)
Top view (F2)
3D Rendering Space Size _ 150 Ă— 200 cm
4_ Result All the three pictures are the 3D redering of final exhibition space design.Including,the front view and two oblique views.
05 _ experimental editorial design
A body project
Inspiration / Background / Research / Project structure / Process / Results / Postscript
1_Inspiration “A body project” is an experiment project focusing on the uniqueness and the individual’s perception of the body. Moreover,it explores the relationship between the strangers,purpose to arouse people’s reflection in treating the relationships with strangers.
a_Background It begins with one of Una’s habits,observing people,inspired by the movie Following(1988) 1 appreciably. Human’s body are telling their stories.Is it attractive? Repulsive? What makes it special? Birthmarks? Scars? What happens to us when we reveal it to be a complete stranger? Which memories and experience are melded to particular body parts? But there is a challenge of communicating with strangers,cause crisis of confidence is a obstruction among people in the modern social interpersonal. 1_About a young writer who follows strangers for material meets a thief who takes him under his wing,directed and wrote by Christopher Nolan
b_Research To figure out the attitude of people treating with the relationships with strangers and the possibility of doing project in strangers,she did a research online.
2_Project structure It begins as an event on social wesites as on the right side, like a both sides trust agreement between Una and strangers, the filming place is at her home, which reflect the trust she provided. The only limit is without their protection which metaphor clothes as a reaction of showing their trust to her.
The actural event she posted online.
About_ The content is taking pictures of a part of your body with a Polaroid, to film any part of your body you just feel like to been filmed,as far as it can be nude. Please fell free to share your stories with me the reasons and your recent physical and mental status,your situation of social identity, the spirit of the world, anything. Tool_ Porlariod SX-70, black and white film, sound recorder Location_ Una’s home
3_Process
The zine is combined with pictures, sounds and titbits.It is similar to an audiobook, readers can through the QR code to hear the conversation between Una and the strangers.
After the first role of testing,with 16 strangers,she decided to make a zine to record the whole project.
1_Binging 2_Screen print the cover 3_Result
1
2
3
4_Result It conbines with 3 main parts as below for all 16 cases.Some of them may with titbits.
Conclution 01_Pregnet for 10 years 02_Avoid 03_Escape 04_Behavioral Tanner 05_Opposite expression 06_Mistory Old Wang 07_ First love 08_Powerful 09_Abnormal 10_Excellent self-abased 11_Flowing Liquid 12_Don’t be shy. 13_Run run run 14_Watch out! 15_Freedom 16_Pride
1
2
All the voice: https://clyp.it/user/ otguymve
1_Brief information from the stranger 2_The conclusion and picture,some are differnt in pattern of manifestation depends on theme. 3_The QR code with selected dialogue of the explaination of picture. The page of QR code been divided into 16 parts invisibly.
3
1_ Title page 2_ Catalog 3_ Introduction 4_Details of the introduction 5_Instagram is a one of the online plantform,this is a key words page. 6_Last page 7_Back cover
1
2
3
5
4
7
6
Whole book_ https://issuu.com/unax127/docs/ abp_black__elc_
Titbits during process
4_Postscript Strangers Passing By is a 16 minutes mini documentary about the process of a body project.Filmed by Stefanie Klemm.About Una and 3 random strangers who attended A body project.End up with a photography exhibition.
Documentary_ https://vimeo.com/206181540 Password_ :)
Screenshots of the documentary
The project is continuing...
06_ sketch,tattoo,photography
Other works
The man / Girl power / Pixiel Point, line and plane
The man At some point the abstract body position is very attractive.Unlike lots of common states,it presents a sence of strength, power and movement.
Size_ 420 Ă— 594 mm Tool_ Pencil
Girl power It’s a tattoo project she is doing now for surporting feminism,which is to encourage women to follow their own choice and indicate their attitude.
Pixiel As an experiment,she made a birthday card and some profile pictures for friends.
1
2
Point, line and plane Graphic design elements in life.
3
1,2_Changmai 3_Bangkok 4_Kyoto station
4
Thank you for your time :)