Rhino- 3D- Computer Aided Designs (CAD)

Mid-Term Project 

Name: Mehr Un Nisa Javed

Date: 9th April’2019

Professor: Marcela Godoy

Objective: Create a program which makes 3D objects using Grasshopper and Rhino.

Process:

I initially started from this flower which was not an enclosed shape. For this what I did was that I made three circles and then I tried to change their radius and manipulate them into a shape. This is a very famous Islamic pattern shape which I really liked and took as an inspiration for my mid-term project. Initially, I proposed for my midterm project about making a mosque however, it was not very feasible because it firstly, it was hard to turn it into a paramedic design and secondly since it’s such a holy place so I didn’t not want to play around with it.

Here is a photo of my initial shape:

This flower had a lot of small gaps in the centre which are not clearly visible on the photo above but there were which hindered me to add volume to it therefore, I took help from Marcela and asked her for ideas in order to improve the shape. She was very helpful and spent a lot of time in order to fix the several issues I encountered and also helped me to understand the core of them.

These are the few parametric designs I played with and then I got a suggestion to make them look as if they are carved and maybe for better understanding and view I was suggested to change the view settings. Also, I extruded the curve and Marcela helped me to extrude more curves because she said if I wouldn’t do that then if I 3D print then there would be nothing (design) shown and only outer lines would appear which is surely not my intention to do.

I played more with shapes later on and was able to get some cool design for carving on a wooden block.

My final output looked like this: We were supposed to have 10 different images (screenshots) demonstrating the variability of the parametric object I created.Therefore, I changed their radius, divide curve counts, scale, extend curve feature etc to gain 10 different designs.

Here is a photo of the output: 

Grasshopper Code Explanation:

The shape which I created is a combination of two hexagons, two squares, four triangles which would help make the geometric pattern (star pattern). The size of the central star must be well balanced including the shapes surrounding it. In order to create this pattern in an easy version what I did was that first I created three circles and out three sliders with their radius so that they could be altered in alter to vary the shape at the end. Since the three circles I created should be of different sizes for example, one should be the biggest then the two inside should be smaller than the bigger outside one and each other. For this I also added the scale factor for scaling. With the scale factors geometry I joined the divide curves curve and then with the help of Marcela I added the cull pattern to create the star. For that I added the true and false feature so that the lines wouldn’t overlap and there would be a gap between each number. Then , I also added the extend curve feature so that the curves could extend and go out towards the outer circle and then joined the extended curves with the curves of the end point. I also added the shift list feature with the lines and then finally, merged the lines , first divide curve of the circle and the last shift list. Then, I offset the curve with a specified distance by joining the offset with the join curves curve thing. After that, I added boundaries surface which helps to create planar surfaces from a collection of boundary edge curves. I joined this with the offset.Finally, I did extrusion. Extrusion is very vital as it Extrude curves and surfaces along a vector.The vector I set was Unit Z. This was I exuded the boundary surfaces and by a similar way I extruded using Evaluate Surface.

Improvements:

I got some really great suggestion by my fellow colleagues who suggested me to give some purpose to it. For instance, make these designs be a necklace/pendant which would be very useful and can be used by a lot of people no matter if they’re interested in keeping it as an islamic pattern or not. I really appreciate the great suggestion I got and would continue working on them in order to give a meaning to my design. Eventhough, I made a spherical based and put the design on it (can be seen on picture 1 above) so the design could act as a carving. But, I would really want to take my design further and turn it into a daily life object.

Finding Alternatives to Plastic

Name: Mehr Un Nisa Javed

Date: 11th Dec’ 2019

Professor: Marcela Godoy

Objective: Final Project Documentation

Website name: Remade in China Fall 2019

Project Title: Working towards finding sustainable alternatives to Plastics

Why make a Website? Motivation behind it?

I basically created the website because I feel like in the second part of the semester our main shift was on the Bioplastics and I basically found them very cool and a great alternative to the regular plastics. I saw that students in my class were doing some really cool experiments about the Bio-plastics so I thought it would be nice to have a place where we could keep their projects and experimentation safe and also, people outside from our class would be able to seek helps from our class work, comment on our projects and also if they get stuck while doing something we would have a chat box where they could send photos and we would be able to instantly reply (one of the student from the Remade in China class).

I also saw other websites about the Bio-Plastics and found out that they did not have the chat features, experiences of the people, and challenges section so I thought our class website having those would be really cool.

Why make a magazine or basically experiment with it?

