Challenge Summary
Welcome to IBM - SiBM - Travel Companion Wireframe Challenge. This application will allow users to see the the top 10 restaurants visited by IBM Employees for a given location, while allowing users to rate the establishment, provide information about the establishment or add their own establishments for others to see.
At the end of this challenge, we are looking to see intuitive and easy to use "wireframe concepts" that will help us design and build UI/UX in the next phase of this project!
This challenge is focused on "wireframe" output and results. Be creative in your wireframes!
Round 1
Submit your wireframe for checkpoint review..
- Any comments about your wireframe, make sure all pages have correct flow!
Round 2
Final wireframe + any checkpoint feedback implemented!
- Any comments about your wireframe, make sure all pages have correct flow!
Challenge Description:
Through this wireframe challenge, we are looking for your help in laying out initial flow based on the given use-cases, note that we are looking for your ideas on coming up with the screens - though we have provided some suggested screens, that is just to help you get started - feel free to come up with ideas!
This application will be used only by IBM employees. IBM approved hotels and IBM locations will be plotted on the map to show users how far restaurants are from their location. We have separate tables for lists of IBM approved hotels and IBM locations which will be plotted on the map to show users how far restaurants are from their location! The database will be structured in a manner which allows for the addition of other types of merchants in the future.
Wireframe Guidelines:
- Provide us with your interaction and click-path thoughts and suggestions
- Produce HTML click-through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The website must be very easy to use and intuitive. Keep that in mind when you create your solution for the layout and flow information.
- You MUST cover all requirements mentioned in challenge details below.
- For this wireframe we are focussed on creating screens for iOS (targeting iPhone 6) with screen size of 375px x 667 px (portrait).
IBM Design Guidelines:
All submissions MUST follow IBM Design Language, please refer to the client website: http://www.ibm.com/design/language/index.shtml
-- Layout: http://www.ibm.com/design/language/framework/visual/layout.shtml
-- Typography: http://www.ibm.com/design/language/framework/visual/typography.shtml
-- Iconography: http://www.ibm.com/design/language/framework/visual/iconography.shtml
-- Color: http://www.ibm.com/design/language/framework/visual/color.shtml
-- Interaction: http://www.ibm.com/design/language/framework/interaction/introduction.shtml
-- App Inspiration: http://www.ibm.com/design/language/inspiration.shtml
-- Click around Client Design Brand site to get familiar with more client design brand that not stated on this challenge spec.
-- Creativity is also welcome!
NOTE:
Not all of the above guidelines are appropriate for wireframes, only those which you think would be appropriate are applicable. It is best to go through the guidelines to understand how it will impact the UX while building your wireframes.
Supporting Documents:
* IBM - SiBM - Travel Companion Architectural information.docx = Contains information about the tables, it has details of fields that you can include in your wireframes
* Sample Tables (contains 3 tables)
-- hotels.csv = This has all hotel entries
-- iBMLlocations.csv = This has list of all IBM office locations
-- NEWYORK.csv = This shows sample listing of all postal codes with the top ten listings for each postal code in New York state.
Use-Cases:
Below are some of the use cases that could help you understand the functionalities of this application.
Use Case 1:
Show top ten restaurants in a location.
- User chooses "Top Ten" option and enters location, map is displayed with IBM approved hotels, IBM locations and the top ten restaurants.
- Pins/markers for IBM approved hotels are in one color, IBM locations are in another, top ten restaurants are in a third color with some sort of icon indicating food.
- User can click on pin/marker and information about the IBM approved hotel/IBM Location or restaurant will be displayed. Phone number and web site should be pulled out of the REVIEW table if available.
Use Case 2:
Show employee entered restaurants in a location.
- User chooses "Employee Reviews" option and enters location, map is displayed with IBM approved hotels, IBM locations and "Employee Reviews".
- Pins/markers for IBM approved hotels are in one color, IBM locations are in another, employee entered restaurants are in a third color with some sort of icon indicating food.
- User can click on pin/marker and information about the IBM approved hotel/IBM Location or restaurant will be displayed. Phone number and web site should be pulled out of the REVIEW table if available.
Use Case 3:
Add review to top ten restaurant
- User selects "Add review" on top ten restaurant detail panel for specific merchant, is brought into input form, fills out the form, required fields are checked, confirmation is given that review has been added.
Use Case 4:
Add review for new establishment
- User selects "Add new review", is brought into input form, fills out the form, required fields are checked, confirmation is given that review has been added.
Use Case 5:
Store merchant to favorites
- User is provided option to store to favorites when viewing a merchant, user is allowed to store 25? favorites and if they exceed this amount, they are asked to remove a favorite any one of the existing in order to store new favorite.
Use Case 6:
Show favorites
- User chooses "favorites" from menu, text list is displayed, user selects a favorite and the map is shown with map shown, location plotted.
Use Case 7:
Remove from favorites
- User views favorites, is given option to remove a merchant from favorites list.
Use Case 8:
User moves search map from one location to another and views with same settings
- User has searched for something and moves over to another location by moving map. Menu pops up at the bottom with prompt "Search Here", once clicked, the map is redrawn with new elements.
Suggested Screens:
Below are some of screen suggestions based on the above given use-cases, but you are not limited to this, we are open to flows and suggestions on how things could work - so feel free to expand and suggest us what would be best for this type of application!!!
NOTE: Users of this application will be IBM employees and will already be logged into their IBM bluepages account! (login is not in scope)
0) Navigation:
- Any navigation you suggest/think would be helpful for this application?
- Show us your ideas!
1) Home:
- Include a search bar in this page
- Provide an icon for use location services for location identification!
- Provide link to favorite screen that shows a map with list of favorites user had chosen (see below for more details)
- We would like you to show recent searches, this can show last two recent searches and each can show the location information that was chosen in that particular search!
- When a user decides to search from the home screen, we show additional options that allows the user to select top 10 and employee reviews (maybe a checkbox for selecting these).
- Fields for searching country, state, city…
2) Map:
- Map will have a search bar that allows the user to enter the location (country, state, city) and also provide checkboxes that allows users to choose and view top ten restaurants and employee reviews for the chosen/entered location.
- Show employee entered restaurants in a location
- Allow user to tap on a PIN and view merchant (restaurant) details.
- User will have option to add review to top 10 or add review for new establishment? how do you think these options can be handled?
- How will the user add a new establishment (restaurant) and provide review for that?
- Note that each of the PIN used to show a particular group of entity need to be of similar color (please see above use-cases).
- Provide option to add a merchant as a favorite.
3) Favorites:
- This needs to show a list of all the favorite merchants!
- Clicking on each of the merchants shows a map with merchant location plotted in the map.
- Allow user to tap on a PIN and view merchant (restaurant) details, this will show more details about the merchant!
Learn Axure:
New to Axure? Here are some quick tutorials to help you get started.
http://www.axure.com/learn
Target Audience:
- Only IBM Employees
Judging Criteria:
Your submission will be judged on the following criteria:
- User Experience.
- Completeness and accuracy of the wireframe.
- How well your wireframes provide a consistent user flow.
- Any suggestions, interactions and user flow you recommend (provide any notes or comments for the client).
Submission & Source Files:
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Generated HTML files with all the requested contest requirements stated above.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.