BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to "PHN - Customer Management and Sales Tool Responsive Design Concepts Challenge". This challenge purpose is to create design concept for our new Customer Management and Sales Tool application which will be use by our sales team onsite while visiting our customer. This application will needs to be responsive. At the end of this challenge, we are looking forward to see easy to use app, focused on a great user experience and provide the best UI/UX solution for this application. Join us NOW!!

Round 1

01. Home Screen
02. Customer Site Visit List Screen
03. Customer Check-In Screen

Round 2

01. Home Screen
02. Customer Site Visit List Screen
03. Customer Check-In Screen
04. Customer Account Information Screen
 


About the client
Our client is a global leader in Pet Health Nutrition. In an industry that continues to adapt to popular trends in cat and dog food, our mission will remain the same; to constantly bring, through Health Nutrition and shared knowledge, the most precise nutritional solution for cats' and dogs' health nutrition needs, by building on constantly deepened scientific knowledge and our company roots in the feline and canine professional networks. 

Project Goals
We are looking to create a customer management interface that would be used by a sales representative while they are visiting their customers. This app will help the Sales Rep schedule their visits and take notes during the visit and even sell specific products. The application should be responsive design that will work well on desktop browser as well as a tablet. In this challenge we are asking you to focus on a couple of screens but to also try and capture what the possible user interactions might be. Think of modern UX design and how cool these pages could look and work.

User Case Scenario 
- As a Sales rep I need to plan my day and customer visits. Customer are both Veterinary and retail locations (pet stores).  I want to be able to add the customers to a list that need to be visited in a specific period of time, (1 day for example) and would like to set goals for each visit.
- As a Sales rep I would like to be able to "check in" at my customer site/place during my visit and add visit specific notes, and place an order.
- As a Sales rep I need to be able to see all current promotions and sales so I can better service my customer during my visit.
- As a Sales rep I need to be able to easily search and find my customer account information, including account details, order history, contacts, case history (support)

Important Design Considerations :
- Keep things consistent. This means all graphic styles should work together.
- Pay attention to the suggested brand and colors
- All of the graphics should have a similar feel and general aesthetic appearance.
- Responsive design best practices (think and plan your grid!)
- Your design needs to stay consistent but cleverly adapted layout screen for each required size.
- Be creative, there are a lot of information needs to be presented in the system, show us the effective ways to arrange this huge amount information in easy navigation solution (via menu? tab? icons? etc)

Suggested Screens :
01. Home Screen
- By default, this screen will showed up when user open the application for the first time.
- What kind of screen layout fit to this screen? Dashboard style contains summary of sales reps activity? or else?
- Needs to provide a main menu (responsive one) that able to makes user easily navigate to other screens.
- Provide a sales reps summary activity using various display, chart, table. Summary of site visit, order creates, working hours per month, etc.
- Needs some section in the dashboard to show all promotions and sales info from company so sales rep can use it as marketing material to the customer.
- Explore how this screen needs to be create!

02. Customer Site Visit List Screen
- Sales rep will be able to see their visiting schedule via this screen.
- they can create new schedule in this screen, adding information about address, time and who's they're going to visit into the apps.
- User should be able to view list in category, monthly, weekly, daily. 
- Needs to see complete list of visit schedule, and ability to filter it (done, upcoming, delay, etc).
- what is the best way to show the visiting schedule list? timeline, list view, table?
- Explore how this screen needs to be create!

03. Customer Check-In Screen
- Once sales rep arrive in customer place, they will be able to perform "check in" to customer site.
- The functionality will be similar like "check in" in social media apps.
- Once they finish doing check in, there will be a several features in this screen open, such as add visit specific notes, and place an order for the particular customer.
- Explore how this screen needs to be create!

04. Customer Account Information Screen
- Sales rep will be able to view details information about customer via this screen.
- Provides customer information in this screen in an easy way, who are they, how many order they've been made, what is the most products they buy, what is the products recommendations to offers to the customer, etc?
- Explore how this screen needs to be create!

 
Branding Guidelines :
- Logo : use logo company attached in challenge details.
- Colors : follow colors guidance attached in challenge details.
- Font : open to designers, more prefer web safe font.
- Responsive design best practices (think and plan your grid!)
* Desktop    : Width 1100px with height adjusting accordingly. 
* Tablet    : Width 768px with height adjusting accordingly.

Target Audience
- Our Sales Representatives Employee.

Judging Criteria
- How well your storyboard design fit in responsive layout?
- Cleanliness of your graphics and design (very important!)
- User Experience!

Submission & Source Files
Preview Image
Create your preview image as one (1) 1024 x 1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission in it.

Submission File
Please upload JPG/PNG images in a ZIP file with all requested contest requirements stated above. Number your files (01, 02, 03, etc) in order. This will help when reviewing with the client.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2015 topcoder Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30047439