I thought that it would be really nice to have a website for the digital part and the magazine for the physical part but then, Marcela suggested me that it would be better to not focus much upon that because earlier people have worked on that and it does not differentiate your work a lot from others so then I thought that it would be better to just keep on working on the website(digital) part.

Project Statement:

My project is basically a way through which the experimentation we did in the class will be able to cater and help a wider audience. I want this website to tackle the issues for finding the homemade alternatives to plastic and Bioplastics being one of them. This website is also an amalgamation of some of the features which previous websites made on this idea have to offer but what makes it different is that it has those features which other websites do not have such as sign up button, login button, add comments button, add your own work button, chat box, attachments etc are some of the features to name.

Research:

These are the three websites about the bioplastics which were most popular about internet. I basically researched the most about bioplastics because I am interested more towards them and even in the website I included more experiments on the Bioplastics.

https://www.bioplasticsmagazine.com/en/

/biomebioplastics.com

www.thinkbioplastic.com

Experience: 

I really enjoyed working on this and I think I was one of those people in the class who sort of gained the most from the final projects because in order to incorporate into the website I nearly read all of my colleagues works and their failures and success. I think that was pretty fruitful.

I also think that this layout of the website can get really successful due to its features and especially the minimalistic design which this website has.

Photos from Class Presentation of the Final Project:

On the above photo you can see the flyers which I made for promoting our class work especially based on the Bio-Plastics. In future, as discussed with Marcela we plan on printing our class flyers on the paper made by Joyce. The paper she made is recyclable paper so it would be nice to promote something about sustainability on something created based on the idea of sustainability.

Also, you can scan the QR code on the poster in order to direct to our website. this is the QR code which I have added below and you can also see it on the poster.

Website features which makes it different from other websites:

  1. It is a student based website working specially in China so it would cater the Chinese students studying at other universities and also the people who just want to experiment with the bioplastics.
  2. It has a chat box feature which would get the people experimenting using our website instant replies if we are online at that time or they could leave a message which we would reply soon. They could also send the attachments of where they went wrong to us and we could see and respond to their queries.
  3. I also have the Events section where they could find out about the recent events happening in Shanghai or all over in China but they would be initiated by the Remade in China students or faculty.
  4. I also added the new section which leads to the monthly newsletter. I want us all to have something to produce a newsletter produced on monthly basis so the people outside the class can see our progress and can look into the new experiments which we have conducted and also in that newsletter talk about the experiments which we want to get done by the next month so that the website audience can anticipate what they will see next month.

Here are some of the photos of those features which I really like:

 

Failures:

I think for me the magazine was a big failure because it did not turn out to be the way I had thought it would turn out to be or at least the impact it would create was very different from the one I had thought of.

I also wanted to code the website fully by myself but I just coded unto a certain point and then I started to have a lot of coding challenges therefore, I resorted to the online website making solution.

Feedback received:

 

I think a lot of people really appreciated my website and found it very interesting. But, one feedback about the “login option” and about the layout really struck me and I would like to work on it in the future.

Next steps:

Today we took a class group photo (on the last day of the classes) and I think on the homepage background I would add that photograph because I think it would give it a more class touch and that’s one improvement I would bring to it by the feedback we received.

I would also like to add the login or sign up option to my website more visible.So, that the people can sign in and then become a part of our website and add the content they want to add.

Improvements which I have made after receiving the feedback on my website:

Now you can see that I have added the button at the top of the website for adding information and also for the signup so that people can signup and become a part of it and add their words and make comments etc.

Also, I received the feedback that this does not look much of a class website so in order to give it more of our class remade in China touch I add the photo from one of our workshops as the website background page.

I have circled above the new two features I have added. The signup and login feature and the add comments feature.

Conclusion

Overall, I really enjoyed doing this project and overall, the entire semester. I feel like I learnt a lot in this class in terms of moving towards more sustainable ways, changing our daily practices, trying to become a more environmental friendly person and trying to love planet more than what we do as of now because we create a lot of trash through our daily chores.

I hope my website is able to reach to a larger audience and more people could work upon it so that it could be improved with further critique. In future I also hope to add a set criteria for adding the posts etc to the website so that the good quality posts could only be found on the website. Overall, I really enjoyed working on my idea and I just hope I can expand more on it in the future and add up more of my individual experiments to it as well.

Note: I have made a separate post named as “Final Experimentation” which included I did also the experiments I did in order to reach the final result.

 

Moodboard and Mockups

 

Wireframe

