Challenge Summary
Welcome to "IBM - Discount Mobile Apps Design Challenge". This challenge goal is to create look and feel for our new mobile application that help IBM employees to find places where they can use their IBM (company) Discount. They can search for Discounts by category, name, or location through the application. At the end of this challenge, we are looking for the best UI/UX design for this application. Join Us NOW!!
Round 1
00. Navigation Solution
01. Splash/Login Screen Scenario
02. Dashboard Screen Scenario
03. Store Details Screen Scenario
Round 2
00. Navigation Solution
01. Splash/Login Screen Scenario
02. Dashboard Screen Scenario
03. Store Details Screen Scenario
04. Search Screen Scenario
05. Design Asset Elements
Challenge Goals
We want to create a mobile application that give the end user (IBM employees) ability to find places where they can use their IBM (company) Discount. They can search for discounts by category, name, or location. This application will provide ability for the user to search for a discount, filter and see the search results, see a map view of nearby discounts (or discounts near a specified other location), view details about an individual discount, "favorite" discounts, and view the most popular discounts for an area.
User Scenario
- Jim is IBM employee and just having conversation with his friend Fred during lunch time about Fred experience going to the mall last week.
- Fred mentioned some mobile application called "IBM Discounts" that being popular recently in their company that give the app user (IBM employee) ability to find any store that accept IBM (company) discounts for any IBM employees to shopping or use some service that being offers by the store.
- Jim then download the application from app store and then launch the application to check how cool and useful the application can be.
- After the application installed, he is then activate the app, but the app asked Jim IBM credential to verified that the app user is really IBM employees.
- Jim entered his IBM credential and can login properly to the apps.
- Jim then explore the application and find out that the application provides the following functionality :
* Search for discounts (by category, name, location)
* View search results as a list
* See a map view of nearby discounts (or discounts near a specified other location)
* Filter the map or search results, to narrow the results
* View details about an individual discount
* "Favorite" discounts
* View most popular discounts for an area
- After finish navigate the apps and mark some place that attract his attention, he then promised to himself to go to those place after working hours to use the IBM discounts.
Devices:
Apple IOS 7+ iphones and iPads
Android 4.4+ (KitKat) mobile phones and tablets
NOTE : The app is intended for a phone form-factor, for both Android and iOS. (We may later develop a tablet version, but we want to build the phone version first)
Attachment :
- Wireframes.zip, Please do not change the basic flow of the screens -- the wireframes represent how we want the app to work.
- Client_logo.zip, contains client logo that needs to be put as sponsor of this challenge.
- color-palette.zip, contains colors references for starting point in your design.
Screen Requirements :
We would like you to suggest features/screens that this app should incorporate
00. Navigation Solution
- Provides us a clear navigation concept for this application.
- Please design a navigation solution that would be easy/engaging for a the application user!
01. Splash/Login Screen Scenario
Reference screen can be found in wireframes.pdf page 1
- Once user activate the application, there should be some splash screen appear before the application can be launch.
- Splash screen needs to be interesting, have some "company" feeling yet still fun to be use. Provide simple logo for this apps. add client logo appear somewhere in this page.
- In the login page, app user needs to enter their IBM account first to be able use the application properly. We also needs to make sure the client logo appear somewhere in this page. Note that the terminology to use for login is "Intranet ID" and "password", and the button is "Log in". Do not include a "Remember Me" checkbox or "forgot password" -- these are not supported.
- Provide us with error login scenario.
02. Dashboard Screen Scenario
Reference screen can be found in wireframes.pdf page 2
- In the dashboard, user can start find some store/shop, by selecting the category and choosing the location that the user want to search.
- Store/shop location can be view in 2 ways, map view and list view, create both designs for us.
- In map view, there should be some indicators (like bubble) to show the location along with some description about the store/shop.
- in list view, please provide design for sorting functionality to find the store/shop.
- User should be able to navigate to store details screen from the store/shop list.
- Here is the categories of Discount that will be available in the apps :
* Restaurants/Cafes/Pubs
* Sports and Games
* Travelling
* Shopping
* Culture
* Health and Beauty
* Family and Kids
* Miscellaneous
03. Store Details Screen Scenario
Reference screen can be found in wireframes.pdf page 3
- This screen will provides information details about the store/shop, what they are offerings (items/service/etc), address, phone, working hours, and what kind of IBM (company) discounts that the user can get if shopping in this store/shop.
- Needs some like functionality (similar to like facebook) where user can like the discounts being offered in the store. check wireframes notes for more details about the like functionality.
- By doing the "like" interactions, the apps will automatically assume this discount being favourite by the user, we need some interactions created to show this behaviour. (The "like" functionality determines the most popular discounts, which is one of the views the user can see in the list.)
04. Search Screen Scenario
Reference screen can be found in wireframes.pdf page 4
- Search screen will be trigger when user tap the search icon in the header.
- By tap the search icon, it will show some form input to put the search criteria, basic fields are "search for" and "location", you can add more criteria for the search, maybe favourites discount, etc?
- When user enter the content, needs some auto complete behaviour available in this screen.
- It is currently not shown in the wireframes, but we need to add "search" button to the screen.
- Once user hit the search button, it will show the result in two ways, map or list view.
- User also can sorting the search result by their distance or popularity.
05. Design Asset Elements
- Provide us with the following designs :
* Launch Icon, for the application in user mobile phone (iOS 120x120px, Android 144x144px)
* Set of Icons for all of the graphical elements (e.g., map indicators, heart to like, navigation widgets, etc)
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Design Guidelines
- Font and colors : Font is open to designer, you can use our color-palettes.zip as starting point in your design but feel free to expand the colors.
- Orientation : Portrait.
- Create it for 2 different devices :
* For iOs use 640 x 1136 px resolution
* For Android, use 1080 x 1920 px resolution
- Make sure create all your graphic in 'vector' format (buttons, icons, etc), so when resize for bigger versions, graphic still look sharp!
Design Considerations
- The application should be easy, fun and ease to use.
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
Target Audience
- Internal Employees from IBM Company.
Judging Criteria
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a mobile application
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.