Portfolio 1.0

Design works of Jingle Mao Date from 02’ to 09’

CONTENTS PART 1 USERS EXPERIENCE DESIGN Overview

3

User’s goal & Persona

4

Information Archtecture

5

Prototype

6

Interaction Design

7

Web Interface

8

PART 2 WEB DESIGN Esencia.com

11

Esencia digital magazine

12

Wisewindows.com

13

Threeneedle.com

13

Gd1979.com

14

Berlindesign.com

14

PART 3 CURRICULUM EXERCISES Extra curriculum exercises

16

Sketch & Painting

17

TITLE OF WORK

TIME Apr/08-Jan/09

E-shop Administration system

SUMMARY

This is an online administration system for product management, e-shop decoration and e-post manufacture. The task-oriented, user friendly and stylish interface is designed to help e-shop owners to manage their stores efficiently as well as inspire their creativity in shop design.

Index 0.0

V1.0

Scene Editor 1.2

V1.0

Add goods 2.2

V1.0

DISCRIPTION The second version of the system focuses on enhancement for functionality and user experience.

Persona first came into use in this version.

In addition to the use of persona, the user interface and the task flow were also improved. Abandoning the heavy decoration and adopting a more simplistic interface style led to greater visibility of core functionality and flexibility of user operations.

Aiming to shorten the new user’s learning curve, similar task flows were consolidated to have similar processes to share the same visual experience.

Further more, some details such as default states, ultimate states and feedback, were carefully examined and redesigned, taking user skill level into consideration.

Index 0.0

Listing 2.3

V2.0

V2.0

Scene Editor 1.2

V2.0

Add goods 2.2

V2.0

TITLE OF WORK

TIME Apr/08-Jan/09

E-shop Administration system

USER’S GOAL & PERSONA user’s goal:

Online Advertisement → virtual E-shop → E-post → AD analysis Online Marketing → goods management → purchase-sale-storage system

persona:

Our first user persona is modeled after Zhang San, a 27-year old business owner who has a partner and less than ten employees. He has certain experience of running an online store, and is interested in expanding his online advertisement and sales as he believes it is a more cost effective way of growing the business.

姓

名：

张三

年

龄：

27

所在地：

浙江丽水

DISCRIPTION Since persona was an experimental model that had never been used before in the system, we decided to first build it as an extension to the existing system. After a typical persona was implemented, we found it a little arbitrary since researching genuine users is impossible. We all know that the more concrete the persona is, the more the product appears to be thoughtless, thus the persona was cautiously used. But from this practice, the team gained a better insight into the persona and built a basic experience about this concept which might be useful in our future works.

学

历： 大专

电脑水平： 学生时代学过电脑基 础对网络较为熟悉， 但只限于普通运用， 没有网上开店经验。 经营背景： 时尚家居用品小店 二级城市实体店一家 经营两年 年利润15万左右

TITLE OF WORK

E-shop Administration system

INFORMATION ARCHITECTURE

A high-level blueprint of system framework.

DISCRIPTION The blueprint Version1.0 is a task-oriented blueprint built at the beginning of the project. It was redesigned in Version2.0 with focus on high-level information structure rather than operation tasks.

Compared to the previous version, V2.0 is not a fundamental redesign, but the restructuring has effectively made the system much clearer and simpler to the users.

The whole system consists of four types of objects, Scene (1.0), Goods (2.0), Poster (3.0) and Order (4.0), on which three general tasks are performed, E-shop decoration, E-sale management, and E-poster manufacture. The blueprint starts form index (0.0), containing the objects and a shortcuts list. Four objects, represented as page components, are showed on the left side of the blueprint. The list of shortcuts (0.01-0.04), exactly named after the four tasks, is showed on the right side of the blueprint. These shortcuts lead to other important elements of the system, Scene Editor (1.2), New Goods (2.2), Listing (2.3) and Poster Editor (3.2). Users can accomplish their tasks through these subsystems.

