Final Project – Designing an Interactive Product

Finally, we have come to the final project of the semester, which will take a total of eight weeks to complete. We basically have to design an interactive product to address particular need(s) of our target group(s) and come up with a high-fidelity prototype (not necessarily fully functional) by the end of the semester. My team for this project consists of Eunice, Wingyan, Huiyan and myself and during the first tutorial sessions after the mid-term break, we started brainstorming several possible ideas which include a database website for an orchestra and an online instruction manual for a camera. However, after consultation with Reddy, we finally decided on an idea which best suits our project requirements of a quantum-leap innovation which the previous two ideas are not – an ordering-cum-entertainment system for Fish & Co. Restaurant, the likes of which are not widely seen in local restaurants (Sakae Sushi has an online ordering system but is observed not to be widely utilized). The idea here is to facilitate the ordering process by freeing up manpower for taking orders in order to cut short waiting type for the dishes. At the same time, the customers can be kept entertained by our entertainment system so that they will not feel bored or restless while waiting for their food.

Background of Fish & Co.

Fish & Co. is a casual dining restaurant with over 10 outlets in Singapore. It has a nautical-themed ambience and serves all dishes Mediterranean-style – in a pan. It is known for its informal and sometimes humorous approach, such as the presence of fishy jokes on its website (www.fish-co.com/main) as well as scattered cards around the restaurant’s tables.


Phase I – Discover – Need Analysis

In the first phase, our task was to define who our target users are and conduct a needs analysis of our target audience. Some of us conducted a little ethnographic research by observing Fish & Co.’s customers during the peak dining hour (weekend 7-8pm) and taking note of some of the problems they encounter. Supplemented with our own experiences and those of our friends’, we came up with the following list of common problems faced by Fish & Co.’s diners:

1. Orders taking significantly slower
2. Orders forgotten/mixed up by waiters
3. Time taken for orders to be served extended
4. Children bored and unable to run around the restaurant while waiting to be served

We have also found out about what customers’ needs and expectations are. They include: 1) efficient service, 2) good food and dining experience that is worthy of the price and 3) choice of healthy food. The last need is especially pertinent in today’s health-conscious society which is plagued by the prevalence of lifestyle diseases such as cancer and diabetes, diseases which could be easily prevented by eating healthy.

As for the company’s needs, we have come up with the following:

1. To enhance diners’ experience in the restaurant

2. Win over diners so that they will keep coming back
3. Earn more profits

Hence, to provide a win-win situation that addresses the needs of both the customers and the restaurants, we have come up with a product – the ePan which is essentially an electronic device (we have not yet decided whether it is hand-held or an LCD screen mounted to a table) that incorporates the following features and accomplishes the following goals:

1. Handheld electronic, wireless device / touch screen LCD
- To accommodate the small dining area
- Allows for easy play and maximum interactivity

2. Online food ordering system
- Fast efficient and no frills way to order food at dinners’ own pace

3. Themed games
- Occupies diners’ attention while waiting for food

- Diners won’t actually “feel” the waiting time
- Entertain diners, especially children

4. Fish and fun facts
- Allow diners to have information on their food and choose more healthily

Reddy and our classmates generally like our idea. They think that this device can come in handy to entertain single, hungry customers who want to kill some time while waiting for their food. The same can be said for kids (accompanied by their parents) who can get restless and run around the restaurants after they finish their food, disturbing other diners in the process.

However, one of our classmates said that there may not be an actual need to significantly cut the waiting time as after all, it is not a fast food restaurant and waiting is part of the dining experience. Also, Reddy suggested that electronic games for kids might not work out so well as they can be entertained by offline board games or cartoons instead. Taking these comments into consideration, we set about zooming in on our user profiles and needs for the following week. We have decided to go with our classmates’ suggestion and do away with the ordering component, since it has a totally different functionality from the entertainment system anyway.

Phase II – Define – Requirements Specifications

For this week, we set about narrowing down and defining three groups of target users that we want to cater the ePan to:

1. Health-conscious (including young couples who do not have much time to cook)
2. Large groups of friends (usually teenagers or young adults)
3. Families with young children

Hence we set about creating our user profiles and personas for these three groups of people (1 & 2 being advanced users with children being novice users) and a fourth group – the anti-user (typically older, traditional “uncles” or “aunties” with little tech-savviness). I shall summarize our product benefit specifications below:

1. Physio-Pleasure
- Ability to identify healthier choice of food
- Easy to use and not mind taxing for users trying to relax

2. Socio-Pleasure
- Allow interaction between multiple users at the same time
- Allow bonding between diners

3. Psycho-Pleasure
- A lively and vibrant feel
- Relieve stress and stimulate customers intellectually by providing health facts
- Store high scores of customers who played the games on the entertainment system

4. Ideo-Pleasure
- The entertainment system with educational and fun games suitable for families

To address these concerns, we proposed three features for the ePan: 1) cartoons for the kids, 2) stimulating single- and multi-player flash games for the older kid, hungry customer and the groups of friends, and 3) an educational game with heath facts for the health-conscious.
One feedback by our classmate is that the working executive may not want to be troubled by the kids making much noise while playing the games. Hence we suggested providing headphones for the kids so that they can occupy themselves and be still while watching the cartoons quietly (particularly after they finish their food before their parents).

