designstudioiii

[designstudioiii]

wk 11

This is how the final working prototype looks.

Then I finally started building my case study.

I wrote everything on google docs then transferred it to Figma. I chose to design it in a free flow format so that this can be used for my portfolio in the future.

I  just included all of the main points here since it is very long, and it will be submitted to canvas.

[designstudioiii]

wk 10

Making the pitch video.

I just made a really simple video demonstrating how to use access and use the feature on the website, and also highlighted the improvements/benefits of it.

These are the final components. I made a few versions of every component and kept tweaking it until it functioned perfectly. I also changed a lot of the design according to the feedback I received.

[designstudioiii]

Week 9

I did some user testing on the semi-final draft of the simulator. The feedback I received was very useful and I edited it according to the points I thought were promising.

User 1

Save mannequin settings to account and how to edit?

“View in size simulator” micro animation makes you think it slides sideways 

Start with basic body shapes (too much detail)

Big call to action "try it on" "we think you're a 12, what do you think?"

User 2

Goes straight to simulator on one click

Prefers very specific body types

Offer a rough measurement 

Icons look the same

Add to bag button at the bottom when everything is finished - goes straight back up

User 3

Navigation hard to find

More coloured mannequins

Would be better if it was just lighting change instead of background colour 

“How to measure” in black instead of light grey, also it’s too small

User 4

Colours not necessary 

Left bar not necessary 

User 5

Size goes straight down to simulator

“How to measure” should be more clear

Background could be in actual settings like club or daytime

Needs an enter button

I tried the suggestion of putting it in different backgrounds/scenery so that it actually matched the occasion of the dress. However, I don’t think this worked out as well as I thought it would. I switched it back to the plain colours.

I also reduced the amount of options for the body customiser, and exaggerated the shapes a bit more so that the diagrams were obviously different.

As for the button on the main page that leads to the size simulator, I changed it so that it slides sideways directly to the feature. This makes the navigation much smoother in terms of improving the user pathway. Before, it would just scroll downwards where you had to click another button to open the feature. Many people couldn’t figure out what to do and were very confused.

[designstudioiii]

Week 9

I started prototyping and made my final drafts. There were many components I had to make, and they were very complex to prototype so it was quite difficult. 

The main page and background changer component.

Closeup of the main page.

“Body quiz” pages.

Small button components.

Component to change the dress size. I had to make 3 different models of the dress for this. One had to fit the mannequin perfectly, the second one had to fit it slightly loose and the third one was completely oversized. This gave the illusion of the dress being simulated/draped onto the mannequin, “true to size”.

More small buttons

This component was probably the most difficult and tedious one to make. It was for the body shape customiser which was the main component of the simulator.

I also made it so that the skin tone is customisable for the user so that this feature is suitable for everyone.

[designstudioiii]

Week 8

These are the initial wireframes I designed. I kept it similar to the ones I researched, but simplified it quite a bit.

First prototypes

I tried to stick with a modern looking design that fits the style of the original website. To do that, I first made the side bars with thick black borders but wasn’t happy with the look. It was too bulky and looked out of place.

I switched it to a borderless look with a drop shadow and it looked much better.

[designstudioiii]

Inspiration for designing the character builder.

I looked at other softwares/games that has a character customisation section. Usually, these can get very detailed with the customisation which can make it very complicated to use. Although I wanted to keep the amount of detail you can add to the avatar, I also wanted to keep it easy for everyone to use.

I mainly took the design of the Sims 4 as an inspiration.

[designstudioiii]

Week 8

I tested some renders of the avatar with different materials and lighting scenarios. I also chose different background reflections to see which one looked better for the final.

[designstudioiii]

WOMP 3D for the mannequin

I started doing some 3D modelling for the custom avatar. I wanted to create something that resembled the mannequins you see in store. Somewhat abstract and ambiguous so that it is a more universal design. 

Because I didn’t have access to any professional and complicated softwares for 3D modelling, I chose to use a website called WOMP where anyone is able to create 3D sculptures using simple shapes like a cube, cylinder or sphere. By using the “goop” tool unique to the website, it allows the shapes to “melt” or cling to one another, creating new abstract shapes or negative space.

I rendered the mannequin in a shiny custom material, which creates a nice visual interest.

[designstudioiii]

Week 7

I ended up using a software called “CLO” which does basically the same thing as Marvellous Designer, except it’s more optimised for the fashion industry than digital design.

I played around by replicating clothing items I found on the Showpo website, so I can use these for the final design later on. 

Black off shoulder top

White satin dress

Red satin dress

[designstudioiii]

Week 7

Most people liked the 3D AR/VR idea, despite the survey showing that most people don’t find it useful. I could maybe implement a way that combines all the different ideas presented. 

With that being said, the mannequin/avatar “dress up” idea also looked to be popular, after asking for my peer’s opinions.

I did some research on AR fashion products to see how similar softwares/apps/websites incorporated it. Usually, it shows the subject through a camera lens and detects the main subject, then lays an animated 3D model on top of the object or person.

To make the clothes that will be displayed on the avatar, I wanted to explore 3D modelling softwares. I remembered playing around with a software called Marvellous Designer a few years ago, which allows you to create clothing patterns and “sew” clothes in 3D. This is mainly used for game design and animation.

[designstudioiii]

Ideation week 7

This is the group brainstorming that I did with other classmates who are also adding a new feature. I categorised it into the most common groups - physical solutions, review based, web based and AI/AR/VR based. I was leaning towards the AR/VR/AI solution because to me it’s the most appealing and convenient.

I also asked some of my peers which option they would want to be explored, and they also agreed.

More summaries

[designstudioiii]

Week 6: Survey results summary (condensed) and formative poster

Formative poster

[designstudioiii]

Survey results wk 5/6

[designstudioiii]

[designstudioiii]

Research plan so far

[designstudioiii]

Personas

[designstudioiii]

Journey mapping

Persona #1