Our social life has been affected a lot during the quarantine. It’s hard to catch up with old friends and meet new friends. In this week’s design critique, We discover and discuss different dating apps’ design decisions with a focus on the dating application Hinge.

As a user, what kind of dating apps do you want?

Background

Dating apps originated in the gay community; Grindr and Scruff, which helped single men link up by searching for other active users within a specific geographic radius, launched in 2009 and 2010, respectively. With the launch of Tinder in 2012, people of all sexualities could start looking for love, or sex, or casual dating, and it quickly became the most popular dating app on the market. Shortly thereafter, many more dating apps came online. (Ashley, 2018) Hinge was created in 2012 with the mindset “design to be deleted”.

User Experience

Color Choice

Different dating apps choose different color schemes to represent their own personality:

• Tinder chooses fire and warm color scheme to represent the passion and excitement that the app creates to its users.
• Coffee Meets Bagel (CMB) mixes red and blue together to create both warm and “serious commitment” feeling.
• Hinge chooses black and purple to maintain a cool and serious feeling.
• Humble uses the warm yellow rather than Tinder’s red to create a safe and warm context for users.

On-boarding Experience

Dating app onboarding experience requires users to signup the account and set up their profiles. There are mainly two different onboarding practices in the market.

• Easy and Quick Signup

Tinder provides easy and quick signup for users. The signup process requires location information and mobile phone number. In the profile setup page, it only requires name, company, education, and an open-ended self-description. Easy and quick sign up allows users to quickly start using the app, however, the app has less user preference information to help match users with their dates.

• Signup with detailed information and prompts

Some dating apps require users to provide more information about themselves.

For example, in the profile setup page for Coffee Meets Bagel (CMB), Users are prompted different questions including occupation, schools, hobbies, etc to tailor users’ profiles and preferences. CMB uses a clear progress bar at the top to indicate the profile setup process.

Hinge uses similar methods as CMB for user profiles setup. The prompts and answers provide other users with a better understanding of the person and are also used for a better matching mechanism at Hinge’s backend. However, some users mentioned about lack of clear progress bar on Hinge’s prompts (3rd picture below).

Hinge adds a deal-breaker in preference for users’ better match. Users can select multiple deal-breakers and Hinge’s algorithm will use those criteria to recommend dates for users.

Matching Experience

Different applications choose different matching algorithms.

In 2012, Tinder started with the very famous “Swiping” interaction on its app. “Swiping” is inspired by slot machine gaming psychology. With the simple swiping left to pass a person and swiping right to like a person, each person has unlimited swiping every day in Tinder. If you happen to swipe right for a person and that person swipes right for you as well, you two are matched. You can start talking to each other.

Hinge was a “Swiping” app before, however, they redesigned their matching experience based on user data: “Only one in 500 Hinge swipes led to a phone number exchange, and 81 percent of Hinge users reported that they had never found a long-term relationship through a swiping app,” says Tim MacGougan, Chief Product Officer at Hinge. Great dates, according to Tim, are a matter of timing and compatibility. (Christopher,2018) Hinge noticed that it’s difficult to discern the true connection from photos, therefore, they abandoned the “Swiping” matching and introduced “Content Liking”. “Content liking” allows users to like specific content (photos or other contents) from other users. They can also see which of their content has been liked by whom.

In the old swiping model, people tended to like a person because they were curious if that person liked them, not for actual interest. Through this change, Hinge wants its users to focus on their matches and not the next person.

During our discussion, lots of us agree on “liking a picture or comment” is less stressful compared to like a person directly. Besides, it’s easy for people to start the pickup lines.

How many likes per day?

Another question that has been largely discussed during our discussion is “Shall we set a limitation of how many likes each user can send and receive per day?”

Hinge limits the number of likes that one user can send per day for the free account while the premium account is allowed to send unlimited likes.

Personally, I prefer a limited number of likes.

• Firstly, limitation makes every likes count. It makes the “like” more “serious” and makes receivers appreciate those “likes”.
• Secondly, limit the number of likes people receive per day also makes the app less annoying. People can focus on building on the conversation they currently have. From the research, timing is super important for dating app users, if they receive unlimited likes every day, it’s super common that they will ignore some of the conversations as it’s hard to maintain the communication with lots of people at the same time every day. Although Hinge tries to use “your turn” tag to remind people for continuing the conversation, too many overwhelmed likes and conversations create information overload for users.

Summary

In this week’s critique session, we focus on analyzing dating apps’ color scheme, onboarding experience, and matching journey.

Questions that are worth thinking if you want to explore more on dating apps including:

• What is the main purpose and primary users of the dating app?
• How do the color choices of the app serve the main purpose?
• What are the essential user information for this app to better serve its objective?
• What is the matching experience that the app creates for its users? How to find a balance between encouraging uses to use the app and not providing too overwhelming “like” notifications for users?
• How to design the best matching experience to help users find a compatible date?
• How does the LGBT community involvement change the design in a dating app?

Utilimitaly, these lead to “how to create a comfortable online dating experience for users?”

What’s Next?

In the next week, we will talk about “the most popular” app recently: ZOOM

Join our discussion by posting a response below! Feel free to reach out for anything :)

Design Critique #6: Hinge(iOS) was originally published in Storm Brain on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hello Again!

A lot is happening in the world right now. We hope you’re doing as well as you can be: please be sure to take time to process everything that’s going on, and take care of your families, yourselves, and the community.

Also, be sure to take time to remember and celebrate all the beauty and joy in the world and “Stay Calm and Keep Critique!”

During the quarantine time, a lot of us switch to online food delivery service to continue supporting the local business and to satisfy our taste buds. In this week’s design critique, we choose to discuss DoorDash. We hope our discussion can inspire your interest in App Critique and your comments and suggestions are always welcome.

Introduction

DoorDash Inc. is a San Francisco-based on-demand prepared food delivery service founded in 2013. As of last May, it had expanded to more than 4,000 cities and offers a selection of 340,000 stores across the U.S. and Canada. I use DoorDash frequently during this quarantine time. As a user switch from Uber Eats to DoorDash, I enjoy DoorDash’s colorful design and first 30-day $0 deliver fee. While we love the simplicity and convenience of DoorDash, we found some debatable points and we would love to share them with you!

Food Ordering

The food ordering process in DoorDash is easy and straightforward to most of the users who use food delivery service before. Starting with select filters and cuisines, then select dishes and lastly make payment. Here, we want to mainly discuss three sections.

Pickup

The pickup page provides a map of the nearby stores of your current location. It allows users to pick up the food in a store. The map view is clear and convenient for users to view nearby restaurants. Users can select stores through either map view or list view.

When I open the Map View (left picture above), I can see lots of restaurants’ names and “map” icons overlay each other. This is difficult for users to know what are the restaurants in this area. If we zoom in the map, we are able to see the names of restaurants however, it’s still difficult for users to identify what is the main cuisine category of this restaurant based on the restaurant name. Similarly, for the list views (right picture above), there is a long list of restaurants that is hard for users to select their interested restaurants without filter. Therefore, we suggest adding on the filter at the pickup page.
We also acknowledge that the reason that DoorDash doesn’t include the filter feature may be: users should be familiar with their nearby restaurants. therefore, it’s not necessary to provide them extra filters. However, based on design consistency and thinking from the user’s perspective, a filter is important to help users quickly find the restaurants that they want to visit.

Help!

For most service providers, it is super important to provide customers the immediate support when they need it. A common situation for food delivery service is: the application shows my order has arrived but I didn’t see it, how to contact the delivery person?

In the current DoorDash design, after an order is completed, it’s hard to find the delivery person’s information. In fact, it doesn’t provide a live chat feature on the app. It is very difficult for users to contact to the delivery person or any support representatives from DoorDash.

DoorDash website provides the live chat support feature, however, for most users, they tend to use the mobile app to order food and track delivery. Forcing users to switch to the desktop website is not a good user-centered design practice. Thus, we suggest DoorDash add live chat support feature in their mobile app version to provide users immediate and efficient support.

Rating System

DoorDash uses star rating, $$ rating and number of comments to rate stores. Similar as we mentioned in Yelp’s critique, $$ and star rating criteria are not clear to customers. On average, how much will a person spend on a “$$” restaurant? Unclear criteria cause difficulty for users to make purchasing decisions.

In addition, DoorDash provides the number of ratings without detailed user comments. This is an interesting approach. On the one hand, the number of ratings serves a strong indication of how popular the store is and it is very clean and clear in design. Besides, For 2 stores both rating 4.8 stars, the store with more than 5000 people rating 4.8 stars is more convincing than a store with 53 people rating 4.8 stars. On the other hand, without general comments but the simple rating system, it is difficult for consumers to make a judgment of these ratings. What did the person order (that caused him) to give 4.8 stars? Is it because of the specific food that the person give such a high rating? This is an interesting approach that DoorDash chooses.

Moreover, compared to Yelp, DoorDash allows merchants to upload high-quality photos. On the one hand, this provides visual pleasure to end-users, on the other hand, some users mentioned that they doubt about the real quality of the food.

Design Consistency and Edge Case Design

Besides the features and functionality of DoorDash, we also want to highlight some design issues existing in DoorDash.

Inconsistent “Back” Design

The “Back” design is inconsistent in different pages which confuse users “Am I using the same DoorDash app?”:

Confusing Status

Users are confused about certain color choices in DoorDash.

• The grey-out area on the above-left picture indicates the store is currently closed, however, the usage of green color and green checkmark looks like a safe option to choose.
• In the above-left picture, why is the 4.8 rating in green while the second 4.6 rating is in grey? What does the green checkmark mean?
• Even the store is closed, users can still add items to their cart (in the above right picture). For the stores that are closed, “close” sign is in small font and grey color. The page emphasizes viewing cart and continuing ordering. For the stores that are currently closed, it is more reasonable to disable the menu and dish selection options on the page.

Edge Case Design

A lot of times, it is very important for designers to consider edge cases during their design. When we design the Hi-Fidelity prototype, put a placeholder to represent text is not enough. We need to consider the maximum length of the text, the number of lines of text, etc.

• Here are some examples in DoorDash:

• The above-left picture cut the keywords after Vegetarian (with only the first letter “P”), which confuses users. Moreover, if users click on that restaurant, there are no additional keywords after vegetarian. This applies to all the restaurants on the list. We are quite confused about this design consistency.

• The above is a random restaurant near my current place, the name of the restaurant is only three words, however, the text is long enough that it is difficult to notice the “Delete” action button. In addition, the “Delete”, “Back”, and the restaurant’s name are using the same size, font and color which confuses users.

Takeaways

Thanks to all these food delivery services, we can continue enjoying food at this “Stay at home” period. Even though the experience of using DoorDash is simple and smooth, we noticed lots of detailed design problems during our critique session of DoorDash. Besides the main functionality problems and design problems we mentioned in the above discussion, we also discussed the UX writing problem during on-boarding, the confusing steps of the group order. If you are interested in critique or design a food delivery application, here are some questions you can start with:

• What are the necessary food filters for users? (Think about categories of food, distance, monetary, delivery time, etc.) How to help users to find the restaurants they want?
• What is the optimized way to provide enough customer support without placing additional burdens on existing support staff？
• How to design the users’ review session?
• With an increasing number of designers in the team, how do we ensure that design consistency and edge cases are incorporated into design decisions?
• How to design group order services that allow multiple users to access the same cart from separate devices? What are the important constraints to consider here?

