Assignment Two: Part One
Design Documentation
Introduction 3 User groups 4 Personas 5 Context Scenarios 7 Keypath Scenarios 9
Keypath A Keypath B Keypath C Keypath D
Wireframes
Wireframe Wireframe Wireframe Wireframe
9 10 11 12
13
A 13 B 17 C 20 D 24
Application Features 28 Design Principles and Heuristics 29
2
Introduction
This project goal is to make the task of finding restaurants/cafes that sell healthy meals much easier than ever before. Based on the results of the previously conducted survey, the application must be able to display a map to show the locations, the menus of the available restaurants, a delivery option for those unable to pick up their meal, and finally a star rating system for quick judgement on locations. Some of the typical user groups for this application are Inner City Students, Working Parents, Health Conscious People and Social Media Users, highlighted in the table below.
The application will be called Grain Hunter and it will be based on the ios platform. The purpose of this document is to show and explain how users will use grain hunter and how the different design elements and features will accommodate all these users. It also will give an example of the large variety of users that might be using Grain Hunter. These sample users will be deployed in a sample scenario, where the hypothetical user will be completing a large task with the application. The completion of this task will be examined in detail with a wireframe model, which will also demonstrate some of the design choices for the application. The main chosen features will also be outlined in this document, explaining why they are needed in the Grain Hunter application. A brief list of the design principles used will also be listed at the end of the document.
3
User groups
Inner City Students
Working Parents
Health Conscious
Social Media User
Age 18-25
Age 30-40
Age 20-30
Age 16-25
Have less money to spend on food
Doesn’t always have time to cook dinner
Passionate about fitness
Likes to visit a wide variety of places
Either Gender
Either Gender
Only wants to eat healthy food
Likes healthy food
Has time
Can drive to get food
Likes to pick up food
Wants to go to interesting restaurants to post pictures on social media
Lengthy breaks to eat food
Has money to spend on food
Wants to know the location of all places nearby
Likes to eat in the restaurants
Close proximity to many restaurants
Only short break for lunch
Only wants to eat at places with high reputation
Highly familiar with mobile apps
Wants a variety of places
Want to quickly find a place to eat
Doesn’t have time to browse multiple eateries
Want to know all available places to eat
Picky about quality of food
Close to lots of restaurants
Prefers healthy options
<10 Km from CBD
Less likely to be familiar with mobile apps
Might not have car for transport
Can walk to most food places
4
Personas
5
6
Context Scenarios
Samuel Phisher
Task : Get food delivered
Samuel is sitting at home in the dark with the faint glow of his 3 screens lighting up his face. He is writing code for his final project for his C++ class. At this moment he realised he has not eaten at all today but does not want to stop the productive flow of his brain to go out and get some food. He remembers hearing about this new healthy food app that can be used to deliver food straight to his doorstep so that he does not have to stop working and being productive. He opens up the app and follows the minimalistic and easy to navigate menus and within seconds he has found a restaurant and his order is sent to the kitchen to be cooked and sent out to his place. Happy with the app he can now go back to work and try and understand why his maze won¡¯t generate quickly.
Jonathan Smith
Task: Find a place with a great rating
Jonathan has just got home from a long day at the office and asks what¡¯s for dinner? At this moment he remembers at the accounting firm today there was talk about this new app that allows him to find a great quality restaurant that he can take his wife and 2 kids to to enjoy a lovely meal. He sits down on the couch and opens that app. He scrolls through and sorts the places that he would like to eat at by the rating that other users have given the place. Once he had found a place with a 4.5 star rating he goes and looks at the menu so that the he can decide on what he wants before he gets there. Once he had decided he jumps in the Landcruiser with the family and drives to get dinner.
Emily Clothier
Task: Use the menu function to find food that looks good to take photos of it.
Emily hasn¡¯t taken any new photos for her instagram 10,000 instagram followers for a while now so she needs some new content. Her followers have been telling her to check out this new app that helps her find a healthy place to eat. She downloads it and browses the menus of lots of different places. She goes through some photos and has a think about what she might be able to take a photo of for her followers. She finds a cafe that has healthy an avocado breakfast. She leaves straight away so that she can capture the perfect photo.
7
Dorothy Expedition
Task: Use the map to help plan somewhere to eat
Dorothy is getting ready to jog with a good friend, when unexpectedly the friend cannot make it. Since Dorothy usually relies on others for navigation, she decides to download an app to locate a place to eat and jog there. Once she opens it, the hunt for a nearby juice bar begins, as she searches for nearby establishments that are easily accessible. After selecting the perfect place based on location, menu items and reviews, Dorothy starts the navigation and begins her solo jog.
8
Keypath Scenarios
Keypath A
Star Review (Johnathan Smith)
User Action
System Reaction
A1
Jonathan opens app by pressing its icon on the main menu on his iphone
App shows splash screen with app logo, once loaded, shows home page
A2
Jonathan presses on the search bar on the top of the application and searches for a restaurant by typing its name
App shows relevant restaurants in a scrollable list
A3
Jonathan presses on the restaurant of his choice
Application displays images of food from restaurant and a brief description
A4
Jonathan presses on the reviews button
App displays all current ratings and reviews for this restaurant.
A5
Jonathan swipes left to go back a page
App returns to previous page
A6
Jonathan presses on menu button
App displays the latest menu that the restaurant has to offer
A7
Jonathan presses the home button on his iphone
Iphone returns to phone menu
9
Keypath B
Map (Dorothy Expedition)
User Action
System Reaction
B1
Dorothy opens app
App shows splash screen
B2
Dorothy selects map
App shows map
B3
Dorothy searches for close juice bars by tapping on search bar and typing its name
App shows nearby locations
B4
Dorothy selects on the desired location
App begins displays location information, including pictures, menus and reviews.
B5
Dorothy scrolls down the page
App shifts further down restaurant page
B6
Dorothy confirms and presses begin navigation
App begins navigation (Opens apple maps)
10
Keypath C
Food Delivery (Samuel Phisher)
User Action
System Reaction
C1
Samuel opens the application on his iphone
App shows splash screen with app logo
C2
Samuel taps on the delivery button
App opens up the delivery page that shows all the revant restaurants that deliver food.
C3
Samuel scrolls through the list of restaurants by swiping up, he then taps on a restaurant that has caught his attention.
Application displays images of food from restaurant and a brief description
C4
Samuel taps on the order food button
Application opens the delivery menu for the current restaurant.
C5
Samuel presses the toggle switches on the food item that he wants, then taps the order button.
Application opens the payment details page.
C6
Samuel types in his location and payment details in the labeled text boxes. He then presses pay.
Application emails a receipt to the email that Samuel entered. Application displays the finalization page and the estimated delivery time.
C7
Samuel presses the home button on her iphone
Iphone returns to phone menu
11
Keypath D
View Menu (Emily Clothier)
User Action
System Reaction
D1
Emily opens the application on her iphone
Application shows the splash screen with logo
D2
Emily taps on the categories button on the main menu
Application displays all categories
D3
Emily taps on a category of her choice
Application displays relevant restaurants
D4
Emily taps on a restaurant that grabs her interest
Application displays images of food from restaurant and a brief description
D5
Emily taps on the menu button
The application show the latest version of the menu of the selected restaurant
D6
Emily taps on the back button
App returns to previous page
D7
Emily scrolls down to contact details
App shifts further down restaurant page
D8
Emily presses the home button on her iphone
Iphone returns to phone menu
12
Wireframes
Wireframe A
Figure A1: System Reaction from keypath A1
Figure A2: System Reaction from keypath A1
13
Figure A3: System Reaction from keypath A2
Figure A4: System Reaction from keypath A3
14
Figure A5: System Reaction from keypath A4
Figure A6: System Reaction from keypath A5
15
Figure A7: System Reaction from keypath A6
16
Wireframe B
Figure B1: System Reaction from keypath B1
Figure B2: System Reaction from keypath B1
17
Figure B3: System Reaction from keypath B2
Figure B4: System Reaction from keypath B3
18
Figure B5: System Reaction from keypath B4
Figure B6: System Reaction from keypath B5
19
Wireframe C
Figure C1: System Reaction from keypath C1
Figure C2: System Reaction from keypath C1
20
Figure C3: System Reaction from keypath C2
Figure C4: System Reaction from keypath C3
21
Figure C5: System Reaction from keypath C4
Figure C6: System Reaction from keypath C5
22
Figure C7: System Reaction from keypath C6
23
Wireframe D
Figure D1: System Reaction from keypath D1
Figure D2: System Reaction from keypath D1
24
Figure D3: System Reaction from keypath D2
Figure D4: System Reaction from keypath D3
25
Figure D5: System Reaction from keypath D4
Figure D6: System Reaction from keypath D5
26
Figure D7: System Reaction from keypath D6
Figure D8: System Reaction from keypath D7
27
Application Features
The main features that will have been chosen and will be focused on are: the star review system, the map function, the food delivery service and the view menu function.
Star review
During the survey, 86% of the participants recommended that a star review based system would be beneficial for rating restaurants. This allows the user to quickly determine the quality of the restaurant, based on other user reviews. By pairing this with custom written reviews, users of the application have the freedom to quickly browse through the list of restaurants and efficiently make a decision by looking at star reviews, or they can take their time and make decisions from reading written responses.
Map
The reason that the map function is important is because users do not like to get lost and that they also want to find the place they want to eat at and not waste time getting frustrated because they can not find the correct place to eat. Majority of users that filled in the survey said that having a map in the application is useful and should be included. This is because maps are easier to follow than just having an address. Using a map the user can follow alone and see their position relative to the restaurant.
Food delivery
Food delivery was important to our users. 70 percent of people that filled in the survey believed that a food application should allow users to be able to order food and get it sent to their house. This is important because the user can be uses this time that they have saved to do productive tasks such as completing work or spending more time with their family.
View menu
The reason the view menu function was chosen was because from the results of the survey that was conducted, 100 percent of participants wanted to be able to view the menu from that application. This is important because the user can have a look at what they would like to eat and have an idea of what it looks like and the pricing that they can expect before they show up to the actual restaurant. This saves the user time and helps with their decision making process.
28
Design Principles and Heuristics
Consistency and Standards
Seen in figure A2
Aesthetics and minimalist design
Seen in figure A3
Prominence
Seen in figure A4
Match between real world and system
Seen in figure A6
Hick¡¯s Law
Seen in figure B2
Proximity
Seen in figure B5 and C6
Error Prevention
Seen in figure C5
User Control and Freedom
Seen in figure D8
29