The hardest part of creating the wireframe was not to get lost in the details. While drawing, I had so many ideas how to make it, but then I realized I don’t have time to make a full website and I have to focus on the key elements for now. The above examples are only a few from the over 20 pages of wireframe.

Prototyping

The first interactive prototype created in Balsamiq:

Then I finalized my color scheme and moodboard:

Site Map + User Flow

I started planning for my website differently. Because there were too many features and I wasn’t sure what would be the most logical set-up, I used card sorting with a couple of my friends to build the website hierarchy. We labelled the different features, and tried to find the most intuitive name and place for every feature.

User Flow

IdeaBoard+UsageStory+StoryBoard

I started the scenerio making by first asking my friends: when would they use a site like this? After that I sketched a story, broke it down to elements and attached the general feeling I wanted the pictures to convey.

A group of friends want to catch up after the long break, but cannot decide where to go or what to do. They get frustrated and angry, but then one of them pulls out SUS, See You Soon, which helps her find suitable options for the occasion. In the end, they had a lovely time together and did not get disappointed.

Idea Board

Usage Story

Story Board

User testing

I used user testing multiple times during the design process, I thought it best to involve an objective outside opinion in almost every phase of the design. I will not list my testers for privacy reasons Some of the most important highlights of these tests:

  1. Always design for EVERYONE. Accessibility in web design is important, we need an inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with disabilities. When I asked my cousin to try the website, he pointed something very important: he had no clue when or with which parts he can interact with. Since he is color blind, the change in color was not sufficient as he pointed it out for me. I realized that there was no feedback when he interacted with a button and the initial color scheme was not suitable for color blind people.
  2. During the designing of the features, I got some useful feedback from the users. For example, I should make sure the symbols used are as straightforward as possible. To symbolize friends, I first used a black-white icon of two girls and some of my friends thought it was an option for gay dating. Another example is when they reminded me to pay attention to the wording: meeting conveys a more serious kind of meet-up, and people thought based on the short description it is a site to help plan work-related, official, business meetings.
  3. Pointed out this website is useful, people won’t come to read about the background story of SUS. So I took out the about page all together.
  4. People don’t like to pay for anything really, they want everything – for free. Because it is not something they would use everyday, they would not buy a subscription. So I put in ads to the final prototype, to see if people are bothered by them or accept them.
  5. Also, my first ideas felt too crowded, the circular shape did not work out for the aesthetics.
  6. On the options page, filters were not at an intuitive spot.

UX Portfolio

The Problem 

I have a curse, I am highly indecisive. But the thought comforts me that I am not alone: basically all my friends are “cursed” as well. You can only imagine the times we try to meet up, every suggestion is either too expensive, too cheap, too far, or too boring so most of the time we end up meeting in the school cafe. So not cool.

During the 7-week course of UX Design at NYU, I was curious to see whether people would be interested in a  website that makes plans for them. Nowadays there are so many options to choose from, and on top of that people are busy. They don’t have time to search on Google for hours for cute, little restaurants or coming up with a out-of-the-box date idea. So, to solve one problem, I designed a website that attempts to to solve planning for them.

User Research, Personas and Scenerio

User Research

After coming up with the idea, my next step was to identify the target users and do some market research. I used various methods to identify the target user and the main competition: online survey, focus group, and one-on-one interviews.

I used Google Forms to collect the data and later analyzed it in Excel. I asked general questions about the users such as gender and age, but I wanted to know more about their plan-making process, internet usage and what features to they value/miss from the competition.

From 21 participants, as Pic1 shows there was a wide range of age, which was surprising as I presumed mostly my fellow classmates would fill out the form.  After However, the gender distribution was not as balanced as the age (Pic2): man were outnumbered in this case. Although the numbers indicate that women should be priority targets, because the number of people completing the survey is so low, I would rather not generalize.

When asking about the planning habits I found a slight contradiction: even though, people usually use their phones more than their computers a day (Pic3), they actually prefer to use their computers while planning (Pic4). When I asked about this during the interviews, participants said they preferred a bigger screen as they are probably juggling with many sites at the same time, planning on a computer is faster, and simply planning is painful enough, they don’t want to suffer through the mini-screen of their phones.

Finally, I found that most apps/sites I connected with helped me solve a problem that also had an emotional effect on me. I was curious how people felt when planning. The results were pretty inconsistent apart from one part: as Pic5 shows, people who said they usually plan together with the other participants of the meeting in general felt more frustrated than the people who prefer planning alone or push the whole task altogether onto someone else.

