visual media design 127 ux spring 2019 zhihuatu art studio ... · visual media design 127 ux spring...

VISUAL MEDIA DESIGN 127 UX SPRING 2019

ZhihuaTu Art Studio E-commerce Site Proposal

By Jun He

VISUAL MEDIA DESIGN 127 UX SPRING 2019 | ZhihuaTu Art Studio E-commerce Site Proposal | By Jun He | 2

PROJECT BRIEF

Product NameZhihuaTu Art Studio E-commerce site

Problem/Need StatementAs our economy, IT technology, educational level, and scope evolve constantly, the demand for high quality life style increase simultaneously. This trend matches Maslow’s hierarchy of human needs. People want something special to fit in their hearts, express their personal style, entertain their visual need, inspire their spirit, and soothe their soul... That is exactly what art is for. Additionally, people have certain needs in terms of shopping efficiently, conveniently, and confidentially, such as browse and compare with similar products, evaluate alternatives, look at customer ratings and reviews, make purchases, leave feedback, and postpurchase evaluation.

On the other hand, artists and designers would like to get public attention, have their works widely known and appreciated, positively impact people’s lives and make money for themselves.

If a product offers this kind of display and connection service between these two sides of people, it should be useful.

Product DescriptionZhihuaTu Art Studio incorporates artworks and creative products from all over the world, providing an online platform for artists and designers to sell the approved artworks and designs, and offering fine arts and art related products to the end users. My project is to create an E-commerce site for my client, ZhihuaTu Art Studio to run its business by attracting qualified artists/designers to join the Studio and alluring the

prospective consumers to browse through the studio and buy products/services.

Major contents and key points:

§ Home page: a pleasing welcome page, visual identity, overall impression

§ Muti-language options, choose pathway for artists or consumers

§ Overall image-based with short text description

§ Introduction of artists/designers, artwork/design, and products

§ Product size, color, accessory, and other aspects of choices

§ E-commerce functions including: search, Q&A, account & registration, live chat, product comparison, wishlist, cart, checkout, pay, feedback, return, etc.

§ All of the above work in an artistic and peaceful environment, attempting to build a bridge between artists/designers and art lovers or stylish people.

User Needs § For artists/designers: register, upload their works, get noticed about what are ap-proved, what has been sold, get monthly payment notice.

§ For consumers: be able to browse all products/services/programs with or with-out register, detailed and scene photos, clear menus and description, intuitive navigations, convenient buying steps, sensible prices, rating system, feedback/suggestion, return service, in-store pickup/dropoff options, access to additional information resources, customer service access.

FormMulti-screen site, convenient for users at anytime and anywhere.


COMPETITIVE ANALYSIS

CompetitorFeature

DIRECT INDIRECT

Great Big Canvas Art.com Society6 Minted Amazon IKEA

Home Page

Wishlist My Gallery Favorites Collection & Wishlist Favorites & Saved Design Saved for later My Shopping List

Language(s) English only English only English only English only English & Spanish English only

In-store pickup/dropoff ü ü üPorduct Comparison ü

Live Chat ü ü üReviews and ratings Star Rating Star Rating Show how many likes none for single product Star Rating & Comments Star Rating & Comments

Special Feature(s)• shipping contry choices • currency options

• personal taste discovery • from exploration to installation • “see more like this” • business entry

• Blog included • Art Quarterly - artists’ showcase

• Art for wedding/kids • comprehensive sorting • artists & designers Program • links to resources

Sellor/buyer Entry• Planning Tools • Business Entry • Inspirations

Visual Design plain, not artistic at alla little interesting and exciting

clear, but plain, ordinarypleasing, aesthetic, appealing, welcoming

widely accepted commercial style

• live style • appealing photos

Overall Strengths

multiple searching approaches

multiple searching approaches

• offers interesting art- related products • multi-aspect filters

• high quality • wide-range live arts • clear descriptions • intuitive navigation

