greenbean shop smart. shop green.

Transcription

1 greenbean shop smart. shop green. Design Sketches and Video Prototype Problem and Solution Overview Consumers are increasingly being bombarded with green product claims that are vague and/or unsubstantiated. In addition, ecologically sound products typically carry a higher price tag. As a result, sustainability-minded patrons are unable to make informed purchase decisions and budget-conscious customers are prevented from buying greener items. A mobile application with a linked coupon system that compiles and displays concise environmental product data and savings vouchers can remove guesswork, reduce individual carbon footprints and help defray price differentials of earth-friendly products. Such a program will draw in potential customers by lowering both the information and price barriers. UW CSE 440 Autumn 2008 Project Team: Jenny Kam, Group Manager Jon Fung, User Testing Kathryn Whitenton, Writing Chih-Pin Hsiao, Design page/design+sketches+and+vid eo+prototype Design Exploration Storyboards Design Exploration 1: Browsing with Categories This interface was based on a naturalistic approach to the task of shopping. In the physical world, similar products are grouped together in similar areas of the store, and customers can go to a certain area to browse through different varieties. Design Exploration 2: Location Based Top Ten To take advantage of the mobile device s ability to locate the user in a specific place and leverage this information, this interface routed customers through a Top Ten list which featured current specials and best buys specific to the store where the user is physically located. Design Exploration 3: Scan and Search with List Support Our third interface combined three different input mechanisms scanning a product bar code, entering text find a category of products, and accessing a previously saved shopping list. 1 greenbean

2 Choose a major product category to browse Drill down to specific products: Veggies Tomatoes Cherry tomatoes details 2 greenbean

3 3 greenbean

4 4 greenbean

5 Interface Design Selection Selection Criteria: Customer Goals After analyzing all three of our designs, we chose to pursue and further develop the third structure which incorporates searching, scanning, and pre-entered shopping list input. Our decision is heavily based on the task analysis we previously performed of our target audience and their shopping behaviors, using both contextual inquiry and experience sampling. That customer research revealed that shopping is an activity that requires a high volume of decisions, places a heavy cognitive load on users, and is severely constrained by time and price. Eliminating Alternatives by Applying Customer Constriants Although the browsing based design closely mimicked natural behavior and thus would be very easy for customers to learn, this structure would require shoppers to click up and down through many layers to access each individual product. The screen size constraints of the mobile platform mean that complex you simply can t put enough information on each screen to make a browsing hierarchy efficient. The time required to click through the different category layers would make the product useless to our customers, who are already pressed for time. The second design leveraged location information and product specials and would probably appeal to a very specific type of customer. This design also had the advantage of helping guide customers towards certain featured products, which would give us the opportunity to encourage greener shopping choices by weighting those products in the algorithm that calculated which specials to display. But again, the display technique here required too much time from the customer and was not aligned with their goals of purchasing items that they already knew they needed, as quickly as possible. Strategic Use of Information Our third design combines three quick input methods lets the customer guide the information display, thus centering the application around their needs. By helping shoppers achieve their goals of finding key items efficiently, and respecting their time and decision making ability, we gain the customer s goodwill and are then in a better position to suggest greener alternatives. Functionality Summary GreenBean is designed to give consumers an edge in grocery shopping. It takes into consideration the diversity of the population and gives them a platform to better perform a necessary task. GreenBean is capable of automatically detecting the location of the user and retrieving product information based on what s available in that particular store. Customers are able to tailor the program to their needs via the preferences page, which provides lists of ingredients and lifestyles that can be activated to filter product search results. The heart of the application lies in its environmental rating system, which provides consumers with easily understood environmental product information. Products are scored based on their overall eco-friendliness using a simple visual scale of one to 5 green beans. The rating algorithm factors in organic ingredients, recyclable packaging and distance the product traveled from its place of origin, to reduce information burden on customers. GreenBean can also be used by the budget-conscious 5 greenbean

