Challenge Summary
Welcome to "Wholesale - Auto Dealer Application Re-Design Challenge". In this challenge, we are looking for the studio community's creative ideas and great UI/UX skills design to tackle our problem. This challenge’s goal is to redesign a really old application and bring it into the modern age using current design trends, clean UI and good UX. Looking forward to seeing your design concepts. Please register and join the fun!!
Round 1
Submit your designs for a Checkpoint feedback:
01. Landing Screen
02. User Dashboard
03. Maintenance Screen
04. Vehicle List Screen
05. Vehicle Detail Screen
- 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 Checkpoint feedback:
01. Landing Screen
02. User Dashboard
03. Maintenance Screen
04. Vehicle List Screen
05. Vehicle Detail Screen
06. Full Payment Screen
07. Payment Complete Screen
08. Payment History Screen
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Description:
The client currently has a really old and out-dated desktop application that they are using. Customers are complaining that it’s hard to use and doesn’t look or function like a modern app. We need you to create a modern, eye catching and visually stunning desktop application. Using the existing application as input for the content, but redesign everything else. We want customers to be excited to use the app and make it easy for them. We are only focusing on one section and flow in the application, but think about the big picture and the entire app. The main structure and content of the app will remain, but everything else is open to be redesigned. Show us your best ideas and concepts. Wow us!
Branding Guideline:
- We’ve included a basic color palette for you to work with as well as some font suggestions.
- We’ve included some inspiration images and examples to get you thinking in the right direction. Feel free to use these and pull branding from them.
Screen Sizes:
- Desktop Resolution: Width 1280px with height adjusting accordingly
- Make sure you create graphic in 'shape' format, so when we resize graphics will still look sharp! It will be great if you can provide the landscape version. Ultimately we will be using responsive design for this so you’ll want to use best practices for responsive design.
Screen Requirements
These screens and the number of them is just mapping to the current experience of the site. You DO NOT need to keep this same user flow and number screens. If you see opportunities to improve upon the flow and make the experience more user friendly please do. We are interested in seeing your ideas on the best UI and UX.
01. Landing Screen
Reference "Landing/ Dashboard Screen” in App Flow PDF
- Currently really plain and boring. Add some life to this screen.
- Explore some photography treatments, introduction text, etc. Think of the industry and imagery that auto companies are using for their sites and bring this look and feel to this application
- We are open to your ideas. Show us something clean, modern and eye catching
02. User Dashboard
This is new screen and we are looking for your best ideas on how to organize the content and design the page. We’ve included a few suggestions for types of content, but feel free to expand upon these and show us what might useful for the user:
- Alerts/Notifications:
---- Loans coming due
---- Missed payments
---- Key messages from Financial Company
- Credit Health View:
---- Graphical views of loan maturity dates
---- Upcoming payments for the next weeks
---- Cash Position
---- Overall balance by bank or credit line
- User Stats
- Message, Chat or Support functionality
- Recent Activity
03. Maintenance Screen
Reference "Maintenance Screen" in App Flow PDF
- User can access this screen by clicking "Maintenance" menu at top left navigation.
- Keep the same content, but redesign everything else.
- The current organization and layout is confusing to the user. It’s split into 3 sections. How can you integrate this and make it feel more like filters or toggles to select what you want to view or “search” by before hitting OK
04. Vehicle List Screen
Reference "Vehicle List Screen" in App Flow PDF
- A list of results after you select OK on the previous screen.
- Make this generally look better and more user friendly. Wider columns, taller rows, better typography, etc.
- The arrows are currently the “link” or clickable area. This change to be something more conventional. Is the entire row clickable? Is there a “Select” button on each row.
- Show us your ideas here and the best UI/UX solution.
05. Vehicle Detail Screen
Reference "Vehicle Detail Screen" in App Flow PDF
- If the vehicle is available in the search results, user will navigate to specific vehicle and see the details data via this screen.
- Content will be the same, but redesign for a better user flow and better usability. More modern look and feel and UI.
- This screen have several interactions that can be found below:
05a - Select Bank Screen
Reference "Select Bank Screen" in App Flow PDF
- This entire content can actually be an overlay with the list of selections in Vehicle detail screen.
- It simply doesn't make sense to have this as a separate screen.
- Show us your best UI/UX solution for how to handle this
05b - Selected Bank Screen
Reference "Select Bank Screen" in App Flow PDF
- Shows that the selected Bank has been added/ selected.
- This is pretty straight forward but can be improved upon from a visual and UX perspective.
- Show us your ideas.
06. Full Payment Screen
Reference "Full Payment Screen" in App Flow PDF
- Content should remain, but redesign it so it is more modern and user friendly.
- This should follow more of an e-commerce flow style. What would that look like? Is there a confirmation window after the user selects "Make the Payment" button?
- Show us the best user flow and UX for this area.
07. Payment Complete Screen
Reference "Payment Complete Screen" in App Flow PDF
- There should be some kind of overlay or something that has the "Complete" message, then returns the user back to this screen.
08. Payment History Screen
Reference "Payment History Screen" in App Flow PDF
- Does this need to be a separate screen?
- Think through the UX of this a little more.
- Redesign this content to be more modern.
- Show the content with more than 1 transaction history. How do you display multiple items?
Documentation:
- App Flow: PDF that explains the current flow of the app.
- Inspiration: Ideas and visual tone we are looking for.
- Branding: PDF with suggested colors and fonts to get you started.
Target Audience
- Company Employee
Judging Criteria
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Creativity and ease-of-use is key to the success as it must be engaging to users.
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.