Challenge Summary
Welcome to IBM - SiBM - Travel Companion Mobile App Design Challenge. In this challenge, we need your help in coming up with initial design direction for the mobile travel application!
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.
Focus on creating a simple and engaging mobile experience. Make sure to embrace the IBM Design Language when planning your solution.
Good luck on this challenge.
Round 1
Submit your initial designs for Checkpoint Feedback
0) Splash Screen
1) Login Screen
2) Home Screen
3) Map Screen
4) List View - Results
5.1) Restaurant Details
6) Add New Review
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required designs with all Checkpoint Feedback implemented.
0) Splash Screen
1) Login Screen
2) Home Screen
3) Map Screen
4) List View - Results
5.1) Restaurant Details
5.2) Hotel Details
5.3) IBM Office Details
6) Add New Review
7) Add New Restaurant
8) Favorites
9) Settings
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Description:
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.
We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).
We had provided the wireframes for content and flow references, please DO NOT COPY the look & feel and this challenge’s purpose is to come up with better user experience and design!
Design Considerations:
- Looking for modern, intuitive user interface
- Focus on the design being a great user experience, think simple but effective solutions!
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- How should this mobile application look?
- What should the priority features be?
- How quickly could you find information?
- Stock Photos: Feel free to use any images related to this concept.
Supporting Documents:
* Wireframes = Contains the basic ideas for screens, contents and flow of the application
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!
Design Size:
This app will designed for the native mobile environment and this challenge focuses on iOS:
- 750 x 1334 px (iPhone 6 Portrait)
Required Pages:
We are looking for the below screens to be designed..
You are not required to follow the layout from wireframe, looking for your help to improve this and think about user experience - please DON’T just color the wireframes.
0) Splash Screen:
- Come up with a splash screen (this will be shown in the initial launch of the app).
- If possible, design a simple logo/icon that would be apt for this travel application
1) Login:
Wireframe doesn’t have this screen..so looking for your thoughts in this screen
- We need you to come up with a login screen
- Minimum details in the screen would be “Username and Password”
- IBM Employees will be logging in with their IBM ID.
- Show us how the error screen would look like (incase if they enter wrong credentials).
- What else need to be in this screen?
2) Home Screen:
- Once the user is logged in they see this screen.
- Search with options to filter, how can plan to show the filter options in mobile? (think about user experience and ability for the user to find these options)
- Mini Map: Click on it to further explore.
- Recent Searches should list few searches that were done in the past.
- Provide links to Favorites and Settings
3) Map View:
- This view shows the restaurants and hotel in the searched location.
- We need a filter in this view, see below for more details on filters.
- We need map PIN icons for these (IBM Approved Hotel, Top 10 Restaurants, IBM Office Locations, Restaurant and “This is you”).
- Provide an option to get back to the home screen.
- We need option for the user to “Add” a restaurant.
Search and Filters:
- Provide an integrated search in this view.
- How will the drop-down look like in the application? (make sure to review IBM design guidelines to find anything associated with this).
- If the location search is not found, how can we show this in the designs.
PIN Details:
- Clicking on each of the PIN within the map will show more details about that. (currently in the wireframe it’s shown at the bottom).
- Please use the details shown in the wireframe when a user clicks on a PIN - show us how this would look like.
- When a user taps the name within these details, we show the user complete details about that restaurant / hotel / IBM office.
Legend:
- We like the way the legend for the PIN has been shown (click on the left bottom icon to see this)
- Come up with a design that will be able to accommodate more PIN types as there could be more in the future.
4) List view - Results:
- In addition to map view for displaying results, we also need to show the results as a list as well.
- Clicking on each of the items within the list-view will take the user to map view.
- Note: we will have an integrated search and filters like the map view.
5) Restaurant / Hotel / IBM Office Details:
5.1) Restaurant Details:
Reach this screen by clicking on “Restaurant 1” under recent searches and click “Restaurant 1” show in the bottom of maps screen
- This screen shows the details about the restaurant.
- All details shown in the wireframe are required and feel free to add any additional thoughts that you think would be helpful in this screen.
- We need to options for user to share this restaurant, what would be the best way to show sharing options?
- Within this view, a user will be able to “Add Review”
- In this view, we need to allow the user to add the restaurant to favorites.
- Provide an option to add the restaurant to Favorite.
Photos:
- How should we display the list of images? (there could be many photos - come up with a thought that makes image viewing easier!
- Clicking on a image will show the image in fullscreen (in-addition to portrait, we need to show the image in landscape view as well).
Comments:
- At the bottom, we need to show employee comments
- Provide options to filter through the comments by number of stars
5.2) Hotel Details:
Reach this screen by clicking on “Hotel 1” PIN in the map and click “Hotel 1” name show in the bottom of maps screen
- This screen is similar to Restaurant details screen but doesn’t have much details like that of a restaurant.
- How do we design this screen?
5.3) IBM Office Location Details:
Reach this screen by clicking on “IBM 1” PIN in the map and click “IBM 1” name show in the bottom of maps screen
- This screen is similar to Restaurant details screen but doesn’t have much details like that of a restaurant.
- How do we design this screen?
6) Add New Review:
Reach this screen by clicking on “Restaurant 1” under recent searches and click “Restaurant 1” show in the bottom of maps screen and then Click on “+ Add Review".
- We need to show the details of the restaurant in this screen, so a user knows to which restaurant they are adding this review.
- User will have option to Rate the restaurant, all details under “Rating” are required..
- Follow other details as shown in the wireframe.
- Show us how we can keep this enticing to users.
7) Add New Restaurant:
Reach this screen by tapping on "Add" in map view
- Once “Add” is tapped, they will need to choose the location where this new restaurant exists, wireframe has shown an idea on how the user will mark the location of this new restaurant but if you have better ideas, please show them in your designs.
- Once they mark the location, they need the ability to add the details about the restaurant (click on "add" again in wireframe to see the form)
- Please use the details shown in the wireframes for this screen
- What would be the best flow and design for this screen?
Error and Success Message:
- If the details entered were not right then we need to show the error.
- One successful addition of the restaurant, we need to show a success message.
- Show us how the above design will look like!
8) Favorites:
Reach this screen by clicking on “Favorites” in Home screen
- This screen will provide list of resturants/hotels/offices that were marked as favorites
9) Settings:
Reach this screen by clicking on “settings” in Home screen
- This screen will show the settings option and also provide help and about the app.
- Think if it would be the best idea to have “help” and “about the app” information in this screen.
Target Audience:
- Only IBM Employees
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Your design should possible to build and make sense as a mobile application
- Cleanliness of your graphics and design
Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.