When making the blueprint, similar components, such as pages and relations, are depicted visually the same. For instance, Scene (1.0), Goods (2.0) and Poster (3.0) are objects, so that they are lined up in a row. Scene List (1.1), Goods List (2.1) and Poster List (3.1), are secondary pages, so that they are in a row. The association between them hints the similarity of interface. It makes it easy to make wire frames.

Note that Order (4.0) and its corresponding pages are not available in the blueprint V2.0. Since the business partnership negotiation is in progress, the work flow boundary has not been determined.

TIME Apr/08-Jan/09

TITLE OF WORK

E-shop Administration system

PROTOTYPE

Hand drawn framework outlining design structure and task flow.

DISCRIPTION Hand drawing is a comfortable way of express ideas. It allows the designer to concentrate on thoughts rather than tools in the early stage of design. It is also efficient to draw high-level design without being bothered by specific details. When sharing design ideas with stakeholders, hand drawing prototype is always a powerful tool to convey the overall design.

Shown on the right is a sketch of the administration system framework. During the design, attempts were made to effect on integration. Basic information is classified and listed in order for us to identify the resemblance among them, and then build abstract prototypes to capture similar information.

However, paper prototype is weak in interaction. I once tried to explain an interactive flow path on a paper. It took me a lot more time on cutting papers, but it has little effect on demonstration.

Later I started to utilize Axure whenever necessary.

TIME Apr/08-Jan/09

TITLE OF WORK

TIME Apr/08-Jan/09

E-shop Administration system

INTERACTION DESIGN

Flowcharts of four concrete tasks base on three general tasks. Ⅰ. E-shop decoration → renovate storefront (task1) Ⅱ. E-sale management → add new goods (task2) → listing (task4) Ⅲ. E-poster manufacture → making poster (task3)

DISCRIPTION In Version 1.0 flowchart is integrated with the blueprint. But it may not a good choice because the complexity of the combined structure turns out to have caused some confusion to the users.

Therefore in Version2.0 flowchart is built separately. There are some modifications to the interactive process. Some processes are refined and some are isolated to serve one purpose, making the interactive process more users friendly.

Task 2 is condensed. Firstly, three steps are cut down to two. Secondly, users can create new categories without leaving current page. Thirdly, users are allowed to list new goods at the end of the process.

Task 4 is an isolated task. There are reasons for it.

Since putting goods for sale is an important part of goods management, it decided whether visitors could see certain pages. But different from the real world, the listing process- “putting goods for sale” which tells from programming is a change in property, can’t be seen by users. In Version2.0, by moving commodities from one list box into another, the process is more visible than before. Users can easily recognize which goods are in inventory and which are for sale. Visibility also enhances the user’s confidence when he operates on the commodities.

In both Task 1 and Task 3, templates list pages are removed from the system. They are moved to a new site, which users can visit via a hyperlink in the administration system.

Add new goods Second step of task2. Users are able to add info for a commodity, but unable to change the state.

“listing” botton A feedback will announce the result of the operation. But the position of each commodity doesn’t change visually.

E-shop Templets A templates store in E-shop decoration module. A similar E-poster store is in E-poster manufacture module.

Task 2

Task 4

Task 1

V1.0

A link to E-shop Templets’ site Task 1

V2.0

V1.0

Quick pass for ”Listing” Task 2

Submit

V2.0

Task 4

V1.0

Storage

For sale

V2.0

TITLE OF WORK E-shop Administration system

INTERFACE DESIGN Design Principles → simplicity & visibility → reusability → flexibility → details

DISCRIPTION Besides infrastructure, the remaining challenge in design is all about visualization. All the visual elements should be able to help user understand the meaning of structures, and they should also look beautiful. Coming up with good visual components is the most heavy and fussy work during the design process.

Just like language translation, decent is not that easy. How to explain hierarchy and relationship visually? Can the icons be recognized? These are the most common questions I often ask to myself during the design.

Vision expression form is the other challenge.

