Responsive Website vs. Mobile Application: Street Food in Phnom Penh

MESTRADO MULTIMÉDIA - ESPECIALIZAÇÃO EM CULTURA E ARTES RESPONSIVE WEBSITE VS. MOBILE APPLICATION: STREET FOOD IN PHNOM PENH Marie&Ros& & & & M 2016 FACULDADES&PARTICIPANTES:& & & FACULDADE DE ENGENHARIA FACULDADE DE BELAS ARTES FACULDADE DE CIÊNCIAS FACULDADE DE ECONOMIA FACULDADE DE LETRAS Responsive Website vs. Mobile Application: Street Food in Phnom Penh Marie Ros Master in Multimedia in University of Porto Supervisor: Bruno Sérgio Gonçalves Giesteira (Professor) Co-supervisor: André Monteiro de Oliveira Restivo (Professor) June 2016 © Marie Ros, 2016 Responsive Website vs. Mobile Application: Street Food in Phnom Penh Marie Ros Master in Multimedia of University of Porto Resumo O crescimento exponencial de uso de dispositivos móveis em países em desenvolvimento, as tendências de utilização de Aplicações Móveis e Websites Responsivos, as caraterísticas e as vantagens e desvantagens entre as duas, incitam a realização deste estudo. Este tem como objetivo comparar a eficácia, eficiência e satisfação (usabilidade) entre diferentes soluções móveis: as chamadas Apps e os Websites Responsivos. Baseia-se na metodologia User-Centered Design, explorando um exemplo de street food em Phnom Penh, a capital do Camboja, usando métodos etnográficos tais como observação de campo, entrevistas semi-estruturadas, e a criação de personas para determinar as motivações, necessidades e possíveis soluções para o design de soluções móveis, tal como avaliar o protótipo em diferentes estágios do seu desenvolvimento. Tem também em consideração a conexão entre a plataforma e as redes sociais dado nos últimos tempos estas se terem tornado a segunda fonte de informação mais importante no Camboja, depois da televisão. É sugerido um protótipo para as necessidades e motivações dos utilizadores que foram encontradas, tal como uma framework robusta comparando as duas soluções móveis de acordo com o protótipo. Abstract The exponential growth of mobile usage in developing countries, the tendencies between the usage of Mobile App and Responsive Website, the characteristic as well as advantages and disadvantages between the two, urge this study to be conducted. This study deems to compare the effectiveness, the efficiency and satisfaction (usability) between different mobile solutions: The so-called Apps and the Responsive Website. It draws upon User-Centered Design Methodology, exploring an example of street food in Phnom Penh, the capital city of Cambodia, using ethnographic methods such as the creation of personas, field observation, semi-structured interviews, and online survey to determine the motivations, needs, and possible solutions for the design of the mobile solution, as also to evaluate the prototype in different stages of its development. It is also taken into consideration of the connection between the platform and social network sites due to the fact that it has lately become the second most important sources of information after television in Cambodia. A prototype is suggested for the users’ motivations and needs that are found, as well as a robust framework comparing the two solutions of mobile aspect in accordance to the prototype. Acknowledgements Having accomplished this dissertation, I owe so many thanks and gratitude to so many people. First of all, I am so thankful for both my supervisors Professor Bruno Giesteira and Professor André Restivo. They both have been a team with me since the beginning, as they have guided me along the way, provided advises, supported in so many ways and for so much of their valuable and busy time not just online through countless emails and skype meetings but also face to face. They have pushed me to do more than I believed I could, to get out of my comfort zone, to apply to different conferences and publications, which was something that would have never been reached if it was me solely. Second, hugely thanks to my dearest family who have emotionally always been so supportive of my study and some amazing friends who have continuously been through numerous hard times to finally come to an end together. Friends who keep on encouraging, insisting, spending days and nights working alongside each other here at FEUP including Hugo Sousa, Francisco Maciel, Daniel Moreira, Maria Camps, and Alexandra Mateus. Else, those who are far away but keep on being so close looking at my work and commented along the way: Keo Sreysros, Chap Somsothyvuth, Yong Sihavann, Nou Vichet (Nix) as well as Joana Ventura for your time here. Last but never the least, this gratitude goes out preciously to my respondents for their times, effort and understanding of my condition here to spend their time online, through Facebook, Skype, Questionnaires, and doing the testing. These tasks would never be where they are now without your contribution. Content 1. Introduction ............................................................................................................................ 1 1.1 Context, Framework and Motivation ................................................................................. 1 1.2 Problems, Motivation and Objectives ............................................................................... 2 1.3 Hypotheses and Expected Result ....................................................................................... 2 1.4 Methodology ...................................................................................................................... 2 2. State of Art .............................................................................................................................. 4 2.1 Understanding Mobile Context ......................................................................................... 4 2.1.1 Growth of Mobile Phones ......................................................................................... 4 2.1.2 Responsive Website .................................................................................................. 5 2.1.3 Mobile Application .................................................................................................... 6 2.1.4 Existing Food Websites and Applications: ............................................................... 8 2.1.4.1 Trip Advisor, Zomato, Yelp and Foursquare ............................................ 9 2.1.4.2 Similarities and Differences .................................................................... 11 2.2 User Centered Design ...................................................................................................... 11 2.3 Context of Cambodia ....................................................................................................... 14 2.3.1 Street Food .............................................................................................................. 14 2.3.2 What have been done online so far? ........................................................................ 16 2.3.3 Internet in Cambodia ............................................................................................... 18 2.3.4 Cambodian Youth .................................................................................................... 19 3. Methodology ......................................................................................................................... 20 3.1 Task Analysis: ................................................................................................................. 20 3.1.1 Personas ................................................................................................................... 20 3.1.2 Semi-structured Interview ....................................................................................... 25 3.1.3 Field Observation .................................................................................................... 29 3.1.4 Online Survey .......................................................................................................... 30 Introduction 1 1. Introduction The world is changing at prompt speed especially in this technology age. Among those technologies, mobile phone is one of the latest technologies and very popular among consumers. We are living in an exciting phase in which numbers of devices actually beats the numbers of the world population. According to the data from digital analyst at GSMA Intelligence, real time tracker put the numbers of mobile devices at 7.22 billion while the US Census Bureau said the number of people is still somewhere between 7.19 to 7.2 billion (GSMA Intelligence, 2016). With this increasing amount of mobile devices comes along new needs to satisfy the users’ demands. The two technologies that are on debating of which to serve the better purpose of mobile phones are Responsive Website and Mobile Application. Both were stated with various pros and cons as well as in different conditions of usage. This paper brings up a very specific use case to look into this aspect. It is a circumstance of a capital city in a developing country in which the numbers of mobile devices are on the growth as well but many other aspects are still limited. 1.1 Context, Framework and Motivation Cambodia is a country of a very old culture dated back to at least 5th BC (Chandler, 2008). There are varieties of culture aspects to look into but in this typical context, street food of the modern society is the chosen one. Mainly, due to the fact that the neighbouring countries have developed dramatically on this aspect, Cambodia’s content on street food is still not noticeably included yet in the online world. Although the neighbouring countries have more technology than Cambodia for a variety of tasks, there has not been a particular platform for street food yet. Hence, this can be a case to use for those countries that are on the growth of street food as well. 2 1.2 Problems, Motivation and Objectives The main goal of this research paper is to compare the effectiveness, the efficiency and satisfaction (usability) between two mobile solutions: the so-called Apps and the Responsive Website. It will be done in correlation to create a prototype of street food content and after doing that, study the comparison technological constrains between the two platforms. With the purpose in mind comes a significant amount of objectives to be achieved as following: • Compare and contrast the advantages and disadvantages of Responsive Website versus Mobile Application • Determine motivations, needs of users and suggest prototype solution • Evaluate and refine the prototype in a cycle process based on user-centered design • Create a framework comparison both technologies based on the suggested prototype 1.3 Hypotheses and Expected Result In accordance to the above gathering of information, there are three hypotheses presented: Hypothesis 1: Responsive Website is a better fit template for this type of content in a scale of a city like Phnom Penh due to the fact that Application is mostly built after the contents were already created on website. Hypothesis 2: The interactivity of the prototype platform will be based mostly on Facebook due to the dramatic growth amount of Facebook users in this city. Those interactivity contents include things like commenting, reviewing or suggesting new contents to be posted on the sites. Hypothesis 3: A framework using the suggesting prototype to compare between Mobile Application and Responsive Website. Considering the current hypotheses and more to come along the research, we expect to create suggested prototype and a robust framework for this sort of content and users’ contexts, based on the comparison of the two main technologies: Responsive Website and Mobile Application. 1.4 Methodology This study draws upon User-Centered Design Methodology as an umbrella to cover the whole testing process, exploring an example of street food in Phnom Penh, the capital city of Cambodia. Ethnographic methods will be used such as field observation, semi-structured Introduction 3 interviews, and the creation of personas to determine the motivations, needs, and possible solutions for the design of the mobile solution, as also to evaluate the prototype in different stages of its development by usability heuristics’ analysis, as well as usability tests. Figure 1: User-Centered Design Methodology of the Research Paper Task Analysis. Using tasks performed by users to observe them in action to get a picture the kind of details they need in order to perform their tasks and achieve their goals. In order to conduct task analysis, we first create personas based on interviewing potential users and field work observation due to lack of previous study on street food consumers in this city. Activity Scenarios. After that, the activity scenarios testing will be conducted with a highfidelity prototype along side using activity scripts compiling from the task analysis. It is to be notified that the prototype will be tested with the potential users in Phnom Penh, the capital city of Cambodia itself due to the very specific case of street food which is only available and consumed by its population there. Evaluation. This is an important stage to learn from what has been built so far with various different methods of evaluation such as usability and accessibility. 4 2. State of Art 2.1 Understanding Mobile Context 2.1.1 Growth of Mobile Phones Beside the fact that mobile usage in the world is actually increasing dramatically, it should be added into account that mobile usage actually surpassed desktop’s usage as well (Bosomworth Danyl, 2015). Figure 2: Mobile and Desktop Usage Likewise, the numbers of mobile phones in the developing countries are also on the rise. A study in India stated that the number of mobile phones in developing countries is over a billion at the moment. Developing countries in this context is referred to the nations classified by the World Bank as “Low Income” and “Lower Income” (Donner, 2008). Mobile Application and Responsive Website are two among the most popular tools for mobile phone users. The reason why these two types of mobile technology are on a debatable level for the potential use of mobile phone could be understood by an online article (Budiu, 2016), which has stated clearly the relative advantages and disadvantages of mobile-dedicated vs. Responsive Website as following: • Responsive sites can support a variety of devices and screen size with a single implementation • Responsive sites offer content and feature parity (at least to some extent) State of Art 5 • Responsive sites used to be easier to find with a search engine • Responsive sites save content and feature maintenance • Responsive sites tend to be slower • Responsive sites work less well for complex tasks and content • Responsive sites do not integrate with existing third party services. Other interesting comparisons between Mobile App and Responsive Website focus on some more general aspects such as access speed, availability in app store, approval process, content versions, development cost, features, functionality, internet connection, navigation, optimization for device and even user access. Though some aspects were already concluded to be better than others, it is still debatable due to the fact that there could be possibilities to solve it for a preferred template. For example, on pure mobile native app the access speed could be faster but if the contents are interactive and to be loaded from the Internet anyway, the difference between the two are not significant. Hence, the users’ needs should be taken into consideration by looking into each element they select. 2.1.2 Responsive Website Responsive Website has three interesting characteristics: flexible grids, flexible layouts, and media queries (Rapid Value Solutions, 2012). Moreover, it also added the advantages of using Responsive Website such as the fact that it is a single code base, it renders across any screen size, it has improved SEO, meaning it is more likely to appear in the search engine, it cost less in maintenance and development and last but not least it provides control and flexibility. Meanwhile this study of comparison between Mobile Application and Responsive Website offered three critical areas in which Responsive Website would be most applicable. Those include corporate website/blog sites, media/news sites, and location base services. Hence, the study case of street food in Phnom Penh would more likely be a use of Responsive Website rather than Mobile Application because it is more likely to obtain many food images and use location base service to offer users direction or map of each place. Besides, it also provides three keys challenges in Responsive Website. The first key challenge is that the user experience is not as rich as Mobile App since the way a Responsive Website created is to fit the same contents on many different types of devices so the selections of contents need to work well with design in order to provide what users needed on those different devices. Second, it is about how the responsive design is navigated. While Mobile Application navigates from left to right, Responsive Website works mostly from top to bottom. The interesting concept is that now that technology is advancing, it is possible that developer can actually make a website navigate like Mobile Application. The third challenge is about the long development cycle. Though the creation of Responsive Website is fewer 6 than those of different Mobile Application and base website, it needs much more careful content placement and selection to make it works at its best. To develop that part very well would take longer time. 2.1.3 Mobile Application The two biggest and most trendy Mobile Applications stores are android known as ‘Google Play’ and ‘App Store’ from Apple Company. Both application markets have had more than one million application on going already. To be exact, at the beginning of 2015, 1.4 million Mobile Applications were available in the app store (Statista, 2016a) while a bit later, in November of the same year Android reached 1.8 million apps (Statista, 2016b). Figure 3: iOS and Android Mobile Web Browsing Google Play was first released as Android Market back in October 2008, while App Store was launched just a few months in advance in July 2008. Though Apple released first, in July 2014 Android surpassed it in terms of web traffic caused by its users (Felix, 2015). Another interesting aspect to look into while discussing the use of Mobile Application is what it is needed in order to be able to download an app. For Android users, they need to have a Google account, simply put a ‘Gmail’. In case they do not obtain one, there is some information and knowledge needed in order to create one. State of Art 7 Figure 4: Registering for a Gmail Account Similarly, for iOS users they also need to create an Apple ID in order to download an app from the store. Figure 5: Registering for an Apple ID In the case of developing country like Cambodia, English is neither an official nor a second language, thus registration for a new email can still be an issue for many people. To solve this 8 problem, in some retailed stores, the staff of the store actually creates an account for their customers and download the needed applications right there in the store. But as known, applications are being updated sometimes and it is the jobs of the customers themselves. This is not an actual case being described in any paper before but will be discussed within this research paper to actually understand if the downloading or keeping up to date with application is a problem to them or not. 2.1.4 Existing Food Websites and Applications: Another interesting information is that there are a few websites with applications for food operating in multiple countries around the world included Cambodia. However, websites like those are more fit to tourists since they focus mostly on restaurants and their audiences are worldwide. Four websites were selected according to their popularity to learn about here as seen in table 1. Table 1: Summary Information on the Four Travel/Food Websites and Applications TripAdvisor Zomato Yelp Foursquare Info >290 millions reviews - Started in February 2000 - Operate in 47 countries including Cambodia - Started in 2008 - Operates in 23 countries, no Cambodia >70 million reviews - Started in 2004 - 30 countries >50 million users each month Content Flight, hotel, sightseeing, restaurant Only on food and drink A wide range of topics from food to education, art and entertainment, different services and more Main travelling topics such as food, fun and shopping Mobile Application 230 million downloaded -Android and iOS Started in 2011 -Android, iOS, Window and Blackberry Started in 2008 Started in 2009 State of Art 9 2.1.4.1 Trip Advisor, Zomato, Yelp and Foursquare Trip Advisor Trip Advisor is one of the biggest travel companies in the world. According to its fact sheets, this travel site acquires more than 290 million reviews and opinions from travellers around the world. It started back in February 2000 in 47 countries including some of the developing countries in Asia such as Thailand, Indonesia, Malaysia and others but not yet Cambodia until recently. The interesting about Trip Advisor is that it does not just look at an aspect of traveling but a combination of other things including hotel, sightseeing places, restaurants, and flights. Some times after the success of the website and while the usage of mobiles are growing, Trip Advisor has created its own application and made available to all mobile devices both on Google Play and App Store and even for window phones market. In terms of mobile phones, there are 230 million mobile apps downloaded so far (About TripAdvisor, 2016) Figure 6: Trip Advisor's Homepage Moreover, it has introduced three crucial features to this mobile usage, which are ‘Near Me Now,’ ‘Offline Feature,’ and ‘Neighbourhood.’ (Fact Sheet, 2016) • Near Me Now: This feature simply uses the user’s current location and offers any clicked options to provide either restaurants, hotels or other needed location near the users. • Offline Feature: This feature allows users to download and save information of an entire city to use later on. The information includes reviews, locations of the places needed and users can use it later without the necessity of having Internet connection. 16 Traffic and Land Transportation Act Highway Act market is controlled by market committee, and Khan/Sangkat controls other areas. Taxes and fees Sanitation fees since 2000 Street vendors do not pay taxes Extortion and rent seeking in some places Specified in Business Operation Tax Book All street vendors pay tax daily No document that specifies the fees collected by market committees and police Registration of vendors Started in 2000 No registration Other policy documents Beautification of city (can impose harsh measures on vendors) No concrete direction for vending activities management, but left to BMA governor’s discretion Bias towards rural development; focus on infrastructure and housing in urban areas; rather than workplace support Social security 30 baht universal health coverage None Possible success cases Self-management; Private agent under concession from state; management in private land Vendors’ Association able to cultivate sense of trust From this table, a clear assumption can be made in relation to street food of these two countries. It is seen that Cambodia is still way behind in terms of all types of rules, policies or in any chances development or consideration at all. 2.4.2 What has been done online so far? Taking into account the significance of social networks revealed that Facebook has become the second most important channels for accessing information in Cambodia (Phong and Sola, 2015). We can see the huge growth of online contents and that includes street food as well. The same source arose a question about the efficiency of Mobile Application in this country. Even though one in three Cambodians used or had used Facebook, the application is not even close to being the most popular one. They prefer using their mobile phones for playing games, listening to music, taking pictures and listening to radio. For this reason, the State of Art 17 study has favoured on creating a prototype of Mobile Responsive Website rather than a Mobile Application. Now take a look back within Cambodia itself when it comes to the online world. What has been done so far? There are also some noticeable online contents on social media of street food such as the new Instagram pages called instakhmerfood, vrecommend as well as instafoodkh, in which the same contents are shared to a Facebook page. The sharing of content was mostly picture of the food on Instagram but later on it added location, prices, contact number and more. Also, one of those Instagram pages shares the same contents to Facebook. Here are some details of these pages: Table 4: Information on Phnom Penh Street Food on Social Media Although “vrecommend” and “instakhmerfood” are not dedicated to just street food but many of their contents are about street food and are shared on regular basis. Whereas for “instafoodkh,” which runs the same contents both on Instagram and Facebook, there is less content and started much later but contains many more followers and numbers of like. Though that cannot really prove any point but it is an interesting aspect to take a look at. So far, beside these social media pages and some other blogs post by tourists visiting Cambodia, there is not yet any website devoted specifically to just street food in the capital city of Cambodia. Name Date Started Types N. of Post N. of Likes URL instakhmerfood Jul 13 Instagram >1200 >7500 https://www.instagram.com/ instakhmerfood/ vrecommend Apr 13 Instagram >500 >800 https://www.instagram.com/ vrecommend.co/ instafoodkh Jun 15 Instagram >200 >10k https://www.instagram.com/ instafoodkh/ Instafoodkh* Nov 15 Facebook N/A >6k https://www.facebook.com/i nstafoodkh/ 18 Figure 10: Phnom Penh Street Food on Social Networking Sites 2.4.3 Internet in Cambodia An interesting research of Youth in Cambodia has revealed some interesting updates of youth in Cambodia in terms of media as well as mobile phone usage such as: 7 There are 19.1 million mobile phone subscribers in Cambodia. This is higher than the population of the country because many people use more than one SIM card for mobile phone. 7 In Cambodia, the Internet is available via mobile phone, USB modem, Internet café, and some workplace or home, and is provided by more than 30 companies. 7 A third of young people (15 to 24 years old) reported access to Internet (BBC Media Action, 2014). This shows that the numbers of mobile and Internet users in Cambodia is very interestingly promising among young people. General web surfing fell as the third most popular reason for them to use Internet. Thus, creating an interesting site could possibly be a mean for them to surf and use more. Meanwhile, according to some estimate, there are 1.65 million smartphone users in Cambodia (Khmer First Holdings, 2013). Remarkably, the numbers of Internet users is growing in Cambodia, from just 2.7 millions in the end of 2012 to more than 5 millions of nearly 15 millions population as of 2014 with a prediction of reaching almost 65% by 2020 State of Art 19 (Xinhua, 2015). Likewise, there has been an outstanding growth of mobile phone in Cambodia, 39.5% in 2015, a 51% increase from 2014 and almost 100% increase from 2013. Not just mobile phone but smart phone is also on an increase 31.5 % increased in 2015 compared to the previous year which equals to 28.3% of total amount of mobile phones (Phong and Sola 2015) alongside with the great latest technology available for mobile phone such as Responsive Website and Mobile Application, more effort should be put into making this an information serving platform for its users These numbers are all very noteworthy and showing the possibility of youth using mobile phone and Internet in Cambodia. 2.4.4 Cambodian Youth Cambodia has the youngest population in South East Asia with 2/3 of the country are under 29 years old and 1 in 3 people between 15 to 29 years old (BBC Media Action, 2014). Also, due to the facts that there are many migrations happening among youth every year for better education or economics (UNFPA Cambodia, 2013), youth becomes the main target of many studies of this country. Likewise, youth are the potential users to drive many factors of Cambodia; thus they are the target group of this specific research. 20 3. Methodology 3.1 Task Analysis: In order to create a prototype for usability testing, it is important to understand first what the goals of the users are. As this research paper is one of the first to look into contents of street food in Cambodia, it is hard to base the users’ goals on such specific case based just on existing literature reviews since there are not really any. Thus, four methodologies were chosen to fulfil the task: creation of personas, semi-structured interview, field observation and online survey. 3.1.1 Personas The creation of personas was also based on information gathered from the interview and fieldwork through audio calls. There are four main personas mainly differences in current status and life style: Table 5: Persona – THIDA Thida (Female) - Age: 19 years old - From: Kampong Cham - Current Address: Phnom Penh - Education: Freshman in Finance and Banking - Mobile phone: Samsung Galaxy A3 - Application: Android - App Type: Facebook, Line, YouTube - Usage: mostly to call and text friends through Line, rarely call - Texting: using half English half Khmer, sometimes using the English fonts for Khmer as well. - Transportation: Honda C90 Monthly Spending - Allowance: 250 USD - Shared house rent and bills: 110 USD - Food: 3.5 USD per day - Internet: 5 USD on phone only Mostly she shared cooking schedule at Methodology 21 home with the other two girls who shared the house but once or twice per week they would go to eat out mostly street food since it is cheap and delicious. Street Food Her favourite type of street food is grill food. Seafood is the best but she cannot have it too often because it is more expensive. It could cost up to 5 USD per person per meal for grilled seafood. Normally, she would have grilled eggs, chicken legs and wings, frogs, meatball, noodle salad, noodle soup, fried rice and so on. Sometimes she sees some Facebook newsfeed sharing those street food places but normally she would just ask her friends. She doesn’t mind much of hygiene as long as it is not too bad since it is street food. However, she doesn’t like overpricing places and rude sellers. First used Internet She first used internet just two years ago when there was a first internet shop in her town, which she had to pay 50 cents per hour. Back then she just used it to check for some universities’ information in Phnom Penh and some English words. Table 6: Persona – BORA 22 Bora (Male) - Age: 25 years old - From: Phnom Penh - Current Address: Phnom Penh - Education: Graduated Bachelor in Sociology - Current Position: NGO staff - Mobile phone: iPhone 5S - Application: Apple App - App Type: Games, Social Network - Usage: Playing games, checking news, checking FB… - Texting: a lot of English with people from work and some friends, else using Khmer fonts - Transportation: Honda Dream 2015 Monthly Spending - Salary: 400 USD - Lives at home with parents - Spends mostly on food outside home and clothes Street Food Eats out at least a few times a week with friends after work. Each time spending about 3 USD at least and could be up to 10 USD. Sometimes friends from school, other times after playing football, or with people from office. Normally his friends know the good and new places. They love trying new types of street food. First used Internet He first used internet when he was 17 since his parents bought a shared computer at home for him and his sisters. Mostly used it for game back then and old social network site like Hi5. Table 7: Persona – RAKSMEY Methodology 23 Raksmey (Female) - Age: 17 years old - From: Phnom Penh - Current Address: Phnom Penh - Education: Grade 11 of ELT private high school - Mobile phone: iPhone 6S - Application: iOS - App Type: Games, Whatsapp, Line, YouTube, Facebook - Usage: Call, text and chat with friends and family. Checking information and posting on social networks. - Texting: Mostly English - Transportation: CRV Car Monthly Spending - Allowance: More than 500 USD/Month - Food: At least 10 to 20 USD per day - Shopping: Around 200 USD At home, she has a maid to make sure that there are always meals available. However, she likes hanging out in café with friends during the afternoon and many times go to street food after. But Raksmey only likes places that are clean and look nice. She doesn’t mind paying more. Street Food Her favourite type is soup. She goes many times to Bitter Gout soup near Olympic Stadium since there’s a nice car park place and it’s convenient. It usually cost about 10 USD per person per good meal and drink. Normally, she would have the soup and grilled spicy shrimp. She knows that place from her friends but it is hard for her to find new places since she doesn’t trust the hygiene at many places in town and she need space to park. First used Internet She first used internet since she was 10 years old. Her father had a computer for her and her sister to play and learn typing. She always has Wi-Fi connecting at home, which 24 is paid by her parents. She likes posting things on social network and sharing where she goes, what she does or eat. She has a few thousands friends on Facebook and love posting photos on Instagram. Table 8: Persona – SOVAN Sovan (Male) - Age: 23 years old - From: Kratie - Current Address: Phnom Penh - Education: Graduated Bachelor in Design - Current Position: Private Company staff - Mobile phone: LG G3 - Application: Android - App Type: Photo Edit, Games, Social Networks - Usage: Editing photos and short videos, playing games, checking FB and Instagram - Texting: with most friends in English, with people from work and family usually in Khmer using English fonts - Transportation: Honda Click 2013 Monthly Spending - Salary: 750 USD - Rent a shared house with a good friend - Spends mostly on rent, bills, food, and clothes Street Food Eats out almost everyday or at least pack to eat at home. Each time spending about 3 USD at least and could be up to 7 USD. Mostly go with close friends, and sometimes with people from work. He is a good at tracking information about where and what to eat. Always print screen when he sees such info or write down when his friends talk about it. First used Internet He first used internet when he moved to live in Phnom Penh when he was about 18 years old, so about five years ago. Methodology 25 Mostly used it for doing schoolwork and researching for new design ideas. 3.1.2 Semi-structured Interview This interview was conducted with five people from different background and social status to try to diverse the users. The interviewees include high school students, university students, staffs of NGO and private companies. It was made during the second week of February 2016. Here is the list of questions in the interview: Personal Information: • How old are you? • What is your current position? • Where are you originally from? • What is your level of education? • How much English have you studied? • Have you used them often in text? Mobile Phone and Internet: • What kind of phone do you use? • When did you first use Internet? • What were you using it for? • How often do you use it now? • Which one you use more? Desktop or mobile? • Have you ever used it to look for food? • How? • Do you have application on your mobile phone? How many? • Mostly what types of applications are they? • Do you download from the market yourself? • Do you access website? What types? • How much do you think you can trust that information from the internet? Street Food • How often do you eat street food per week? • What kind of food? • How much do you spend on food outside home per week? • How much of those are on street food? • How do you find out any of those places to go? 32 Figure 12: Task Analysis Structure of Phnom Penh Street Food In the following list, there are all the possible tasks analysed on the content of the street food site, they are ranked from the most prioritized task to the least. Task 1: Search for street food place to go, steam food near Bak Touk High School 1. Go to Home Page 2. In Location Box, select Bak Touk High School – In Type Box, select Steam 3. After the next page is revealed with street food options and the map of its’ location, select one of the display of street food Task 2: Search for new trendy street food to go 1. Go to Home Page 2. Scroll down to Trendy Street Food This Week 3. Select the choices of favourite Task 3: Search for location of a street food place, Fried Rice Bak Touk 007 1. Go to Home Page 2. Type in Location Box – Rice Bak Touk 3. Select from the suggested list of street food 4. Look at the location as address or on the map below Task 4: Check the rate of a street food, Fried Rice Bak Touk 007 1. Go to Home Page 2. Type in Location Box – Rice Bak Touk 3. Read the rate of Fried Rice Bak Touk 007 from the suggested list of street food Task 5: Search for prices of dishes of a grill street food in Sisovat High School 1. Go to Home Page 2. In Location Box, select Sisovat High School – In Type Box, select Grill 3. Select one of the display lists of street food 4. Read the menu and its prices Task 6: Rate one steam street food in Intradevi High School and log out 1. Go to Home Page 2. In Location Box, select Intradevi High School – In Type Box, select Steam 3. Select one of the display lists 4. Click on Rate 5. Log-in with Facebook 6. Click on the stars of each item to rate 7. Click on Finish 8. Scroll up to the top right of the page 9. Click on Log out Task 7: Comment on a barbecue street food in Bak Touk High School 1. Go to Home Page 2. In Location Box, select Bak Touk High School – In Type Box, select Barbecue 3. Select one of the display lists 4. Scroll down to comment 5. Click on Comment Box 6. Log-in with Facebook 7. Write the comment 8. Click Publish 33 Task 8: Post photos in comments 1. Go to Home Page 2. In Location Box, select Bak Touk High School – In Type Box, select Barbecue 3. Select one of the display lists 4. Scroll down to comment 5. Click on Comment Box 6. Click on Post Photo icon 7. Select the photo from the folder it locates 8. Click Publish 3.2 Usability Test: To conduct the usability test of the first hi-fi prototype of street food, three scenarios were created in correlation with the tasks analysis. A famous UX design platform known as ‘UXPIN’ was selected to create the prototype due to its richness of usage and availability. The prototype is divided into three different forms according to each scenario. The recording technology was well considered and prepared before the testing due to the fact that the testing is to be done online with people from a distance in Cambodia. The best practice for each respondent would be to talk and be recorded on Skype via their laptops or computers while testing the prototype on their mobile phones. As Skype video cannot be recorded for analysis usage, another recording program is used called ‘QuickTime Player,’ to record screen conversation. However, again this program could record only on screen video without the audio; hence, ‘Soundflowerbed’ was used as it could record directly from the audio of the computer without audio from the microphone. It was not a perfect option because the conductor could not hear what the respondent says during the testing. Yet, in a way it is relatively good that the respondents are left alone to figure it out all by themselves as they would do in real life situation. Figure 13: Technology for Conduct Usability Test Prototype I Before each test, the respondents were briefed with the overall objectives of the test, asked permission to record their voice/video and asked some basic questions related to them such as: • How old are you? • What is your education level? • What is your phone model? 34 • How often do you consume street food? After that, they are sent the scenario to read and understand what situation they are in and what task they are supposed to do. Before receiving the link of the prototype, they get to ask any questions about the scenario and clarify any doubts they have. Then they are left alone to fulfil the task and requested to speak out loud along the way of completing as ‘Think-Aloud’ methodology. Last, after they finish completing the task, they are asked to give final feedbacks on the prototype. The questions are: • What are the things that you like about this platform? • What are those that you dislike and wish to change for better usage? The entire process takes about 25 to 30 minutes for each respondent. 3.2.1 Prototype I 3.2.1.1 Scenarios Scenario I: You are in grade 10th of Santhormok High School and just finishing biology class at about 4:30pm since the teacher leaves a bit early. So you have about an hour to grab a quick snack with friends before English class starts at 5:30pm and you will be having dinner at home after class. So some grill eggs with some chicken wings would be perfect and cover enough till dinnertime. Beware that you are students so would not want to spend much money maybe 10,000 Riels (2.5USD) and your friends can share the meal. Task: Go to your phone and search on street food website for grill egg near Santhormok High School and note the prices so you can tell your friends. 35 Figure 14: Prototype I for Scenario 1 Process: 1) Go to the main page of the site with a link provided 2) Click on ‘Location Box’ for a list of location 3) Select a location 4) Click on ‘Select Type’ for a list of type of street food 5) Select a type 6) Click on ‘Type Name’ and a typing keyboard appears 7) Click on the keyboard to pretend to write 8) Click on ‘Search’ icon to go through the searching process 9) A new page listing of searched street food places was presented with a pinned map below 10) Click on one street food place 11) A new page listing details of the particular street food place revealed (in this case, Grill Egg Santhormok 36 12) Read the information of the prices 13) Click on more to view more comments of the place Scenario II: You are an NGO staff working in Toul Tompong area. Your work finish at 5pm but the traffic is bad and you are tired so you think of having some gathering with some friends for some street food outside. Since you live alone, you would not want to go home and cook again after this so if it is something as meal and with some rice and a beer, it would be perfect. There have been a few places that you usually go with them between this area of work and your home behind the Royal Palace. Your name is Keo Thida. Task: Go to your phone and search on street food you used to go, Sisovat Seafood then save it to favourite. 37 Figure 15: Prototype I for Scenario 2 Process: 1) Go to the main page of the site with a link provided 2) Click on ‘Location Box’ for a list of location 3) Select a location 4) Click on ‘Type Name’ and a typing keyboard appears 5) Click on the keyboard to pretend to write 6) Click on ‘Search’ icon to go through the searching process 7) A new page listing of searched street food places was presented with a pinned map below! 8) Click on one street food place 9) A new page listing details of the particular street food place revealed (in this case, Grill Seafood Sisovat 10) Click on the heart icon to save as favourite and a request to log-in tap appears 38 11) Click on Log-in and a log-in with Facebook tap appears 12) Click on Log-in with Facebook 13) A new page logged-in as Thida K. replaced 14) Click on the heard icon again 15) The place is saved as the icon turned into coloured Scenario III: You are a university student majoring in Teaching English as a Foreign Language in IFL. You just finished you final exam today and it was Friday so you and a few good friends from class want to explore a new street food place, to eat and celebrate. You went to a new place that you found from the Internet, Grill Beef Bak Touk. The information you got looked accurate as the photos you saw matched the real food. Moreover, The food taste really good but the service is way too slow and a bit pricy. You want to rate the place and note this down for other friends. Your name is Keo Thida. Task: Search for Grill Beef Bak Touk, rate and comment. 39 40 Figure 16: Prototype I for Scenario 3 Process: 1) Go to the main page of the site with a link provided 2) Click on ‘Location Box’ for a list of location 3) Select a location 4) Click on ‘Select Type’ for a list of type of street food 5) Select a type 6) Click on ‘Type Name’ and a typing keyboard appears 7) Click on the keyboard to pretend to write 8) Click on ‘Search’ icon to go through the searching process 9) A new page listing of searched street food places was presented with a pinned map below 10) Click on one street food place 11) A new page listing details of the particular street food place revealed (in this case, Grill Beef Bak Touk 12) Click on ‘Rate Icon Box’ to rate and a request to log-in tap appears 13) Click on Log-in and a log-in with Facebook tap appears 14) Click on Log-in with Facebook 15) A new page logged-in as Thida K. replaced 16) Click on ‘Rate Icon Box’ again 17) A box stating the rate from worst to best appears 18) Click on the rating stars 19) A thank you box appears to thank the respondents for rating 20) Click on the thanks box to continue to normal page 21) Click on ‘more icon’ to read comments 22) A new page of comments and pinned map appeared 23) Click on ‘Write a comment’ to write a comment and the keyboard appears 24) Click on the keyboard to pretend to write 25) The comment was posted 41 3.2.1.2 Respondents There were 10 respondents selected to interact and comment on the prototype. The respondents are potential users as they are regular consumers of street food and routine mobile users. They are from a range of ages from 15 to 30 years old and have various occupations such as high schools students, university students, teachers, private company and NGO staffs. Three respondents were set for each scenario except the first one. The first scenario has an extra respondent to just test if the prototype works and to give an overall comment. The first scenario is mainly about understanding the template and seeing if it is attractive to use at all. 3.2.1.3 Result 3.2.1.3.1 Overall Observance Most of the testing went smooth as expected though among all, only three cases got to use the all the technologies as planned, meaning to use both mobile and computer at the same time. Though, all were requested to have Skype account, a mobile and a laptop/computer with secure Internet coverage, not everyone did as so. The testing continued anyway and the result deemed to serve well eventually. 3.2.1.3.2 Calculated Evaluation A special evaluation system was selected to use for the testing due to its practicality of evaluating the satisfaction, efficiency, and affection of the prototype. It is known as ‘User Experience Questionnaire.’ This evaluation package has its own set of questionnaires for the respondents to rate after using the prototype. There is also available tool to input the data result, which is automatically processed and the output is presented. Figure 17: Data Entered for UEQ 48 Figure 21: Prototype II for Heuristic Evaluation 3.3.1.2 Respondents Five specialists were selected to evaluate this updated prototype. However, this assessment is only being made in a few days due to the fact that there is not so much time available. The evaluators were given proximately a few days to take a look carefully at the prototype, try out the tasks and interact with the prototype in order to understand the prototype fully. The respondents include designers, informatics students and even website/application developer who has been working for some years in this field in Phnom Penh, Cambodia. They are students of the specialists’ field and from a variety of places such as Portuguese engineering student from FEUP, Cambodian engineering student in Évora, Portuguese design student from 49 FBAUP, Cambodian design student in Berlin, and a web/mobile designer/developer who has worked in Phnom Penh on food field for many years. 3.3.1.3 Result 3.3.1.3.1 Visibility of System Status Half of the comments agree that the contents and functions of the prototype were well defined and serve its purpose good. However, some also mentioned that the user experience design is not very good yet. Some first time users might not be able to guess what to do on the landing page. Another complaint is mainly about the dysfunctional due to the program itself since there was only one sample of street food being made, so when they click on other places it did not work. There are also some design comments in terms of the display of each street food places such as ‘Image is important and shouldn’t be hidden under the restaurant’s name.’ 3.3.1.3.2 Match between System and the Real World This concept focuses mainly on the familiar language that is used in the prototype so that it is easy for users to use and understand what to do. The reactions are quite positive in this aspect as it seems fine and easy for the user to figure out. One of the evaluator stated ‘the concepts on the menu are very familiar to the users. It shows the location and popular food in those places.’ 3.3.1.3.3 User Control and Freedom This point received the most negative comments and it is in need for improvement according to the evaluation. Mainly, the comment is about the Home Button and Back Button. It was mentioned in the questionnaire that there is not enough Back Button and Home Button to go back to where they were or to get away in case the users change their minds or want to stop half way. One of the evaluators even gave an example such as ‘After clicking login, you cannot come back if you decide that you do not want to log in now.’ The fault also applies to other part such as saving to favourite, rating and commenting. 3.3.1.3.4 Consistency and Standards There are many affirmative outcomes from this piece; however, four crucial traits were picked out as well. The first one is the fact that the logo and name should be included and used as Home Button rather than the Home Button itself. The second one is about the search function. Though this feature has already been updated from the last usability test, there is still complains that there could be a better way to improve it. For instance, one of the assessors wrote in the questionnaire that ‘There should be a screen to display as food category, so users 50 can choose quickly the type of food they like.’ The third remark is about the usage of ‘triple dot.’ This feature is chosen to use many times in this prototype according to the functionality of the program for making this prototype. Since this program does not allow scrolling up and down as how reality works, these three dots are used to simulate this feature. Last but not least, there was a very critical useful mention that ‘The login requirements are inconsistent. If I am not logged in, I can see that I can “Rate” although when I try to, it asks for my login. This is good. When I go to the comments section though, I can only see that I can comment if I am logged in. Either the same principle should be applied or a "you have to be logged in to comment" label should be included.” 3.3.1.3.5 Error Prevention Mostly this aspect refers to the precaution by the creation of the prototype itself in a term that the developer has thought of and tried to prevent users for making mistakes while using or trying to figure out the prototype. The question is quite general so the result from the evaluators are quite confusing rather than constructive also considering the fact that the prototype could provide everything as a real product could. For example, one of the evaluator wrote that ‘I try to find a street food on search page without type any name or location, but it still displayed a result. It should ask user to enter the name of street food or location.’ This is mainly about the function of the prototype, each function of the prototype could create a few interaction but those interactions are so simple that it is a click and go, not like in final product where it would confine users to type the needed information first, while another gave a simple positive comment on the approach chosen for rating function and log-in by auto filling in information. 3.3.1.3.6 Aesthetic and Minimalist Design Most of the comments received by this point has much to do with design and could somehow be assumed that the design of the prototype is not very good yet. Here are some of the statements by the evaluators: ‘Perhaps some spacing between pictures are needed. Some free white space are as important as contents to give a harmonized, easy-to-use look and feel.’ ‘I don't think just only restaurant name and image are enough. Some sort of short description and price, for example, are useful for users to make their decision.’ ‘Yes. But I think the hierarchy of some elements it's not correct in some cases, because the ones that look more important (that are bigger, brighter, more highlighted...) are not the ones that are more important in the screen. For example, in the "Grill Beef Bak Touk" screen one of the most important things to see its the name of restaurant but the log in and rate buttons are way bigger.’ 51 3.3.1.3.7 Help and Documentation Though most think that this prototype is easy to use and simple to understand, they still suggest that there should be some sorts of helping layout or FAQ since this is new anyway and for first time users, it might be a great help to them to figure out where to go or what to do. The last analytical criteria in this questionnaire is the comparison between Mobile Application and responsive mobile website of which one might fit better for such contents and usage needed. More of them suggested that Mobile Application is a better option due to the trends among food contents, the contribution from users as social networking site, the loading time as well as the access to the mobile device’s functions. However, among those there is also a statement adding to the fact that considering the simple contents and functions needed by the users, a Responsive Website is enough to represent the content. Plus some more advantages of Responsive Website that it can be used on other platform such as PC and tablet which would display information like map in better ways and can also be ported to an app with some available tools such as ionic. 3.4 Final Prototype and Framework After analysing and considering the comments and suggestions made by the specialists in the heuristic evaluation, many aspects of the prototype have changed especially in terms of design. It contains more or less the same contents as the last prototype from the usability test; however, the looks and the convenience of the usage have been improved. Although this prototype has been refined after all these stages, there are undoubtedly aspects that could be made better. Beware of the change or accessing the prototype through Facebook due to the importance of Facebook usage within the target users. Meanwhile, now that all the contents are finally been cleared finalised, the framework comparison between the two solutions of mobile can be compiled. Bear in mind that this framework is based on the notions of the importance contents and functions of the street food final prototype below figure 22. 52 Figure 22: Final Prototype 53 Those include: • Home Page: Trendy Food (Street Food which are most viewed by users in a week), and the five main functions (Home Button, Map, Search, Setting, Profile). • Map: All available street food in Phnom Penh • Search Page: Three main functions; type for names or location, search by locations around me and search by selecting the known areas • About Us • Profile Page: Favourite Places Saved and Comments. And here are the inclusive comparisons between the two commonly used platforms on mobile in accordance to the result of the prototype in comparison on both platforms: Mobile App and responsive mobile website. Table 11: Framework of Street Food in Phnom Penh in Comparison of Mobile App and Mobile Responsive Website I.D Description of Function Mobile Application Mobile Responsive Website 1 Budget Cost more due to the fact that for all these contents to be available and widely used by users, at least a few different apps need to be made which are iOS, Android and Windows Phone. Cost less since it is only made once and can apply to all the different types of mobile available in Cambodia considering also the variety of Chinese phones. 2 Content Display (Home screen, Contact) Images are surely an important contents elements; hence will be loaded faster in Mobile App. The first time accessing could be a bit slower than app but after the caches, loading of images should not be more of a problem. 3 Map A big role being played by the use of location detection in the function of mobile itself. Two later technologies also provide the possibility of catching the current location of users for mobile web. One of the ways is to connect the website directly to the available Google Map App in the mobile or using HTML 5 54 Geolocation. 4 Access Need to download from Apple Store or Play Store. But after, it is only one click away from using. Can be accessed just by URL. 5 Performance Mobile Application tends to perform better; however, there are possible aspects to do during the development stage to improve the performance of Responsive Website (Wroblewski 2011). 6 Offline Function Can be very helpful for some contents such as Menu or Prices or each place. N/A 7 Typography Suggested aspects based on the prototype. Font Type: Just one or two. One should be San Serif. Font Size: 12 to 16 depending on the role of the text. 16 for title, 14 for sub title and 12 for normal reading text. Numbers of characters: Less than 35 Typography and images. The first version of the prototype font ‘Arial’ were chosen to use from San Serif font family. As it is the first prototype, the look and the accuracy of it were not much of a focus yet. The second prototype involves heuristic evaluation meaning hearing from experienced people like web/mobile designers. The suggestion on typography of this second prototype was to use two mixed fonts rather than just an Arial, and it should be something unique and stand out. For the final prototype as a result of the collections of reviews from various sources of potential typography among many on the digital world as well as improvements from comments of heuristic evaluation, two San Serif fonts type were chosen to use: Nunito and Cantarell. The fonts sizes are mostly between 14 to 16 points. 16 font size is only used for big title, while 14 is for sub-title. Text are in Cantarell and in size 14 except on the menu page where it goes down to 10, still readable due to the small amounts of text but needed to be done so in order to fit three dishes for each row. The characters are always less than 35 for each row and the maximum is only used for full text reading such as in ‘About Us’ or description of the street food. Else, most of the contents are just names of the places and the dishes which is around or less than 20 characters. Image is an important element of the prototype after text. The images are mainly used in two forms here in order to be consistent. As seen in Home Page, the big image is 300*250 pixel and the smaller ones are 145*120 pixels, with enough wide spaces aside for attractiveness and the easiness of comprehension. On About Us page the size of the image is a bit bigger due to the little content needed there, 320*280. While on the Menu Page, each of the image consists of 93*74 pixels; the main idea is to fit three images in a row and still have some white spaces around. 55 Performance. The speed performance of Mobile Responsive Website creates one of the big down for it in terms of speed comparing to Mobile Application. However, there are suggestions to pay more attention on making the product to improve these sorts of performance meaning making users download less by managing both size and number of files. Here is a list of things that developers could do: ‘- Use image sprites to group multiple images into a single encoded file. - Bundle together and minify CSS and Javascript files. - Limit or remove dependencies on heavy Javascript libraries—especially if they are just being used for one or two functions. - Likewise, limit the use of CSS grid systems. - Use proper HTTP headers to ensure files are appropriately cached in the browser’s memory - Where appropriate, take advantage of modern browser capabilities like Canvas and Appcache in HTML5. - Use CSS3 properties for rounded corners, gradients, text shadows, and box shadows.’ (Wroblewski, 2011) Though Mobile Application came out with more positive outcome on each stages of the comparison, Responsive Website on mobile still seems to be a better fit for this context for two main reasons: • The significant differences between the two platforms are speed and functionality. Though Responsive Website could be a bit slower but if all the functions are made carefully to improve speed and considering all the comfortable usability of mobile itself, both speed and functionality are not significantly different from Mobile Application. • Second, bearing in mind that this will be the first platform of this sort of content which is hard to gather information and needed a whole lot of updating to always be current and trendy for its users, Responsive Website reaches a much larger audience in one shot and it is less difficult to create from scratch comparing to Mobile Application. ! 56 4. Conclusion and Future Work Many of the testers have claimed to highly appreciate the concept of creating this prototype since they mentioned that there is a need of such tool to search for street food in Cambodia. Though the numbers of testers are very small and cannot represent the whole city of Phnom Penn, it is an interesting and inspiring part of the outcomes. Plus, the crucial types of information that users need in order to decide which street food place in Phnom Penh they should go to are figured in rank as friendliness of staff (service), hygiene, types of food, pricemenu-location, parking space, reviews and photos. The evaluation on both prototypes I and II have given a very constructive feedback to update the final prototype. Prototype I was based mainly on normal potential users while Prototype II based more on the specialists in the field; people such as designers and informatics. Moreover, the prototype itself has also taken into consideration the direct connection with Facebook, the most used social networking site in Cambodia. It is a direct and first suggested login for users while using this Street Food prototype. It also linked directly to Facebook in order to give comments on each street food place. Last, a robust framework was compiled in comparisons of the two mobile solutions: Mobile Application and Mobile Responsive Website. Both solutions have been compared on various aspects as a result of what the contents of the prototype look like in the final prototype. Though there are more positive aspects of Mobile Application than Responsive Website, the website on mobile phone still fits better for this sort of contents of street food in Phnom Penh, capital city of Cambodia for the size of its contents at the first stage of creation as well as the possible development to improve speed and functionality to being far least different than those of Mobile Application. For future work purpose, due to the fact that this is largely a theoretical comparison between these two solutions, it would be ideal to actually build both platforms and test them in real life to know how far different it really makes. Most of the time and effort in this study has been taken to create the prototype and gathering crucial contents of what this prototype might 57 look like since this is the very first one of street food. Future researchers who want to look deeper into these sorts of context and technology could start from what has been created here: a mobile prototype on street food in a developing country like Cambodia and a robust framework comparing the prototype result as in Responsive Mobile Website and Mobile Application. Last, there is a clear interest in the importance of understanding such concept as this paper so far has been selected by a few well recognized publications such as an Ergonomics Conference in Croatia, HCI International in Canada and Common Ground Community Publishing after the reviewing of the abstract version. Though the publication has not happened yet for the first two publisher, the paper is currently in the process of final reviewing process in Common Ground Community Publishing. 64 65