Phase IIIa – Design Stage 1 (Information Architecture)

For this week, we delved deeper into the functionality requirements of our product. We had initial doubts about whether to go ahead with targeting such a broad range of users (as echoed by one of our classmates), but we decided to go ahead with these different features to target these different needs as we wanted to provide a complete experience for every diner who dines at Fish & Co. which is observed to attract these very different groups of people. Furthermore, since our technology (flash programming in this case) affords it, so why not?

Initially, for the health-conscious group of diners, we thought of creating another flash game to educate them about health facts about seafood dishes. However, since we already have other entertaining games in mind, we came up with something different which could be more useful to the heath-conscious diners – a nutritional calculator which calculates the nutritional content (such as saturated fats, sugars, cholesterol levels etc.) of Fish & Co.’s dishes to help these diners make a more informed, healthier choice when selecting items from the menu. They can also compare the nutritional content of different dishes to see which dish suits their particular health needs better.

Functionality of our product can be summarized as thus:

1. For Children (Age 8 and below) – Cartoons
- Short in Length (about 20mins long)
- Marine/aquatic theme
- Entertaining yet educational
- Audible, but not too disruptive to others (earphones provided)

2. For Health-Conscious – Fun Facts + ePan Calculator
- Displays the benefits of healthy eating and fun facts of Fish & Co.
- ePan Calculator enables diners to calculate nutritional information on the food, dessert and drinks being offered (eg. energy, cholesterol, total fat) to make a more informed choice

3. For individuals or Groups – Entertaining Game
- Simple instructions
- Engaging but short playing time of 10-15 minutes
- Preferably marine/aquatic theme
- Competitive styled game eg. Racing or score the most points
- Option for single and multiplayer mode
- High score to be recorded into the system

For our information architecture we just provided the workflow and processes (in the form of a chart) as well as scenarios as to what steps take place when different groups of customers with different needs enter the restaurant and utilize our ePan.

Since we have more or less detailed how these different needs are addressed and fleshed out the situations in which these different features are utilized, our next challenge is to come up with an idea regarding where and how to physically place our stylus-sensitive LCD screen (without the CPU) so that multiple users can use it with ease, while at the same time not obstructing waiters and other diners, especially since some of the outlets have limited space.

We generally have one screen per table mounted on the table (hand-held device is not feasible because the customers can easily steal them). How to do this is however a more tricky problem. However we have a few ideas:

1. Place the screen below a panel of glass under the table (not feasible because customer cannot use the ePan after his food is served)
2. Mount the screen to the corner of the table (could be bulky and blocking the diner sitting next to it)
3. Make the screen foldable/slidable and able to be placed under the table when not in use (technical constraints and hard to visualize, especially given the current holders we can get from shops)

Phase III – Design Stage 2 (Low-fidelity prototype)

Before we discussed how best to go about designing our low-fidelity prototype, Huiyan had an idea – to include a drawing pad which is very useful for every diner (from kids to adults) to exercise their creativity and entertain themselves by writing messages or drawing images which can be subsequently saved into a gallery and viewed by all diners. To filter out any obscenities, the management would have to monitor the gallery daily and remove any potentially vulgar images or messages.

Hence we went about sketching the design of each feature on pieces of A4 sized paper. We opted for a simple and clear layout with the five features of the ePan, as well as the “home” buttons and the sound toggle forming a row at the top of the screen, while the sub-menu buttons would be located on the left taskbar. The interface of the feature would thus be located in the space in between. This layout is very similar to what people encounter when surfing the web, hence will match real world expectations that will make using our system easy and intuitive (part of Jakob Nielsen’s 10 heuristics).

An example of the layout is showed in the nutritional calculator’s screen as shown below:

Figure: Nutritional Calculator Screen (Paper Prototype)

Our opening screen will basically consist of an outline of fish showing a welcome message, as shown below:

Figure: Opening Screen (Paper Prototype)

The outlines of the fish containing text also blend in well with similar images found on small cards on the restaurant table.

Phase III- Design Stage 3 (High-Fidelity Prototype)

Now is the time to translate our paper prototype ideas to the actual flash interface. As Huiyan is the most familiar with flash programming, she was in charge of the basic programming aspects while the rest of us did the buttons design, user testing and other miscellaneous tasks. However, we did not manage to incorporate all the features by the following week so we did the heuristic evaluation and usability testing with what we have come up with, which is basically just one game (Spot the Difference), one cartoon and the drawing pad.

The main negative comment we have garnered from the usability testing was that the opening screen consisting of several fishes containing information about our features (we have added more fishes to the one from the previous week) are too wordy. They are also confusing since they are unclickable, as shown below:

Figure: Opening Screen


In addition, the buttons were commented to look flat and there can be a better line of separation differentiating which are the clickable areas and which are not. The dark blue colour of the buttons too contributed to a “blue overload”, since the background was also blue, as commented by Reddy. These are problems that we hope to address when we present our final prototype the following week.