As I found out later, some of my English speaking older family friends also filled out the survey and gave me an interesting insight to the current situation in Hungary. There are so many options, hundreds of thousands of restaurants are waiting for people to serve but there is not one good website that would sort them out. Moreover, there would be a demand for such a site that is capable of displaying a collection of activities from festivals, through theatrical performances, to bar openings. Upon completing the user research, I realized there is an existent market that does not meet it’s needs in Hungary.

From the Focus Group and the interviews I found out more about personal preferences.Everyone of them was a student at NYU Shanghai, between ages 20-23, girls. I asked similar questions to the survey but went into motivations more deeply. The most important part in these sessions was finding out what attracts visitors to the similar concept ideas like SmartShanghai, Yelp, Chop, Time Out etc. The most attractive feature they had was the location based search and the deals. Originally, I did not think about building a deals section into the project, but at the end I put it there. But most importantly they all reinforced me that they would use a website that would combine a location-based search with the best deals in town.

Personas

I came up with the personas based on the data collected, but I relied more on the interviews in this case to make the characters feels more real. Olivia Wang is based on the Focus Group members, while Marianna is based on my Mother and her group of friends.

Storyboard

I started the scenerio making by first asking my friends: when would they use a site like this? After that I sketched a story, broke it down to elements and attached the general feeling I wanted the pictures to convey.

A group of friends want to catch up after the long break, but cannot decide where to go or what to do. They get frustrated and angry, but then one of them pulls out SUS, See You Soon, which helps her find suitable options for the occasion. In the end, they had a lovely time together and did not get disappointed.

User Flow

I started planning for my website differently. Because there were too many features and I wasn’t sure what would be the most logical set-up, I used card sorting with a couple of my friends to build the website hierarchy. We labelled the different features, and tried to find the most intuitive name and place for every feature.

After this step, I created a User Flow chart:

Wireframe

The hardest part of creating the wireframe was not to get lost in the details. While drawing, I had so many ideas how to make it, but then I realized I don’t have time to make a full website and I have to focus on the key elements for now. The above examples are only a few from the over 20 pages of wireframe.

Usability Testing

I used user testing multiple times during the design process, I thought it best to involve an objective outside opinion in almost every phase of the design. Some of the most important highlights of these tests:

  1. Always design for EVERYONE. Accessibility in web design is important, we need an inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with disabilities. When I asked my cousin to try the website, he pointed something very important: he had no clue when or with which parts he can interact with. Since he is color blind, the change in color was not sufficient as he pointed it out for me. I realized that there was no feedback when he interacted with a button and the initial color scheme was not suitable for color blind people.
  2. During the designing of the features, I got some useful feedback from the users. For example, I should make sure the symbols used are as straightforward as possible. To symbolize friends, I first used a black-white icon of two girls and some of my friends thought it was an option for gay dating. Another example is when they reminded me to pay attention to the wording: meeting conveys a more serious kind of meet-up, and people thought based on the short description it is a site to help plan work-related, official, business meetings.
  3. Pointed out this website is useful, people won’t come to read about the background story of SUS. So I took out the about page all together.
  4. People don’t like to pay for anything really, they want everything – for free. Because it is not something they would use everyday, they would not buy a subscription. So I put in ads to the final prototype, to see if people are bothered by them or accept them.
  5. Also, my first ideas felt too crowded, the circular shape did not work out for the aesthetics.

Prototyping

The first interactive prototype created in Balsamiq:

Then I finalized my color scheme and moodboard:

Then I tried Adobe XD and Marvel, creating my high-fidelity frames in Photoshop.

Final Outcome 

You can try the prototype on Marvel: https://marvelapp.com/1djib766

UX Final Project: 知性 (Zhi Xing) App | Yang Gao

Name

知性 Zhi Xing (Know about sex)

Description

知性 (Zhi Xing) is a sex education IOS App for Chinese children who under 18 years old and their parents.

It shows different contents to the users based on their age.

 

Motivation
Ideation

In 2007, a Taiwan female writer Lin Yihan committed suicide after publishing her novel Fang Siqi’s first love paradise, an autobiographical novel about her life. She was sexual assaulted by her literature teacher since she was 13 years old. In the same year, the red yellow blue kindergarten incident also caught many attention.

People has found out that lack of sex education has caused lots of health issues and social problems in China. Sex accompany a person from birth to death. Many people in China think that sex only belongs to heathy adults, sex only equals to sexual behavior. However, sex not only contains biological sex, but also contains phycological and sociological sex. The skin touch feeling the infant has, children’s understanding about gender, youth falling love, adults getting married…all belong to sex.