Up Next

Thank you for reading!

Music is quite important in our daily life, so we choose Spotify as our next week’s app. What is your experience of using Spotify? Do you like it? Feel free to shoot us any ideas that you have!

See you next week! Stay safe and healthy!

Design Critique #5: DoorDash (iOS) was originally published in Storm Brain on Medium, where people are continuing the conversation by highlighting and responding to this story.

Choice Architecture

Choice architecture can greatly influence people’s decisions. Apple retail stores use the following strategies to present choices for customers: 1) minimize the product choice selection; 2) provide a systematic way to evaluate attributes and make comparisons; and 3) utilizes intertemporal choice for payment options.

To avoid too many product options which may cause customers defer or fail to make a choice due to cognitive overload, Apple provides limited product options to make it easier for users get what they want. On the first floor of Apple store, there are 12 wood tables display 5 different products. As Apple just released new iPhone 11 a month ago, it is expected that lots of people come and try the new iPhone, therefore, five out of twelve tables display iPhone sets. Apple typically releases less than three models every year while its competitors make dozens of new models. Too many choices will lead to indecision, sometimes defer or avoid choices. And people tend to eliminate choices by aspects rather than evaluate multi-attributes systemically and reasonably. On each iPhone table, there are 6 sets of iPhone 11 with each set displaying 3 different new models. Customers are able to see the main comparisons of different models clearly through the graph/text panel in front of iPhones. In addition, On each device in Apple store, you are able to see the pricing information of the product and comparing details of this device with others. Information is displayed side by side, attribute by attribute. Through this multi-attributes comparisons, Apple provides a systematically way to guide customers evaluate the choices.

If you still have trouble to figure out what to buy, typically, by the moment you stand around the iPhone table and play with the product, there will be some Apple representatives come and check if you need any help. Talk to them about your concerns, they will guide you to choose the product that fits you the best. After you make a purchase decision, the new iPhone will be brought to you. Your salesperson is also the cashier, therefore, you don’t need to line up for the payment which in some cases, the long payment queue may dispel purchasing decision due to anxiety or impatient of the long waiting time.

Queueing for payment may also provide customers a chance to use system 2 thinking to reevaluate their purchasing behavior while waiting in line. The rational system 2 may lead to “not purchase” decision. Having one dedicated employee serve you throughout the whole purchasing journey provides you a personalized and comprehensive view for your product selection. At the last payment step, if you still hesitate to pay in full, Apple provides you the installment payment option and 14-day free return policy. For $999 iPhone, you can get it by $41.62/month for 24 months. For people with large discount rate or hyperbolic discounting, the long term payment plan is not what they worry about today. They tend to value today’s money more valuable than future and make choices with sacrifices occurring in the future. For these customers, installment option will attract them to make the payment. The 14-day return policy make the purchase commitment not so strict. Even if you regret buying the iPhone, you can still return it and get your money back. Therefore, instant decision is more likely to be made.

By minimizing product choices, providing systematic comparisons methods and suggestions from experts, and apply intertemporal choice and some other behavior economics concepts, Apple intends to structure and present choices so that customers are easier to make decisions.

Feeling, Happiness and Memory

Affective states affect decision making, and decisions are usually made with emotions. During my visit to Apple Store, I felt the strong positive affects Apple created for customers, together with happiness and joyful memory.

From the moment you step into Apple Store, staff will greet you with warm welcome. Inside the store, you are free to try on different Apple products, join “Today at Apple” class to explore new experiences in music, art, design and photography. Several months ago, I walked into the Apple Store to repair my MacBook, while I was waiting there to be served, “Drawing with iPad” class distracted my locus of attention. Rather than feeling the endless waiting, I joined the class and had a fantastic time learning drawing techniques from the expert. Trying new products aroused my curiosity and I felt delightful of learning something new. This positive mood made me evaluate other things (repair my MacBook) in the same environment (Apple Store) more positively.

Besides these intangible elements, Apple uses lots of other elements to create happiness and enjoyable memory for its customers. With the neat, airy and minimalism design to replace the traditional 4 walls retail store, Apple Store is designed as a place where people could gather to learn, experience and purchasing products. Products are arranged by categories on the table. Customers could find the product easily and get hands-on experience of those products. Bright lighting, melodious music and comfortable layout space create pleasant shopping ambience. Living trees, free Wi-Fi, public seating

area and video wall upgrade the retail shopping experience to community learning experience. All these layout, placement, lighting, and atmosphere set up a charming experience for customers.

Not only does Apple try to create joyful experience for customers which these experiences may further be treated as information in their purchasing decision, Apple also try to extend positive customer’s momentary experience so that the experiencing self get chance to absorb. The interactions with products, staff, experts and environment in Apple Store engage people’s system 2 thinking. They start to be aware of their enjoyable experience and the “remembering-self” will remember those positive states.

We felt happy and we remember we were happy. Our memory tends to associate Apple Store with positive mood (why we have the feeling). By creating this close feeling loop, customers have positive emotion with Apple, which further affect their purchasing decision.

What Can They Do Better?

Apple tries hard to create these enjoyable experience for customers. How to further improve on customers’ experience? Consider the Peak-End Phenomenon where people tend to access happiness and remember the Peak and End parts. Can Apple bill customers after 14 days of purchase? In this case, people explore different products, play around devices, decide to purchase an iPhone, receive a brand new iPhone and directly take it home. Without taking out bank card or cash, Customers simply sign in Apple ID (which contains their payment information) in the staff’s machine and use iPhone free for the next 14 days. Remembering self may be able to capture more happiness through this delightful end experience.

Online Shopping Experience and Comparison

Apple online store presents similar minimalism impressions as their physical store. The whole design is modern and simple. With large white space, simple colors and clear typefaces, and very few text visible at one screen, the website showcases the same brand philosophy that Apple store conveys in the physical space.

The online shopping experience uses similar choice architecture as its physical retail experience. The website has clear top navigation bar which direct users to explore different product lines. It also provide compare function, similar to what it presents in retail stores to do the systematically multi-attributes

comparison. If you still need people to guide you for the selection, it provides live chat function with customer service people. At the purchasing page, the website guides you step by step to finish all the purchasing. Starting from select model, then to color, capacity and carriers. With each step, there are at most 4 choices. Therefore, Apple applies same behavior logic for choice architecture for physical and online store. It provides limited selection choices to avoid too much cognitive overload; It uses single option aversions and three option comparisons in their choice architecture and has systematic comparison metrics and suggestions by expert to guide customers choose the most suitable products. Both stores also have same installation plans and 14-day return policy, for people whose present-self value more on today’s money than future-self’s long term commitment.

In terms of creating positive feeling for customers, both stores, online and offline, follow the same underlying theory of the case. They want to create a pleasant shopping journey for customers and leave customers delightful memory. For example: Apple allows people to explore and experience the store freely. For offline store, people walk around to different table and play around the products while in online store, when you scroll down the iPhone home page, you can find other product lines on the website. Online store has limitation in creating “Today at Apple”, community experience and providing in-person friendly customer services. The website uses lots of high-quality photos and motion graphics to showcase the quality of the products and their visual appeal. It also simplifies the purchasing process with clear guidance in each step to assure a smooth purchasing experience. Apple tries to use these visual enjoyment and seamless shopping experience to compensate for the lack of actual physical access experience.

To sum up, Apple uses the same theory of the case in both physical and online shopping experience. The approach is different due to constraints of different channels. It provides a limited number of product options but systematically guide customers to make decisions with multi-attributes comparisons. In addition, it builds a pleasant shopping experience to create positive affective states and cheerful memory for its customers.

Reference:

Bhattacharyya, S (2019, April 5) ‘Everything is well thought out’: How the Apple store has become a template for retailers. Retrieved from: https://digiday.com/retail/everything-well-thought-apple-store-become-template-retailers/

Agarwal, A (2017 October 9) The Behaviour Economics Behind The New iPhone Launches. Retrieved from: https:// www.linkedin.com/pulse/behaviour-economics-behind-new-iphone-launches-abhishek-agarwal/

Danziger, P,N (2017 December 13) 3 Things Retailers Need To Learn From Apple About The Experience Economy. Retrieved from: https://www.forbes.com/sites/pamdanziger/2017/12/13/three-things-retailers-need-to-learn-from-apple-about-the- experience-economy/#2b436bd61307

Introduction:

In the final design project, we choose to continue on my model 3 museum project to design a better museum experience for visitors. In the previous model, we focused on exploring different pathways that users can interact with art and each other including AR feature, museum social chatting App, Museum interaction map. In the final project, we focus on the experience outside of a phone-based application with one objective in our mind to create a more immersive experience for museum visitors.

I love museums and art galleries very much. Some of my experience in visiting museum is not very pleasant. For example, when I visited Louvre, a lot of people were taking photos of the famous Mona Lisa. Instead of enjoying the paintings, visitors spent a lot of time trying to take a photo without too many other visitors in it. Besides, I love to dig out the stories behind those different installations in the museum. If the museum provides tour guide or audio guide, I will join those tour. However, the guided physical tour is not always available at the time I am visiting. And for audio guide, you need to pick up your audio guide in the specific place, select the language that you are familiar with. Then you need to pay attention to find out the art piece with either QR code or number, and use your giant audio guide machine to scan or input those code and listen to each story. These experiences are not very pleasant to me. Therefore, I would like create a more immersive experience for museum visitors.

Needfinding:

In order to fully understand what is the immersive museum experience to users, we conducted user interviews on four individuals who visit museums at least 4 times per year.

The target users are frequent museum visitors (visit at least 4 times per year) who are also familiar with new smart technology.

We asked interviewees “how do you interact with museum installations” “Experience of using audio guide in museums” to find out their current museum experience and their needs for ideal immersive museum experience. The detailed interview guide is here.

Interview Results and Key Insights:User 1:

Name: Chang

User profile: Male, 23 years old, Entrepreneur. He goes to museum once per month.

Interview Notes: Interview Notes for Chang

Empathy Map:

Key Insights:

Chang thinks that in order to fully enjoy the museum, it’s better to prepare the prior knowledge before visiting. Audio guide is a good way to introduce those background stories. However, most of the time, he is not sure how long is the audio, what are the information interest him in the audio guide and where to skip and when to pause of the audio guide. He wishes there is a way to auto play the audio guide when he approaches the next painting (instead of click in the number or scan the QR code with the heavy audio guide machine). He also suggests other ways of interacting with museum installation such as including touching sensor on special gloves in front of paintings so that visitors can feel sea (water), mountains etc. through the gloves. He feels mobile phone is very distracting for museum experience. If you are taking picture using your phone in the museum and see your friends message notification, you might easily be distracted by the notification. He also mentions one bad experience that he has in the museum where the painting is huge but the text explanation panel is so small and near the painting. He can’t read the explanation and enjoy the painting from a far distance at the same time.

User 2:

Name: Aileen

User profile: Female, 21 years old, Management Consultant.

Interview Notes: Interview Notes for Aileen

Empathy Map:

Key Insights:

Aileen thinks knowing the context about installations benefits her museum experience. Sometimes, she takes pictures of the installations and their descriptions but she never looks those photos again. She doesn’t like to see a lot of people taking photos in front of a famous installation but she acknowledges that she also takes a lot of pictures at museums.