6 to make purchase decisions that are both green and economical through the use of a linked coupon system and the sort-by-price function. It also recommends eco-friendly items for customers who are unsure or unaware of the particular store s product availability. GreenBean will harvest existing grocery product reviews from sites like Zeer.com, which collects shoppers opinions about organic and environmentally friendly groceries, and make these available to shoppers while they are in the store. GreenBean users will also be able to enter their own reviews and flag their favorite products for future reference. User Interface Description Welcome and Scan When a customer first starts greenbean, they encounter a Welcome Screen (Figure 1) which identifies their current location and provides several different options for using the application. If the shopper has a specific product and wants to find out more information about it, he can choose scan and use the phone s camera to photograph the product s UPC code. GreenBean will automatically provide a product details screen as shown in Figure 6. Search and Compare To see a listing that compares his scanned product to alternatives, our customer can press the menu key on their mobile device to access the greenbean global navigation menu, shown in Figure 2. Choosing Compare on this screen will call up a list of product alternatives. Alternatively, a shopper can type a generic product name into the text-entry box. For example, typing in lettuce and pressing go will take her to a list of products (available at her current location) as shown in Figure 5. The product search results in Figure 5 include an image of the product and its greenbean ranking, symbolized visually with a display of one to five green beans. As shown in Appendix A, Medium Task: Part 2, search results will initially be sorted according to their greenbean ranking. A button at the top of the search results will let her re-sorting the list by price. This button functions as a toggle switch it will initially display as sort by price, then once pressed and resorted, the display will change to sort by greenbeans to allow the customer to switch back and forth. Product Details Shoppers can press any part of the product listing to go to details about that product (Figure 6). The product details still display the product name, image, and greenbean ranking, but provide further information about the ingredients, packaging, and any available coupons. By scrolling down, a shopper can access snippets of product reviews, and then further down, a list of related products (ie a product detail screen for laundry detergent would show a list of fabric softeners, as in Appendix A: Medium Task Part 1). Shoppers can choose Add to add an item to their cart. Then, at checkout, they can use the menu button on their mobile device to access their cart and retrieve any coupons to be displayed for scanning at the register. List and Preferences From the Welcome screen, greenbean customers can optimize their experience, by entering their shopping list in advance (Figure 4) and setting any special shopping preferences (Figure 3). The Preferences screen allows customers to activate filters for products that might cause an allergic reaction or violate other shopping constraints. To support family shopping, two levels of screening 6 greenbean

7 are available: clicking on an item such as peanut once will flag all results with that ingredient; clicking on it twice will block all products containing that ingredient from greenbean search results. Task Scenarios Allergy/Special Preferences Sean is a busy college student who has a severe peanut allergy. He usually picks up one or two necessities in between classes and eats on the run. To avoid anaphylactic shock, Sean uses greenbean to determine if a food contains peanuts or was made in a facility that processes peanuts. He opens the application, selects preferences and then checks peanuts under allergies. This will filter all peanut products out of his search results. Weekly Shopping Trip Amanda is a 30 year-old mother of two who is responsible for the weekly grocery shopping. This week, she takes her 9 year-old son Jacob along to purchase a few things for the family. She makes a list, loads it into greenbean and drives to Safeway. Amanda first heads for the laundry aisle. She picks a familiar brand of laundry detergent but her son reminds her that it contains harmful chemicals. He urges her to use greenbean so she scans the UPC on the bottle into the application to find more information about that particular brand. After reading the product details, she decides to try a new brand and searches for comparable products that greenbean recommends as more ecofriendly. Amanda selects the detergent she wants to purchase and greenbean displays a related products section that reminds her that she also needs fabric softener. She is then able to pick a fabric softener that is environmentally sound. Amanda then heads to the produce aisle. Her family needs lettuce for sandwiches this week but because she doesn t have a particular type in mind, she types in lettuce and searches through the displayed results. Amanda has to stick to a budget so she also uses the sort by price function to find a lettuce that s green and economical. She ultimately decides on some spring greens and heads to the check out line. Special Occasion Shopping / Product Reviews Louis is a 25 year-old cartoonist who recently won the lottery and purchased a new house in Madison Valley with his winnings. To celebrate, he is preparing to throw a dinner party for a few close friends and family. Louis is an aspiring chef who usually browses the internet for recipes he wants to try out. Today, he happened upon a dish called caviar-covered pork and decides he would serve it at the dinner party. The recipe called for fancy pork and fancy caviar. Since Louis is unfamiliar with both of these products and wants to buy the best and most eco-friendly choices available, he decides to use greenbean to help him with his purchases. He drives to Metropolitan Market and opens the application. GreenBean reminds him that he needs to purchase both fancy pork and fancy caviar. Louis begins by scanning in a tin of fancy caviar and GreenBean displays the product information. He is satisfied with the greenbean eco-rating and scrolls down to the reviews. After reading that customers of this particular brand were very happy with it, he decides to purchase it. Louis then heads to the canned pork aisle and repeats the same steps to shop for the best pork for his dinner guests. He is very happy that greenbean was able to help him select the highest quality and greenest ingredients for his dinner party. 7 greenbean