So I think a sex education App will be a very good product to help parents understand sex education knowledge and education method, and an interesting and effective way for children to know about sex.

“Sex education from family and school is very important. If the educators do not teach them sexual knowledge at the appropriate time, they will also get it from other ways, which are usually not good.”——Lu Xun

Brainstorm Poster

Brainstorming Poster

During the class, I made a brainstorming poster. The main idea is to provide different forms of contents including online courses, interactive stories, cartoon, online community, some offline activities. Various content will make the learning process more interesting and the children will not feel that they are ‘taking a course’. The main goal is to make this app fun and easy accepted.

User Research, Personas, and Scenarios
Online survey

The survey content:

I divided the survey into 3 parts:

  1. Basic Information
  2. How do they implement sex education and the difficulties of it
  3. What kind of content do they prefer.

From the Questionnaire I found hat:

  • Sexual curiosity is a normal feature of childhood.
  • The parents pay much attention to children’s self-protection and privacy protect but do not teach their kids sexual knowledge voluntarily.
  • They do not reject sex education and know the importance of it, but they do not know how to teach them correctly.
  • Most parents learn how to educate child by reading articles like WeChat Official Account and enjoy parent-children learn sexual knowledge.
Interview:

The interview part gave me lots of inspiration and courage.

 

 

 

 

After the online survey, I interviewed some parents and get many ideas about making the App.

“I think prepositive sex education is necessary. I gave my son the sex education when he was very young, like 2-3 years old in a non-metaphor way. So when he gets older, he knows about sex, and will not try to find everywhere about sex education, because he knows it when he was very young.”

——Psychology major, mom, teenage son

“If there’s some parent-kid interactive play/offline classroom, I would like to go there first by myself to filter the activities.”

——Mom, 6 year-old daughter

“When I was pregnant with the younger brother, I tell my young daughter everything about pregnancy and having a baby. She thinks it is magical and I think showing her in the most direct way is very good sex education.”

——Mom, 5 year-old daughter, 1 month son

“I will give my young daughter sex education in a metaphor way, like dad planted a seed in mom’s body, etc.”

—— Mom, 4 year-old son, 10 year-old daughter

From the interview part, I realized that the sex education app is very necessity for children and their parents. Besides, the safety of this App also need to be promised.

Personas and Scenarios

I then built the personas based on the interview and online survey.

1⃣  The first one is a mom for a teenage boy.

When children reach teenage age, they usually do not tend to ask their parents question instead of finding the answer themselves. And this is the time that they’re the most interesting the topic of sex. However, nowadays, there barely have appropriate sex education online, how can they find the right way? Many teenage boys and girls always watch porns, see yellow website, read porn literature to get sex education.

This mother is a counselor in college and she knows the importance of prepositive education. She gave her son sex education when he was like 2-3 years old, and when her son grows up, he knows about sex and do not that curious about it and knows where to find the appropriate knowledge.

2⃣  

3⃣

Story Board

I think about three short stories related to this App. I marked field of shooting scale and description of each shot under the picture👇

User Flow

I created the user flow using draw.io website, basically, the user need to import their age to go to the specific section. And people can always go to the page for people under their age (i.e. 6-12 years old children can go tot eh 3-6 years old children section)

Wireframe

I made the wireframe using Balsamiq software.

Main Log in Page

Choose your Identity

Parent Log in

Children Log in

For 3-6 year-old-kids:

For 6-12 year-old-kids:

For 12-18 year-old-kids:

For Parents:

Usability Test

I showed the wireframe to many people to test and got some very useful feedback:

  1. Sign out button/private code to open it. Given the situation in China, currently, people may see sex education as a relative private thing, especially for young children like 12-18 years old.
  2. Give people more topic choices on the education part/courses. “I would like to be more efficient when I want to watch a course, even tough it is short”.
  3. Really like the community Idea, especially as parents, sometimes listening to other people’s advice and see other people have similar story will be very helpful.
  4. DIY section is very good. “My daughter is a big fan of DIY, this way will make the learning process very interesting and I’ll say, efficient and direct”
  5. Give the user a ‘return’ button.
  6. One suggestion: make the App cute so that children will like it more.
  7. “What kind of game is in the game section? It is not very clear in the wireframe. “
Design

Based on people’s feedback , I designed the final look of the App in Sketch. To better developed the APP, I focus on the section of 3-6 year old children.

