Challenge Summary
Welcome to Online Car Shopping Mobile App Design Challenge!
This challenge is focused on creating design concepts/visual ideas to create an application that help users shop for cars.
The application will be used to provide online car shopping services and the client would like to integrate this app with APIs provided by their platform later.
Round 1
Submit your design for a Checkpoint feedback:
1. Login.
2. Car List.
3. Car Detail.
4. Shopping Cart.
5. Confirmation / Payment.
6. Payment Result.
- 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
Submit your final design:
1. Login.
2. Car List.
3. Car Detail.
4. Shopping Cart.
5. Confirmation / Payment.
6. Payment Result.
7. Personal info input.
8. Personal info confirm.
9. Loan application.
10. Identity verification with ID.
11. Personal info input.
12. Application completed.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all
Challenge Description:
The goal of this challenge is to create an application to provide online car shopping services based on screen requirements below.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Tone and Manner:
- The main theme color is red (#ff0000). You can also use red-like colors as the main colors as long as you use #ff0000.
- The main font color is supposed to be black. but it is not mandatory so you can choose any colors that you think it is good for you design.
- The background color needs to be like white or gray or similar colors.
- You can use any colors for accent colors.
Screen resolution and typography:
- Please note that this app is an Android app (not iOS app).
Screen resolution:
- 720×1280; xhdpi (extra-high) ~320dpi.
- Portrait only.
Typography
- Please go through and follow the official guideline.
http://www.google.com/design/spec/style/typography.html
Supporting Documents:
- User Flow (User Flow.png.zip); you can change the flow with your own ideas.
Design Considerations:
- The application needs to be very easy to use and self evident in navigation.
- Focus on the user experience of each page and make sure each page has a complete flow.
- Give importance to the overall layout and think about how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path, so we can see how the interactions fit together in the application.
Main Features:
1. Login.
2. Car listing.
3. Car Details.
4. Shopping Cart.
5. Payment.
6. Personal Information Gathering.
7. Loan Application.
8. Identity Verification.
User Flow:
- Please refer to User Flow.png
Suggested Screens:
- We would like YOU to suggest features/screens that this app should incorporate.
1. Login:
- Each user needs to login by filling:
-- Username.
-- Password.
-- Forgot password link.
-- Remember me checkbox.
-- Login button.
- No social login.
2. Car List:
- User can see list of cars to buy.
- The information we have on each car is:
-- Car ID (such as 1, 2, 3 ...)
-- Car Name (such as TOYOTA Avalon).
-- Price.
-- Date when this information was posted.
-- Car manufacturer (such as toyota, nissan).
-- Description.
-- Picture.
-- Already purchased or Not.
3. Car Detail:
- User can see detail of the car chosen.
- User can add the car to a shopping cart.
- The information we have on each car is:
-- Car ID (such as 1, 2, 3 ...)
-- Car Name (such as TOYOTA Avalon).
-- Price.
-- Date when this information was posted.
-- Car manufacturer (such as toyota, nissan).
-- Description.
-- Picture.
-- Already purchased or Not.
4. Shopping Cart:
- User can see the status of the shopping cart.
5. Confirmation / Payment:
- User can confirm the order.
- User can choose a payment method from the followings:
-- Credit card.
-- Withdrawal from a bank account.
-- Auto loan.
6. Payment Result:
- If user chose credit card or withdrawal from a bank account, the app shows this screen and the whole process is completed.
7. Personal info input:
- If user choose auto loan, user needs to input the following personal information to apply for auto loan:
-- Name.
-- Address.
-- Birthdate.
-- Gender.
8. Personal info confirm:
- This screen is to confirm the information input.
9. Loan application:
- This screen shows the loan estimation results:
-- Loan ratio.
-- Down Payment ratio.
-- Loan Period.
-- Your estimated monthly payment.
10. Identity verification with ID:
- This screen is to verify the identity with ID such as driver’s license to open a loan account.
- User needs to send a picture of ID for the verification.
11. Personal info input:
- User needs to add more information based on the information input on ‘7.Personal info input’ screen.
- The additional information would be:
-- Occupation.
-- Telephone number.
12. Application completed:
- This screen is to show the message that indicates the whole process is completed.
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 audience and focus:
- Our client plans to introduce this app in some events or in some videos so:
-- The app needs to be simple and easy to see so that the audience can understand the features of this app.
-- Font size needs to be a bit bigger than usual.
-- Make the app very intuitive and easy to use. No scroll, utilizing swipe and so on.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Consistent color scheme.
- 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.