8 Video Prototype Methodology Storyboarding and Logistics To illustrate the functions and benefits of greenbean, we developed three scenarios showing how this application will help users accomplish their goals, and wrote out a rough script giving dialog, contextual setting, and character locations. The production of our video prototype was done in a relatively crude setting. Due to limited time and common retailer policies against filming on their premises, we chose not to film in a supermarket and instead projected images of store aisles as a backdrop. We used some actual products and some paper cutouts symbolizing groceries for physical props, and an actual mobile device with post-it notes attached to the front to simulate interacting with the different screens of greenbean. Our video was put together on Final Cut Pro by cutting together several takes to achieve our desired progression. Engaging the Viewer The scenarios for this video prototype were based on shopping tasks we ve previously derived from customer research, but for the purposes of the video we added some extreme circumstances to our basic task outlines. For example, to illustrate our first scenario, we showed a greenbean evangelist extolling the virtues of greenbean while our target customer choked and died from an allergic reaction. Constraints With limited time and resources, we made a number of adaptations. For example, we were unable to use a real supermarket as filming location. Also, to simulate the different actions you could make on the mobile device, we had to do some video cutting. To show actions such as the button press, checkbox, and screen scrolling, we needed to film the user performing the action, then cut to a shot where the resulting display was shown. For checkboxes, we stuck on an additional small sticky, while buttons and scrolling would lead to a new screen. The screen was also too small to see on the video with the users still there. To deal with this, we filmed separate shots. The main video would contain the continuing story, while a picture in picture frame showed a second shot with a close-up of the interaction with our program. The time and resource constraints proved to be quite challenging; for example using a projector as an alternative simulated setting forced us to worry about lighting, washout from ambient lighting outdoors, and the projector light which was shining into the actors faces. Additionally, the need to show continual changes to the graphical user interface resulted in many changes and cuts which potentially interrupted the flow of the video. Other issues included difficulty getting the right angles and fields of view for the camera since we were working in a cramped environment. Strengths and Lessons Learned On the other hand, we felt that our scenarios did a good job showing how our product would enhance performing the tasks we chose. While they did sometimes go over the top to maintain a level of informality, they still demonstrated situations which people can identify with and that our product would make easier. It showed what we wanted to while not suggesting a level of polish greater than we had developed. We also felt that the way we showed the interaction with the device by cutting together screen shots gave the viewer a good idea how people would use and interact with our product. All in all, we felt it was successful as a video prototype because it forced us to consider details of the design, illustrated contextual use, and was inexpensive to build. 8 greenbean

9 Appendix A: Video Prototype Materials 9 greenbean

10 Moderate task. But mom! Moderate task. Use greenbean! Moderate task. Thanks mom! 10 greenbean