Feedback and UX Testing

In this Digital Art session, we would learn how to use UX Testing to help enhance the improvement from the responsive experience of users. ' UX ' is mean the user experience, it can show out the usability, ease of use..from the customers reflection, by looking back the result, I can know where can I improve and develop more. Here are the process that I have use the google form to create my questionnaire.

I opened the google form, and clicked the button with started a new blank. I changed the title with ' Feedback and UX testing ' and then created my first question. Clicked on the right hand side, adding the question and answer which can let customers to choose. Keep repeated the same step until finished with all the question. Seven of my question are with multiple choices and one question at the end is with a paragraph answer.

After added all of the question, I clicked the top right hand side corner ' Paint Palette ', customised the form by using the punk picture which had searched at the internet before, and changed the color scheme with grey color. I kept the original font to the final result and started publish the link in my Website.

 

Here is my feedback :

I totally had set up 8 questions and here are 21 response for my UX testing. 

From this feedback, it can be seen that majority use mobile phone to get in the website, and the second is Desktop or Laptop computer. So I think I should review and notice more about the mobile phone webpage.

The majority 47.6% people thought that the home page was excellent, but there were one people thought that was poor and also 33.3% people thought that it was ' good ' only, so I would make an improve on this or maybe design the page being more creating.

Most of the people thought that the about me page was excellent so I was quite satisfied with this result.

Most of the people thought that was excellent with the galleries and collection page, but due to the fact that I hadn't upload the detail with my work, so I would put all the things and do it well in these few days.

With the whole layout and design of the website, the majority thought it was excellent, it felt user friendly and easy to use at all, so I was quite pleased with this result.

There were 42.9% people rated the highest marks of satisfied the experience with the website. However, there were also 33.3% people rated 3 marks only, so I would have an overall reflect with the website again and make the improvement.

Here were some comment from the classmate, friends and tutor. I think it is really useful that to know where I did not notice and made the mistake. I should correct again with the copyright title and add some sharp color with the whole design, and what they had feedback to me was, it was different in the mobile phone website, I should make some change and edit on this way, hope it can be better after I solve with these problem.

Process of collection one - Women

This is the female template of the first collection, here will be showing the process of my draft and what decision I had made or changed.

The first step, opened the template file that I had already searched and saved before, and then used the '6B pencil' which had been shown in the tool list on the app, sketched out the model's body proportions. After drawing out the draft, pressed and added layer 3 (the example has been shown on the bottom), this new layer can avoid drawing mistakes in the process and help to lock with the screen, preventing the entire screen to be redrawn again, and the sketch of the model would not be erased off if there is a problem in the step, it helps to save repeating the steps and saving time.

Outlined the basic shape of the clothes on the third layer, kept checking and ensured that the whole piece of cloth was balanced and symmetrical. In order to create the effect of princess sleeves, I drew out the curvature of the lines to create a sense of fluffy feel.  After drawing the basic entire appearance of the clothes, went back to layer two and erased the template lines of the original model, it was used to make the whole structure of the clothes being more clearer and not to become complicated for the picture.

Before coloring the sketch. I used another brush tool on the app,( The third button on the left screen side )After I clicked on it, sketched out the shape area that I want to color, and then the entire shape would be circled. Using this technique, it can help to focus the color inside the circle and it won’t draw out of the shape area when you fill in the color.  

This is an example :

After filling out a large area with color, I had used the "marker" tool that had shown in the app, outline again the structure of the clothes, it helps easier to the layer viewing. In addition, It can be seen that from the left hand side of the picture, there are separate to two controls. The upper one is used to control the thickness of the brush, and the lower one is used to control the transparency of the brush. Therefore, I just learned a skill,  that besides choosing other colors in the color palette, I can also have another method to adjust the hardness and transparency of the brush to deepen or highlight the space area.

When I was processing, I found that the gray color was too rigid and formal, and it biased towards the feeling of the 80s. Therefore, in order to break down the rule, I had changed the suit to black color and added a bright blue base, lake green grid color with high-necked wear, these carrying out a ruminate feel with the whole piece of work. The contrast between the colors also enhances the impact of the picture, which seems to create a sharp focus for this outfit and I was really happy with the result.

I kept open a new layer in every step to avoid myself to getting wrong step:

Finally added some decoration with metal element and drew a punk hair style with golden color.

The Final Result :

Collection One : draft and concept