Icon
Mock Up

Here’s the interface of the APP:

Log In Page

Children Log in

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Game Section

Cartoon Section

DIY Section

About Me Section

Prototype

Here’s a short prototype video:

Poster

APP Poster

Future Development

From the presentation, I got many valuable feedback from the professor and classmates:

  1. For one group, I need to make more personas. Different parents have different educational ways for the children and different children and different personalities. The parent and children I listed were a kind of parent, but there are also other typical types of people.
  2. For the visual design, try to match the style with together.
  3. For the App, the icon seems isolated with the content, try to pick an identity color.
  4. The DIY section is a little bit confused without explanation, try to change it to DIY Purchase/Shopping, etc.

I would absolutely love to further develop the APP. This topic is lack in China and I feel we need to fill the blank. This APP might not gonna change the situation in China completely, but I’m sure it will make some differences to children and parents.

Reference
  • Pinterest. com
  • Behance.com
  • Dribbble.com
  • 《近年来中国学前儿童性教育研究状况评析》
  • 《小学生性教育研究的回顾与探讨》
  • 《医学生对艾滋病及性教育的认知调查研究》
  • 《有效预防性侵害离不开性教育》
  • 《家庭性教育是预防儿童性侵害的重要防线》
  • 《美国的性教育模式及其启示》
  • 《在绘本故事中渗透幼儿性教育》
  • 《中美小学性教育比较研究》
  • 《学校性教育政策的国际间比较》
  • 《温州市大学生性教育、性观念及性行为状况调查》
  • 《微信公众平台对大学生性知识传播的影响》
  • 《四种性教育方式在生物教学中的运用分析》
  • 《3-6岁幼儿的家庭“性启蒙”教育》

 

Special Thanks to

Professor Azure Tianran Qian

 

 

UX Final Portfolio | Amber Wang

Project: 3D Cake Lab

Project contributed by: Amber Wang and Theresa Lin

Instructor: Azure Qian

Motivation and Brainstorm

In today’s world, customization and personalization have become a heated trend. Not only shoes, clothes and bag designs allow customization option, food industry has widely accepted this new idea as well. During my study away year at NYU New York, I had many good experiences customizing my own salad or pizza in my everyday life. As a dessert lover, I have long wished to customize my own coffee and cake. At the same time, I have become obsessed with 3D technology since my second IMA class in my sophomore year. I have taken two more IMA classes related to 3D technology in New York. I not only had a better idea of the technology as well as the information-sharing online community related to 3D, but also was able to envision the broad application of the technology in all different industries. The classes enabled me to realize the possible combination of my two interests to focus on the implementation of the technology in food industry. My initial idea was to create the customizable latte art with the milk foam on the top of the coffee. During my research, I found an Israel company called Ripples has already made a breakthrough in this field. However, the coffee art only consist 2D design, while a cake could naturally provide a 3D design base. As a business major student, I have continued to push forward the 3D cake idea in the Entrepreneurship class at NYU Stern, and my business plan was selected by the judge investors among other 50 peer students.

The idea I have in mind is to open a 3D cake design bakery that allows customers to customize their cakes using 3D modeling apps on mobile phones and tablets. The bakery allows online ordering as well as in-store interactive experiences. One major form would be a 3D modeling App that is very user-friendly. The interface would be similar to Tinkercad website. The users could simply use their fingers to drag the basic 3D objects (cubes, balls, characters, texts ,etc.) to the working surface (the 3D cake model), scale them and change different colors and shapes. They could also use these basic shapes to design their own characters. The bakery would have an interactive open space for customers to actually see their cakes being printed from the 3D printers. There would also be an interactive projected screen for customers to upload their own designs and vote for the best design.

For this course, I want to mainly focus on the user experience design of the mobile App for 3D cake customization design. The brainstorm of the idea is demonstrated as follows:

Story Board

 

It was a beautiful weekend afternoon. Three best friends Amy, Lisa and Catherine were walking aimlessly on the street. Since they were the coolest girls at school, they decided to go to some really cool place to spend their afternoon. Somewhere they could take very attractive pictures and post on Instagram.

 

Lisa recently heard that a new bakery opened nearby. They decided to give it a try. “3D Cake Lab…?” They were attracted to the modern design of the cafe. There were no waiters to serve them. Rather they had a big iPad in front of them.