User 3:

Name: Yinan

User profile: Female, 22 years old, MIMS student. She goes to museums twice per semester.

Interview Notes: Interview Notes for Yinan

Empathy Map:

Key Insights:

Yinan researches the stories behind those famous installations before visiting. She prefers the control of the audio guide including which piece of information to listen, where to stop. She feels different museums should have different ways of interactions (with installations). For example, AR might be suitable for science museums. Gestures based interaction might be weird for classical art museums.

User 4:

Name: Julia

User profile: Female, 18 years old, Consulting Intern @ Mercedes-Benz Powertrain. She goes to museums 4–5 times per year.

Interview Notes: Interview Notes for Julia

Empathy Map:

Key Insights:

Julia suggests that gesture interaction inside art museums is a little bit strange. They are more suitable for data related installations. She thinks the audio guides and tour would add a lot of value to a museum visiting. She wishes to combine audio guides with additional meta-level information about the museum to make museums visiting in more guided and immersive way.

From the above 4 interviews, we noted several similar patterns:

• People are interested in the stories or backgrounds behind each installation. They would love to explore new immersive way to interact with installations.
• They often took photos (to share with their friends) during their visits to a museum but they don’t revisit those pictures after the exhibition. They notice that using phones may cause the distraction from the exhibition.
• They wish to have better control and easy to use audio guide.
• People prefer stress-free and distraction-free museum environments.

Based on those patterns, we identified following user needs to focus for our project:

• A discreet way to experience and capture museum installations without distracting others.
• A better way to control auditory experience at museums

These lead us to update our How Might We statement from：

“How might we make museums experience more immersive for visitors?” to

“How might we provide an immersive, yet stress-free museum experience for visitors without distracting others?”

Ideation

We started the ideation process with 3 what-if questions:

• What if we could take advantage of screen-less technology to lessen distraction?

Screen-less technology lessens distractions because people’s eyes are now focused more on museum installations. Besides, it may be more cost friendly (to museums) compared to screen based technology.

• What if we could facilitate control of audio guides via touch for a multi-sensory experience?

When museum visitors visually enjoy the installation, audio makes their experience more immersive. Besides, touchable control of audio guide also provides visitors better control of their audio experience.

• We could utilize personal, discreet wearables so that users do not distract others as well

Personal, discreet wearables do not distract other visitors at the museum as opposed to large-scale interactions like gestures

Based on the above 3 what-ifs, we further shape our ideas based on the following directions/decisions:

The product is a museum-provided wearable that connects to the user’s phone via Bluetooth. We decided to not rely on users having, bring wearables which may cause multiple technical problems such as how to connect user’s devices with museum facility.

The product provides location based audio, which means based on location, certain music and audio clips are available for the specific installations. If users approach to the next installations, music and audio clips will automatically switch to the corresponding one. This will eliminate the troubles of finding out the number or QR code associate with the specific installation and input to the audio devices.

Users are able to control via touch commands on the wearable.

• Based on needs finding, we define the minimum number of necessary interactions that users can control on the wearable. Start/Stop, Play/Pause, Next/Previous audio section, Volume controls.
• We also introduce “Save” feature (Save installations to “view later” to make sure users can record an exhibit without having to interact with their phone, e.g. Instagram notification etc.)

If necessary, museums will set a specific space/room to teach visitors the touch commands they can perform on the wearable. When they leave that room, the phone goes to sleep mode, so that the user’s only needed interactions are via the inconspicuous wearable. They can fully enjoy themselves in the exhibitions.

Based on the what-if questions and design decisions, we develop our Low-fi and Mid-fi prototypes:

The general constraint of the design space is that we don’t have the actual materials to make the actual physical wearable, we use paper prototype instead. Our focus is on the interactions between users and wearables, therefore, I just briefly discuss the wearable material here.

1. Watchband
2. Stretchable band which uses magnetic to stick them together or use the seatbelt click to make the wearable fit users perfectly.

We want to design every text panel (refer to the first mid-fi prototype)in the museum contains 6 sections including:

1) Introduction, 2) About Author, 3) Installation Background, 4) Stories behind the Installation, 5) Possible explanation of the Installation, 6) Influence of the installation

and we use 6 color codes to represent those sections.

Prototypes Details:

Option 1:

I am inspired by the virtual keyboard (laser projection keyboard) and think about displaying the visual colors on people’s hand.

The touchable area is for users to perform start/stop, play/pause, volume up/down and save

Every time users lift their arms up, the laser projection 6 dots appears, and users can click and select which sections they want to hear from the audio.

Option 2

Grey area is for start/stop, play/pause and save, slide up and down along the 6–colors touchable LEDs is for volume and tab each LED color is to listen on that section.

Option 3

The indication is clear from visual. Arrow is for switching among different section and the LED color part will light up when that section is selected. +/- is for volume. The start/stop, play/pause and save is the middle button

Option 4

The volume is represented by +/-. start/stop, play/pause and save is the big button in the middle. The section color dot is displayed as a color stripe. The length of each color represents the length of that section, users can use slider to slide to their target section.

Option 5

I try to use similar model of Apple watch digital crown in the option 5 design. Scroll the digital crown is move to next function. For example, from color dot if I scroll, it will go to play/pause function, continue scroll it goes to volume function, if I press the digital crown, it means confirm this action. E.g. If I am in the color dot section and press the digital crown, It will go to the color dot function, the next time I scroll the digital crown, it goes to a different color. If I press the digital crown, it will play that color code section in the audio.

Usability Testing:

After creating the 5 prototypes, we create the usability testing guides to conduct usability testing sessions with 4 users. We aimed to answer the following 2 questions:

• What must the wearable look like for it to blend seamlessly into the user’s museum experience?
• What general touch interactions are common and intuitive amongst users when controlling audio?

For each usability testing, we first performed “wizard-of-Oz” via blank stripe of paper. We provide users the connected AirPods (play British Museum podcast), and ask them to wear the blank paper as bracelet. Then we ask users to control the audio through their wearable using their most intuitive interactions. The control includes start/stop, play/pause, save, volume up/down, select sections. We recorded those interactions.

After that, we showed users our prototypes and ask them to perform similar tasks mentioned above. The detailed usability testing notes are here. We also took videos of user performing the tasks.

From the usability testing, we learned that:

• Users are more receptive to a “blank canvas”. They are less confused when given a blank piece of paper than our prototypes, especially when they have a mental model in their mind (E.g. apple watch). Most of them perform the same basic interactions for play, pause, volume up/down, switch between sections. But they required more learning with less intuitive ones such as “saving” function. Most of the users have no clues of “saving” through the wearable wristband.
• Users need feedback from the wearable. Users might not sure if they perform the correct action, therefore feedback is important. One users suggest us to add on feedback when there is a status change. Such as, when users press the save, add feedback either through the LED light or receive the feedback through the users’ audio (AirPods).
• Users expect all affordances to be indicated the same way. If we indicate the basic action for play/pause, volume up/down, and switch between sections, users are expected us to indicated “save” action as well.

Final deliverables — Selah

Based on the usability testing, we finalized the museum wearable interactions. Besides, we also design the mobile screens after users tab “save” through their wearable.

We call the product

Selah, which means “taking a deep breath in between singing of the psalm” in Hebrew.

This is a museum-provided, touch-based wearable that allows the user to control the audio guide. By using our products, we want users to fully immersive themselves during their visits in the museum.

When museum visitors go into the museum, they will be given Selah and earphones, they can also choose to use their own earphones. Then, they will be guided to a learning room to learn how to interact with Selah. After visitors left learning room, their phone will be in sleep mode automatically and Selah starts working.

Selah will auto play the audio guide with music based on user’s location. Users are able to control the audio guide through the basic interaction with Selah.

The main features of Selah include:

• Screen-less, totally touch-based interaction avoids distracting both the wearer and those around them
• Simple interactions like tapping and swiping facilitate control of the audio guide
• Haptics and nondescript LED lights provide feedback to the wearer

If users saved the paintings and audios that they are interested in, they can replay later on the App. In addition, they can also share saved paintings with friends or on social media.

Sample App screens:

Future Improvement:

For the future exploration,

• More usability testing with more high-fidelity prototype, build real wearables for usability testing
• Explore prototyping options for the learning experience
• Define and design other screens to create better experience after users save their paintings during exhibition
• Explore the social aspect of sharing one’s museum experience

Lessons Learned:

This project is the first time I tried on non-screen based design. Here are several things I learned from this project.

Novel is good, but it needs to be realistic

• I am interested in new emerging technology and want to introduce different novel ways of interactions. For example, I really like the gesture control idea where users are able to use their body language to perform the interactions with the installations. Or they are able to wear special glasses and special gloves which make them to virtually explore the actual scene in the paintings. However, these ideas are not realistic for museums in general. Imagine a lot of people standing in front of an installation and trying to interact with the installations using their body languages, this will be technically and practically difficult to implement. Thus, when we design the new experience, we need to keep the objective (How Might We) in our mind. Immersive museum experience doesn’t mean a totally new experience. Think widely and realistically, ask your users what they want and find the most suitable solution to achieve goals.

Mental (Conceptual) model is powerful

• With the help from music App/ Podcast App, and wearable products like Fitbit, Apple Watch, Users are easily form the mental model about the wearable in their mind. If our design align with user’s mental model, it will make users learning not so difficult. On the other side, is the current mental model the best way to present our design ideas? In the museum setting, we want users quickly learn how to use the wearables, in this case, follow the mental model or make the design interaction very simple might be a good solution.

Extend the experience to a broader way

• In our design, we only focus on the experience: how do we create better audio guide experience when visitors next to installation. And we include the learning video at the beginning of users’ visit to better explain the functions of the wearable. If we think in a broader way, from the moment users step into the museum, we should already create an immersive experience for them, How do we expand the immersive experience from the ticket line? How do we extend the experience when users in transit between different exhibitions? These are the interesting areas that are worth further exploring.

1. Overview

While museums and art galleries provide some of the most direct ways of experiencing art, they can often seem unfamiliar or even inaccessible to the average person. Inspired by our own experience with museums, we decided to focus on the domain of people who are interested in art, particularly for museums and art galleries.

In order to gather the widest degree of insight we could about this domain, we interviewed five people in diverse settings. The interviewees are from different countries and age groups, with varying degrees of experience with museums.

2. Interview Plan

Needfinding domain: Art Lover who interests in museums and art galleries

Methodology: Interview

Interview Plan: Interview people in museums and art galleries. To understand their experience in museums/art galleries and their experience of sharing and discussing art piece.

Please refer to Detailed Interview Plans.

3. Interview Results and Key Insights

User 1 (Conducted by Christoph)

Location of interview: Entrance hall of the SFMOMA

Time: 22nd Oct, 2019, Tuesday 12:30 pm

User Profile: The user lives in Pittsburgh, Pennsylvania. He is in his 30s and works as a curator for a private collection in his hometown. He came to SFMOMA with a friend he visited to see the current exhibition. He did not give permission to record the interview or have a photo taken.

Interview notes: Interview notes for user 1

Insights: The interview with user 1 revealed some interesting insights about how people who professionally work with art think about visiting a museum and evaluate how exhibitions are structured. In his eyes, art is a medium to pick up with new ideas. It should be accessible to the public and even laymen should find an easy way to engage with it. Since he works as a curator, he does not only consider the artworks which are presented but how it is presented and arranged.