• big E-commerce • wide-range of products • good organization • intuitive navigation • fully functional

• feature in furniture & home supplies • news announced at home page

Overall Weaknesses

• printed art only • can’t “return to home”

visual design has lack of eye-catching attraction

• little visual excitementcan’t see customer ratings for products

broad but not specificcustomized assembly yet a little complecated for choosing & buying


USER SURVEY

Survey Goals and Objectives § Test the overall concept: Get to know people’s likelihood of purchasing art related products/services online. This helps me decide the project’s viability, and differenti-ate end users of our website;

§ Gather information about the site contents, organization, visual design by testing psychographics:

1. What are their wills, interests, needs, goals, and attitude?

2. Their preferences about the site contents, navigation, visual design, color tone;

3. Knowing their pain points lets me know what to emphasis or to avoid

§ Demographics of the end users. It might help me understand their underlying ten-dencies or contextual aspects of information.

User Analysis(Based on The Survey Result)

§ Users’ Needs

4. Prospective users confessed that art benefits people’s lives. The ratings of each benefit tell me what they hope to get from art the most are interests/entertain-ment and enlightenment, second place are relaxation, beauty, and joy.

5. Fact that surprised me is that most of them need their daily products to be styl-ish and artistic, little stated “normal is okay”. This finding reveals the need of art and the viability of this online art studio.

6. Efficiency of online browsing and the buying process.

7. Customer service.

§ Users’ Goals

8. Purchasing art or related products/service to raise the level of lives or spice their lifestyles.

9. Making purchase within their budget, but without hassle.

10. Seeking classes for themselves or their children.

11. Looking for resources to enrich their knowledge.

§ Users’ Preferences

12. Visual design of the website might affect their intention of visit or purchase.

13. The style ratings show me harmonious type of appearance is most welcome.

14. In terms of color theme, “colorful” ranked first, and surprisingly, none of them voted for “dark”. This result might imply their pursuit of happiness, enrichment, and a bright life. This gives me insight of they expectation of art and its related products/services.

§ Users’ Suggestions

15. Promotion is needed and must be easy to find.

16. Clear terminology and navigation and search feature are necessary. If live chat is available, that will be great.

17. Keep it simple by avoiding too busy and noisy pages or too many categories in the first-level navigation, and no pop-up ads.

18. Detailed descriptions including customer ratings and most importantly, enough photos!

Survey Links• To take the survey • Edit the survey and see the responses

https://docs.google.com/forms/d/e/1FAIpQLScpjx9YkKFs7odMDPmRpnUDHOqKPfAEeCxcWgKj1hSg8qM2yQ/viewform

https://docs.google.com/forms/d/1Z51oqyj2e-f2aOoun89Yx8NxO1MWdvEpPXG84o8iGiE/edit#responses


PRIMARY PERSONA

Andrea Debell § 52 years old

§ Female

§ San Francisco, U.S.

§ Entrepreneur/Administrator

§ Annual income: $130K

“I just want everything to be nicer.”

BiographyAndrea has high education and aesthetic scope. She cares about the appearance of herself, her company and home very much. She believes visual appearance reflects the inner soul. Thus she arranges her company and home with art spirit. You can see grace-ful artworks on the walls and artistic daily products here and there, working with the environment in harmony.

Her computer skills maybe slightly lower than average. However, she feels comfort-able to shop online, and appreciates the convenience and the variation of goods and services offered with enough photos showing the details that she even couldn’t access at physical stores. Yet at the sometime, wouldn’t slow the speed down. A visually appealing and well organized website will attract her attention and arouse her buying desire. Accurate search result, clear terminology and description, intuitive navigation, and a sensible life chat are helpful features to her. She values customer ratings, review, and art related information feed. If occasionally, some easily noticeable promotion(s) announcement on landing page or thought email (but not general adds) will give her a nice surprise.


PRIMARY PERSONA