First of all, I had referred to one of the popular trends of this year - Victorian Sleeves which design with two fluffy arms on both sides, it increases the width of the shoulders and this has given out a cool, strong women feeling. Secondly, for combining the Punk element, I had used to concept of lattice mesh pantyhose which was also a representative feature in the punk period. At that time, those women who liked punk would wear up a pantyhose (no matter what density or how mushy they are), a pair of thigh boots, like Dr. Martin, and dressed with a mini skirt, it feels a bit rebellious and also sexy. So I decided to combine this two element together and create out a new image for 20's punk.

Reference with Victorian Sleeves design and the outlook of 70's Punk :

https://gracefulstory.com/fashion-beauty/the-victorian-sleeves-and-blouses/

Left :http://media.gettyimages.com/photos/the-big-picture-susan-waters-shows-the-punk-scene-hitting-sydneys-2-picture-id539711767

Right : https://emilycournan.wixsite.com/emilycournan

After brainstorming the design outlook, I started to draw out the proportions of the model on the paper with 2B pencil, and then sketched out the shape of the clothes that I expect. Confirm that there was no place to modify, repeat the step and sketch with an ink pen on the draft one more time. And then, used the water color marker to do a material exploration on the paper, and put them aside in an order. By doing this, you can easily find the color that you want and avoid to use the wrong color.

Here are the step :

                                                     Water color marker testing :

       

The result are temporarily like this :

The design concept for the male was inspired by the shorts pants, it is also one of the popular trends of this year. Wear up a nice casual outfit and paired with shorts ( it must be shorter than the knees ), whatever which materials they are used for, it can be seen everywhere, no matter with fashion shows or street wear.  Moving on, I had also referred to the most notable features of punk in the past - Leather jackets. Mostly they would combine with iron chains, nails, zippers..lots of metal elements on the jacket. Due to its durability and stylishness, leather jackets are also the trend of these new years.  Fashionable color hairstyles, coupled with a black, white and gray color outfit, which make everything are being very unique and outstanding, so I extracted the characteristics of these two to create a new collection for male outfit.

Reference with Wearing the boxer shorts and the leather jacket at the past :

vogue.com/article/mens-shorts-summer-trend-shopping

Hardcore biker jackets

https://www.bbc.co.uk/programmes/b007knlf

Repeated the step with the female’s one, followed the model template to draw out the proportions of the male, after using the ink pen to outline the sketch, filled up the color with a water color marker, and gradually added shadows and details from light color to dark color.

The result are temporarily like this :

 

SMART objectives

SMART Objective :

It can help to cre­ate, track and accom­plish, short-and-long-term goals efficiently.

1.Specific- What do I want to create?

I want to design a collection with six piece of Punk fashion, and it will be divided into three design elements, one female and one male design as a group. The purpose is to combine the old unique punk fashion culture with the style of 2020 to create out a new trend. The main target market will be 18-25 years old.

2.Measurable- How will I know that I achieved this?

I will make a set of series research for my design collection, include the steps for designing a outfit, the exploration of needed materials, the fashion trend of this year...Make sure I catchup the definition and get enough inspiration, show my idea on the collection.

3.Achievable- Is it in my power to accomplish it?

Although the my progress is slower than other, and due to the fact that english is not my native language, it just cause me spent more time to read and research. However, I will try my best to catchup and complete those six designs which working with a high quality result.

 

4.Realistic- Can I realistically achieve it?

I think I can achieved the final project before the deadline. I will be more rigorous to myself and follow the schedule that I had already plan before, finish step by step efficiently. I will also ask review some feedback from classmates and tutors, edit and make an improvement.

5.Timely- When exactly do I want to accomplish it?

If it is possible, I want to finish on the day before deadline and it's mean 8th Dec, so that I can be make sure is it any missing or any place that I need to modify before the deadline.

Reference :

https://www.clearreview.com/resources/guides/which-smart-objectives-definition-should-i-use/

Process for Website-About Me

 In this Digital Art session, we are going to write a bio for the ' About Me ' page. Firstly, for the design, I want to express my personal style as much as possible on this webpage and at the same time retain the punk element. Therefore, I used blue, black and white as the  main matching colors for this picture, and created the background again by using the 2D sketch which I am good at. 
 Before I edited the website ,the "paragraph" of the screen is placed in the middle position and there is no space reserved for personal portrait photos. So, I decided to delete the original paragraph and reset again, I had also measured a certain space for the middle to put photos and personal profiles when I was designing the background,  

The original page :

After adding the background :

After inserting the background, I typed my profile and name on the page. Because I wanted to look being serious and dignified, so I choose ' times new roman ' font and enlarged the words to 18 front size, and then placed it on the right, it made everything clear and organize. So before I type with my personal file, here are some question that used to be the main information for audience and I need to consider with:

(keep it interesting/ easy to read/ be digestible )