Empathy Map:

Findings of Empathy Map:

• He feels that everyone should follow his own understanding of art.
• He thinks that art is a meaningful way to engage with new ideas.
• He does evaluate artworks not only by the work itself but also how it is presented.
• He says that “artists need to empower the viewer”.

User needs/goals:

User 1

• needs to be able to engage with the artworks.
• needs to have an easy and uncoded access to the information about artworks
• needs to be able to share and exchange ideas while being in the museum.

User 2 (Conducted by Christoph)

Location of interview: Café of the San Francisco Museum of Modern Art (SFMOMA)

Time: 22th Oct 2019, Tuesday 12PM

User Profile: The interviewee was a white male in his early 50s originally from Michigan. He lives in the Bay Area and works as an architect. Unfortunately he did not want the interview to be recorded nor to have a picture taken of him.

Interview notes : Interview notes for user 2

Insights: User 2 mostly visits art museums in order to get creative inspiration for his work, but also describes a museum visit as fun. He does not really prepare his visits, but uses the museum’s App as audio guide and follows his gut when exploring exhibitions. One of his favorite art experiences is a widely accessible art prize from his hometown where visitors can vote on the best artwork of the event. He usually does not like it when museums are too crowded and takes “the way of least resistance” in order to be surprised.

Empathy Map:

Findings of Empathy Map:

• He feels engaged when he can be part of the “art process”.
• He thinks of art as a creative inspiration and “kick in the pants” for his work.
• He does visit museums every couple of months.
• He says that he wants to be surprised when visiting a museum.

User needs/goals:

User 2

• needs to get creative inspiration.
• needs to have guidance and a second dimension to engage with art.
• needs to participate in the “art process”.

User 3(Conducted by Bowen)

Location of interview: BAMPFA (Berkeley, CA)

Time: 20th Oct, 2019 Sunday Evening 6:50 PM

User Profile: 64 year old male, who has studied art for quite a long time and recently joined Berkeley Extension for continuing studies in Art after being out of school for 15 years. He visits museums and art galleries quite often with his friends. He loves art.

Interview notes: Interview notes for User 3

Insights: We observed that as an older person, he needs more time to digest the art piece. He enjoys the fact that museums or art galleries create an immersive environment for visitors to visit and revisit art pieces multiple times. He can’t digest all the information about an art piece at once. So he enjoys revisiting exhibitions to discover something new. Although he uses social media and the internet, finding information about opening hours or whether specific art pieces are on tour in advance is hard for him. He loves the digital information about art pieces provided by some museums. As he can remotely dig into the details of the history and backgrounds of the art pieces even though he is not able to visit museums in distant cities in person. He enjoys sharing and discussing art with his artistic friends after visiting a museum/art gallery. He wishes that there are more educational and free exhibitions available for the general public.

Empathy Map:

Findings of Empathy Map:

• He feels: He loves art, He feels that he is able to explore a lot of dimensions of art through immersive experiences in museums and art galleries.
• He thinks: Museums and art galleries should offer more free nights to general public.
• He does: revisits exhibitions to explore new dimensions of each art piece. Sketches down the notes, thoughts about the history and compositions of art work. Discusses and shares thoughts with friends during and after his visit.
• He says: A good museum/art gallery should interest users and educate users.

User needs/goals:

User 3

• Needs to have a way to find out information about museums and art gallery. E.g opening hours, art piece touring schedule.
• Needs to have a way to find out information about an art piece. E.g history, story, art technique.
• Needs to have a platform to exchange and discuss about art
• Needs to have more opportunities to access art, access “not so expensive” art

User 4 (Conducted by Bowen)

Location of interview: BAMPFA (Berkeley, CA)

Time: 20th Oct, 2019 Sunday Evening 6:15 PM

User Profile: Male, around 40, he lives a few blocks away from BAMPFA. He knows the BAMPFA through a UC Berkeley graduate student. He already visited this museum before. This time, he brings his good friend to come and visit. He is not from an artistic background, but he enjoys dropping by the museum and walking around to see art.

Interview notes: Interview notes for User 4

Insights: The user loves BAMPFA due to the proximity to his home. Everytime he goes to a museum, he feels like he is learning something new. He learns about art history and feels more connected to different cultures and history through art. He usually goes with friends and enjoys the discussion of the art works presented during or after his visit. To him, art can be understood from different dimensions, there is no single way to understand art. He hopes that art exhibitions can change more frequently, so that he can see something new every time.

Empathy Map:

Findings of Empathy Map:

• He feels: Everytime he goes to an art gallery/museum, he learns something new. He loves the history and influences that art brings to him.
• He thinks: It would be better if he had some background knowledge about the artworks presented before visiting. He also prefers an aggregated information platform of shows and exhibitions of each museum or art gallery.
• He does: He takes friends to visit art galleries and museums together. He also discusses and shares opinions about art with his friends. He sometimes drops by the museums close to his home just to take a look and walk around.
• He says: He would prefer to visit museums that are close by and hopes that museums and art galleries could change their exhibitions faster.

User needs/goals:

User 4

• Needs to have a way to find out information (history, story, influence) about an art piece and a way to better understand and experience the art piece
• Needs to have museums/art galleries more accessible (in nearby neighborhood)
• Needs to enjoy different exhibitions every time, so it would be better if museums/art galleries could change exhibitions faster

User 5 (Conducted by Andrew)

Location of interview: Downtown Berkeley near Landmark Shattuck Cinemas

Time: 22nd Oct, 2019 Tuesday 4 PM

User Profile: Late 20s male from Thailand. Is in a relationship, working in Bay Area. Did not have time for an extended interview, but agreed to a short chat. Wanted identity to stay private and refused recording. Has a lot of experience travelling. Enjoys art and wants to learn how to paint.

Interview notes: Interview notes for user 5

Insights: User 5 usually visits a museum when visiting a new city. As he is a hobbyist painter, he enjoys paintings the most. He thinks that he can learn from looking at paintings in museums, especially in how artists use color. He likes to take his time in museums because he enjoys the atmosphere, and prefers it to more socially exhausting places. Also, he usually goes alone, though he did mention taking someone on a date to a museum once. He does not usually enjoy modern art (“squares and rectangles”) because he doesn’t understand it. He also has had bad experiences with smaller museums, from what he says he might be referring to an art gallery. One museum he really enjoyed had a “smartphone tour” with headphones, so that one could listen to an audio tour while perusing the museum. He also enjoys more “hands-on” museums, such as a museum in Dallas that focused on the Kennedy assassination. Although this user is “most into” paintings, he likes to be surprised by these types of more special experiences. Museums are a common destination of travel for him, and he likes to see what makes a museum special as a representation of a region/city. He also enjoys having accessibility — he specifically mentioned the audio tour and smartphone tour as being helpful.

Empathy Map:

Findings of Empathy Map:

• He feels: Engaged by hands-on experiences, confused by art he’s unfamiliar with, he is surprised by unexpected/modern features (e.g. smartphone tours) and wants to learn about what the museum is presenting.
• He thinks: about the specialties of a specific museum (e.g. exhibits) and how to understand the historical/aesthetic significance of a work. As an artist, he thinks about the artist’s perspective.
• He does: looks for audio tours and other accessibility options, tries to learn from art, especially paintings.
• He says: that he likes the quiet ambience in a museum, and that he doesn’t usually go with people.

User needs/goals:

User 5

• Needs hands-on activities — in other words, to be surprised
• Needs to be able to find out what is special about a certain museum — whether it be its current exhibits, its features, or some aspect of the museum itself
• Needs to be able to “access” the artwork, whether it be through audio/smartphone tours, to be able to navigate the museum
• Needs to be able to find exhibits that he is interested easily: whether it be regional or a type of art he is interested in (e.g. paintings)

4. How Might We?

Make exhibitions and information about artworks more accessible

Enhance engagement with art works especially in the museum/art gallery

Broaden the audience and enable more people to discuss art more deeply

5. Prototyping

After interviewing different users and identifying user needs and proposing different “How Might We” statements in part 4, we are addressing these problems with a number of solutions and created three prototypes.

Most delightful choice: ArtChat (Designed by Bowen)

For the ArtChat application, we created a hi-fi Figma prototype (High-Fidelity Prototype). The idea is to create a platform for people who love art to discuss and share their thoughts and mood about art pieces with people who have similar interests.

We named it ArtChat as it is a social network platform for people who love to talk and share their thoughts about art. It is an informal, fun way to communicate for art lovers to chat, discuss and share feelings and opinions freely.

What problem does the prototype solve?

During our user interviews, we uncovered that museum visitors would love to discuss and share their feelings and thoughts with others while visiting an exhibition. However, there is currently no solution to do so asynchronous and remotely The problem we are trying to solve is mainly how do we enable more people to discuss art more freely and deeply. People use Yelp to rate and discuss restaurants and other places. They uses Rotten Tomato and IMDB for to rate and discuss on movies. And they use ArtChat to share their thoughts and feelings about art.

What questions does the prototype try to answer?

1. When is a good time for people to share and make comments on an art piece? (E.g when they are watching at art piece? After they are watching the art piece?)
2. What is an easy and comfortable way for people to express their thoughts about art freely?
3. How do we encourage more interactions and deeper conversations about art pieces?
4. How to raise the general public’s interest in art? (Using informal social network way or more knowledge sharing way (see next prototype: SmArt))

Low-Fidelity Prototype:

High-Fidelity Prototype:

How does the prototype work?

There are 3 main functions that ArtChat provides. The first one is “Collection” Section. Under the “Collection” section people can explore different museums in the world. They can also find favourite museums and art galleries using the search function or by browsing an alphabetically ordered list. For example, if they want to explore the MoMA they can click on MoMA and ArtChat will display all the collections available in the MoMA.

If users continue by clicking on one of the collections, they can view different art pieces and comments or feelings from others about these art pieces.If they happen to be at MoMA now and are inspired by one art piece, they can choose “Take a Tour” in the MoMA section or use the camera function at the top left corner to use an AR feature when pointing their camera on the art piece. The algorithm behind the screen will quickly recognize the art piece and display emotions other people shared. Different Emojis will fly over from bottom to top. Moreover, visitors can take a photo of that art piece and write down their feelings and thoughts concerning the work. They can also save the art piece to their favorite art pieces and share the art piece with other friends directly. Additionally, they can tag the art piece for their own collections categories.

Users can choose to either keep their thoughts to themselves or share it publicly. By sharing it to the public, their comments will display below the art piece, and it will appear in a social feed.

On the home page each user can see other friends posts and comment, like or share these posts.

In the “My Collection” section, people are able to view their favorite art pieces. Furthermore, they can view art pieces by artist and their customized tags and share those collections with others.

By using ArtChat ArtLovers are able to share their feelings and thoughts about art pieces with friends in a fun and easy way. This will enable more people discuss and talk about art. ArtChat is the meeting point for art lovers.

Most Rational: SmArt — The Question-and-Answer Platform for Art Lovers (Designed by Christoph)

In this Figma prototype we designed a simple question-and-answer platform for artworks. The app should help users to improve or share their knowledge about art so that everyone can better understand art.

What problem does the prototype solve?

