Hestia Sales Cockpit of the Future Design Concepts Challenge

Welcome to the Hestia Sales Cockpit of the Future Design Concepts Challenge. This goal of this challenge is to design and concept a NEW "conceptual" Sales Cockpit application for the Hestia sales order management team. This application will be used by desk bound sales staff. We are looking for design and user interactions for a browser based "Sales" application.

While the application will be be browser based we would like to take a "mobile first" design view to this to keep things very very simple! This challenge is to try and discover new design interacations for a common input/task based process.

Round 1

Initial Design Concepts for checkpoint review
1. Page Navigation
2. Customer Search
3. Product Inquiry/Search
4. Status of Order/Bid/Credit 
Any secondary features/descriptions we should be aware of
Concepts.jpg: Discuss your concept with the client (notes or images)

Round 2

Final Design Concepts plus any checkpoint feedback and updates.
1. Page Navigation
2. Customer Search
3. Product Inquiry/Search
4. Status of Order/Bid/Credit
5. Create Bid/Quote or Create Order
Any additional pages/features you would like to include
Any additional items required during the Milestone

Challenge Details
Hestia is looking for creative concepts for a new sales order tool (a cockpit type application)
This cockpit will be the primary tool used by our desk bound sales staff that take orders primarily by phone.

The ideal solution will provide a user-friendly, browser-based interface that will allow sales staff to perform all their basic functions from one launching point.  
The difference here is we need to think NEW and FUTURE - so lets focus on mobile first and what that means to simplicity of design. 

With simplicity, we do not want you to copy any of these reference sites -  but consider the simple design approach of Google apps, Desk.com or Mint.com as inspiration over the more complicated styles of Amazon or Weather.com or common e-commerce "inputs".

- Realize this is the transition from "green screen order entry" to "web application order entry" to "futuristic UI - what you design!"
- We want this to look both professional and cool, but as always.. it needs to be usable!

User Scenario (Sales Associate)
Basic sales functions include: 
1.    Create a bid/quote
2.    Create an order
3.    Create a return
4.    Provide status on the above

- The site needs to be task-oriented: Sales staff needs to be able to find and manage the products that they need quickly.   
- Hestia has a very diverse product catalog - Product Search is a critical component of the sales cockpit. Sales staff must be able to search quickly through products, gathering the correct metadata (spec sheets, installation manuals, warranty, MSDS etc.) to ensure that the product meets customer specifications
- The average sales associate maintains 200+ bids, orders and returns in various stages of completion, and is responsible for ensuring that the sales lifecycle is completed. Customers frequently request status updates, proof of delivery, copies of invoices etc. The sales cockpit should provide quick access to this information, as well as provide proactive alerts (order not filled, price quote about to expire, order arrived late etc.). Additionally, other sales associates and managers should be able to see this information and participate in shared social stream about the customer and/or order.
- The cockpit should also provide the capability to review KPIs* for the sales associate and customer in a dashboard-style view.

*KPIs are also known as Key Performance Indicators, Key Success Indicators (KSI), help an organization define and measure progress toward organizational goals."

--KPIs in this system include:
--- Total $ amount bid
--- Number of Bids converted to orders
--- Conversion %
--- Conversion GP %
--- # of processed lines
--- # of processed orders, credits, debits
--- # of direct ship orders
--- # of local pick up orders
--- # of orders shipped via our truck
--- # of order lines with no pricing overrides
--- # of orders past required date

Design Style Requirements:
1. Page Layout
- Research about responsive dashboard applications and design trends
- This application will use responsive design - focus on mobile and then transition to desktop and keep the simplicity. 
- What is a great grid layout?
- Use shape based format on every graphic you created on your storyboard to make sure everything remain sharp when resized!

2. Color Scheme
- Blue, White, Dark, Gray, Yellow
- Recommend to us how the colors should be used (combination) and we will provide feedback at the Checkpoint Review
- Think about “Futuristic” themes when you designing for this application.

Design Reference
http://www.pinterest.com/BlogDuWebdesign/inspiration-mobile/
http://www.pinterest.com/atomikid/interface-design/

3. Navigation
- Dashboard
- Product Inquiry/Search
- Status Order/Bid/Credit
- Returns/Credit Memo*
- Create Bid/Quote or Create Order
- Customer Search
- Incoming Contacts*
*Returns/Credit Memo and Incoming Contacts should be represented in the Navigation, but are out of scope for this Challenge
*Research how navigation look for this application. Check these design references:
http://www.pinterest.com/timoa/mobile-ui-navbars/
http://www.pinterest.com/uimobile/ui-mobile-navigation-menu/

Design Concepts Consideration:
For this challenge we would like you work on these flowchart statuses (Sales Cockpit Realtime status of everything.pdf)

1. Customer Search
- The main feature of this application is to search and find customers, products, invoices, accounts, contacts, orders and order details!
- An effective and user-friendly search function is crucial for most users to find content.

Scenario:
- User needs Search to associate Contact to correct Account/Sub Account
- User checks active data feed about customer/contact
- User needs to View Customer History / Comments / Analytics
- User needs to Add/Modify info to a Bid Request or Contact as necessary

2. Product Inquiry/Search
- The user should be able to search within large product catalog and drill down to the category or product they are looking for
- Products should be displayed in search results as lists or grids
- Research design solutions how display best value among similar products
- Research design solutions to show related products
- How to share information with customers

Design Scenario:
- Help me find the right product, show me specs, images
- What is the best value among similar products
- Which product is the most profitable among similar products?
- Show me related products, complementary products, parts of kits etc., recommend alternatives

3. Status of Order/Bid/Credit
- Page should show multiple list or user order
- Page should show how many days delivered, status, proof of delivery, copy of invoice
- Research and capture what details you think should be shown on Status of Order/Bid/Credit

Design Scenario:
- How many days until delivery?
- Status of backordered items
- Exactly where is the truck/when (same-day) will my delivery arrive?
- Show me proof of my delivery. Signature and/or photo
- I need a copy of an invoice or credit

4. Create Bid/Quote or Create Order
- How would you show the design flow when user needs to Create Bid/Quote or Create Order
- This design must make it easy for the user to create new Bid/Quote or Order

Create Bid/Quote Design Scenario:
- Search Products
- Identify Correct Product/Options
- Source Product
- Value Engineering
- Identify Optimal shipping source based on delivery time requirements, freight cost, availability, preferred vendor etc.
- Deliver bid to customer
- Deliver 'Submittal' document of all technical specs if necessary
- If Non-Stock item, initiate special order process Special orders dept can handle

Create Order Design Scenario:
- Bid/Quote Exists?
- Search Products
- Identify Correct Product/Options
- Identify Optimal shipping source based on delivery time requirements, freight cost, availability etc.
- If Non-Stock item, initiate special order process
- Special orders dept can handle
- Issue Purchase Order

To get understand the flow of Create Bid/Quote or Create Order. Refer the attached screenshots.

screenshot1.png
This is the first page of the bid entry process. But, from a status perspective, Widespread HVAC might call and want to know if the bid they requested is complete, so there are several fields there that could be used for search lookup - Customer name, date, Expiration date, customer acct #, writer, job name, ship/sell. In today’s environment, the associate would go to their order management log (OML) and search by say, customer, then be presented with a number of bids. Typing in the bid number would send them to the header screen, hitting enter would take them to the next screen, which is the detail screen that contains the products that have been bid.

screenshot2.png
This is an example of Create Bid. This and the bid header screen. Bid header comes first.

screenshot3.png
- Once the products have been entered, then the associate goes to the completion screen, which details all the shipping information.

screenshot4.png
This screen cap was simply to illustrate how similar Bid and Order are.

IMPORTANT
- Keep things consistent. All graphic styles should work together with different components and the given branding/design guidelines
- All of the graphics should have a similar feel and general aesthetic appearance.

Target User
- Hestia Sales Staff

Judging Criteria
- How well you create your design concepts and think about the problem we are trying to solve!
- Cleanliness of your graphics and design

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
All Requested Challenge Submission Requirements stated above.

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