Who are you?

-Tak Fun Yeung ( Nicole ) 

-From Hong Kong

-progression route : Fashion Design BA

How did you get to be who you are? 

-Family affect : There are three designer at my family

-The way I can express my opinion

What are you doing now?

What is your future?

-Being the designer who can influence people from all the world

-It can be seen my work at street

Final Result :

Process of Website - About Me (portrait)

 In this Digital Art session, we are going to learn how to take a portrait image by using our mobile phone for our website. I am using my iPhone 8 and the original camera app of the phone to take a picture. There are some simple setting and filter can be use in the app. 

It was sunshine on Friday, and I though it would be great to take a picture under the natural light environment. Therefore, I had asked my flatmate to help me to take a set of photo, and told her about what we had learn before the Digital Art : tapping the face, bring down the exposure, and take more with live photo. However, I was not really  satisfied with the result, it was a little exposed with the light, and there were a lot fail photos which I had not ready, it looked a bit back and quot for me. Here are the result :

 

I tried to take another set with myself. I think it would be more controllable and easier to tune the angle that I want. So I just set up a timer for 3 seconds and put the phone on the bar counter which face with the window. Here are the result that I photograph with my self-camera:

1.2.

I think the second one looks more active and energetic with the smile, it can also clearly to see my whole face, the audience can properly know the characteristics of mine though the the photo. Therefore, I had choose this one for my website personal portrait. And then I transfer the photo to my MacBook, opened the file in the ' Photo ', it can be seen there are a setting list for edit. I had increase the light degree to 10, and shaper the shape about 15 of the photo. I think this was far enough for the effect so I did not edit too much at the end. 

 The Final Result :

Development of procreate to create an website background

In this blog, I am going to use an Ipad drawing app ‘ Procreate ‘ to draw out my website background. Due to the fact that I can not find any suitable picture for the background, no matter in the website background image research or the image on the Internet, some of them had printed with the watermarks, some of them are very dazzling with the design. So I just thought that I can create the background by myself. 

 

Benefits of self-creation: 

1.highlight my personal style

2 can customize anywhere as you want,

3.do not worry copyright infringement

4.can measure the exactly space for the font or paragraph

Contact Page:

'Contact' make me associate with telephone and mail, these are always the common way that to find and contact someone .

Pure Phone Telephone Lines In The Background

https://pngtree.com/freebackground/pure-phone-telephone-lines-in-the-background_370659.html

 

A photo of my hand: ( imitating holding with the phone )

Firstly, fill up the whole screen with black color, and then use the' HB pencil ' tool in the app, to sketch out the shapes of the phone, hand and mail. Add one more layer on the top after drawing a basic shape, and then use fluorescent green to follow the original pattern and copy again. The effect of grouping green and white together can bring out a modern sense of technology. In order to combine the element with Punk, there are also add with a wristband and rings for decoration in the result.

Final Result: 

About Me page :

'About me' make me associate with my hobbies and my major subject.

A pile of clothes:

What a Pile of Laundry Taught Me About Time Management

https://www.threegirlsmedia.com/2016/06/09/what-laundry-taught-me-about-time-management/

Fashion design template:

shutterstock

https://www.shutterstock.com/de/image-vector/vector-hand-drawn-illustration-mannequins-set-648810070

Repeat the step with creating ' Contact page ', fill up the whole screen with black color again, and then use the same size of ' HB pencil ' tool in the app, to sketch out the shapes of the design template and those messy clothes on the floor. I have use the pencil drawing technique: cross hatching and the contour to build up the pattern shadow. In order to make the whole picture being more coherent, I use pencil to add the random and casual line to connect with those pile of clothes. It makes everything being more balance.

Final Result:

Process of Website - Contact

Today in this Digital Art session, we will focus on creating and editing the ' Contact me 'page. I had chosen the 'Women's Clothing Store' for creating the main template of my website. I want the whole webpage to match with my project topic- 20's punk, which is a dark style, so I would use dark colors as the main color and add on some characteristics, combine the elements of punk with red, black, white, and green as the main colors structure.  In addition, I think adding some simple and personal drawing drafts for the website can make it being more integrated and more unified. 

The main purpose : simple/ easy to use /beautiful

Here are the original contact page. Based on the fact that I am just  working for a fashion design project, there won't be any reality stores or even opening hours. Therefore, I just decided to delete these information for my contact page and shorten the length with the website.

 

Add on the new background image with the picture which I had already prepared and upload before. Due to the color contrast is far enough, so I did not edit up any setting.

 

