Challenge Summary
Welcome to Praxair Travel Body - Mobile App Design Concepts Challenge! In this challenge, we are looking for [topcoder] community to help create set of interfaces for our new mobile application. We are providing wireframes to help get you going. Help us to create look and feel for our Praxair Travel Body application.
In this challenge we are looking for DESIGN CONCEPTS on how this Mobile Application could work. What should the user see and experience when using the application?
Round 1
Submit your design for a Checkpoint feedback:
0. Splash screen.
1. Login page.
2. Create Profile
3. Profile Page
4. Dashboard
5. Search Trips.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final Design plus any Checkpoint feedback:
0. Splash screen.
1. Login page.
2. Create Profile
3. Profile Page
4. Dashboard
5. Search Trips.
6. Search Results & Trips Selected.
7. Create Your Trip.
8. Add Riders to Your Trip
9. Trip Manager
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Description:
For this challenge we need your help in developing UI/UX design concepts for Praxair’s new Travel Buddy APP. Travel Buddy is a ride sharing application that Praxair employees can use to communicate and ride share on company trips. It’s a fun way to encourage collaboration and company interaction. In this internal “UBER-like” experience, Praxair employees can create rides, search for rides, chat about upcoming trips, and find fund stuff along the way with suggestions from the APP and it’s users on where to stay, eat and play on their trips.
There are several key benefits to using this APP. It helps Facilitate employee collaboration when traveling, foster employee camaraderie, SAVES on employee expense, is good for the environment, and it increases employee safety. Think of fun ways to design this APP. It should have the Praxair branding style...but it is targeted towards internal employees...so it should be fun and engaging.
Supporting Documents:
- Design Direction (Travel-Buddy-Design-Direction.pdf.zip)
- Visual Identity (Visual_Identity.pdf.zip)
- Click thru wireframe (Prototype.zip)
- Inspiration examples (Inspiration.zip)
Target User: Praxair employees
Maera has an upcoming business trip that she is trying to figure out how to best get to her destination. She discovers that her company has a ride sharing APP for just this purpose. Maera downloads the APP and quickly is guided thru setting up a user profile. In no time she is searching for rides to her destination. With the APP’s intuitive interface she is able to search for available rides or create a request for a new ride based on destination and time. Thru in APP messaging and communicating she is able to finalize the final details of her trip by collaborating with her coworkers. As a bonus...the APP also has great-suggested content around places to stay, eat, and play for her trip.
Travel Buddy is a great asset to Maera because she’s been able to carpool with other Praxair employees and she feels more connected to her company thru this experience. The “Near Me” functionality of the APP has put her in touch with other coworkers that she normally would not have collaborated with.
Design Considerations:
- Please go through design direction given.
- The App should be easy to use.
- The logo we have is a place holder logo. Feel free to design your own logo or APP name for your concept...but don’t spend all your time on this. Client is looking for some fun exploration on the logo, but the
main focus of the challenge are the reequired screens.
- REMEMBER: DO NOT COPY the wireframes exactly - The wireframes are meant to help guide you and let you understand the application the audience would like to see designed. Think about the user experience/user interactions and show us your solutions! You can do something different or whatever you think make sense of this mobile application.
- Review the wireframes - they are very detailed and will help, but do not copy 100% the layout, be creative!
Use the 320 x 480px (Standard sizes) for submission format. Make sure you create graphic in 'vector format (shape or AI source)' format, so when resize for retina versions, graphic still look sharp! It will be great if you can provide the landscape version.
Required Screens:
We have provided a click thru wireframe for you to use for this challenge in addition to the design direction document. Please do not copy the wireframes exactly. We are looking for fun ideas of how we can design this APP using the Praxair branding guidelines. Our target is internal employees so we can have some fun with the whole ride share concept. Think of adding in icons and images that relate to the concept. Perhaps a find a trip icon could be a thumb hitch hiking icons, and perhaps the create a trip could be a steering wheel, or maybe the trip talk icon is an old CB radio icon? The point is to have fun with this design. The more fun we have with the design....the more our employees will want to use this ride sharing APP.
00. Splash screen
No wireframes reference.
- This page design needs to be clean and interesting
- Simple logo for " Praxair "? Big text headline? Any concept that will help with branding the application.
- By default, this screen will appear first when the application being launched.
01. Login page
wireframe references home.html
- User needs to login first to use the application.
- Standard login features (email/password/sign in button/cancel button/forgot password link).
- Login page for users who just finished registration (or are already registered)
02. Create Profile
wireframe references profile_pg_1.html & profile_pg_2.html
- User should be able to enter his ride name and car type.
- User can determine the available passenger seats.
- User can upload vehicle image and Profile image.
- User should be able to select his preferred contact method.
- User should determine smoking preferences.
- User should determine if he is willing to share driving or not.
03. Profile Page
wireframe references self_profile_review.html & other_driver_profile_review.html
- User should be able to view his profile or other driver’s profiles.
04. Dashboard
wireframe references dashboard.html
- User will have 5 options to select from in Dashboard view:
-- Search available trips.
-- Create your own trip.
-- My created trips.
-- Edit your profile.
-- Trip manager.
05. Search Trips
wireframe references search_trips.html
Note: This is almost like create your trip page.
- User should enter the starting point of the trip.
- User should state if he is driving or flying.
- User should pick a starting date (from calendar like create your trip) and a starting time(s).
- User should enter the ending point of the trip.
- User should pick an ending date (from calendar like create your trip) and an ending time(s).
06. Search Results & Trips Selected
wireframe references search_results.html & trips_selected_-_details.html
- Display trip names.
- User should be able to select a whole trip or part of a trip.
- Display Starting points, date and time(s) for each trip.
- Display Ending points, date and time(s) for each trip.
07. Create Your Trip
wireframe references create_trip_step_1.htm
- User should be able to enter his start trip name.
- User should enter the starting point of the trip.
- User should state if he is driving or flying.
- User should pick a starting date (from calendar) and a starting time(s).
- User should enter the ending point of the trip.
- User should pick an ending date (from calendar) and an ending time(s)
08. Add Riders to Your Trip
wireframe references create_trip_step_2.html
- User should be able to select which trip he is adding a rider to.
- User should be able to select the riders he wants to add to his trip.
- Display who are already riding with you.
09. Trip Manager
wireframe references trip_manager.html
- User should be able to view other passengers request to join his ride, and accept or reject the selected passengers.
- What should be displayed if the user did not create any trips?
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
Target User:
- People who are looking to share ride.
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.