ScenarioAndrea needs to buy some art for her newly constructed office with big lobby, long hallway and more than 10 rooms. For her high standard as always, she goes to Zhihua Tu Art Studio’s website from her iMac desktop.

1. Searches products by artist’s name, and gets some results and adds the best one into cart;

2. Then searches by color scheme/use scene, gets other results, and adds some more to cart;

3. Compare those products with price, customer ratings, etc parallelly in a chart;

4. Asks questions to a live chat and gets answer;

5. Purchase successfully made.

User Stories § As a user I want to be able to <search by various categories>, so that I can <get the intended results>.

§ As a user I want to be able to <see enough detailed photos>, so that I can <know it well>.

§ As a user I want to be able to <compare with similar products>, so that I can <make wise decision>.

§ As a user I want to be able to <ask questions to a live person>, so that I can <get the accurate answer immediately>.


SECONDARY PERSONA

William Mak § 28 years old

§ Male

§ Vancouver Canada

§ IT Professional

§ Annual income: $80K

“I am ready to try new things.”

BiographyWilliam has a very rational, scientific, and well-paying job, and works from noon till late at night. Sometimes he can work at home. Of course he is a computer savvy, and often goes online shopping rather than visit a physical store. As other young people, he is confident to search information online and try something new, inspiring, interesting as supplement for his life. He fills his home and workplace with good-looking and modern style products like cups, water bottles, photo frames, mouse pad, note books, cushions, etc. Those help him get a peace of mind and enlightenment, and refresh his energy as well for he considers art is a good source of innovation, humor and educa-tion. Beautiful and stylish looking is helpful for eye catching and creating rapport and further purchase decision. Browsing and delivery speed, clear categories, and interest-ing things are essential.


SECONDARY PERSONA

ScenarioAccomplished a big task at work today, William feels relieved and decides to give him-self a refreshment as reward for the previous work and inspiration for the upcoming task. At home, during dinner, he turns on his laptop, and goes to Zhihua Tu Art Studio’s website.

1. He is casually browsing through and see what catches his eyes.

2. Sees a special water bottle. While he click on the photo, details about the bottle pops up, including price, customer ratings, designer, designed date, color and pattern choices, size, and similar product choices, etc.

3. He quickly chooses the one he likes most and put it in the shopping cart.

4. Plus some previously added products, he easily pays for all of them in the cart with the previously added payment method.

5. A thank-you and delivery date notice pops up. His buying need is met.

6. Next, he begins to browse at innovative designs and relevant articles after din-ner. Until feeling enriched and refreshed enough, he closes the page.

User Stories § As a user I want to be able to <see interesting things>, so that I can <be enlight-ened>.

§ As a user I want to be able to <shop>, so that I can <amuse myself>.


CONTENT DEVELOPMENT

Key WordsPromotion of the month (carousel diaplay), special design, feature artists, introduction, search, filters, sort by artists, color schemes, use environments, product comparison spread sheet, shopping cart, customer likes and ratings, photos, descriptions, price, choices of pattern and color, sizes, similar product recommedation, live chat, login, membership, partnership, personal porfile, payment options, order confirmation, system response of successful purchase like “Thank you for shopping at Zhihua Tu Art Studio!”, “Your estimated delivery date is 3/28/19.”, “Your order will be divided into 3 packages and arrive separatedly.”, enlightenment.

Images


CONTENT DEVELOPMENT

Forever Fragrant Artistically and Morally I am so glad to know that lady print maker, TU ZHIHUA is going to have a person-al-show and the excellent art works are going to be published. What, I think, I should convey greater congratulation on to her is that relying on her constant hard working her works are refined and full of the spirit of our times.She has achieved a lot on the base of researching and renovating the traditional techniques of wood cut printed in the way of water washing.