Other than that, there were positive comments such as the ePan being generally user-friendly/intuitive, making good use of stylus technology (for the games & drawing pad) as well as incorporating interesting programmes to suit different tastes. Well it seems that our decision to cater to these different target groups is proving to be the right one.

Phase IV – UX Evaluation

Finally, we have come to the final phase of our project. While continuing to work on adding and improving features of our high-fidelity prototype, we also tried to brainstorm and finalize what kind of holder would best suit our project. Wingyan managed to get a lamp holder from Ikea, as shown below:

Figure: Extendable Lamp Holder

It basically consists of a clamp (to fasten to the table) and supported by two beams with a joint in the middle allowing the adjustment of height and lengthening of the screen which is fastened to the area shown by the lamp above. However more modifications need to be done, as the holder cannot be tilted 360 degrees and the supporting beams look flimsy. Also the holder for the screen (battery powered so wires are not needed) needs to be custom built to ensure that it holds it securely so that the screen does not fall off.

We presented our holder to the class and even demonstrated its use by clamping it to the table in the tutorial room. However most of them did not like it due to its bulky and flimsy appearance, which could potentially block other diners sitting across from it. Some suggested a portable holder whose position is flexible and easily adjustable and others suggested a handheld aspect to our tablet screen (not feasible as the tablet can be easily stolen). However Reddy did not like our current holder, so we have come up with another idea for our holder.

It is a stainless steel holder to be screwed to the underside of the table. The ePan can be slotted into it when not in use. In addition, we decided to make the ePan portable, so that it is now less cumbersome and more flexible to position on the table. In addition, the ePan screen has two flaps at the back that act as stands to prop the ePan at an upright but inclined manner on the table.

A sketch of this holder is shown below:

Figure: Side view of holder with ePan slotted in

Figure: Back view of ePan screen being propped on the table

As for our improved interface, we have added in the rest of the features (nutritional calculator and gallery) and background music while changing the intro screen (having the fishes appear one by one in an animation sequence so it does not seem to wordy) and the look of the buttons (change to orange and adopting a more 3D look). We have even added one more game with 12 differences to spot to provide more variety, as well as throw an interesting challenge to large groups of friends who can work together to spot all the difference. We even tried it out in class and our classmates had a good time trying to pick them out. Below are some screenshots of the improved interface:

Figure: Welcome Screen

Figure: "Fish the Difference" Game

Figure: Cartoons Screen

Figure: Nutritional Calculator

To gauge users’ reaction towards the ePan, we have conducted a brief reaction checklist questionnaire using a 5-point scale for ten users (consisting of teenagers and working adults). We also asked them four open-ended questions about the interface readability, their likes and dislikes about the ePan and further comments for improvement. Our general findings is that the ePan generally satisfied their physiological needs as using the stylus pen was comfortable and intuitive. As for the psychological aspects, the ePan was generally easy to use and navigate to the different features, although users were more ambivalent about the ePan being “fun” to use. The sociological aspects did less well though, with a couple of the users not finding the ePan to be a great social-bonding or social image-boosting tool, probably because they might prefer to chat with their friends instead of play the multi-player games as a form of social interaction. However, the ideological aspects of the ePan scored rather well with the users, with most of them agreeing that the ePan projects a hip and cool image and that it blends well with Fish & Co.’s theme, décor and ambience. Most users also found issues with the readability of certain fonts whose colour clashed against the blue background, and did not like the lack of variety of programmes catered towards the older diners. However, they liked the colourful and vibrant feel of the ePan and acknowledged that kids would be thoroughly entertained by it.

However, we have acknowledged that this version of the ePan is not the final one hence the presence of incomplete features and broken links may have impacted on their experience of the ePan when they tested it. Hence, we set about making changes to the ePan based on the user feedback, though we were sadly unable to add a greater variety of applications to it due to time and resource constraints. Hence, after adding the finishing touches to the ePan which included background music, corrections to the colour scheme and an eraser icon next to the eraser tool in the drawing pad, we let the same ten users test the ePan again, while sending them another questionnaire to help us gauge if we have improved for the better since the last testing. Our findings were generally quite pleasing, that the interface has become much more readable and that the background music enhances the atmosphere of the ePan which contributes positively to the dining experience. However, some users still disliked the “childish-looking” interface which they feel is too elementary. As we are trying to cater to the needs of a broad target group, we have found this interface to be the best fit to project a fun image in line with Fish & Co.’s brand image, hence it is difficult to please everyone.

Given more time, we would have further improved the ePan based on these users’ feedback by conducting more extensive user research to better address the entertainment needs of the different groups of diners, especially older teenagers and working adults. We would have considered adding more applications such as movie trailers, advertisements and video clips that cater more towards this more mature group of diners. In response to complaints that the interface was too “childish-looking”, we might in future even provide customizable “skins” consisting of a variety of different colour schemes and themes to choose from that personalize the look and feel of the ePan based on individual diners’ preferences. We might also have added more interactivity to the ePan by using more animations and sound effects which would have made the ePan more visually and aurally appealing.