On the interface, there were all different 3D shapes on the right side of the screen. Catherine dragged one ball and two pyramids to create a shape of cat. Lisa and Amy also joined the design. They changed the color of the cake to pink and typed “Happy Day” on the surface of the cake. After pressing the “submit” button, they received their order number. 15 minutes later, the iPad vibrated. They were then directed to a 3D printing machine. They couldn’t believe their eyes. What they have designed in the App was actually being printed out as a real cake!!!!!!

They brought their cute cake back to the table. They celebrated their friendship. They took a picture of the cake a selfie, and then posted them on the Instagram. In just 30 minutes, they have received 12 million likes! What an amazing day!

 

User Research

In order to get a better sense of our customers and end users of 3d cake design application, we have sent out surveys through WeChat mini program Wenjuanxing. We have in total received 44 responses. The result of the survey is as follows:

The age range of the survey participants was from 10 to 43 with the average age 21 years old. Based on the survey, we got a lot of helpful information:

  1. Half of the participants are interested in design/DIY, art, technology, and digital products. They are the target group that has higher possibility for using our product.
  2. It shows that most people purchase cake on special date such as birthday or anniversary to someone they really care, like their parents, friends or lovers, which indicates in some sense that the customization may be a good option for those people in these occasions.
  3. Top three considerations for people when they purchase a cake are taste/flavor, design and price. This result help us position our product to provide customers with choosable flavors, self design and reasonable price. It also support our initial hypothesis that design really matters in bakery sector.
  4. We are glad to see that more than 70% of people are willing to pay extra fee for the customization option with average 83RMB premium.

In addition to the survey, we have also conducted interviews with people about this application and they all show pure interests in our product. The interviews help us consolidate our belief that this product is actually helpful for most people.

Persona and Scenarios

Based on the survey results we got, we have designed 4 personas with the heroes’ scenarios of using our product. Overview of 2 personas are as follows: (please view my previous post for all 4 personas)

Michael Sun

It is almost their 5th anniversary. Michael has been searching around for the best place to celebrate their anniversary. Michael is such a crazy worker that he hardly has time left for his family. He really needs an amazing date to cheer his beautiful wife up. Money is not a big problem for Michael, a banker. He wants the date to be the combination of his interests in technology and his wife’s love in design. Then 3D cake lab becomes his optimal choice.

Michael and his wife Susan walked into the mysterious modern cafe called “3D Cake Lab”. They were assigned to a beautifully decorated couch with an iPad on it. The interface asked them to “Start Your Design” with a simple click. Then they were led to choose their cake size, layers and flavor. “6 inch should be enough… honey you like chocolate, lets choose the chocolate base flavor.” After they were done, a magic 3D modeling design interface appeared. There were tons of different basic 3D shape on the right side bar. Susan was very excited about the designing process. She expertly dragged a ball shape and two pyramids to create a shape of cat. She happily played with the different characters, colors, and texts. “Happy Anniversary!” Michael added the text on the top of the cake with a beautiful font and a rosy color. Then they were asked whether to upload their design to the big screen in the cafe. Susan clicked “YES!”. “I want to share this beautiful moment with everyone here!” They got an order number and was told by the interface there were only 3 more orders before them. After 15 minutes, the iPad vibrated and made sounds. They were instructed to go to machine No. 12. Michael couldn’t wait to show Susan the most cutting-edge 3D cake printer. They ran to the machine and saw the cake being printed out. “It is so amazing!This is the best anniversary I have ever had! I love you Michael!” Susan said.

Jessica Lai
Jessica Lai loves to hang out with her friends at cafes especially when they have to study. She loves exploring different kinds of dessert and beverages while at cafes. One day, while she was walking around the city looking for a new cafe with her friends, they stumbled upon the “3D Cake Lab.” The name peaked their curiosity and they went in to have a look. When they were shown to their table, they were surprised that they could design their own cake. They each picked up an iPad with the screen “Start Design.” They each chose a single serving size cake as well as cake flavor and icing then immediately began to design. They were surprised by how simple the interface was and how easy it made the designing process. They searched for pictures of their favorite character and attempted to design it on the cake. When they were done, they were given a choice to upload their design. Jessica felt confident in her design so she uploaded hers while some of her other friends didn’t. Then they chose the print now option and each received a number. When the cake was about to start printing, the iPad buzzed and displayed the number machine. They all hurry to the machine and watch in awe as the design is 3D printed on the cake. When it’s done, they all pull out their phones and start taking pictures for Instagram. Jessica captions her post, “Omg you guys HAVE to come here to design your own cake if you haven’t yet!!! It’s 3D printed!”
Jessica and her friends feel like it’s a waste eating their masterpiece, but they take a bite and decide that they’re definitely coming back again.