The prototype intends to solve the problem of art being inaccessible for a large group of people. They lack the knowledge about art in order to fully understand and enjoy art. With the help of our solution, they can get their most pressing questions answered and more importantly benefit from questions other users have already asked.

What questions does the prototype try to answer?

This prototype in particular tries to answer the questions how to best present the artwork-related questions and answers to our potential users.

Low-Fidelity Prototype:

High-Fidelity Prototype:

How does the prototype work?

The solution helps museum visitors to get their questions about specific artworks answered and learn by reading answers to questions previous users have asked.

A user simply selects an artwork from the collection or takes a picture of any work she is interested in. The app then opens up a screen with details about the scanned or chosen work. At the bottom of the screen a user can find all questions that have already been asked to this artwork. She can read the answers to the questions and upvote them if she likes the answers. She has also the option to downvote an answer if she finds the answer to be bad. Most importantly, every user can answer questions to the artwork and ask their own questions which will be added to the respective question and work.

Most Likely to Work: MuseMap — Make museums more accessible, with friends (Designed by Andrew)

In this Figma prototype we created a mapping design based on individual tours people might take through museum exhibits. Users could record, annotate and share their tours collaboratively.

What problem does the prototype solve?

The prototype intends to solve the problem of visitors sharing their museum experience with others — for example a close circle of friends — without having to be physically there with them. This prototype will make exhibition and information about museums and artwork more accessible

What questions does the prototype try to answer?

How do we effectively design the creation, sharing and following of user tours? How can we incorporate direct, “word-of-mouth” relationships in to the app?

Low-Fidelity Prototype:

High-Fidelity Prototype:

How does the prototype work?

The prototype aims to compartmentalize museum experiments in to tours through exhibitions. Through a route superimposed on a map of the museum floor, the user would be able to see what routes their friends took, as well as pictures/engagements their friends had along the way.

Additionally, if the user is in a museum, they can pull up a context-sensitive map, which can locate popular sections, or needed amenities (e.g. restrooms or eating areas). Most importantly, it can overlay a friend or friends’ tour over the map. No longer will the user have to wonder where the “really cool painting” or “magnificent sculpture” their friend talked about is, it will be beamed directly to their map. This gives the user information, as well as agency, and is a big part of our effort to improve user accessibility.

6. Usability Testing

With our usability study, we wanted to use fresh eyes to probe our interface design for any inherent flaws in layout, organization, and structure. In combination with this, we could use this opportunity to determine which prototype(s) line up the best with our overall vision and are easiest to interpret for the average user.

Participants

We tested our prototypes with three participants:

1. Elena, a 24 year old Danish graduate business student from Copenhagen. She likes to visit museums, especially while she is travelling or living in a city abroad. She visits museums with friends and on her own. She describes herself as interested in but not knowledgeable about art and uses guides, maps, and other material provided by the museum to explore art. When she visits an exhibition with friends she discusses the art they see, but she does not engage with art or discusses art when she is not in a museum.
2. Esther, 28 years old with a background in Architecture and Design. She goes to museum frequently. “Visiting Museums like therapy to me” she said. She visits a lot of museums and her current interaction with art includes taking photos of the art piece and sometimes she justs sits in front of an art piece and takes it in.
3. Sarah, 20s part-time service worker currently looking for a job outside of Berkeley. While her main access to art is through movies, she did grow up going to museums and has developed more of an appreciation for them. While she is not an art “professional”, she would say she goes to museums on an average basis.

We recruited our participants by posting on social media that we were looking for participants who love art and go to museums frequently. We screened the respondents whether or not they were falling into our target group and then made appointments with the most suitable ones. We also went to museums and recruited participants directly from there.

As non-participants Andrew Chen, Bowen Wei, and Christoph Wilhelm were involved by each conducting one test which they facilitated, made notes of, and recorded.

Setting

1. The test with Elena took place in a study room. She was presented with the Figma prototypes on a MacBook while sitting next to Christoph who facilitated and recorded the study. The test was audio-recorded on an iPhone with the participant agreeing to the recording before the interview started.
2. The test with Esther was conducted in a private meeting room (1–1 meeting). She was asked about several questions regarding to museums and art galleries and then presented the Figma prototypes. Notes, photos and videos were taken during the usability testing to further analyze her actions.
3. The test with Sarah took place in a one-on-one meeting environment. The facilitator interacted on a laptop with the Figma prototypes according to her input, and recorded her actions and thoughts.

Overview

The goal of the study was to develop a more focused goal among the extremely varied prototypes that we developed, while also exposing any design flaws we would need to watch out for.

In order to achieve this goal we wanted to get the following three questions answered:

1. What kind of content and actions make art more accessible and engaging (and preferred by visitors)?
2. Which way to explore art while being in a museum is the most accessible?
3. How do the layouts (of application) interact with the features, and do they make interaction clear?

We conducted the study using the Figma prototypes of ArtChat, SmArt, and Art Map which are linked in the prototype section of this article.

As part of the study participants had to do a variety of tasks. First the participants were asked to explore the prototype unguided and share their general first impressions. Second they were instructed to perform a series of tasks which varied for each prototype and are listed below.

ArtChat

• Find an art piece
• Leave a comment on an art piece
• Save an art piece to their collection and tag it
• Share an art piece with someone else
• Comment on the post of another user
• Browsing different art piece collections

SmArt

• Find information about a specific art piece
• Ask a question regarding this art piece
• Answer a question asked about this art piece
• Upvote and downvote one of the answers given
• Use the AR feature to get to the art piece

Art Map

• Find and follow the route of a friend
• Record their own route
• Search for something they are interested on the map

Participation of Team Members

We started out formulating the questions together in class. After that we reflected on them individually and proposed our favourite question to each other and Bowen and Christoph refined them. In a final discussion we agreed upon our final questions.

As we all tackled different questions in our test, we developed different study plans. Everyone did the usability test on their own and wrote up their own detailed results, which were merged our summaries in the Medium post.

Results

What kind of content and actions make art more accessible and engaging (and preferred by visitors)? — Conducted by Bowen

Observations:

Overall, user is able to find all the functionalities of applications easily and fast as user is a frequent museum viewer and plays social media a lot. The usability test mainly targets on ArtChat and the AR function of SmArt to discover what do visitors prefer when they interact with a specific art piece. For example, do they prefer understanding the art piece through audio guide or notes taking or chatting with friends? Main observations points are listed below and detailed observation notes attached at the end of the section.

Positive:

ArtChat:

• The user loves the “fast emoji reactions” and “sharing with friends feature”.
• She likes the function of commenting on one art piece and discussing the interesting stories behind the art piece with friends.
• She highlights the “Save/Like” to my collection feature. She has troubles of finding out the art piece she likes in her photo albums now.

SmArt:

• She likes the function of using a camera to scan the art piece, and then the detailed stories and information of that art piece appears.

Negative:

ArtChat:

• The collection icon is a little bit confusing for users. She thinks that leads to her phone photo albums rather than the museum collections.
• Besides, “Exploring” part under the collection section can be further improved the usability by providing the “Search nearby museums” function.
• She doesn’t really want to write down thoughts at the moment, she prefers more fast way of reacting on the art piece and sharing with friends.
• Home page doesn’t make sense to her. She may not be interested in all other art pieces other people are posting, she is more interested in the art pieces she viewed today and the discussion about those art pieces.

SmArt:

• It would be great if we could provide both audio and text knowledge for one art piece. For the text, she is more comfortable with less than 2 paragraphs. For the audio, she prefers to have the outline and length of the audio so she knows how to manage her time and listen to the stories she is interested in.

Quotes :

“Museums are therapy to me”

“I would like to discuss art piece with my friends or make new friends through this shared art interest”

“I thought this icon(museum collection) will direct me to my photo albums”

“I like sending out “like”, I want to see how many likes or other emojis does this art piece have”

“The most important things to me in an art museum are: 1. Sending out likes 2. Stories and information of art piece 3. Save art piece and share/recommend to my friends.”

Takeaways:

To this user, the most important things to her about interacting with Art piece in the museum are 1. Art piece information/stories 2. Fast reactions of emotions to art piece. 3. Sharing and discussing interesting findings with others. 4. Save the art piece in my collections for future reviews.

From this usability testing, it is clear that the user prefers fast and easy way to react on art piece. She is keen to understand the information and stories about art piece, and sharing and discussing this with other people who share similar feelings or resonation of the art piece. Saving the art piece for future review is what she is interested as well.

The further action regarding to engage users with art piece in the museums may include:

• Fast commenting and sharing emotions will be the main feature of the ArtChat application to facilitate sharing among people who have similar interests. (Eliminate write down own thoughts feature).
• Change the homepage news feed to be more art piece discussion oriented. Instead of displaying all friends thoughts about different art pieces, focus on the art pieces that users shared and discussed today. These are more interesting content to users.
• Understand the art piece backgrounds and information is also important to users, in this case, we may consider to combine knowledge display in SmArt with ArtChat to facilitate this need. We may further include audio feature here.
• Eliminating the exploring function (reduce the functionality of exploring). Because if user is using the ArtChat in the museum, she is more interested in the art piece in one museum rather than museums and art galleries all over the world.

Which way to explore art while being in a museum is the most accessible? — Conducted by Christoph

Observations:

• Different ways (e.g follow other friends’ routes, using Question and Answer format, chatting with friends or Museum collections catalog) of exploring were preferred by our users, depending on what was the intended action and background of the user is
• They value the route way in order to explore museums and exhibitions overall and the AR and search feature to explore specific art pieces

Positive:

• In general users are looking for other ways to explore museums to enhance their experience while being there

Negative:

• The current route implementation was not implemented in a way that users would know what to do and which options they had
• The AR recognition is not familiar to the users, they would value some more feedback what to do and what happens

Quotes:

• About the AR feature: “That would be really cool if you wouldn’t have to type in the name of the art piece”
• About the organization of the grid view(collections): “If the App knows that I am at the MoMa I would assume that the App only shows me comments from the MoMa and not from Paris or somewhere else”
• About friends’ routes: “That’s cool. If I know that my friend who really knows something about art visited it, it means that it should be worth visiting.”

Takeaways:

• Users are used to explore museums with guides and tours and by exhibition. They would like the prototypes to follow these known concepts as well for a general exploration of museums.
• When looking for specific art pieces users liked the AR feature to quickly find art work they are in front of and value search functions which let them search that is location- and context-aware.

How do the layouts (of application) interact with the features, and do they make interaction clear? — Conducted by Andrew

Observations:

Overall, the user seems to be an “average” museum-goer. She does find that movies often have discussions, forums, and review sites that allow collaboration online (imdb, etc), and participates in these communities.

Applying this perspective to art pieces in museums, users would also like to see what experts in the art world have to say about art — and offering their own anecdotal experience in a more simple format seems to be the best way for users to share and exchange opinions.

Positive:

• She seemed drawn to the camera options for interaction, and did appreciate good iconography.
• She was able to draw parallels with existing apps, which helped her to more immediately understand the layout and workings of the app.

Negative:

• She did find several “dead-ends” in the app, as well as flawed iconography.
• She also found several places where a screen simply did not make immediate sense to her, and wasn’t explicit with the objective of buttons/ways of interaction.

Quotes:

