Portfolio of nicole

Download Portfolio of nicole

Post on 25-Jul-2016

217 views

Category:

Documents

4 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • portfolio of nicoleSIZHUO LI

    aweafs1478@163.comCollege of Design and Innovation , Tongji University

  • 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%

  • 3Reservation 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 wont 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 peoples 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 & BuyerActivity 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 peoples 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 VOSTOs 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.Whats 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