UX Final Portfolio- Theresa Lin

Project Name: 3D Cake Lab

Partner: Amber Wang

Project Overview (Idea)

Our project concept involves a café that specializes in 3D printing cakes paired with an app service which allows customers to design and customize their cake. They can then choose to send it to the 3D printing machines or choose to have it delivered or for pick up. These customizable designs are great for any occasion – anniversaries, birthdays, holidays, or even just a casual occasion. With the café, it will attract younger customers who are looking for something more than just your ordinary cake and for something to share on social media.

Brainstorm

 

Storyboard/Concept Story

A group of three friends, Jessica, Allie, and Tiffany, are hanging out on a nice Saturday afternoon. They’re wandering around in town wondering what they should do. Then they happen to stumble over the 3D Cake Lab and becomes intrigued by the 3D aspect. They head inside and are surprised by the concept of being able to design their own cake on an app and have it directed printed out in store. They pick up the iPad provided by the café and start designing their own cake. They are surprised at how easy it is to design and are glad that they also have the option to choose pre-existing designs instead of designing the entire cake by scratch. They dragged some shapes and created a cat face. When they were done designing, they click the ‘print now’ option and then sent it to the 3D machine in the café. When their iPad buzzes and alerts them which machine the cake is being printed out on, they hurry and watch the design being 3D printed onto the cake. They watch in awe on how precise the machine is. The waiter then brings the cake to their table and they snap dozens of pictures of their cake. They then post it on their social media and receive hundreds of likes and comments asking them where they are.

Research

Survey:

We conducted an online survey asking people questions regarding their interest in art and designing, their frustrations when ordering cake, what kind of occasion they bought cakes, what aspects of purchasing a cake they prioritized the most, and how much extra they are willing to pay for customization.

Survey Results:

Based on the survey results that we received, people were willing to pay an average of 83 RMB (about 12 USD) extra to customize their cake. The most common occasion that people would purchase a cake is for someone, such as friend’s or family members’, birthdays. People were the most concerned with the taste of cake over price and design. Additionally, about 73% of our respondents were willing to pay extra to custom design their cake.

Interview:

In addition, we conducted a few interviews asking in more detail about the participants thoughts regarding our project idea, how often they visited cafes, the purpose of their visit, when they would buy a cake, their willingness to design a cake, and as well as their struggles when it comes to ordering cakes.

Interview Results:

Some people associated cake with special occasions so they wouldn’t usually purchase a cake on a normal occasion. Some people were only willing to design a cake if it was easy enough and didn’t cost too much extra.

User Flow Chart

We used LucidChart to create the user flow. We wanted users to begin designing their cake as soon as possible. The screen would first start off with a button that says “I want a Cake.” After the user clicks on that, they will then have to choose what cake flavor, frosting flavor, size, and one or two layers of cake they want. Then they will be redirected to the design interface. After the user finishes designing the cake, they will then have the option to choose pick-up, delivery, or print now. Then the user will input their information such as their name, phone number, and address.

Persona

These personas are created based on our research results.

 

Wireframe

Our first wireframe was roughly sketched out with a pencil on paper.

User Testing

We used Marvel to user test with around 5 people. Some helpful suggestions and things they pointed out were

  • If the option to choose the cake flavor and frosting was before designing section, then if they wanted to change the cake flavor/frosting after they finished designing the cake; they’re design will be lost and it’ll be a pain to start all over
  • Show the ‘next’ arrow after the user clicks the button for size/flavor/frosting/layer so it’s more intuitive on what they should do next
  • The wording/phrasing should be friendlier
  • The vertical screen to horizontal screen change is a bit sudden, there should be something to give the users a quick heads up
  • There should be words of encouragement for the users that helps emit positive emotions (such as “great!” or “good job!” or “thank you!”)
  • There should be back buttons added to some places so that the user will not be afraid of making mistakes
  • The page where there’s only 3 buttons that says “Delivery,” “Pick Up,” “Print Now” is confusing (there’s no instructions)
  • There should be a 3D panel on the design interface or else people can’t tell it’s 3D
  • A huge part that we left out was a payment option, so many users were confused as to what the price of the cake was and how to pay
  • Some users who didn’t want to design the entire cake from scratch suggested an option to use pre-designed
  • The order completed page was confusing, users weren’t sure what the number meant

Final Wireframe

Based on the user testing feedback, we implemented many of the suggestions that we received. We changed the wording, switched the order of a few decisions, redesigned the delivery page, and added back buttons to decrease as much user unease as we could.

 

Mockup Process

We wanted bright, cheerful colors such as pink and blue for our app.

Moodboard:

The primary color we chose was #f25459 and secondary #d3fbfb. However, we noticed that the blue was too light and difficult to see.

   

We used Dribbble to see what colors would match with the pink.

For our final mockup we kept #f25459 as the primary color and #ffe098 as the secondary color. The secondary color also resembles the colors of a sponge cake.

     

Logo:

Final Mockup:

     

UXD- User Flow, Survey/Interview, Persona- Amber Wang and Theresa Lin

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.

User Research:

Survey: wjx.cn/m/35090148.aspx

Survey Results:

On average, people are willing to pay 82.97 RMB extra for the customization service.

Persona:

App Redesign

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:

UX Design Documentation- Project Idea + Story Board: 3D Cake Lab

Project Idea:

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.

Story Board:

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.

 

Week 14: Final Project Documentation – Theresa Lin (Chen)

link: http://imanas.shanghai.nyu.edu/~gl1593/Final/unlock.html

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.

Week 12: Response to “A History of Internet Art”- Theresa Lin (Chen)

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.

Week 11: Response to “Computers, Pencils and Brushes”- Theresa Lin (Chen)

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.

Week 11: Response to “Hackers and Painters” – Theresa Lin (Chen)

“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.

Week 11: Video Project Documentation- Theresa Lin (Chen)

http://imanas.shanghai.nyu.edu/~dt1434/commlab/website/index.html

Partners: Amanda and Daniil

Idea:

Initially, our idea was to base our story off of Chef Boyardee’s commercial of the rolling can.

https://youtu.be/Ch8jfsicxVM

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.

Website:

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.

Overall:

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.

 

Week 8: Audio Project Documentation – Theresa Lin (Chen)

http://imanas.shanghai.nyu.edu/~tl2401/Comm_Lab/audioProject/index.html

Idea/Concept:

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.

Audio:

All of our audio tracks are from https://freesound.org/. Some of the tracks were edited to make them shorter.

Design:

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.

Coding:

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.

Week 7: Response to “The Danger of a Single Story” – Theresa Lin (Chen)

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.