Class: User Experience Design
Instructor: Azure Qian
Documented by: Amber Wang and Theresa Lin
User Flow Map:
We used Lucidchart to create our user flow map.
Our app that pairs up with the cafe will first start off with a screen that prompts the user to clicks a button to start designing. The user will then have to choose the cake size, the amount of layers they want, and the flavor of the cake and icing. Then the app will go to the design interface in which the user will design the cake. After that, the user will be able to choose if they want to upload their design for a weekly ranking or not. Then the user can choose if they want the cake to be delivered, pick-up, or if they’re in the cafe to start the 3D printing as soon as possible. If they chose delivery, they will be directed to a screen for address and phone number input, time they want the cake delivered, and options to choose any addition service they need such as candles, or utensils. If they chose pick-up, they will be directed to a screen that asks what time they want to pick it up at what location as well as options for additional service. If the customers are in the cafe and want the design to be printed then and there, they will be shown a order number and the count-down time to when the printing will start. The last screen will show when the order is completed.
On average, people are willing to pay 82.97 RMB extra for the customization service.
In last week’s class, we helped redesign a global language tutoring App called PopOn. We first used stickers to categorize the features of the App under different big categories. There are mainly 5 big categories, which are Globe, Training, Video, Message, My Profile. However, the small features under the 5 big categories are too broad and disorganized. For example, there’s one branch under Messages called Clan, in which user could explore different clans, view clan’s posts and do group tasks. We thought it didn’t make sense to have such broad exploration under the name of “message”. Another two features unreasonably included under “My Profile” are “history call” and “plans (learning target)”. We believe that it would be easier for users to view their history call in the same interface of making the calls under “Globe”. And “learning target” should go with “Training” so that users can get a better idea of their training plans.
Please refer to our App Redesign Before and After as follows:
Our project idea revolves around a cafe that specializes in custom 3D printing designs on cake. Paired up with a mobile app and website, customers will be able to choose any design they want to be 3D printed on a cake they ordered. They will also be able to watch the process of the machine printing the design on the cake. These customizable designs could be great for any occasion- anniversaries, weddings, or birthdays. Customers can also place the order online or through the app and get the cake delivered. With the cafe, it will attract younger customers who are looking for something more than your average cafe and have something unique to take a picture of to post on social media like Instagram.
A group of friends are hanging out and they’re thinking about what they should do.
Then they see the 3D Cake Lab which stands out from all the other cafes.
They’re surprised that you can design the cake from an app.
They watch the design being 3D printed onto the cake.
They are happy with the results and take a picture to post onto their social media. They receive lots of likes and comments on their Instagram post and are happy.
The overall narrative of our project from the proposal has changed a little. For our proposal, we wanted to focus on the importance of technology as a whole. We wanted a apocalyptic centered theme where everything such as the metro, electricity, cars, and technology all shut down. As the planning process proceeded, we opted to focus more on just phone usage.
Our project starts off with a blank black screen on the left side on the website and an iPhone on the right side. On the bottom of the iPhone we replicated the “Slide to Unlock” slider. When the user slides the slider, a video will start playing on the left side of the screen. The video is shot in first person perspective and the scene starts off with the person purchasing food at Family Mart. The video will then pause and have a black overlay with the text “What am I doing next?” to prompt the user to click on the correct app on the iPhone to proceed the scenario.The main interactivity of the website is a series of clicking on the app to proceed to the next scenario. At the end, a video saying “Can you live without your phone” will appear and then a clip of the animation “The System is Falling” created by Steve Cutts would play on the screen. By ending with that, we wanted to show the irony of phone usage in modern society especially in a place like Shanghai where people use their phones for almost everything.
Before we made the website we filmed the footage. We filmed without a tripod because it would be easier to move the camera when the person we were filming walked. (We weren’t able to use a gimbal because neither of us were able to go to the workshop). Unfortunately due to that, the video turned out to be really shaky; although at first we thought would be fine because it would add to the effect of the person walking. We realized that it was a mistake when we received feedback from the class.
Some of the walking scenes were really long so when we edited we tried to make it as short as possible, but it made some people feel nauseous because of how choppy the video was. If we could do it all over again, we would definitely re-film and re-edit most of the scenes that were shaky. For the video editing, most of the editing process was focused on color correcting the scenes. When we filmed the metro scenes, it was extremely blue compared to the scenes inside the building.
We also tried to fix the outdoor scenes because it was overly exposed. Color correcting the metro scenes went pretty well except for the scene where the metro arrived and the door opened. Inside the metro was really yellow and everything else had a blue undertone. We didn’t have enough time to spot correct so that’s one thing we would also try to fix. We would also re-film some of the scenes where the person was playing on her phone in different settings to elicit more strongly the idea that people are on their phones pretty much anywhere at any time of the day.
One minor error that we didn’t notice until we presented was the music playing in the beginning. The music was not meant to play in the beginning, but because we set the video to hidden, the video was playing in the background. Another thing we could fix is the videos at the end. They were a little out of sync. One of the feedback we received from the audience is the “Spend less time” checkbox is a little unnecessary and kind of sticks out. We could take that out. Additionally, we could also improve on the transition between scenes because they have a bit of disconnect. The transitions weren’t natural. We could also try to show a message letting the user know if they clicked on the wrong app. We would add more instructions at the beginning of the website to make it more clear as to what the user should do.
In “Web Work: A History of Internet Art” by Rachel Greene, she explains the history of how net art came to be. Between 1994 and 1998 net artists used the internet as a platform to discuss art-world institutions within a community. In the early years, net art was used for political purposes in Eastern Europe. There were other artists who used the web as another medium for design. Other net.artists used the internet to make playful projects as well as serious ones that brought awareness to topics such as feminism.
Thinking about internet art in terms of the traditional physical art that we’re used to still feels new to me. Personally I don’t really think of the internet as a tool of art but after reading this article I think it’s a really powerful medium that can be used to convey information or an idea effectively and at the same time, can quickly reach a wider audience.
In “Computers, Pencils and Brushes” by Paul Rand, he says that a computer is merely a tool of design, however, it shouldn’t become the design. Rand claims that computers “may also deprive students of the drawing skills that develop only after hours and hours of practice, pencil or pen to paper.” He also says that computer is just a technology and although it can feel ‘new,’ essentially it’s just another way to convey one’s designs. I think his main argument is that computer art and art by traditional means (drawing by hand) should have a clear line of distinction and that computers should not replace this traditional experience. Personally, I think not everyone has to follow traditional means of art in order to be able to design. Because of computers, there are many more options and techniques to art such as digital drawing, graphic design, and Photoshop. The computer, like pencils and brushes can be a tool of design if the user deems it so. It isn’t the only source of art medium, but it is one of many, and it all depends on the artist on how they choose to use it.
“Hackers and Painters” by Paul Graham mainly talks about how hacking and painting, although from different fields of study, essentially the same because they are both a medium of design. Graham expresses his disagreement that hacking should even be categorized under computer science because “Computer science is a grab bag of tenuously related areas thrown together.” People who study computer science range from mathematicians to people who study the algorithm of computers to hackers. Graham strongly believes that computers are “a medium of expression, ” a tool for design. He also gives examples on how many universities and companies force hackers to be scientists, rather than designers. Paul Graham then goes on to say that the best way for a hacker to be able to create their own software is to start their own startup which is why he created Viaweb, a website that allows users to host their own websites.
After reading about Paul Graham’s opinion on computer science, I do kind of see why he says computer science is a broad topic. Computer programming languages are a tool that can be used for different applications such as design or math calculations, but in the end it’s up to the user to determine its use. Graham explains that hacker and painters are the same because they are both makers. In other words, they both involve creating something and in order to learn how to paint or hack, you don’t need to take a college course. If you’re passionate enough about something eventually you’ll seek to learn it by yourself, maybe even before college classes. Another thing is, just because someone takes a coding/programming in class college does not necessarily mean they will learn everything or be good at coding. Computer programming languages take time, effort, and dedication to learn and get good at.
Partners: Amanda and Daniil
Initially, our idea was to base our story off of Chef Boyardee’s commercial of the rolling can.
Instead of a more family based plot we were going to make ours romance themed. For the interactivity the user would be able to choose the route the can would take to follow the character home. When we first started shooting, the scenes without the can was fine. However, when we started filming the can scenes we realized that it was extremely difficult to roll a bottle/can on the ground in a straight line.
We decided to scrap the plot and come up with something more simple and less complex but still stick to a rolling can/bottle. The new story line is more ironic and humorous. It’s about three food products (a protein powder, yogurt, and Lay’s chips) that escaped Family Mart because they didn’t want to be eaten. In the end, when all three have escaped they get eaten by a random passerby.
On the website when the user clicks, a introduction video plays. It’s set up so that it seems like the three products have gone missing and the user has to then interact with the website to find out what happens. The explanation for why the products went missing from Family Mart will be at the end, after the user has clicked all the milk cartons. In the last video we were inspired by the Annoying Orange to make the products talk to each other.
Despite the communication problems, I’m glad we were able to overcome them as a group and work together to come up with something new. I helped out with planning some of the scene shots, acting, as well as finding people to help act for some of the scenes.
Initially, we decided to make a project that included the sound of rain from the idea that there are apps that have nature sounds that help people sleep. However, we realized that if we only have a few buttons that played different sounds of nature then there would be almost no interaction. During the first week we had many different ideas revolving around the sound of rain, and in the end we settled for a project that more or less sets a mood as opposed to telling a particular story.
All of our audio tracks are from https://freesound.org/. Some of the tracks were edited to make them shorter.
The overall design of the website is really simple. We chose some simple icon designs to symbolize the sounds. The top left has a button that drops down when you hover over it which reveals more buttons. Each picture includes three audio tracks. The top left button can pause and play all the audio on that page. The button that are revealed when hovered over are the individual sounds that can also be individually paused and played. There are also buttons on both side of each picture that goes to the next one when clicked.
The main speaker button on each images is set as a function that would play or pause all of the three audio on that image.
For each individual audio to play or pause on click, I created a function that would toggle play them. All of the audio are set to loop.
One of the biggest problems that we encountered at first, was that the speaker button that played the all the audio would constantly play the audio from the first image. Later on we figured that it was because the all three of the speaker button onclick was set to the same name.
Some problems that we couldn’t figure out was how to make the audio from one image pause playing when it changes to the other images. Another problem is that if you individually pause each of the audio in the dropdown bar, the main speaker button would not change to the “unmute” image.
Overall, I’m happy with how our project turned out despite the nuances. I think if we had more time we could add more.
Chimamanda’s talk on the dangers of a ‘single story’ is really profound in many ways. She emphasizes why people should avoid making assumptions about a place or person from one perspective. I found her honesty with herself to be really surprising and refreshing when she admitted that she was ashamed of herself for believing in a single story when she went to Mexico. Many of us, including me, are guilty of buying into this single story of certain places or people. I believe the biggest takeaway of this TED talk is to avoid making assumptions from just one story and to not focus on the negativity of those stories because “the single story creates stereotypes, and the problem with stereotypes is not that they are untrue, but that they are incomplete.” Even with technology, it’s extremely easy to create one side of a story of certain countries especially films and even music, but at the same it makes it easier for people to research more on certain places.
After listening to this podcast, I agree that appropriation is subjective. Especially the way different people describe it, some using words such as “theft” and some “borrow” when talking about appropriation. It’s hard to avoid appropriation, evident by these music videos, but I also think that appropriation doesn’t necessarily have to be negative. It can become a good opportunity for different cultures to share and exchange arts and more. It’s also inevitable that many new concepts of art or music is created by combining ideas. On the other hand, it is easy to see how appropriation can go wrong. If someone misrepresents another culture then people can easily misinterpret the culture, especially people who have no previous knowledge about the country.