Thanks to the basic training, I am now very proficient in making use of various visual tools in design, such as tones, colors as well as white space. Many factors need to be considered, e.g. flexibility, reusability, limit case and so on. They need to be used accurately; otherwise they can make the work look fussy. It may look too meticulous trying to achieve "pixel perfection", but it is always many well-designed details that make a piece of quality work. Therefore, most of the visual elements in the system are carefully calculated and designed.

TIME Apr/08-Jan/09

TITLE OF WORK E-shop Administration system

INTERFACE DESIGN Design Principles → simplicity & visibility → reusability → flexibility → details

DISCRIPTION Communications must be effectively branded in order to draw upon the user’s positive brand experience. Although the interface has changed a lot in the new version, it does keep some genes of former version, such as colors and button patterns.

The major amelioration of interface occurs on flexibility. The picture shows four modes for commodity display. To meet different user requirements, each mode is supposed to carry different levels of information quantity. Under each mode, elements are thoughtfully designed to have the right sizes and shapes based on its information quantity.

Buttons of the same properties have the same patterns. The space between hovered tab’s background, icon and text are carefully managed. This gives the buttons a more balanced look and makes CSS code reusable.

TIME Apr/08-Jan/09

TITLE OF WORK

Esencia Fashion Flash Site

DISCRIPTION This static flash website was made for a Chinese fashion brand. Fully in charge of the project, I did the interface design, as well as programming based on AS2.0. As programming is not difficult in this case, I paid more attention to interface design and visual effects because this website is used for brand promotion. With Flash animation, I was able to create vivid animation effects. The website gained favorable reception from the client.

TIME Nov/06-Dec/06

TITLE OF WORK

Esencia Fashion Digital Magazine

DISCRIPTION This digital magazine is an associated with Esencia website, for brand promotion and marketing.

TIME Dec/06-Jan/07

TITLE OF WORK

Wisewindows & Three needle

DISCRIPTION Wisewindows.com is the official website of Wise Windows Advertising Communication Co., Ltd, an advertisement company owned by Jie Pan, a famous Chinese planner and photographer. I used to worked for the company and responsible for the website interface design and action script programming.

Threeneedle.com was a project I completed for Wise Windows. I was responsible for interface design, front-end development and collaborating with PHP programmers.

P.S. These sites were no longer existed on the internet. Wisewindows.com was redesigned in ASP, because no one in the company could maintain the site after I left. Threeneedle.com was closed when the virtual host expired.

TIME Mar/07-May/07

TITLE OF WORK

GD1979 & Berlindesign

DISCRIPTION Gd1979.com is a flash website, developed for a graphic designer’s studio. In this project, by using dynamic flash portfolio from XML data, the maintenance of the site became much easier.

Visit the site: http://www.gd1979.com Berlindesign.com was another site I created when I was working for Wisewindows. Since the client refused to build a dynamic site, it was totally a static HTML site.

Visit the site: http://www.berlindesign.cn/

TIME Aug/07-Oct/07

TITLE OF WORK

Extra Curriculum Exercises

DISCRIPTION The two pictures beside showed some exercises.

I like doing some interesting exercises after work.

The flash menu above was done in 2008. It is a mouse drag menu, the menu will show when you click the mouse and will hide when you shift the mouse out of the hotspot.

The motorcycle below was designed in 2003, using Illustrator when I was learning the Illustrator after class.

TIME 2008, 2003

TITLE OF WORK

TIME 2001-2006

Sketches & Paintings

DISCRIPTION The Copy of Yongle Palace Painted in junior year.

The Portrait of a Young Woman Sketched in sophomore year.

The Marseilles Sketched in freshman.

The Roman Sketched in my mentor Haiyan Wu’s training course in 2001.

Portrait

2003

Marseillaise

2002

All of the above works I did in college were collected

by China Academy of Art.

Certificate of Collection

The copy of Yongle Gong

2005

The Toman

2001

When I am working on a problem I never think about beauty.

I only think about how to solve the problem.

But when I have finished, if the solution is not beautiful, I know it is wrong.