a little more_

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 :)