User Flow and Site Map

As is shown in the user flow, we want the customer to choose their cake size and layers first and then direct them to the main design interface. When the user finish their design, they will have the option to upload their design into our global design library or rather directly go to the payment page. In the payment page, they would choose to either deliver the cake to their home, pick up in store in a future time, or print it out now.

Site map:

 

Business Model

Based on Prof. Azure Qian’s feedback on our project, we have further brainstormed on the business model of the product. Since the major problem of this product may be the customer retention problem. It is a common concern that people may only buy cake once or twice a year. In order to make the business have continuous profits, we have added additional features.

  1. As is discussed before, users have the option to upload their design to our global library. At the same time, users with less or little background in design and art can easily browse our online design library to choose others’ designs. Once a person’s design is used by others, he or she would get noticed in our App and gain membership points. We would also announce the winner of our monthly best design and give out coupons for buying cake or having afternoon tea in our 3D Cake Lab cafe. By doing this, users with no cake-buying need may also use our Apps during free time and upload for the chance to win our coupons. They would also be stimulated to buy our cake and experience our cafe.
  2. One important component of the our business apart from the 3D cake design App is our physical store – the cafe. Our revenue would not only come from customers who buy birthday or anniversary cakes, but also customers who spend their leisure time with friends and family in our cafe with interesting human-machine interactions. We would further provide smaller-size dessert cake for those customers to eat while drinking their afternoon tea or coffee.
  3. We would take advantage of today’s online platform and have social media influencers to experience and advertise our product.
  4. *Additional marketing and financial analysis  (Cited from my previous business class):

 

Wireframe

First Version

We designed our first version wireframes using pencil and paper. We used Marvel to make these wireframes interactive and did our first round usability test. Based on the result of the usability test, we designed our second/final version using Adobe XD.

 

Final Version

 

 

Mockups and LOGO 

First Version

To align with the topic of cake, we decided to use blue and pink as our main and secondary colors. We chose our two colors from color-hex.com/color-palettes/. The hex values are #D6FCFF and #ff8080. We also used Piktochart to edit our interface background. We added the effect of colorful short lines because it resembles the toppings on a cake.

However, during the in-class discussion with professor Azure Qian and another designer, they pointed out the problem with the visibility of our background color. According to their experience, App design usually use colors with higher saturation. The blue color is definitely too light as our primary color. Besides, the gray bar doesn’t have that clear contrast with he background, which makes the text not clearly visible. Taking all these feedbacks, we have designed our second version mockup.

Second Version (Final Version)

We decided to go with the pink color as our primary color for the cake theme and searched the color palette on Dribbble.

The final version: primary color pink #f25469, secondary color yellow #ffe098, minor color gray #EAEAEA

LOGO design

The logo is a 3-layer cakes with a half donut. It resembles the character 3D.

Usability Test

Some really important feedback were given through user testing especially on our first prototype. In our first prototype, the option to choose the cake flavor and frosting was at the beginning and each in a separate page. Some users were concerned that towards the end if they wanted to change the cake flavor or frosting, they’d have to go all the way back to the beginning and lose progress on other choices. On the design interface, some users also preferred to have already finished designs as options to drag and drop on the cake rather than design the entire cake from scratch. Users also pointed out that there was no payment page on our first prototype. We then incorporated a payment page and the delivery section on one. Overall users said our app was generally easy to understand and navigate.

We did another round of user testing on our second prototype. We have received many feedbacks and good suggestions for our 3D design interface. A common impression of this interface to users is that it is childish cartoonish. They could immediately be indicated that they were supposed to tap and dragged the basic 3D shapes to the interface. However, some have concern that they couldn’t properly position the shapes on the cake. And it would be better if there’s an auto-filling options, like cube holes on different places of the cake for user to put in the shapes they chose, which could give them a better proportion and position which is aesthetic. Some also suggests to change the interface to be more realistic, like a real cake. Users have the concern that a cartoonish interface may be misleading and they want to know how the real cake look like. They suggest that the 3D shapes on the tool bars should also look like realistic cake components. Another suggestion come from the users is to have a search bar on the top of the 3D shapes tool bar for users to type in the shapes they want. eg. flowers, dogs, etc.

Highlight of usability test:

Final Demo

 

Documented by Amber Wang

Special thanks to my instructor Prof. Azure Qian and my partner Theresa Lin.

 

 

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: