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:

     

Callum&Catt Final UX Documentation

Motivation

Though we had a couple different initial ideas, our shared experience of traveling + study away semesters helped us arrive at the idea of GUiDIO, a free, downloadable audio guide app for museums and historic sites around the world. The idea behind GUiDIO is to offer a cheaper, more interesting alternative to those travelers who may not understand exactly what they’re looking at. Not only that, but with GUiDIO being used via smartphone and the user’s headphones, there’s no worrying about the clunky devices you get at museums normally, sanitation, and returning equipment.

This is our map for the app. As you can see, there’s a lot of emphasis on making the app convenient for travelers, and we wanted to make it a smartphone app so it would be easily accessible on the go. Our target demographic is millennials who love to travel, but simply don’t have the budget to afford the luxury amenities like a personal guide or tour group. Our app offers not only a personalized go at your own pace service, but it allows the user to dive into deeper topics they are interested in.

 

Storyboard

Next we began creating our storyboard for the app.

This was from our breakfast meeting at school to finish up the work we started in class! Using post it notes, we created a story for our app. We had a rough idea of what we wanted to portray, and after a couple of different version and sketches we had something we were proud of.

We also used the app Evernote to organize our work. Below are photos taken with the app of each individual step.

This is our traveller Kevin. He’s a student on a budget, but excited to spend some time in Europe!

 

He starts off his trip in France. He’s excited to see what this new country and culture have to offer.

 

He arrives at the Louvre Museum and is amazed by the beauty!

 

However, he quickly realizes that it’s a huge museum, and without the money for private tours or guides he’s lost and confused! He visits the Mona Lisa knowing it’s famous, but doesn’t understand any of the history or background.

 

Soon, however, he talks to another traveller, who tells him about GUiDIO, a free audio guide app tailored for each individual! This is our Aha moment, as not only does Kevin find the solution to his travelling problems, but word of mouth and testimonials are important parts of spreading the word about GUiDIO.


 

He quickly gets his phone out- previously filled with frantic searches trying to figure out what he was looking at- and eagerly downloads GUiDIO.

He continues to walk through the museum, GUiDIO conveniently giving him background, history, and context in a fun, easy to understand way. He uses the app for the rest of the trip, and tells all his friends about it, too.

 

User Research, Personas, and Scenarios

For the next step of the interactive process of creating a portfolio, we were tasked with understanding our user. In order to do this we had to do a few key tasks including:

  1. Create a survey and separate the questions into two categories. One for Quantitative data or numerical data them demonstrates the who, what, when, and where. The other for Qualitative data, which is non numerical data that shows you the why and how.
  2. Interview people to get more qualitative research.
  3. Create personas of who we believe our users are.

Step 1: Survey

We created a survey using Google forms and distributed it to students both at and out of NYUSH as well as other people in our lives. The questions are as follows:

  1. What is your gender?*
    1. Male
    2. Female
    3. Other/prefer not to say
  2. What is your age?*
    1. <18
    2. 18-25
    3. 26-35
    4. 36-45
    5. 46-55
    6. 56+
  3. What is your profession?
    1. Student
    2. Unemployed
    3. Type in
  4. What is your current income?*
    1. 0-4999 USD
    2. 5000-14,999 USD
    3. 15,000-39,999 USD
    4. 40,000-59,999 USD
    5. 60,000-79,999 USD
    6. 80,000-99,999 USD
    7. 100,000+ USD
    8. Prefer not to answer
  5. How often do you go to museums?*
    1. Every week or more
    2. 1-2 times a month
    3. A few times a year
    4. Only when on vacation/in a new place
    5. A few times in my life
    6. Never
  6. Do you mostly go to museums
    1. In the city/place you are living
    2. While on vacation/somewhere new
    3. Both
    4. Never
  7. What type of museum do you usually go to (check all that apply)?
    1. Art/design
    2. Science/technology
    3. History
    4. Oceanographic
    5. Folklore/culture
    6. Other
  8. How often do you bring your smartphone when you go to museums?*
    1. Always
    2. Most of the time
    3. Sometimes
    4. Never
  9. Have you ever had an audio guide or tour of a museum?*
    1. Yes
    2. No
  10. If yes, what did you like about the experience?
  11. If yes, what did you dislike about the experience?
  12. Overall, do you enjoy having some guidance in museums?
    1. Yes
    2. No
  13. What aspects would you like in an audio/tour guide? (Mark all that apply)
    1. Personalized guides that cater to what you like
    2. History
    3. Context/culture
    4. Guidance/recommendations of where to go within the museum
    5. Easy to listen to/not boring or jargon-y
    6. In depth guide to the whole museum
    7. “Cliffnotes” guide that only shows you the highlights in a short amount of time
  14. If free, would you use an audio guide app on your smartphone?*
    1. Yes
    2. No

* Starred questions are quantitative data

The results are as follows:

We found that the most noteworthy results were that most students do go to museums multiple times a year and were interested in using an audioguide app like GUiDIO, also that people liked having guidance in museums but sometimes found the provided options boring, technical, and clunky.

Step 2, Interviews

Interview 1: Puja Chandramohan

  1. What is your name, age, and occupation
    1. Puja Chandramohan, 21, employed in a marketing position
  2. How often do you go to museums?
    1. I would say once every two months, approximately. If I’m traveling then it’s at least once/trip
  3. How often do you travel?
    1. Every time I get a break, usually a few weeks in the summer or in the winter
  4. What type of museums do you go to?
    1. In Shanghai, or the place that I’m living long term, I’m usually more interested in art or culture…. Especially if they’re pop up museums, just to see something new. But if I’m traveling, I’m more interested in the history, but I’m also open to famous art museum?
  5. Have you ever had an audio/tour guide in a museum? Did you find it helpful? Why or why not?
    1. Yes, not always, but there have times where I have opted to … partake.
    2. Yeah, I can’t recall a time where I’ve ever been unhappy with a tour. I’ve almost always felt the tour guide was offering insight you couldn’t just read off the walls or look up online. There were usually… with the tour guide that’s when you can get to know the lesser known facts about the site. It’s easier to understand… if you have limited time, what are the spots you should go see for sure. With the audioguide you kind of are in more control
  6. Do you think audio/tour guides are helpful in general (even if you don’t use them)? Why or why not?
    1. I would say yes. I also think it depends, cause I know a fair amount of people that do enjoy researching on their own, and are very well educated on the place that they’re visiting, so I’ve traveled with companions that don’t like or they end up questioning the validity of what’s being said by a tour guide. With an audioguide it’s hosted by the site and it’s usually info that’s more common knowledge, I think that’s what differentiates the two. I’m personally not one that will research too much into the site
  7. What aspects are most important to you in an audio/tour guide?
    1. If you have limited time, you’re getting a lot of engagement, a tour guide is friendly, makes it less complex, like an expedited cliff notes version where you can get to know quickly, and in a much more friendly manner what sites you should see…. It’s a lot easier than having a monotone voice, going on fora long time, and reading off the walls. I think that was the biggest take away for me. And sometimes I’ve had a couple experiences where the tour guides have shown me secret places and stuff. You just gotta be lucky.
  8. If there was a free audio guide app on your phone would you use it? Why or why not?
    1. I would use it. I feel like my phone’s always on me anyways, and if you’re allowed to take pictures it would be easy to [use] it with one hand
  9. Are there any features you can think of that you’d want?
    1. I would say, maybe like options that are available to the user, like if they want to focus more on the history, or if they wan to know art and cultural facts, and definitely an option for an expedited tour, like “oh i just want to know the big places to go so i can cross this off my bucket list”

  1. What is your name, age, and occupation?
    1. My name is Luca, I’m 23, and I’m a student
  2. How often do you go to museums?
    1. I think once or twice a month, maybe, but I only go to things that interest me.
  3. What type of museums do you go to?
    1. I like history museums a lot, talk about specific topics, I usually don’t go to random museums just to see like art. If it’s not a specific event I usually don’t go.
  4. Have you ever had an audio/tour guide in a museum? Did you find it helpful? Why or why not?
    1. Sometimes I do. I find them helpful if they have like preset tours where they tell you where to move around, especially if it’s a big museum, I don’t find them useful if you just have to walk around and whenever you are in front of something you press something. [I like when] they recommend you, give you directions.
    2. I like when they recommend you and also when they have different tours for different interests and also when they have tours that explore, like particular aspects of the museum, particular artists, when there’s a theme behind what I’m doing.
  5. How often do you use audio guides at museums?
    1. Usually depends if it’s included in the ticket or not.
  6. Have you ever paid for an audio guide?
    1. No
  7. If there was a free audio guide app on your phone would you use it? Why or why not?
    1. Yeah, I would definitely use it. I mean, if it needs internet access, I don’t know if I would use it. But yeah I would definitely use it, it’s comfortable it’s on your phone, you can hear it just with your headphones.
  8. Are there any features you can think of that you’d want?
    1. Maybe have a map, besides just a guide, of the museum on it

  1. What is your name, age, and occupation?
    1. 20, Christopher, currently working on business in shanghai
  2. How often do you go to museums?
    1. Only when i travel with my family, 4-5 in a year, maybe 7
  3. What type of museums do you go to?
    1. Mostly contemporary or old masters (art museums)
  4. Have you ever had an audio/tour guide in a museum? Did you find it helpful? Why or why not?
    1. No
  5. Do you think audio/tour guides are helpful in general (even if you don’t use them)? Why or why not?
    1. I could see why people use them, i just personally don’t, i enjoy just more reading about paintings i like rather than dealing with the whole audiobook system
  6. What aspects are most important to you in an audio/tour guide?
    1. Just like what to see, easy user interface. I know they’re pretty cheap pieces of technology, so just user interface in general
  7. If there was a free audio guide app on your phone would you use it? Why or why not?
    1. Yeah probably for like certain museums or exhibitions, if it’s something im really interested
  8. Are there any features you can think of that you’d want?
    1. I think downloadable, probably other info about the museum like opening hours, rules, fees, an overview of the museum

  1. What is your name, age, and occupation?
    1. Floyd Son, study in Shanghai, 22
  2. How often do you go to museums?
    1. In mainland China, i don’t really go, but when im visiting other countries, i’ll go. Maybe like 10 times/year
  3. What type of museums do you go to?
    1. I vary. I tend to go to art museums than anything else
  4. Have you ever had an audio/tour guide in a museum? Did you find it helpful? Why or why not?
    1. No.
  5. Do you think audio/tour guides are helpful in general (even if you don’t use them)? Why or why not?
    1. I don’t think so unless… unless you’re actually disabled it might come in handy.
    2. No i still don’t think it’s useful. Cause if you know about all the art pieces… if you know about it, you already know about it.
    3. I’ve never used one in my life. When I see people walking around with audio sets I thought it was kind of dumb.
  6. What aspects are most important to you in an audio/tour guide?
  7. If there was a free audio guide app on your phone would you use it? Why or why not?
    1. No
  8. Are there any features you can think of that you’d want?
    1. If they had it i would try it out and see what the difference is, and my opinion
    2. Probably recs on what to see in the museum and brief summary about, in this case, artwork and the artist. Something like that.

  1. What is your name, age, and occupation?
    1. Helena Ma, 21, full time student
  2. How often do you go to museums?
    1. Not very often, only when I travel. I go to museums like 2-3 times a year
  3. What type of museums do you go to?
    1. All kinds, science, art, history. Art
  4. Have you ever had an audio/tour guide in a museum? Did you find it helpful? Why or why not?
    1. I have but it was only through like school trips where it was required. Personally I just don’t have the interest in a lot of the exhibits/art, so when the guides talk about it they talk about it for a really long time cause they’re really passionate, so i get bored after the first 3 sentences
  5. Do you think audio/tour guides are helpful in general (even if you don’t use them)? Why or why not?
    1. Yeah, I think it’s good fo the people that would share the same passion and is really truly interested, it’s nice to have someone who has the knowledge
  6. What aspects are most important to you in an audio/tour guide?
    1. The only audioguides I’ve ever experience were really old, clunky, outdated, they seemed dirty, they were very mundane and boring and monotone. You walk up to the exhibit, you click the button of the exhibit and they give you a brief description. There’s definitely ways to make them more interesting, I just find them boring. Cause there’s still a written description next to it so you can just read it
  7. If there was a free audio guide app on your phone would you use it? Why or why not?
    1. No
  8. Are there any features you can think of that you’d want?
    1. Interactive. I guess that’s about it.
    2. I think the whole interactive thing right now is getting big, like Bandersnatch, so if an audioguide- like if there was some kind of game within the audioguide, like the option to play a game within the museum
    3. Otherwise museums is just walking around.

Part 3: Personas and scenarios

“I want to make the most out of every experience and get the most value out of it”

Michael Scott is our first character persona. He’s a single, 24 year old teacher who loves to go to museums and learn, but he’s often overwhelmed with all the options and so doesn’t do it as much as he would like to.

“I never had the chance to explore before, so I made my own”

Next is Rose Smith, our oldest persona She’s 28 and recently unemployed, preparing for a two month long trip around the world. She was interested in museums growing up, but doesn’t go them often, but plans to on her upcoming vacation.

“I want to explore and travel while I’m still young”

Jenny Martin is a student who doesn’t often go to museums, however, she is on her study away semester and plans to start. 

“I want to find a way to make learning and exploring fun again”

Kevin Byrne is also a student. He reads a lot but doesn’t go to museums often. However, he is hoping to change that and explore more.

 

We chose these personas because they represent a range of different types of people and personalities in our target market of young, budget travelers. From frequent museum goers to those who only go a few times a year, our users are looking to get different things out of GUiDIO but share the commonality of the need for our app.

 

User Flow and Wire Frame

Next we worked on the user flow and wire frame. We first started both in class; the user flow we did on paper originally, trying to just get our ideas down, but it was very difficult and ended up being messy and incomplete:

 

Afterwards, however, we began to make an online version, which was a lot cleaner and easier for us to use. Our final user flow looks like this:

As you can see, you’re prompted to login, then you can choose what museum you’re looking for and start the guide. Throughout the guide you are given the choice to “dive deeper” into topics that interest you, and when the guide ends you are asked to review the guide and go back to pick a different museum to explore.

Next, we worked on our wireframe. We used Balsamiq to make a more visual mockup of our app, which is as follows:

We actually ended up changing the look of our app quite a lot, but the original ideas are still there.

 

Usability Testing

Next, we had several students test the usability of our wireframe. We did one trial usability test in class with Franklin, and we did four others outside of class; they were all students aged 20-22 from multiple countries and schools.

Franklin

Student; 3 hr something min/day on phone; Wechat

Usability Issues:

  1. Text is a little small (hard to see)
  2. A “submit” button on the questions so that you can change your answers
  3. Tries to scroll but can’t
  • Likes the recommendations***
  • Would use it when travelling bc he prepares/researches a lot before travel
  • Clear invitation of where to start
  • Include a “back” button
  • “Don’t make me think”

 

Helena Ma

Student; 4-5 hours/day; Instagram, Youtube, Wechat, Didi, Eleme

  • Thought the initial questions were a little weird, would have preferred to just choose what museum she wanted (didn’t seem like she would just scroll through the app, would only use it for a reason with a set destination in mind)

Usability Issues:

  1. Font was unattractive
  2. Wished to “skip” on the questions
  3. Wished you could go back on the questions

 

Floyd Son

Student; 15 hours/week; Wechat, Instagram, Baidu

  • Seemed to like the idea of it
  • Thought it was visually appealing even though he’s not sure he would use it himself

Usability Issues:

  1. Didn’t want to sign in
  2. Didn’t want to answer the questions
  3. Text was hard to read

 

Rhys Dhinsa

Student; 8 hours/week; Instagram, Wechat, snapchat

  • Liked the name/slogan of the app
  • Liked the recommendation option
  • Wondered what the “dive deeper” option was next to “play audioguide” option

Usability Issues:

  1. Text was hard to read
  2. If you can jump around to different times once the audioguide had started
  3. Font was small

 

Arshaun Darabnia

Student; 10 hours/week; Instagram, Whatsapp, Facebook

  • Seemed interested in the concept
  • Wondered aloud about the cities we chose to include, about how many cities/museums/options there were
  • Liked the recommendation aspect but wondered how accurate it could be

 

It seemed like two common dislikes were the text and the sign in process with questions, which if there is two things wrong these are the ideal things as the text/font had not yet been chosen and the sign in process is generally not included as it can be extremely tedious. So then looking a the comments overall, it seemed a lot of people enjoyed the idea and considered using it.

In terms of color scheme, we chose to play with blue and yellow because blue is generally calming and yellow is warm and happy, so I think given our slogan of “The Happy Traveler” it makes sense.

To really get into and understand the theme we chose, we also made a Pinterest moodboard. We included aesthetically pleasing photos of our color scheme of blue and yellow, and also looked at other apps and articles about solo travelling, beautiful museums, audio guides, etc.

Mockup (Marvel)

We actually designed a couple different mockups via Marvel trying to create the best product and taking into consideration various feedback. We chose to use Marvel because it was more easily accessible than Sketch and neither of us were very familiar with Photoshop or Illustrator. Our first looked like this:

  

After some reviewing of the app and feedback from Professor Azure, however, we updated our mockup into the following (link to PDF of our final).

mockup-final

We updated the look of some of the landing pages to have a bit more design, as well as added the feature of users earning points when they “dive deeper” into topics or listen to reviews to encourage them to come back and keep using our app.

 

Placeit Images

We also made an image using placeit.net to better visualize what our product might look like. 

 

UX Final Documentation by Kefan Xu

I put my stuff all together and design a website to show my idea.

Here is the link: https://kefanxu.github.io/tapto/tapto

Here are some screenshot of this site:

On this site, I tried to put all my idea in a clear order, from the start of the idea to the final demonstration. I divided the content into two parts: the early research & framework design and the design (including the interface design and the interaction design).

I also added some new content. I made a video which shows the meaning of each operation on this app, also stressed its advantages over the traditional social apps.

This site was built with the software Hype3. It a website editor which requires no programming skills. The layout of the website content can be easily designed on it. And it can export the website layout as a HTML file, which I later uploaded to the GitHub so it can be accessed by anyone.

 

UXD User Research and Persona

User research

I know I have a big problem: replacing the act of seeking others’ opinion on whatever I am working on—never a good idea. Which is why I actually started to listen to the user from ideation. But in order to identify a more concrete and specific end user this exercise was very useful, and turned out to have some surprising data.

First, I considered the following questions:

  1. Objectives. What are the knowledge gaps I need to fill?
  2. Hypotheses. What do I think I understand about my users?
  3. Methods. Based on time and manpower, what methods should I select?

1. Objectives – I was curious what would be the most ideal medium: website, app, web app or maybe a mobile web app? I needed more information regarding internet, computer and phone usage to be able to answer that. I also specifically asked what steps do they take when planning a meeting. In addition to this, I needed to know more about expectations, what would make a meet-up planner good, usable, what features would they look for? I also needed some information about similar existing sites such as Yelp and SmartShanghai, what makes them good or what they are lacking.

2. Hypothesis – I presumed people would be more open for a website, since apps take up too much memory on the phone and SUS would not be an app users would use every day. I derived the general plan-making routine from my own experience. I usually come up with the type of meetup at first, meaning if it is for studying, just catching up, treat day, date etc, then I would choose to do something that I am familiar with so there is not a lot of variety in my selection. After that, I would look up the specific place such as a restaurant or bar, and book a table. This takes a lot of time and as the number of people involved increases, it get more complicated and frustrating because noone ever knows what they want.