• Regarding the commenting in SmArt: “Maybe it’s just how it’s presented in this interface, but honestly I think the anecdotes, or the little stories are interesting. Everyone has their own take.”
• Regarding the AR feature in ArtChat: “ I don’t think that I would want to walk around looking at my phone for too long on a museum, given your description of interacting with a stream.”
• Regarding the route idea in ArtMap: “Yes! I think there is a missed opportunity on the route, maybe it can be implemented later: I want to see what they might’ve seen. Something like street view on Google Maps!”

Takeaways:

• In other words, when it comes to exchange of information, a clean interface where one can clearly see credentials in a story-based format seems to be desirable.
• A user needs to be able to see explicitly what the purpose of a layout is: through text or icons, ideas need to be conveyed more effectively
• Layouts that people are familiar with are useful in developing “instant” ease of use: no need to teach an old dog old tricks

7 . Main Takeaways:

1. Different user groups have different needs. Knowledgeable users want to share and discuss with a broader audience and do not value information about art as much while users who are not as knowledgeable about art value information and learning about art and only feel safe to share with close friends. Going forward we should decide which use case (specific user group) we should focus on.
2. Consider the context of the user. For example: if the application is used in museum: browsing other museums’ art pieces are less important to users. Rather, people would like to know what is happening in this museum. Moreover, if users are viewing art pieces, they would prefer faster and more direct ways of reaction to art pieces instead of writing long thoughts.
3. Throughout the usability testing, we figure out the questions we have previously. For example, in terms of the different interactions with art piece, People value the stories and information behind the art piece. They also prefer more direct and easy way to share the art piece with their friends. Some of them mentioned about combine audio guide with our current application design. These usability testing results can be further used in our iterations.

8. Recommendations for Future Iteration

1. We need to focus on a narrower proto persona. We have uncovered that needs, seeked interaction and content, as well as the way of exploration do differ within our current target group.
2. We have uncovered several usability issues. Especially the iconography, flow of actions, feedback of the systems, and utilization of known concepts from the context of museums should be improved on.
3. Our studies showed that some concepts which we thought of as separated would actually make sense in combination. We should take the best of our three prototypes and combine them in our next phase, although we should still do parallel prototypes as we found this process to be highly effective. E.g: Understand the art piece backgrounds and information is also important to users, in this case, we may consider to combine knowledge display in SmArt with ArtChat to facilitate this need.
4. Further expanding our prototypes beyond the mobile devices. Maybe including physical objects and big museum screen installation for museum route mapping.

9. Further Documents

Usability Study Plans and Guides

• Usability Study Plan and Guide for Usability Test with Elena
• Usability Study Plan and Guide for Usability Test with Esther
• Usability Study Plan and Guide for Usability Test with Sarah

Detailed Results

• Detailed Results from Usability Test with Elena
• Detailed Results from Usability Test with Esther
• Detailed Results from Usability Test with Sarah

Heuristic Evaluations of ArtChat from all team members

1. Overview

In this needs finding assignment, we chose to focus on veganism and interviewed several vegans who eat outside at Berkeley.

2. Interview Plan

Needfinding domain: Vegan people dining outside

Methodology: Interview

Interview Plan: Find vegan people in vegan restaurants or vegan society and ask them about their dining experience.

Overall Interview Questions:

Introduction:

We are students from Berkeley, we are here to learn about needs for Vegan people dining outside. Would you mind to help us on some interview questions? It will take around 15–20 mins.

1. How long have you been vegan?
2. When did you become vegan and why?
3. In your view, which place in Berkeley has the best vegan food?
4. How did you find that place?
5. Do you usually find vegan restaurants like that? Walk me through how you usually find vegan places to eat.
6. What is your experience eating out or finding good restaurants to eat at? Are there any inconveniences?
7. How accessible is vegan food to you when you go out to eat?
8. Since you became vegan, how has that experience changed?
9. Walk me through your experience when you go eat with other people.
10. When hanging out with non-vegan friends, what types of compromises do all members of the party make?
11. What types of reactions do you garner from people when they try vegan food for the very first time?
12. How do you find vegan places to eat food at if you are in a different country?
13. Do you ever (accidentally) end up in places that do not have vegan food? If so, why? How do you deal with that situation?
14. Which vegan restaurant do you like the most in the world? Why? Describe your most delightful dining experience.
15. What about vegan dining do you like least?
16. Do you have any comments about the vegan dining experience that you would like to share with restaurants?
17. Is there anything that we did not talk about yet that you want to tell us?

3. Interview Results and Key Insights

User 1 (Conducted by Bowen & Tobias)

Location of interview: The Butcher’s Son (Berkeley, CA)

Time: 09 Sep 2019, 12:40 PM

User Profile : Male, Late 20s, has changed from Vegetarian to Vegan. Pre-med student (do community based medicine). Came for lunch together with family. However, he is the only vegan in the family.

Interview notes: Interview notes for User 1

Insights

From this interview, we observed that it is very easy for the interviewee dining outside in the local area. He enjoys being a vegan and suggests more and more people should get a chance to understand what veganism is. Veganism is not just a diet restriction, it is more about lifestyle (not abusing animals and treating animals as life rather than the product, and care about the global environment and climate change). Small videos on social media will be able to raise public awareness of the vegan lifestyle. Besides, a lot of restaurants actually provide vegan options or they are able to provide customized choices for vegan people which allow them to go dining with friends. Friends and family don’t need to treat vegan people specially or make special arrangements for them. Vegan people can eat together with friends outside in vegan/non-vegan places. No big deal :)

Empathy Map

Findings of Empathy Map

User 1 described himself as a domestic vegan. He doesn’t really find any difficulties when dining outside with friends and family. Normally, he uses Google Maps or prior experiences with different restaurants to find good food. Most restaurants have Vegan options and he can always ask for customization if they don’t have any. He thinks people should be more open-minded in terms of vegan lifestyle. More education on “veganism would be good” should be given to the general public to increase public awareness. He feels support from friends and families and he enjoys being more healthy after becoming vegan.

User needs/goals:

• Needs Well tasting vegan food ;)
• Needs to Encourage others to be open-minded and become vegan
• Needs to be able to Educate the public about veganism and raise public awareness.

User 2 (Conducted by Yi)

Location of interview: Veggie Grill (Berkeley, CA)

Time: 30 September 2019, Noon

User Profile : User 2 lives in Richmond District part of San Francisco, but works in the city of Berkeley. He started the vegan lifestyle about 6 months ago and dines out almost every weekday during his lunch break.

Interview notes: Interview notes for User2

Insights

We observed this user finds social dining a distressing experience when he was going through the process of how he dines out with friends while expressing with a frown. But, he was full of smiles when he animatedly discussed the time when his partner took him to a Vegan brunch place while describing vividly about the food and service. I learn that having support is a major influence when it comes to social dining, especially for people who are transitioning into the vegan lifestyle, or else they find themselves in situations where they are the ones making compromises that leave them unsatisfied either before, duration, or post social gathering.

Empathy Map

Findings of Empathy Map

The user’s disappointment and frustration when describing how his vegan lifestyle has not only affected his relationships with his friends but also dictated his eating habits, in addition to unwarranted time and energy spent, suggest that his transition into the vegan diet has been extremely difficult.

User needs/goals:

• Needs a way to make vegan food more accepted amongst his friends in order for their relationship to be mutual.
• Needs to be able to expand his vegan social circle in order for him to have a positive overall lifestyle.
• Needs to be able to seek out resources that reassure him of his decision to become a vegan so that he can be more confident with his diet.

User 3 (Conducted by Bowen & Tobias)

Location of interview: The Butcher’s Son (Berkeley, CA)

time: 09 Sep 2019, 13:15 PM

User Profile : Male, approx. 30 years old, has been vegan for four years.

Interview notes: Interview notes for User 3

Insights

With this interview, we confirmed that it is generally feasible to find vegan food in the Bay Area (even though it may not always be immediately accessible). The vegan community is growing, and so is the number of offerings targeted at vegan diners. However, two big issues for vegans are international travel to countries with a less pronounced vegan community (e.g. Japan), and work events that do not accommodate vegans. Additionally, our interviewee thinks that more work is needed to convince non-vegans not necessarily to become vegans, but rather that vegan food can also taste good by itself.

Empathy Map

Findings of Empathy Map

The user reported that in his four years of being vegan, the food situation has drastically improved in the United States, and that food can generally be found using various apps, although e.g. the workplace is still not very accommodating.

He thinks that veganism requires more planning and research into foodstuffs and ingredients overall and that improvements in labeling would contribute to the global vegan community.

He uses the HappyCow app to find restaurants (In agreement with his statements that apps are a good way to find vegan food nowadays), and suggests them to his social environment. However, his experiences in Japan (taking hour-long train rides to find food, and ultimately falling back to chains such as 7/11) show that the variety of vegan options found in the US is not necessarily global, and concedes that he generally eats at home rather than at work or at events because accommodation for vegans is still lacking here.

This leaves our interviewee with a general feeling of frustration (especially the experiences at work), but he hopes that over time, people will become more open towards vegan food.

User needs/goals:

• Needs to make non-vegan people more open-minded towards vegan food
• Needs to be able to find food at business events and functions, including client dinners
• Needs to be able to find vegan food in countries with no widespread vegan culture
• Needs to be able to easily identify vegan foods and ingredients

User 4 (Conducted by Shefali)

Location of interview: Cafe Milano (Berkeley, CA)

Time: October 2nd, 8:00pm

User Profile : 19 year-old male, transfer student at UC Berkeley studying biology. Became a vegetarian 4 years ago and became a vegan 1 year ago after being a part of the animal rights movement

Interview notes: Interview notes for User 4

Insights

The interviewee is a huge animal rights activist and officially became a vegan one year ago after learning about the treatment of cows. He tends to cook at home as options outside tend to primarily have American(non-ethnic) food and are expensive. He also mentioned that being a vegan among people around him and in restaurants seemed to be a bit of an inconvenience. For example, when he mentions that he’s vegan, sometimes people (like family) will begin to explain their own philosophies about why it’s okay to eat meat. Additionally, he feels that the “annoying part is more about asking for simple trivial things. Like you feel like you’re being isolated for being vegan” and that “asking to make something vegan — it’s like you’re asking for a favor.” He also wishes the process would be more normalized where people wouldn’t make fun — he’s had experiences where friends who are vegetarians will make fun of other vegans. He also cited food costs as a factor for why he doesn’t go to vegan restaurants, but also did say that vegan meals as a whole tend to be cheaper anyway.

Empathy Map

Findings of Empathy Map

The user’s actions are derived from his passion for the animal rights movements. He says that he generally avoids eating outside and that many vegan places that are cheap tend to have ethnic origins. He thinks that he is causing an inconvenience to others when he asks for vegan options as though it’s a favor. He recommends other restaurants to people who are looking for restaurants to eat but have dietary restrictions and is happy to help. He feels that the concept of veganism still isn’t normalized yet.

User needs/goals:

• Needs to have other people understand that veganism is normal and not question him for his beliefs
• Needs to be able to ask for vegan options without feeling like he’s asking for a favor
• Needs to not have people explain their philosophies about meat when he says he’s vegan
• Needs to have vegan food options that are cheaper and have more of a variety

4. Problem Statement

How might we encourage the adoption of vegan food in social circles and situations that are currently averse to vegan foods

5. Designing for Understanding — Prototyping

Identify Problem and Brainstorming ideas

