Download - Portfolio of nicole
CONTENT
USER INTERFACE DESIGN
ACCESSORY DESIGN
EX APPLICATIONNO.1JINGFREE WEBSITE & VISUAL IDENTITYNO.2
TOP IDOLS EYEWEAR & VISUAL IDENTITYNO.3JEWELRY RENEWED DESIGNNO.4
OTHER PROJECTSFIXPERTS USER RESEARCH PROJECTNO.5ZOO CITY VISUAL IDENTITYNO.6
E
An application caring for your clear vision
PROJECT 1
POSITION : User Interface DesignerRESPONSIBILITY : I participated in designing the wireframe mode, the interaction process and high-fidelity page design. TIME : 10/MAR/2015-28/MAY/2015
技术分析
立即预约 765人
Sketch 9:41 AM 100%Sketch 9:41 AM 100%
Sketch 9:41 AM 100%
女
左62
0.
There are two main function pages. One is a preview of the users profiles, the other one serves for reserving full-service optometry .
users can slide left or right to choose the date.
Main Pages
2014-07-12 2015-01-18 2015-10-22
保存
姓名
女
Sketch 9:41 AM 100%
10:00 11:00 12:00
13:00 14:00 15:00
16:00 17:00 18:00
Sketch 9:41 AM 100%
Image of the store offering service of optometry
Every optometrist has their own page to introduce their strengths and work experiences. We also gather user comments to help optometrist make improvement.
女
左62
0.
12
Sketch 9:41 AM 100%
If the users have the records of optometry in our shops, it will show the latest time. And it is Valid for 12 months. Our suggested time for next optometry is one year later. If the users never do optometry in our shops, this item will not exist.
Fixed in the bottom
ADD
EX is a mobile app which helps users keep track of their vision status as well as habits with the eyes, motivates them to keep their eyes healthy. In addition to that, the data of their family and friends can be connected which helps them buy glasses for their relatives.
E
Vision Memory Record01
02 Optometry Appointment
Sketch 9:41 AM 100%
Vision Memory Record
Member CentreEX EAn account can connect to several users. Users under an account can be shifted by sliding around.
We optimized the informa-tion on optometry sheets, so as to make it simple and easy for users to understand the informa-tion on basis of retaining professionalism of such medical optometry sheets.
Characteristics of glasses are described in form of tags.
Timeline information records interactions between users and our application, including wonderful photos taken during off-line user activities.
Vision memory record serves as an account in which optometry and vision habits of users and their friends are stored. Such an account also contains users’ consumption on on-line platforms or in actual shops. With lots of infor-mation, this account suffers complicated operation interface. I categorized different contents by classifying various operations into different levels in order to simplify the information and smooth the operation.
Sketch 9:41 AM 100%
3
Reservation completed
Optometry Appointment
The first page of the appointment interface displays appointment available time and occupied time, build-ing some tension, so as to stimulate users for further operation.
Information form.There are clear guidance and useful tips in the form and tide layout, users won’t feel puzzled during the operation process.2
1
Optometrists Introduction Icon
I divided introduction of optometrists into three parts. Their careers are shown in form of timelines, profession-al skills and user feedbacks in form of information charts, and other information in form of brief passages.
45 icons for EX applicationE
Location Lists
Detail pages
Price ListLocation lists of chain shops for optometry are taken as a sales mode like group purchase. We offer detailed introductions and relevant illustrations for customers to locate chain shops for optometry.
Detail pages are consistent with the app style, sparing wide margins and using Brighter colors. This makes the interface look clearer.
Our glasses are competitive in terms of the prices. However, these price information look com-plicated. I put the seldom-used information into the floating layer in form of charts which can be accessed on current page through a specific entry.
POSITION : User Interface DesignerRESPONSIBILITY : I participated in the user research, the interaction process and high-fidelity page design. In addition, I created visual identiy for the new brand.TIME : 5/JUN/2015-20/JUL/2015
PROJECT2
INTRODUCTION TOBRAND SPIRITTHROUGH VI DESIGN CONCEPTJINGFREE is an on-line shopping platform of fash-ion eyewear. The brand VI needs to spread the youth and vitality communicated by JINGFREE brand, namely boldness and unrestrained imagina-tion. Suitable glasses could improve people’s overall look and make them feel more confident.
We did some research about consumers’ preference about visual identity for a new brand by analysing which kind of identification can be remembered by them. Also, we summarized different views from brand manager, buyer, and activity planner to make our research meet various needs.
Implications of freedom make me think of strong billows, which flow unceas-ingly and vigorously. Based on such image, I designed a group of wave-shape patterns which are char-acterized by visual fluency. The visual-ly-attractive logo of JINGFREE emerged on basis of window shape of different fashion glasses. In order to comply with operation demands of the platform and overall segment of the brand, we mainly select four harmoni-ous bright colors to give full play to vitality of the youth.Fuchsia
Light Blue
Aqua
soft yellow
NewBright Light
Natural
Clear Unconventional
Associational
Wacky
Trendy
Easily use
uniqueFresh
Delicate
Fashionable
Memorable
FunnySimple
Creative
SpecializedFamaliarElements
ConsumerBrand Manager & Buyer
Activity Planner
The platform sells glasses made of four different materials. These glasses are distinguished from each with tags. Colors of glasses are matched with natures of their materials.
Top idolsT15 - RDK - 1108
54 -18 -140
J I N G F R E E . C O M
Top idolsT15 - RDK - 1108
54 -18 -140
J I N G F R E E . C O M
Top idolsT15 - RDK - 1108
54 -18 -140
J I N G F R E E . C O M
Top idolsT15 - RDK - 1108
54 -18 -140
J I N G F R E E . C O M
Blurred Vision Dim Shadow Astigmatism
During the project, our designers visualize myopic people’s feeling about light, including fuzziness astigmatism, and double image. Delicate patterns refer out real feeling about light.
visual club
The JINGFREE shopping platform employs many experienced glasses designers, who could customize fashionable glasses while guaranteeing comfort. VI not only offers new experience, but also highlights its innovative attitude.
Peripheral products relevant to brand visual image encompass calendars and Polaroid card stickers. These products combine elements of glasses and logo with visualized and patterned feeling about the light. As a design-oriented company, JINGFREE often adopted extensive materials which are relevant to glasses during the design process.
Visual Image Promotion of the Brand
STAINLESS STELL INJECTION OPTICAL TAI
As a UI designer at VOSTO , I managed the project of jingfree.com from concep-tion to design. In collabora-tion with VOSTO’s IT depart-ment and product operation team, my role was to ensure the website embraces the marketing needs of an online shop while cooperat-ing with offline activities. I contributed to the develop-ment of the online strategy and was responsible for creating initial sketches, wireframes and designs from start to completion.
We spent lots of time in researching con-sumption habits of Chinese customers. This company hopes to highlight every style of glasses chosen by professional buyers instead of displaying them like a depart-ment does. While designing the homep-age, we sought for innovations on basis of basic demands of customers. In case of finding no familiar operation elements of the newly-launched products, customers will exit the interface. We are seeking com-prise, because some interesting display modes could attract users.
WE
THIN
K W
E CR
EATE
TO
MAK
E YO
U O
UTS
TAN
DIN
G
WE
THIN
K W
E CR
EATE
TO
MAK
E YO
U O
UTS
TAN
DIN
G
There are many modules on the old JINGFREE website. The old one just want to satisfy all the require-ments with a very ordinary way. Users can not find anything innovative and they find no surprise during browsing the page. We must consider adding creative and proper interaction for the website.
There is an old website of JINGFREE. We did test of eye movement about the old one. The test is for these questions like which content is popular, how much time people would spend on the promotion module and what kind of presentation style of products draw the best results. We found people spent less time focusing on the product image and barely read the text. Images with large size may draw more atten-tion, but how to leace blank for the page is also an important issue.What’s more. this website is selling only glasses. It is important to do custom design for demonstrating the products and their advantages.
Fixation Order Eye Tracking Statistics
Users’ feeling about the old website
If I want to buy food, paper towel, watch and all kinds of stuff. I maybe want to go there. But this website is only selling glasses. I just do not like the style.
“
Fixation Order1
User Research and Data Analytics
2
3
4
want to buy some stuff
2%
20%
5%
52%
21%
will recommend it to their frends
make no impression
don’t like it
would like to talk about it
Seen : 90%Time : 0.8s Seen : 60%
Time : 0.5sSeen : 20%Time : 0.3s
Seen : 50%Time : 0.4s
Seen : 35%Time : 0.3s
Seen : 10%Time : 0.1s
We planned to display high-resolution pictures in the purchase homepage, so as to highlight our products and attract visual focus through well-arranged lines and planes. The purchase homepage reserved the menu bar which domestic users are familiar with. With clear classification of menu bar, users won’t get puzzled about the purchase homepage. Homepage
In the rolled-down menu of the homepage, appropriate margins could highlight every single item. With major decoration frames of VI platform, we are able to have customers pay attention to every delicate detail of products. Pictures of wearing effects and 3D views of glasses are well-spaced in terms of arrangement. This could strengthen attractiveness of browsing the homepage. During the hover process, every decoration frame will be shifted to color blocks, which may highlight areas users should play attention to and increase the enjoyment of users during operation.
Hover menu could be displayed in a full screen form. For design of secondary menu, we investigated recognition of 100 users towards categorization of glass-es and their shopping demands, so as to integrate the information to a satisfac-tory menu which complies with customers’ demands.
WHOLE PAGE
M e n u B a r H o v e r
Product PageW
E TH
INK
WE
CREA
TE T
O M
AKE
YOU
OU
TSTA
ND
ING
As a complicated interaction inter-face, the purchase page should display products in a clear and simple way. In order to attract cus-tomers, we need to adopt suitable interaction ways to offer unusual information to customers without crowded spacing and layout. On this page, hover product pictures can be zoomed up. While users click a scale icon on the upper right, a transparent mask which directly shows dimensions of glasses will pop up on the front view. For busi-ness, we took every color as a school. Left colors can be only displayed on the next page, because the homepage fails to present more alternatives.
POSITION : Eyewear DesignerRESPONSIBILITY : Creating the fashion specta-cles brand “top idols”/Making the first series design of the year/Establishing the visual identity TIME : 2/AUG/2014-25/FEB/2015
PROJECT 3
LOVE STAR . LOVE FANS
Costless
Common
Crazy
Anti
Gender Age Consumption
8500
～
Types Of Fans
15%
20%
95%female fans
61%
Spend all their extra money on their loved stars and always interest in everything related to the icons
4%
We summarize the date which came from fans’ club, weibo, Baidu post and QQ group throughout the entire Asian region. We spent four months gaining insight into them.
Fans who do not spend money on the star-related products
Fans who do not have strong willing to buy everything special about their icons/Depending on their emotional state
Hate the stars but they keep an eye on the stars
5%male fans
5%85-90’s
49%works of icon
23%star-related products
28%presents for icon & fans’ club activity
41%90-95’s
54%95-00’s
Our target group is mainly youngsters born between 1985 and 2000. Among this group, females take up a big share.
BRAND STORY
CHOOSE KHUNTORIANS FOR FIRST STEP
In initial stage, we are supposed to choose an influential star among youngsters, and customize glasses which could interact with fans. We try to make image of the brand Top Idols be recognized by fans.
Design inspirations come from fans’ mania for stars. As we all know , each famous star is surrounded by group of fans who spontaneously formed a ring for their stars . We build this brand to do some custom design for spe-cific fans circle . For the first step , a collection of eyewear with all fans loved elements about their stars .
Our Operation ModeOur products are by fans and for fans. By fans: design inspirations come from fans. Fans are fully involved in the design process through on-line and off-line modes. For fans: we will establish special fund for support of stars, so as to feed back to fans. Support of their idol mania could help us spread the culture of fans’ associations for support of stars.
crazy fans
We attended fans’ parties in daily life and cheer for stars together with them in concerts, so as to make out an analysis chart of fans in different conditions and summarize their living hobbies, clothing styles, personalities, and consumption habits etc. They present consumption impulses towards products which are related to stars. However, our products must stimulate customers’ consumption impulses and make a value for money.
Just as football fans watching games, fans automati-cally assemble in space, wearing clothes with same color and yelling same slogans. Such support mode has grown into a culture in Korea. This is a good way to unify emotions of fans. With glasses as carriers, we can enable the mutual emotional recognition of fans.
Community Culture
lonely girlishtrendy
Youth
need for acceptancego crazy
Get attention
giving
fear loneliness
Restlesscasual
hang out togethermediocre
match everything
Scenario analysis chart
C O L O R P A L E T T E
The letter “o” in Top Idols is derived from the shape of a crown, represent-ing that the stars deeply favored by fan communities are top-level super-stars. Its modeling is mellow and full as well as lovely, meeting the aesthet-ic demands of major female user groups, which is particularly memorable.
Visual Identity
According to characteristics of fans’ circles, our products are characterized by warm and bright colors which represent styles of lovely women. Lovely women like feminine colors but no those enchanting ones. Therefore, colors of our products should be fresh but also attractive than neutral simple styles.
Combine An Historical Characterlove star
love FANS
The crown-shape design of our logo looks like a classical character in Four Classics of China, namely Monk Tang, the master of Money King. The element of Monk Tang was designed as the cartoon spokes-man in combination with characteristics of our brand. Fans on the micro blog name us as master, just like a leader of fans.
Redesigned image of Monk Tang complies with the logo image and overall visual identity. The logo and the image of Monk Tang could increase the attractiveness and identification of brands as well as extend the popularity of the brand through mutual complementation.
Nothing Better
VK classicThe glasses combined fashion vintage round windows with metal plates. Both materials and colors are based on bold choices. Dark colors of the outer surface gave full consider-ation to applicability of wearing. The inner surface was decorated with rich and gradual-ly-changing colors.
This style was named by name of a song in Khuntoria’s concert. It also adopted the Khuntoria’s classical colors of red and black. According to Korean fashion, the rect-angular windows of sunglasses were designed with dark gray clinches, delicate curved legs.
Kkhuntorian Collection is the first series of Top Idols designed by me. Every step of the series is based on research and analysis of occasions in fans’ daily life, such as concept design, window type, detail consideration, color matching, and material selection. In addition, targeting on Korean stars, the series was added up with Korean fashion elements, such as clinches, and bright colors. With the help of brand manager, I named every style of the series by short stories of fans.
s i m p l e l o v e 4 5 6
Jewelry DesignerNicole LI
PhotographerAnne-Gloria LEFEVRE
PROJECT 4
THE DOME RHAPSODY
JEWELRY RENEWED DESIGNGRADUATION DESIGN
LECTURER/SONG Danqing
TIME/20/DEC/2013-20/MAY/2014
This series design is deeply influ-enced by the traditional Indian visual
forms, from the style of antique headdress, bracelets and toe rings
style, to the dome shape of temple architecture, all elements could be the
original design language gene. Redesign outlines a modernistic
pursuit by simply neat curves and surfaces: the three-dimensional shape
is showing oriental inspiration, and the balance point between fold and
expansions make each piece have an artistic sense. Ultimately creating a
concept modeling shape with strong dramatic and visual tension.
Antique Indian Jewelry Redesign with Architectural Modeling
MODEL MAKEING PROCESS
Planting Model Buffing&Welding Polish&Metal Plating
Head OrnamentSilver(gold-plated)
Resin
BroochSilver(gold-plated)
Resin
RingSilver(gold-plated)
Resin
This collection is selected in the project
BraceletSilver(gold-plated)
Resin
Detachable Violin CaseFIXPERT—“Design with users”ProjectTeam member : 5Position : designer/team leaderTime : 01/MAR/2013—10/MAY/2013
PROJECT 5
Our fixpartner Zhang Yudi has to take along lots of music scores every day. But her violin case only can hold pieces of the scores and has no space for the cellphone and keys. She complained the inconvenience of taking another bag at the same time. Zhang Yudi comes from the north and she is frank. She hoped her existing case would not be damaged.
Considering her needs, we came out the idea of the detachable case for her. This case will be taken down to work individually. It is for sure that the detachable case should match the style of the violin case beacause Zhang did not want it to be stand out. We tried different forms and connection materials for the detachable case considering storing all her stuff reasonably as well as light weight and beautiful outlook.
IDENTIFYING FIXPARTNER’S PROBLEM
EXPLOR POSSIBLE SOLUTION
VELCRO Button
VELCRO is a common material to close things such as pockets and bags. And it was our first solution. Zhang loved the idea of using buttons which came from the violin case to connect the two cases. This is the design that our fixpartner and we together optimized gradually.
You can see the video which recorded the whole pro-cess of the project at http://fixperts.org/fixfilms
ZOO CITYZOO CITYPOSITION : Graphic DesignerRESPONSIBILITY : design visual identity for a construction workshop which should meet business requirements and express individuality at the same time. TIME : 23/MAR/2015-30/MAR/2015
PROJECT 6
A senior student invited me to design an image for his workshop. I examined their design drawings after being permitted. They focused on the harmony between animals and the environment and spent lots of time in researching environ-ment-friendly materials. Their customers are often busy and direct. Therefore, visual image of the workshop should be kept simple and clear to be easily identified at first visual sight. In addition, customers should feel worth trusting in the workshop.
The senior student said he hoped the image can high-light their determination in finding a harmonious balance between construc-tions and animal living envi-ronment.I deeply understand the topological relationship of the inviter. I tried to render a harmonious relationship through positive and nega-tive elements. Brightness and darkness of colors could highlight corresponding relationship between positive and negative elements.
A Construction Workshop
PRIMARY COLOR
SECONDARY COLOR
ABOUT ME
I am crazy about going to different places and find inspirations for my
design work. I am sure that I will consider creating innovative things
as my hobby and job for my whole
life because I am deeply into find-ing and creating.