3. Method – For the survey, I compiled a list of questions, most of them multiple-choice because that is the  easiest way to collect quantitative data. There is one open-ended, which I would analyze later. In order to fast and effectively get around the strength and weaknesses of the competition (Yelp and SmartShanghai), I conducted a 45min Focus Group Discussion with 5people. And finally, I conducted 2 one-on-one interviews just to get to know better other people’s attitude towards the topic.

Here is the link for the data analyses from the survey: https://docs.google.com/document/d/1_TBpphQ8CffJql1ELVxySoPcG9u8HJ39AIAIjBUMo2s/edit?usp=sharing

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.

Additional interesting finding was how participants found the word meeting confusing, they all associated to something more formal. I realized I have to play close attention to the wording as it may be deceiving for others.

Persona

Both my personas are based on real people. While Olivia is a mixture of NYU Shanghai girls, Marianna is actually my own mother. I interview her specifically for making a persona.

The persona clarifies who is in my target audience by answering the following questions:

  1. Who is my ideal customer?
  2. What are the current behavior patterns of my users?
  3. What are the needs and goals of my users?

I tried to keep them brief, specific yet realistic.

Link to the personas: https://app.xtensio.com/somgzeg7

UX Design |Usability Test| Se)( App (Forum)

Usability Test:

For this week’s assignment, I first did the usability test based on my wireframe and got many feedbacks.

Most users gave feedback on the login page takes long time but after I explained the reason (I want to have different content face different user), they understood, but I think there must be some good way to fix this problem, but I’m not very sure right now.

User 1:

Change the parent-kid part to a specific age range will be better.

Give a back button.

Give people a hit where they can click.

Give people a hit that they can scroll.

Sign out button/private code to open it.

User 2:

Can add a “quiz” section for the user to get a little gift.

Give people more topic choices on the education part/courses.

Really like the community idea.

User 3:

DIY section is very good.

Should give users a hit that they can go to any section that is under their age.

Will younger children are curious if they can not go to another section?

UX Design| Amber Wang & Theresa Lin| Wireframe, Mockups and Usability Test

Project: 3D Cake Lab

Instructor: Azure Qian

Documented by: Amber Wang and Theresa Lin

1. Wireframe Update

After the first draft version of wireframe using pencil and paper, this week, we started to design the second version of our wireframe using the software Adobe XD. We have made changes to our previous user flow. The latest version looks as follows:

2. Mockups

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. We also made our main design interface as follows.

                   

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

This is a demo video of one usability test we conducted.

first half second half

Callum and Catt || Usability Testing

For our usability testing, we reached out to four people and recorded their thoughts as they went through the app. You can find their comments below. We have the audio recordings as well, but unfortunately, it takes way too long to upload them to the site, so we will have them as a back up in case we need to go back and reference anything.

Franklin

Student

3 hr something min/day

Wechat

 

Usability Issues:

  1. Text is a little small (hard to see)
  2. A “submit” button on the questions so that you can change your answers
  3. Tries to scroll but can’t

 

  • Likes the recommendations***
  • Would use it when travelling bc he prepares/researches a lot before travel

 

  • Clear invitation of where to start
  • Include a “back” button
  • “Don’t make me think”

 

Helena Ma

Student

4-5 hours/day

Instagram, Youtube, Wechat, Didi, Eleme

 

  • Thought the initial questions were a little weird, would have preferred to just choose what museum she wanted (didn’t seem like she would just scroll through the app, would only use it for a reason with a set destination in mind)

 

Usability Issues:

  1. Font was unattractive
  2. Wished to “skip” on the questions
  3. Wished you could go back on the questions

 

Floyd Son

Student

15 hours/week

Wechat, Instagram, Baidu

 

  • Seemed to like the idea of it
  • Thought it was visually appealing even though he’s not sure he would use it himself

 

Usability Issues:

  1. Didn’t want to sign in
  2. Didn’t want to answer the questions
  3. Text was hard to read

 

Rhys Dhinsa

Student

8 hours/week

Instagram, Wechat, snapchat

 

  • Liked the name/slogan of the app
  • Liked the recommendation option
  • Wondered what the “dive deeper” option was next to “play audioguide” option

 

Usability Issues:

  1. Text was hard to read
  2. If you can jump around to different times once the audioguide had started
  3. Font was small

 

Arshaun Dharabnia

Student

10 hours/week

Instagram, Whatsapp, Facebook

 

  • Seemed interested in the concept
  • Wondered aloud about the cities we chose to include, about how many cities/museums/options there were
  • Liked the recommendation aspect but wondered how accurate it could be

 

Usability issues:

  1. Thought the registration process was easy but that there should be an email verification
  2. Wanted to see the other options and hear a sample audio guide (but obviously our prototype isn’t that advanced yet)
  3. Wondered if the globe was interactive and you could choose a destination that way

 

It seemed like two common dislikes were the text and the sign in process with questions, which if there is two things wrong these are the ideal things as the text/font has not yet been chosen and the sign in process is generally not included as it can be extremely tedious. So then looking a the comments overall, it seemed alot of people vibed with the idea and enjoyed the thought of possibly using it. We’re definitely on the right step going forward and im excited to see what sort of style and font we give it going forward.

In terms of color scheme, we chose to play with blue and yellow because blue is generally calming and yellow is warm and happy, so I think given our slogo of “The Happy Traveler” it makes sense.

 

 

Week 5: User Interaction Design | User Testing

This week I was focusing on designing the user interaction and user testing. I designed the interaction mode first in order to give the user a clearer understanding of how to use this app when doing testing. This video shows how it works:

TapTop

I also uploaded it to YouTube:

I designed this user interaction with InVision Studio, a digital UX design software. Compared to Marvel we used in class, InVision Studio allows the user to design a more complex animation and transition. It’s very user-friendly, in which user can easily design the connection between different views and edit them in an intuitive way. The image below shows how I drew the connections between different views. And it allows the user to directly import files from Sketch, which saved me a lot of effort.

The transitional animation can be easily designed with the InVision Studio. Similar to the magic transition function in Apple’s Keynote, the animation building process in the InVision Studio requires the user to set a starting and ending point between two views and it will automatically calculate the transition for you. This also requires the object to remain the same between two views, which also requires a lost of copy-and-paste work. Once the animation has been set up, the user can edit the timeline to polish the transition process.

My basic idea of designing this animation is that I wanted to build a so-called leading object between different views in order to integrate them together, in other words, no matter how the user switch between different views, there will be some objects they are familiar remain on the screen with a smooth animation. For instance, when the user switches from the main screen to the short-video screen by swiping up, all those bubbles represent different people will automatically change their size and move to the top of the screen. And it’s similar to the ME bubble which exists almost in every screen. Through this way, I am hoping to design an integrated and elegant experience, and the leading object will serve as a guide to lead the user go through different views and encourage them to try new things.

The user testing gave me some positive feedbacks. It showed that most of the users were able to tell what they are doing in each step. The controversy was among two views, the homepage and the friend list. Some users were wondering what if they have hundreds of friends who are using this app, the homepage will become too crowded. The same concern applies to the friend list view, users were confused about searching for certain friends and cared about how to find the person among hundreds of friends. Also, some user raised the concern that will they be able to see their friends in a far distance. During the testing, some users proposed some quite useful using scenario such as finding nearby friends to go to eat together and using it for dating, which were quite inspiring and I might document those thoughts in my later posts.

To deal with those feedbacks, I will focus on redesigning those views and adding new views in my later work. A testing user suggested me to change the friend list view to clusters of bubbles, which are categorized by their names, which I thought is very inspiring. I will also add a map of large scale for the user to see where their friends are regardless of the distance. And different places, such as theaters and restaurants will be added to this view, so the user can easily plan their activities with friends. And I am also working on the business model of this app.

And I also designed the logo using Sketch: