Challenge Summary
Welcome to Field Sales - Responsive Application Design Concepts Challenge.
In this challenge, we are looking for your design expertise in coming up concepts for a field sales mobile application (looking for the resposive design in iPad landscape, portrait versions) . This application will leverage the style and designs from Salesforce1 Style Guides.
Round 1
Initial Designs for the below screens..
1) Account Card View (Landscape + Portrait)
2) Proposals (Please submit atleast the use-cases in points 2.1, 2.2 and 2.3 for checkpoint) (Landscape)
Feel free to add any other additional screens which are necessary to explain the flow of Application
Notes.jpg: Any comments about your design for the Client
NUMBER YOUR SCREENS (01, 02, 03 etc.) - it’s easier to review with the client.
Round 2
Your Final designs for all the required screens (Landscape + Portrait) with all checkpoint feedback implemented.
Feel free to add any other additional screens which are necessary to explain your concept and flow
Notes.jpg: Any comments about your design for the Client
NUMBER YOUR SCREENS (01, 02, 03 etc.) - it’s easier to review with the client.
The purpose of this challenge is to design responsive application that will be used by Field Sales Representatives who will be responsible for promoting products to various stakeholders and also be on the lookout for new opportunities to sell products
Design Requirements:
- Please refer the Salesforce1 Style Guides for designing this responsive application.
- We have attached a few reference image, please DO NOT COPY that! Just use that as a reference!
- Note that, this application will be built using HTML 5...
- Please make sure the UI elements which you are creating are scalable vectors - so it can be resized.
- We would like to the resposive designs for iPad...
- - Landscape (1024 x 768 px)
- - Portrait (768 x 1024px)
Required Pages:
We need the below pages to be designed..
1) Account Card View:
This view allows the user to manage the contacts within an organization (Reference image attached), user will reach this page by selecting a menu item in the left sidebar navigation.
- In the view, we need to show the organizational chart showing the hierarchy.
- Within the hierarchy, we need the ability to associate different contacts with their manager – how can this be shown?
- Each contact in the hierarchy will show Avatar (Image of the person), First Name, Last Name and Designation of the contact.
2) Proposals:
Proposals refers to different revisions of an opportunity with products (Reference image attached), user will reach this page by selecting a menu item in the left sidebar navigation.
- These are like shopping carts and allows user to associate list of products for each proposal.
- Within a proposal, we need to show a “+” icon that opens a pop up with a list of action icons (Add Product, View Proposal), user chooses option "Add Product" (please see 2.1)
2.1) Search and Add Products:
- User can click on the “+” icon that opens a pop up with a list of action icons (Add Product, View Proposal) in each proposal to view the products catalog listing the products by categories (e.g. Safety, Electrical Components, Motors, Chemicals, Paper Goods, Lubricants, etc.).
- Assume this like an ecommerce store where user can utilize the best search methods (e.g. Keyword Searches with faceted narrowing by Product Family, List Price, Type) to search for a product.
- We are looking for you to leverage some of best ideas from ecommerce platforms like eBay, Amazon etc to come up ideas to search for products.
- Think of an UI that lists the products in such a way that can be easily added to the proposal.
- Each product in the list will contain thumbnail image, List Price, Product category, Type etc..
- The Product page should show basic information like a thumbnail image, List Price, Product Family, Type, etc...
- User will be able to see more information about the product and will also be able to see the order history for that product. (please see 2.3)
- Within this listing page, we need you to think of incorporating concepts like “Recommended Products”, “Tag for later”, etc.
2.2) Proposal Product List/Details:
After the user has added products to the proposal, we can show the below list with the below columns for the products
- Product Code (read-only)
- Product Name (read-only)
- List Price (read-only)
- Discount %
- Unit Price
- Quantity
- Extended Amount
- Gross Margin (read-only)
* The list of Proposal Products should have summed total field of the Extended Amount values for all products.
* User clicks on the "+" icon and that opens a pop up with a list of action icons (Add Product, View Proposal), user chooses “View Proposal” to view the proposal
2.3) Order History:
- User should be able to quickly pull up previous order history stored for this Account. The Order History includes Product Details as described below and the date it was purchased. The user can look for the currently selected Product SKU or search other Product SKUs found in the Order History while they are building a Proposal.
2.4) View Proposal: (Reference image attached)
- Proposal that can sent to the customer will be of this format as shown in the view_proposal.png
- User will viewing this in a PDF viewer, we are looking for you to design this.
- Proposal PDF can be shared with customers in several ways (e.g. Email, Add to E-Commerce Portal, etc.) - show us how to provide option to allow the user to share the PDF.
3) Schedule:
This page allows a user to manage their schedules and user will access this page from the main menu in left sidebar.
- The user should be able to manage a daily appointment ‘planner view’
- This includes Appointments that are scheduled and Tasks that are due to be completed that day
- The user should be able to reschedule/adjust any Appointments on the calendar
- The application should help the user plan driving routes by showing map information
- This includes the ability to make unscheduled visits to customers or prospects in the local area
- - Provide a mechanism for the user to input a ‘location’ with ‘distance’
- Display a list of matching Account names within the selected ‘distance’
- The user may want to sort matching Accounts with information on the record based on: Target Frequency, Last Visit Date, Strategic Account flag.
- - The filtered Accounts should visibly display within the map for planning
- - The user can select an Account and add to the planner view to fill available time within the day
- - The map should support a route plan view using the planner order to show the drive route
4) Main Products Page (Search, Product Listing, Product Details):
This page will allow user to reference the products catalog at any point of time by allowing them to launch this page by clicking on a menu item in left side main menu.
- This is almost the same as how a module available in "Adding Products" to a proposal but this is standalone module that simply allows users to browse through the products. If you have good thoughts of combining this module within the "Adding Products" to proposal - show your ideas.
- This page needs to show special Product Announcements, think on how to display them.
- Assume this like an ecommerce store where user can utilize the best search methods (e.g. Keyword Searches with faceted narrowing by Product Family, List Price, Type) to search for a product.
- We are looking for you to leverage some of best ideas from ecommerce platforms like eBay, Amazon etc to come up ideas to search for products.
- Think of an UI that lists the products in such a way that can be easily added to the proposal.
- Each product in the list will contain thumbnail image, List Price, Product category, Type etc..
- The Product page should show basic information like a thumbnail image, List Price, Product Family, Type, etc...
- Within this listing page, we need you to think of incorporating concepts like “Recommended Products”, “Tag for later”, etc..
- While viewing a particular product, a user should be able to email product PDF sheet – how do you think, should options to email a PDF be shown?
Target:
- Field Sales Represenatives
Judging Criteria:
- Cleanliness of your graphics and design.
- How well your capture the above requirements in your designs
- User Experience!
- Concepts for displaying the information in a unique/creative manner.
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.
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.