British modern philosopher, Ross, in researching the philosophy of human life, wrote in his essay that full and perfect life should be that “ When one enters his old age, he can still go on working and studying till the end of his life. If so it is the greatest happiness of one’s life.” Artists, as the constructors in the realm of spirit, are able to possess such a life as” creation will never cease as long as one is still breathing.” TU ZHIHUA is a friend and colleague of mine in GUANGZHOU Academy of Fine Arts, she has devoted her life to the cause of art for several decades. She has been working cau-tiously and conscientiously and finally made great success in art creation. Although she is now retired from the post of art education, she has never ceased in pursuit of art cre-ation and become more prosperous, which can be seen from her works to be exhibited in her personal show and the selected works to be published.

Like most of the students, who graduated from the fine art colleges of the early years of New China, TU ZHIHUA has received a strict training at college and has estab-lished herself in a solid foundation of painting from life so her art is generally of real-istic style. She is especially fond of Chinese traditional print making in water washing style. Having been practicing and researching for several decades on the techniques of applying powder and water washing, she has reached the highest degree of profes-sional proficiency. The value of art relies on its renovation getting rid of the stale and bringing forth the fresh. Another feature of TU ZHIHUA’s art works in recent years is her bold renovation in artistic style, trying hard in pursuit of the spirit of our age and

keeping up with the pace of our times.

Her unique style of art is her bold renovation on the base of tradition. Take her re-cent works, “Gypsophila”, “Quietness” and “The Breezes” for examples. Compared with those done in pure realistic style, they all give the viewers a new look both in style and techniques applied, suggesting a fresh and transparent charming atmosphere.

Frankly, the essence of art is, in fact, the beautifulness of life reproduced by the artist in his creation to bring forth the echo of the viewers, enjoying and experiencing such beautifulness of life. So, no matter what means is applied, only when this purpose is reached,it is a success in art creation. Most lady artists are more tender and emo-tional, by which her works are fully characterized. Appreciating her works, no matter whether it is a simple still life, such as “White Bottle” or a figure, such as “Reading”, the viewers will feel the sensibility of softness like water, aromaticity like the fragrant of flowers and freshness like the moonlight. This is a typical example of artistic success in bringing forth the viewers’ echo, the feelings raised by the beautifulness conveyed by the art works. Whether an artist is talent or not depends on whether he is sensitive to the “beauty” and the ability to capture it. As TU ZHIHUA has written in one of her articles : “When I was a college student I learned the realistic norm that art comes from life. In 1984 I went to XINZHOU farm to observe and experience the life of the farmers. What moved me most was how hard those ‘nurses’ work at the ‘calf-nursery’ in the byre” It is through her careful observation that enables her to create such romantic and emotional excellent art works.

Sincereness, kindness and beautifulness is a standard art norm popularly recog-nized. It is a norm easy to say but very hard to realize. Look around and you can see in whatever walks in our society it is very hard to find that something is done really sincerely. No matter whether a politician or an entrepreneur is dealt with, ruse should first be considered. However, if an artist has lost the essence of sincerity, he can hardly succeed. All master works in the history of art are the crystals of the creators’ sincere emotion. Of course, their talents of art is also a decisive factor. Lady artist TU ZHIHUA is of high artistic talent. Besides, she is sincere and kind. Never has she sought fame and wealth. These are the real reasons why she is able to achieve such great success in art creation.


INFORMATION ARCHITECTURE


HEURISTIC ANALYSIS

Art.com Society 6 Minted.

[H7 Flexibility and Efficiency of Use] [Severity 2]

It takes me some time and efforts to figure out how to remove unwanted items from the cart. And there is no way to move them to a saved-for-later space.

[H8 Aesthetic and minimalist design] [Severity 2]

Too many items are on the first level navigation bar. Should be hierarchily displayed.

[H7 Flexibility and Efficiency of Use] [Severity 2]

There is no way to move items from cart to a saved-for-later space.

[H2 Match between the system and the real world] [Severity 2] Taxonomy and labeling problem: the 3 category terms “Fine Art”, “Decorative Art”, and “Vintage Art” create confusion for me. And there are same subcategory named “Figurative” under the 2 upper level of catego-ries.

