[User Experience Design]Final Project: App Design for Wei Lu(围炉)

The interactive prototype can be found here.

Since I am working in Wei Lu, a platform for getting know people around you and exchanging ideas, founded and organized by students from five universities in China. Currently, we only have wechat subscription as the platform for us to post articles and hold events. So this time, I would like to do a app version for Weilu.

  • Research on users’ needs:

First, I did some interviews with students in NYU Shanghai. From them, I knew a lot. I think the most important thing I have known from them is that they are only interested in articles about people they really know. This hint helped me when I started designed the logic of the app.

  • Design-Logic

Then I started designing. Instead of start designing directly, I had a brain storm first, to think about the logic and the structure the app should have.

  • Sketch

It’s time to sketch! When sketching, I often found I lose some certain details, so I have to rethink the overall structure and design it beside the main screen. Sometimes, I would got rid of one version of design and redesign it.:P

  • Refine the design in Sketch

After I have a clear sense of the structure and the look of each page of the app, I started to design/draw it in Sketch, a software specifically for UX/UI design.

  • Make it interactive

Thanks for the professor’s recommendation, I further made the prototype, making it interactive, with Invision.

  • User testing & refine

Last but not least, I did some user testing, and refined my app. I did three user testings

  • Further study/development

Since time is really tight this time, so I just showed the core of the app. But I haven’t done anything about user’s account. It will lead to too many extra pages, which are not very related to what Wei Lu is. So for this time, I got rid of all the pages for signing up, log in, etc., but it is the direction for me to further develop this app.:)

[Animation]Final Project: The Room (Animaiton & Experimental Game in Unity)

1. “TheRoom_Video_compressed”

If you want to play the game or watch the animation in better quality, here is the link.(Google folder)

For this animation, I would like to a story telling project using Unity. My story is about how a woman becomes a zombie step by step. But instead of telling the story to the audience directly, I would like to let them explore the story themselves. So I set up four different scences in Unity for the audience to explore. The overall setting of the four scenes is similar, but the details like lightening, sound effects, animation on character and even the model of the characters are different. Through these details, you will have a sense about how the story develops.

My sketches and story board:

As you can see, I tended to tell the story in the way of flashbacks. In this way, I wanna show people how sad and sorrow it is to become a zombie gradually. I hope through experiencing the huge contrast among the scenes and the character, the audience can feel the sadness. Zombies were human. They must hate themselves when becoming a zombie. At last, when everything is peaceful, and the woman is singing, you will feel like it’s the very beginning of the story. She was such a happy woman.

CHARACTER:

I have two characters. One is the main character, the woman, the other is the male zombie who bit the woman and let her become a zombie. I built the characters in Adobe Fuse, and animated them in Mixamo Adobe. It took me a while to build the model of the woman, since I want her has the same clothing, but with different details(like blood, the zombie look, or the color of the hair). I first tried the old version of Fuse, I find it’s hard for me to find a series of clothes with different details. Then I tried the new version of Fuse, but the options were even more limited. So I came back to the old version of Fuse, I learnt how to edit the textures on the clothes.

My models:

My Animations on characters:

SETTINGS:

I tended to keep the structure of the scene simple. So for each scene, there were only an entrance, a corridor, and a room. But I did put a lot of details in each scene. The sound & lightening in each scene are different. The first scene has a depressive sound with a dark blue lightening, meaning the woman has already become a zombie. The second scene has a raining sound with a lighter but green environment. Here the woman is becoming a zombie, and she is refusing the fact. The thrid scene has a much warmer lightening, but the sound effect is still depressive. I also added some raven’s sounds into the scene. The last scene is very bright. The lightening is warm. The sound is light and peaceful. And the woman herself is very happy, she is singing.

The setting of the overall construction:

scene1
Scene2
Scene3
Scene4
Scene5

The rendering pictures

Scene1

entrance
corridor
room

Scene2

entrance
corridor
room

Scene3

entrance
corridor
room

Scene4

entrance
corridor
room

Scene5-the end


SCRIPTS:

In unity, everything which moves has scripts behind it. I had to code to make things triggered or move. Here are all the scripts I have:

The script I struggled most is the door. Since the door should be able to open and close and lock itself with certain sound effects. It should also act as a trigger for the player to see the animation and go the next scene. So I researched a lot and tried a lot of different ways to make things happen naturally. Fortunately, I figured it out.:D

So here is my project for my animation. Through this project, I had a new understanding on animation. I think there is a relationship between animation and game(experiemental game), which is often ignored by people. People may think they are two different directions. But this time, i think it can be one thing. The form of game gives the story and the audience interaction, so that the audience are able to have a more immersive experience. The form of animation tells the story, and make things alive.

There are still a lot of things waiting to be improved. I am also thinking about making a behind-the-scene video for this project. (:3 All in all, I really like the learning experience this class and the projects i have done have given me.

[Animation]First try on projection mapping

I am not sure if we have to do the documentation for projection mapping, but I am gonna do it anyway 🙂

It’s quite fun for me to play with madmapper and project digital animations on a certain surface.

Our group(Jiayi, Cindy, and I ) did projection mapping on a paper mask and a hat. We tried to map two different animaitons on one surface and we were glad to see the effect. It looked really nice.

There were some problem though. The hat, becasue of its weight, always dropped down a little bit, making us map again and again to correct the position. But the mask, since it is made of paper, worked well.