The original font of ' Contact Me ' was relatively small, and it's fill up with dark color, it would hard to see and easy to blend with the black color background. Therefore, I enlarged the words into 27 font size, turn it to white sharp color. At the same time I had also chose another bold and neat font which call ' Lulo Clean ' and finally selected 'heading 1' for the theme. In order to increase the optical illusion, matching the image with punk, I had added some effect which are some repeat color like red and green under the front base.

Result:

Text Settings:

I think that the main contact method must be included with : name, phone, email and message, so I kept the original text formats of this website. The 'Contact me' page before I customized it had the same situation with the heading,  thin and grey text font. Due to that reason, I transformed it into another design layout: a long strip with white as the background color, which can bring out a contrast with the theme page background color, clearly showing what their position is. In order to match the heading font, I also chose the bold shape font ‘ Arial Black’ and enlarged it to 20 font size.

This is the temporary result:

Research on 2020 fashion trend ( Female )

 The trend would be a little changed in five years and repeat the fashion style again about a decade. Due to the market demand, fashion industry would be change every year. 

From the hippies style of 1960s to the minimalist style of 1990s, whether the complex one or simples styles, they all can be found in this year trends. The vintage style has been blowing up the whole fashion industry, and it has become a popular element sign for this year. Here are the research of some fashion show and street trend.

1.Oversized Victorian Sleeves

Victorian-inspired Sleeves which bring us back to 19th century. Puff sleeve and oversize looks can form a contrast with the arms, it create the illusion of a slimmer waist, therefore it can be look more skinny and slender. Under these gothic princess design, it adds on some feminine and a little girlish style.

https://thefashionistasguide.blogspot.com/2020/06/must-have-pieces-best-fashion-sellers.html

2.Shearling Outwear

The shearling which is the sign of 70's fashion style. Made with sheep with tanned suede on one side, and the treated coat left attached on the other side. This year the trend are mid-length and kimono cuts, a few pockets make the design outfit looks more sportier, but no matter how the length or the cutting change between the years, being warm and enveloping are always the main characteristic of shearling. 

https://www.thedoublef.com/fr_en/the-rooster/winter-fashion-2020-the-shearling-coat/

3.Faux Leather Coats

Leather jackets will never go out of style, no matter what style, budget or occasion, there is always the choice to wear with it. Black and brown are always the classic color with Faux leather, and this outerwear piece outlasts all others when it comes to longevity, both in relevance and durability. It never loses its value and always being the trend in every year.

https://www.vogue.fr/fashion/article/fashion-trends-leather-jacket-2020-according-to-two-experts

4.Matching Printed Tops and Stockings

 Wear up a pair of matching tops and stockings which print with repeated pattern, it can be stand out from the crowd in varying shades of print. The perfect fit with tailoring and the transparent mesh texture had add on a kind of sexy to the style, it also can be a best way to show out the curvy shape and fit body of everyone.

https://www.thetrendspotter.net/fashion-trends-from-spring-summer-2019-fashion-weeks/

 

5.Oversized Shoulder Pad Boyfriend Jackets

During 80's, broadening the shoulders with the use of puffed sleeves became popular again. Thick and board shoulder pads which were used in suits, dress and jackets, these power-dressing had gave out a stylish image and gave the women an authoratitive look, accentuated their femininity.

https://www.theguardian.com/fashion/2020/feb/20/i-took-up-so-much-room-zoe-williams-week-of-wearing-shoulder-pads

6.Animals Prints 

It can been seen that animal print is everywhere in these few years. Tiger print pieces had been the season's most-wanted animal print at 2018 trend. For now, while leopard-print was no doubt the most popular at one point. Matching with repetitive white and black color, boldly pattern is easy to stand out and it has add a wild edge to a basics design.

https://www.thefashionspot.com/style-trends/351457-fall-2013-trend-zebra-print/#/slide/1

Reference:

1.10 COOLEST FASHION TRENDS IN SPRING/SUMMER 2020
https://www.thetrendspotter.net/fashion-trends-from-spring-summer-2019-fashion-weeks/

2.https://www.thetrendspotter.net/fashion-trends-autumn-winter-2020-fashion-weeks/

3.The Best Shearling Jackets You Can Buy In 2020

https://www.fashionbeans.com/article/best-mens-shearling-jackets/

4.Heads Up, This Is What Your Wardrobe Will Look Like in Spring 2020

https://www.popsugar.co.uk/fashion/spring-2020-fashion-trends-46670900?utm_medium=redirect&utm_campaign=US:GB&utm_source=www.google.com

5.The ( Biggest Trends of Resort 2020

https://www.vogue.com/article/resort-2020-runway-fashion-trend-report