[H1 Visibility of system status] [Severity 5]

After entering an art firm collection and clicking on “Promoted” button, it displayed a list of text without any photo. Looks like something went wrong. But the system did’t tell me anything.

[H2 Match between the system and the real world] [Severity 1]

“HOME” appears at first level navigation bar, misleading users to think of “go back to home page” instead of the real meaning of “Home Products”.

[H3 User control and freedom] [Severity 2]

When choosing a frame for an artwork, I can’t undo to go back to the previous selection.

[H10 Help and documentation] [Severity 3]

I lost track of where I was at the point mentioned above because no sign indicating the navigation.

[H3 User control and freedom] [Severity 3]

It doesn’t allowed users to shop without registration.


TASK FLOWS

Search by Color Scheme

Home[Search by Color]

Color Choices[Pick a Color]

Product Detail Information

[Read]

Product Detail Information[Add to cart]

Artworks shown

[Browse]

Artworks shown

[Click on it]

Next Page[Browse]

Previous Page[Browse]

[Yes]

[Unwant]

[No]

Go through an other circle

[Want]

Something wonderful?

This user’s goal is to add some desired artworks into the cart or place her order directly. Supposingly, she has logged into her account and begins to search art-works by color ( yellow), and then narrows down the results by checking one catergory. Gets the accurate re-sults, browses, selects, views details, specifies options, gets price, adds to cart or places the order.


TASK FLOWS

Compare Goods in Cart

Home[Cart]

Cart[Select goods to compare]

Spread Sheet[Compare]

Cart[Keep it]

Cart[Delete]

Product Details[View]

Wish List[Move to Wish List]

Popup Ads[Offer suggestions]

[Yes]

[Yes]

[No]

[No]

[Not now]

Ready to purchase

Want them?

Like them?


TASK FLOWS

Get to Know The Artists

Home[Artists]

Artworks[Browse]

Detail Info[View]

Information of This Artist

Bio of This Artist

Add to Cart

Other Pages of Choice

[Yes]

[No]

[No]

[No]

[Select one]Like this artist?

Like them?

Sure

[Yes]

[Return]

[Return]

Like it? Unsure

[Yes]

This user’s path is:

§ Search artists and browse

§ Choose one and get to know her

§ Like one of her artworks and click on it

§ View details, specify options, get price, add to cart or place the order.


PAPER PROTOTYPE

Sketches


PAPER PROTOTYPE

Sketches Parts


PAPER PROTOTYPE

Path 1This user’s goal is to add some desired artworks into the cart, and place her order. She has logged into her account supposingly. And begins to search artworks by color ( yel-low), and then narrows down the results by checking one catergory. Gets the accurate results, browses, selects, views details, specifies options, gets price, adds to cart, and places the order.


PAPER PROTOTYPE

Path 1


DIGITAL PROTOTYPE

Path 1 — Search FiltersThis user’s goal is to add some desired artworks into the cart or place her order di-rectly. Supposingly, she has logged into her account and begins to search artworks by color ( yellow), and then narrows down the results by checking one catergory. Gets the accurate results, browses, selects, views details, specifies options, gets price, adds to cart or places the order.

For clickable prototype, go to this InVision link: https://invis.io/RSRRX2Z5JVX

https://invis.io/RSRRX2Z5JVX


DIGITAL PROTOTYPE

Path 1


DIGITAL PROTOTYPE

Path 2 — Get to Know The ArtistsThis user’s path is:





For clickable prototype, go to this InVision link: https://invis.io/WSRT92VGXMN

https://invis.io/WSRT92VGXMN


DIGITAL PROTOTYPE

Path 2 — Get to Know The Artists


USABILITY TEST

ScriptOpen InVision projects.