After interviewing different users, we identified the users’ needs and came up with a number of solutions. We are trying to answer the following questions:

• How might we improve the dining experience for vegans?
• How might we create a good experience at locations that offer vegan food?
• How might we make non-vegans be more open towards eating vegan food from time to time?

To address these questions, we designed the following four prototypes:

Prototyping

1. Foodie (Bowen) — Figma Prototype: Delightful choice

For the Foodie application, We used Figma for the Hi-Fi prototype. The idea is to create an application for vegan and non-vegan people to get discounted price for food options and expanding their social connections as well.

Problems and questions we try to solve for Foodie prototype:

From our last week’s interview, we noticed that some vegan people have problems finding people to eat together with them. They end up eating alone for 2 weeks. The problems are 1) They don’t know where to find people who are also Vegan or who are non-vegan but willing to try vegan food (especially for people who are vegan newbies). 2) Vegan food are pricey for a lot of non-vegan people, They don’t prefer to spend those money eating vegetables. In order to encourage more non-vegan people try vegan food and expand vegan people’s social cycle, we design “Foodie” to collaborate with restaurants who provide vegan options to address these 2 problems.

Questions intend to answer:

1. How do we make the socialized element in the application less awkward (more natural and not on purpose)?
2. How to help vegan people to find accompanist? Shall we use dining with strangers or provides more easy communication tool through friends circle or restaurant perspective (See VeMenu example below)?
3. What is an efficient way for people to decide on what to eat? (E.g should they “like” the food they want, or they choose the food they don’t like and get a surprise dish (See Vegariation example below) ?

Low-Fi Prototype:

First Version:

Second Version:

Iterations of “Join Group” function:

We name it Foodie as it is a food related application and people love to talk about food, everyone enjoys good food (we are all foodie)!

Work flow of the prototype (High-Fi Prototype):

Introduction:

Foodie will collaborate with different restaurants who provide vegan options and issue discount coupons for users. The discounted coupons are pre-set in Foodie’s system and updated regularly (every 2 weeks). Usually, the discounted coupon is for certain food (most of them are vegan food) offered by the restaurant (E.g: 5 $ off for vegan burger). When users are using Foodie, they are able to view different food options from the restaurant (either with discount coupons or normal price). If users happen to like a food option which the food provider also has a promotion on it, they will get a discount coupon for that food. This is called a food match. The coupon requires users to utilize that on a specific time. If users are willing to accept the coupon, they are able to add the coupon in their pocket. They can only hold 4 unused coupons in 2 weeks period. In the meantime, if 2 other people are also interested in the same food and accept the coupon, they have the choice to join as a group and enjoy that food together. For those food with normal price and user select to“like” these food, if there are future promotion on that food, users are still able to receive the “match” notification and have the choice to accept or reject the coupon.

The overall workflow:

1. Users first login to Foodie App, there will be instructions on how to use the application. Swipe right or click the smile face to like the food. Swipe left or click on sad face to pass the food.
2. Users are also able to select their dietary preferences by clicking on the choices they prefer.
3. Users are able to like or dislike different food.
4. If there is a food match, the screen will show the coupon information and users can choose to add coupons to their pocket or close the coupon information based on the restaurants’ location and their availability (maximum 4 unused coupons for 2 weeks period).
5. If users choose to accept the coupon, they are able to view the coupon information in their pockets. In their pocket, not used coupons are tag as green, used coupons are tag as grey. If they click on the coupon, they are able to see the coupon details, find directions to go to restaurants and find the social group if they are willing to meet new people.
6. “Find my group” provide them an option to chat with people who accept the same coupon, and it also provides a map function if they need to find each other on the dining out day.
7. Users are able to manage their coupons and groups through my profile page. For example, they can choose to continue the group conversations after the dinning or leave the group.

By using Foodie, people are able to get discounted price for vegan food. This will encourage non-vegan people to try some vegan food. Moreover, Foodie provide vegan people an opportunity to expand their social cycle and make new friends.

Empathy Map and Prototype (What and How):

For all of our interviewed users (User 1,2,3,4), Foodie addresses their needs by encouraging the public to be open minded and try vegan food and raise public awareness. By using Foodie, these users are able to talk to different people (including non-vegan friends as well). they can do more public education on vegan food and encourage others to try on vegan food. Public also get a chance to try out vegan food at lower costs which make them easier to try out new food.

For User 2, who wants to expand his vegan social cycle and seek out resources that reassure him of his decision to become a vegan. Foodie provides the dining group opportunities for him to meet new people and friends. He is able to chat with other vegan people and get support from them if he need.

For User 4, Foodie collaborates with restaurants to provide discount options for cheaper vegan food options. This aligns with user 4’s need on have vegan options that are cheaper.

2. VeMenu (Tobias) — Figma Prototype: Most likely to work

Problems and questions we try to solve for VeMenu prototype:

This prototype attempts to tackle the hurdles encountered by vegans when ordering food in restaurants and to thereby improve the vegan dining experience. Our interviews confirm that it is common for vegans to have to ask about which food offerings are vegan, and about how they might modify other menu items to make them vegan. One of our interviewees reported that this is especially hard while travelling abroad, and another expressed concern about feeling like they were asking for a favor when inquiring about adjustments. With this digitized menu, we address both the informational and the social aspects of this problem.

Low-Fi Prototype:

From the initial low-fidelity prototype, we transformed individual pages into medium-fidelity versions to confirm the rough layout and idea before advancing to the final high-fidelity prototype:

High-Fi Figma prototype:

Our high-fidelity Figma prototype is not just a proof-of-concept design, but also intended to discover whether the system by which users can select substitutions for non-vegan ingredients is sufficiently clear and flexible for the average user.

For the typical user without dietary restrictions, the experience is not much different from a normal restaurant menu, and this prototype is designed to be handled that way — on a tablet handed to customers by the waitstaff in a restaurant. Foods are categorized just like in a standard menu, and there is plenty of room for restaurants to customize the layout and to promote individual items (for example, our prototype’s restaurant wants to upsell the customer on sweet potato fries over normal fries).

However, for vegan users (or any other users with similar dietary restrictions), the menu overview is instead sorted to first show items that already match their dietary requirements. Next, it lists items that are commonly adapted to your needs. Only at the end does it list foods that do not yet match your diet and for which you may need to make custom substitutions. The detailed item view is adjusted to highlight ingredients that do not fit a vegan diet, and the user is prompted to replace these items with alternative ingredients before adding the dish to their order.

The final order overview allows users to modify their choices before placing the order and handing back the tablet. It should also be noted at this point that this menu intentionally only covers the ordering process and not the payment process at the end of the meal, which was not part of the needs discovered during the interviews.

Empathy Map and Prototype (What and How):

VeMenu helps inform vegans of what foods are available to them without having to resort to asking restaurant staff that is potentially underinformed as to the exact extent of their needs, and eliminates the social pressure inherent in asking for substitutions. Our fourth interviewee describes exactly this scenario in their interview: They feel as if asking for substitutions is like asking the restaurant for a favor, even though it should not. Faced with this menu, this user would — after selecting “Vegan” on the dietary restrictions page — be able to easily see which vegan options the restaurant offers, but can just as easily adapt a non-vegan dish (and indeed is presented with common substitutions made by other vegans, to make it even easier to pick a vegan item). Because these types of substitutions are part of the normal ordering flow, there is no feeling of asking for a favor or special treatment.

3. VeganRecs (Shefali) — Figma Prototype: Rational Choice

Problems and questions we try to solve for VeganRecs prototype:

In our interview process, we noticed that two of our interviewees mentioned that there was a stigma associated with mentioning the fact that they were vegan while in a group of friends. In Sabrina’s interview, her interviewee mentioned that as the minority, “it seems like you’re the only one that has to make the compromise. As I have mentioned earlier, I would have to just eat beforehand before I meet up with them. In addition, I’ve just don’t dine out with friends as much.” In Shefali’s interview, her interviewee mentioned that he “overheard a couple of friends talking about other vegan friends and were making fun that they only liked to eat at vegan places.” This prototype aims to solve the difficulty in finding vegan food options with friends in a way that removes the difficulty and need to compromise in deciding where to go.

The question we wanted to answer here was: how can we make the process to choose a place to eat with vegan options seamless?

Low-Fi prototype

High-Fi prototype (link)

Work flow of the prototype:

1. The user first is sent to the Welcome page where they are asked to choose whether they would like to find a place for themselves or for a group.
2. If they select a place for themselves, they will be taken to a page with recommendations, as well as places they have gone to before.
3. If they select a place for a group, then they will have the option to input details about their group, such as the group size, the dietary restrictions, and the types of food they would like.
4. After inputting these details, the app takes the user to pages of 3 restaurants that are recommended for this user. The Flying Falafel is one example, and the example page contains more information about the distance from the user and the ratings given. The user is then given the option to choose a restaurant via the green button at the bottom.

Empathy Map and Prototype (What and How):

This app focuses on the empathy map for the user that Sabrina interviewed. He says in his interview, “Social dining is great and all when you do not have any dietary restrictions but it’s an unpleasant experience for those who do…When you are the minority in the group, it seems like you’re the only one that has to make the compromise.” One of the main statements we created to solve these difficulties last week is that a new vegan needs to make vegan food more accepted amongst his friends in order for their relationship to be mutual. This acceptance of his habits among his social circle could thus be a huge factor in his happiness in his social life. This app aims to help vegans and their friends by understanding their group dynamics and food interests, and generating places that are compatible with all of their lifestyles.

4. Vegariation (Sabrina) — Figma & Video Prototype: Dark Horse

Prototype created using Figma with a video walkthrough demo

Problems and questions we try to solve for Vegariation prototype:

This prototype targets the problem of how might we improve the dining experience for vegan food. From the user interviews we’ve conducted, it seems that certain areas/towns have limited vegan restaurants due to lack of demand for them.

The question we intend to answer with this prototype:

The question we intend to answer with this prototype is what can we do to allow vegans to experience different meals with the ability to decide what they aren’t feeling in the moment.

That’s where the concept of Vegariation come to life. Vegariation is a vegan restaurant that allows the user to customize his/her meal with a twist, s/he identifies how s/he does not want the meal to be prepared and what types of items they do not want in their meal. The customers make their decisions by interacting with a touch-screen device in order to customize their meal. After they have confirmed what they do not want, the restaurant whips up a unique meal and is served to the user.

Low-Fi Prototype: (storyboard + mockup wireframe)

Work flow of the prototype:

The user engage the Vegariation application on a touch-screen device through swiping the screen and selecting options:

1. The user begins by swiping left with their finger.
2. The second screen will ask if the user has any dietary restrictions by selecting the icon or if they do not have any, there is ‘none’ element at the bottom to indicate so, then they swipe again to get through the next page
3. The user will be presented with the following screens in order: Preparations, Base, Proteins, Vegetables, Oil, Condiments;
4. With each screen, the user will select what they do not want as the option by selecting the icons with labels on them.
5. After the user parses through the categories, s/he will be presented with a confirmation screen. In the confirmation screen, the user can modify the list by either adding or removing the item
6. If the user wants to add an item they do not want in their meal, they have the option to do that by selecting the box with a plus sign. Then they will be redirected to the screen of the category they have selected. After they have selected/deselected the item(s), they can confirm new modification by clicking done.
7. If the user wants to remove the iterm in the confirmation list, s/he can hover onto the icon of them item, a ‘-’ button will pop up, then the user presses it and the item is removed.
8. After the user is satisfied with the list, s/he presses the confirm order button.
9. Then the screen will indicate that the food is preparing!
10. The chef creates a surprise dish for the user.

Empathy Map and Prototype (What and How):

User 1’s potential engagement with Vegariation

This prototype can serve the needs of User 1 as he experiments with restaurant from time to time. The user can select options to exclude certain types of vegetables and see how the combination of other options he did not exclude can bring to his taste palette. User 1 will be presented with numerous options that he will never run out of options to experiment with his vegan.

User 2’s potential engagement with Vegariation

This prototype can boost User’s 2 social engagement with his friends by using the very mindset his friends have about dining at a vegan restaurant. User’s 2 friends and User 2 can bond over this particular dining experience by selecting options they do not like, and this can create a sense of control for both User 2 and User’s 2 friends since they are given options to choose from that satisfies their needs versus just going to a restaurant and have to settle with options that are already determined.

Have you ever seen a terribly parked electric scooter (or e-scooter)? Or maneuvered a stroller or wheelchair through a sidewalk and encountered an e-scooter that is obstructing the sidewalk? Every time there is a poorly parked scooter on the sidewalk, most people (including me) fall prey to the bystander effect and leave the scooter in its poorly parked state. E-scooters that are not parked well decrease accessibility for all, especially those who use wheelchairs and strollers and do not have the privilege to simply walk over or pick up the scooters that are in their path. What if we could design more friction in the e-scooter apps so that riders are more unlikely to park their scooters in disruptive and obstructive ways?

Electric scooters are ubiquitous in every major American city and many have either hailed them as sustainable transportation alternatives to cars or disparaged them as disruptive technologies that scare pedestrians and increase sidewalk congestion.

0. Brainstorm Initial Ideas for Creating Friction

Our team went over several ideas before landing on this one. We began by making a brainstorming board, where we spit out any and everything to see what stuck. Here are the other ideas we considered:

• A screen that makes it easier for people sleep earlier/not sleep late
• A screen over the trash/recycling/compost bins that tells you where your disposable should go
• A feature in a different app or within the existing app to make it so that people go off of social media
• An ice breaker app that makes it easier for people to think of topics or activities to break the ice
• A sign that warns people when they are too close to valuable art work in museums
• A dieting app that makes it more difficult to eat junk food
• A screen that makes children want to intuitively stop using electronic devices

After our class session, I was walking back home and saw a Lime scooter blocking half of the sidewalk. Noticing this issue (which has been a long time accessibility pet peeve of mine), I pitched the idea of creating friction around bad parking to my team via Slack so the idea is not reflected in the image above.

We agreed on the idea of making it more difficult for riders to leave rentable scooters in the middle of the pedestrian sidewalk and sketched the most plausible ways to make this happen. Our first decision was to choose one of many scooter apps. We chose Bird because it had a sleek, minimalist design.

Bird already had in place a feature where one has to take a photo of their scooter once it has been parked, but the company does not do enough to enforce good parking habits — you can pretty much take a picture of anything and they never check. We thought the best way to ensure good parking was to have a checklist on how best to park the scooter. After this was displayed, we wanted a real-time image recognition software that would bar the user from ending the ride unless the scooter was parked properly and display error messages until they did so.

1. Use Existing Bird App Screenshots

Since we knew we would be adding additional screens to an existing application, we had to do some field testing. We ventured all the way to the great city of Oakland (because Birds are banned from Berkeley) and documented a ride so that we would be familiarized with the current process. Once we had the screens and a basic idea of where in the process we were going to implement changes, we were ready to start with our mood board.

2. Create Mood Board

With our mood board, we wanted to embody the essence of the Bird app that we already knew existed, while exploring other design options for our new additions. We included as many “on-brand” images as we could, while still attempting to mix it up with different colors and illustrations that we thought would blend well. Of course, we populated our mood board with images of the scooters themselves, to serve as a reminder of what we are attempting to do. We also made sure to include check marks and exes in a style that we thought would best suit our future ideas.

3. Design visual screens with parking instructions

We brainstormed on the possible reasons that people don’t park their scooter correctly and also interviewed a few people. We found that:

• People mentioned that they are not aware that their casual parking of the scooter has negative externalities
• People might be more willing to rethink parking if they know why good parking is a public good or if they walk along the street and find some scooters that block their way
• Some don’t know where they should park the scooter and there are no clear signs indicate these areas

To address those problems, we decided to focus our design on:

• Providing more interactive guidance of where to park the scooters
• Giving positive feedback if users are parking scooters correctly
• Creating friction if users are parking scooters incorrectly

4. Initial Wireframe

This is a wireframe of the first high-fidelity product we agreed on after gathering feedback from users.

Our initial layout ensures that a user will never encounter more than two pop ups in a row, as we don’t want them to get frustrated and leave the app

We received feedback stating that the red and green colors may be difficult for a person with red/green color blindness to differentiate, so we changed it in future iterations.

Additionally, for our warning page that states “please re-park your Bird”, we received input that it may be better to place a picture, similar to the congratulatory screen the user is shown when they park correctly.

We then changed some of the images to add more diversity throughout our presentation, and removed unnecessary text to draw more focus on the visual representations.

5. Add screens that reinforce good and discourage bad parking

Based on the analysis in part 4 above, we design the following screens to address those issues and serve our objectives.

5a. How to park screen

The “How to Park” screen showcases the right and wrong ways of parking the e-scooter. Users must view this screen before they can move on to the next step consisting of photographing the placement of the vehicle. This serves as a gentle reminder of the correct behavior for users and inhibits the undesired behaviors.

Some techniques we used:

• A grid system to organize photos and information and used context to determine layout: Text explanation is at the top as the page title, photo demonstration is in the middle and the action button is at bottom.
• Proximity to indicate the relationships: The correct and incorrect behaviors are clearly pictured next to each other so a visual comparison can be made of how to correctly park the e-scooter.
• Our “Got it” button follows the overall Bird Design principle to make sure the user has a seamless experience throughout. The color of the button and text on the button is a call for action, indicating the viewer must click there when they understand.
• We were also inspired by the application’s existing use of Fitts’s law and continued using it in our additions, in that the only buttons the user has to press are in the middle of the bottom edge of the screen, very close to where the user’s thumb would be when holding the phone. The proximity of the button to the thumb, paired with how large it is, make it a very visible and obvious button to press, reducing the amount of strain the user has to experience in order to navigate through our additions.
• This screen will pop up during the user’s first use of the app, after which the app will move to the photo taking screen directly. It will also reappear if users incorrectly park at any point in the future and will again stay active until the user correctly parks.

Changes for final iteration:

• Replaced wording at the top with whitespace to draw more attention to the photos themselves.

5b. Photo Taking Screen

The new AR design guides users to park the scooter in the correct position by using red highlights to indicate where the user should avoid parking. The red is the same hue as that used previously for the red cross.

We added the pop-up for the user’s first use due to feedback that suggested users might not intuitively know what the red area represents. We also condensed the shape of the pop up so that there was not so much unnecessary white space.

We are utilizing AR technology to enhance the interaction between platform and user. The photo taking button at the bottom aligns with the iOS standard photo taking button, and the color purple serves as an indication that users are using the Bird App. We keep the typeface and font size to align with the original Bird App to make sure users have a smooth experience through the application

After users have taken the picture, the image recognition tool processes the image immediately and gives feedback to users if the parking is correct.

Changes for final iteration:

• The interactive tool itself. We added it on the photo taking screen after receiving helpful user feedback during user testing.
• We originally explored using a blinking outline of where the scooter should be parked, but our user tester suggested differently and we all agreed that this new design better suited our needs. Besides, from technical feasibility point of view, the blinking outline requires more effort to implement.
• In our first iteration of this particular method, we used red and green areas to indicate where users should park, until it was pointed out that colorblind users would not be able to differentiate between the two. We then experimented with other colors until we landed on purple, to match the color of the app.
• In our final iteration, we removed the color altogether and added stripes to make the red area more clear, because we agreed it would reduce the amount of input going to users and hopefully make the process easier to interpret.

5c. Parking warning screen

If the parking position is not ideal or if user is trying to quit the Bird Application before parking it correctly, a warning screen will display.The warning screen is designed to create friction for users who are not parking the scooter correctly.

Users have to re-park and retake a picture proving that the scooter is parked correctly. The user is not allowed to start a new ride until they either park their Bird correctly, or they pay a parking fee.

Some techniques we used:

• We used a grid system to center and organize our layout
• We utilized white space heavily on this screen, directing the user’s focus and making it abundantly clear what the user is supposed to do. White space around the top picture also directs the user’s attention to that wrong parking. It also adds to the sleek, professional feel of the app as a whole.
• We used Fitts’s law regarding button placement, similar to the screens in the previous subsection
• The message stated in the middle explains the reasons that users need to take try again. This is secondary information, therefore we chose a small font size and the size align with Bird font size design in general

Changes for final iteration:

• Changed the icon from a red warning label to an image with an X through it to stay consistent with the rest of our new screens. It also provides more visual cues for the bad parking example.
• Centered the text to align with our grid format

5d. Good Parking Screen

Our good parking screen serves as feedback for users who successfully parked the scooter. They are able to move on to the next steps after this screen.

Some techniques we used:

• We used a grid system to organize and center our information: Correct parking photo, positive reinforcement about the public good of parking scooters well, and an action button acknowledging that the user read the statement
• We utilized white space on this screen to direct the user’s focus and clearly show the action we expect from users (to focus on the top correct behavior)
• The message stated in the middle of the screen reinforces the benefit of correctly parking the scooter. Again, this is secondary information, so we chose a smaller font size and this aligns with Bird font size design in general
• We used Fitts’s law in deciding our button placement.

Changes for final iteration:

• Centered the text to align with our grid format

6. Conduct User Testing

We received valuable input from our user testing on how to best implement interactive AR suggestions on where to park. He suggested rather than our initial idea of outlining a properly-parked bird scooter with AR after an initial failed parking job, we could instead use the AR technology to highlight a ground area in a different color to indicate to the user where it would be acceptable to park.

We also received valuable input on the color scheme of the AR guidance system, as well as on the amount of text we had been using. We took all of these inputs into account when deciding on our final design.

7. Final Wireframe

As a reminder, this is our first high-fidelity iteration that we began with, after having already received some input on our design.

And this is the result after getting more user feedback and making some final changes.

Conclusion

Convenience for some is not always accessibility for all. E-scooters are very convenient for riders because they can pick up or drop off a scooter wherever they deem convenient for themselves. However, the convenience of leaving a scooter wherever also reduces the time (or decreases the friction) that a user thinks about the consequences of their parking job. Our goal is to increase the time and consideration (or increase the friction) put into the scooter parking. Our intervention provides that guideline for scooter riders and establishes a culture of positive feedback and financial consequences for enforcing the considerate parking job.

Consider the white parking lines that delineate parking spots so drivers park their cars within a constrained space. Parking in a large lot would be disastrous without guidance from the visual design that maximizes space, allows maneuverability, and follows logical order in a parking lot. We think more people are willing to park within the lines if those visual guidelines exist for scooters too. In this way, innovation can be innovative AND considerate.

Design for Friction