Hi, _____. My name is Jun, and I’m going to be walking you through this session today. Before we begin, I have some information for you, and I’m going to read it to make sure that I cover everything. You probably already have a good idea of why we asked you here, but let me go over it again briefly. I’m asking people to try using 2 simple paths of a web site that I’m working on, so I can see whether it works as intended. The session should take about 15 minutes. The first thing I want to make clear right away is that we’re testing the site, not you. You can’t do anything wrong here. In fact, this is probably the one place today where you don’t have to worry about making mistakes. As you use the site, I’m going to ask you as much as possible to try to think out loud: to say what you’re looking at, what you’re trying to do, and what you’re thinking. This will be a big help to me. Also, please don’t worry that you’re going to hurt my feelings. I’m doing this to improve the site, so I need to hear your honest reactions. If you have any questions as we go along, just ask me. I may not be able to answer them right away, since I’m interested in how people do when they don’t have someone sit-ting next to them to help. But if you still have any questions when we’re done I’ll try to answer them then. With your permission, I’m going to record what happens on the screen. The recording will only be used to help me figure out how to improve the site, and it won’t be seen by anyone else. And it helps me, because I don’t have to take as many notes.

Start screen record.

Do you have any questions so far? OK. Before we look at the site, I’d like to ask you just a few quick questions. First, what’s your occupation? Roughly how many hours a week altogether would you say you spend on web brows-ing? What kinds of sites are you looking at when you browse the Web?

Do you have any favorite Web sites? OK, great. We’re done with the questions, and we can start looking at things.

Show the home page.

First, I’m going to ask you to look at this page and tell me what you make of it: what strikes you about it, whose site you think it is, what you can do here, and what it’s for. Just look around but don’t click on anything yet. Allow this to continue for three or four minutes, at most. Thanks. Now I’m going to ask you to try doing some specific tasks. I’m going to read each one out loud. And again, as much as possible, it will help us if you can try to think out loud as you go along.

Tell the user about their task step by step. Allow the user to proceed until I don’t feel like it’s producing any value or the user be-comes very frustrated. Repeat for each task or until time runs out.

Thanks, that was very helpful.

Ask the observers’ question, then probe anything you want to follow up on.

Do you have any questions for me, now that we’re done?

Stop the screen recorder and save the file.

Thank them and escort them out.

ReportAfter testing 3 users (2 in-person, 1 remotely) for both paths, I’ve gotten the following conclusions and insights:

§ They can complete the tasks basically shows the task flows make sense.

§ Users should be able to “search artists” at “Search Area” instead of go through the regular navigation menu “About>Artists”.

§ If users want to know more about this artist, they should be able to click on any contents of this artist, including photo and text, to trigger detail information.

Revised from Rocket Surgery Made Easy

© 2010 Steve Krug


STYLE TILE

Defining Adjectives

artistic, aesthetic, delicate, elegant, stylish ...

Colors

Buttons Style Logo & Image Style

Icon Style

Typogrophy

H1: LATO, LIGHT, 48PTH2: Lato, Light Italic, 33pt

Body text: Ubuntu Light, 13pt

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()

Highlight text: Ubuntu Bold, 13-16pt

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()

Place Order Place Order


HI-FI PROTOTYPE

Path 1 — Search FiltersThis user’s goal is to add some desired artworks into the cart or place her order di-rectly. Supposingly, she has logged into her account and begins to search artworks by color ( yellow), and then narrows down the results by checking one catergory. Gets the accurate results, browses, selects, views details, specifies options, gets price, adds to cart or places the order.

For clickable prototype, go to this InVision link: https://invis.io/6NS2H5UWVFR

https://invis.io/6NS2H5UWVFR


HI-FI PROTOTYPE

Path 1 — Search Filters


Path 2 — Get to Know The ArtistsThis user’s path is:





For clickable prototype, go to this InVision link: https://invis.io/VWS2H88CYPQ

HI-FI PROTOTYPE

https://invis.io/VWS2H88CYPQ

Path 2 — Get to Know The Artists


HI-FI PROTOTYPE

visual media design 127 ux spring 2019 zhihuatu art studio ... · visual media design 127 ux spring...

Documents