Megacorp Sales Pipeline Application Design

Welcome to the Megacorp Sales Pipeline Application Design Challenge!

For this challenge our client is looking for your expertise and creativity to provide an engaging interface for customers to track their sales pipeline. This will be a responsive / web-based application, for use on any/all devices.

Round 1

Submit your design for a Checkpoint feedback:
1. Pipeline (desktop view).
2. Pipeline (phone view).
7. Company Page  (desktop view).
- 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

Final Design plus any Checkpoint feedback:
1. Pipeline (desktop view).
2. Pipeline (phone view).
3. Pipeline Alt View / No Search Result  (desktop view).
4. Add a Company MODAL (desktop view).
5. Add a Company (phone view).
6. Pipeline Success Popup  (desktop view).
7. Company Page  (desktop view).
8. Company Page - View A  (phone view).
9. Company Page - View B  (phone view).
- 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).

Challenge Description:
The goal of this design challenge is to provide customers with a modern and slick way to view their sales pipelines.

Note that there are only three (3) truly unique content screens here. The other seven (7) screens are alternate views of these three content screens.

We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).

Problem:
Business users need a way to visualize their sales pipeline.  A pipeline is simply a list of companies that are in a certain sales cycle.  A business user should be able to create a pipeline and also add additional companies into this pipeline.  Later, the business user would like to easily view one pipeline to see listings of companies in the pipeline with certain information about the opportunity related to the company.  Additionally, the user needs to be able to easily add/remove companies to/from multiple pipelines.  Companies can exist in more than one pipeline.

Goals:
By giving business users the ability to interact directly with their pipelines, we ensure everyone knows the accurate stage of every company they are interacting with.

Supporting Documents:
- Branding Guideline (Megacorp Style Guide.pdf).
- Bootstrap Template (bootstrap3-1170-30gutter.psd.zip)

Design Goals:
- The mobile app should be simple and clean.
- The design should be mobile friendly, modular-based (no data tables), and work well with the bootstrap framework.
- We are looking for the best UI/UX we can achieve.
- Simple/fresh/clean layout and crisp fonts - Utilize your white space.
- Good contrast between the fonts and background - make sure fonts are large enough to see.
- A user experience and design that is engaging but requires minimal clicks/interaction to complete tasks.
- Use of icons along with text is preferred to help customers quickly know what each button will do.
Note: You are free to create custom icons OR use icons from “thenounproject.com”, BUT if you use noun project icons, you MUST provide a link to the icon so that the customer can review any related usage requirements - example of this URL is “https://thenounproject.com/search/?q=camera&i=476”

Screen Sizes:
1) Designs for desktop display screens should use the provided Bootstrap template - see “bootstrap3-1170-30gutter.PSD”:
- 1170px width (at 72dpi) - Height open to designer
- 30px gutter
- 67-68px columns

2) Designs for phone display screens should be 640px width (at 72dpi) - Height open to designer.

Design Requirements:
- The design should follow the provided style guide with regards to color usage and fonts
-- If you do not have the Gotham font, use Arial for all text
-- Choose 1 color for clickable elements (link text, buttons, etc)
-- Choose 1 color for “active” indicator (example, current page menu item) and click hover states
-- Choose 1 color for all notable section header areas (defining layout / visual hierarchy)
-- Text should be no darker than #333 where it appears in a body of text (more than 1 sentence), unless it is header text (large word or phrase)
-- The overall background of the content areas should be primarily white with dark gray text (#333, easiest for reading), with no “tiny” fonts (Users over age 40 in scope and require well sized fonts for ease of use)
- Make sure you create graphics using 'shape' format, so when we resize graphics will still look sharp!

Global Requirements (all DESKTOP screens)
- Include a placeholder for a company logo.
- Include the user’s name as a link and logout option (ie : “Welcome Username (link) | Logout”.
- Include a link somewhere (button) for “settings”.
- Include a footer area, with a smaller logo placeholder, copyright text, links to terms & conditions and privacy policy and support, plus a small paragraph of lorem for legal text at the bottom.
- THIS ONE TRUE FOR DESKTOP AND MOBILE SCREENS! All “clickable” elements (buttons, pick lists, etc) should be a minimum of 44px square in size, so that tap is easy on mobile devices.  For clickable text links, make sure that there is enough space around the text to make it easy to tap (don’t cram text together - use white space / comfortable padding between lines of text).

Required Screens (9):
1. Pipeline (desktop view):
A) The primary element here is a picklist “pipeline to show” options are:
-- My Pipeline (default / selected)
-- Internet / Technology
-- Business Services
-- Financial Services
-- Healthcare
-- Consumer
-- Europe
-- Latin America
-- India / Southeast Asia
-- China
-- Sales Committee

B) The secondary element here is a search box, which allows them to search for a specific company  

C) Largest element / main here are the results - all companies which exist in “My Pipeline”

• NOTE: Results should be modular in nature and NOT a traditional data table (this style works best for mobile viewing).
• User should see the following options ABOVE the results:
• ---  a “Sort Results By” radio option, which shows “Company Name” as default (selected) and other options is “Stage” (not selected)
• ---  a filter option ABOVE the results - a “Show” picklist, where the selected option is “All Stages”
• --- a “Displaying 25 of 62 results” message and related option to set number of results to show per page (ie “display (picklist with “25”) results per page”
• - user should see pagination option
• For each resulting company module, include this content:

• -- company name (will link to company page)
• -- company desc (icon to trigger tooltip - show 140 characters of lorem in this tooltip)
• -- team (7) (icon to trigger tooltip  - show 7 names listed in this tooltip)
• -- pipeline (3)  (icon to trigger tooltip  - show “China”, “Business Services”  and “My Pipeline” listed in this tooltip)
• -- stage (show “top prospect” as the stage here)
• -- “financials snapshot” element which contains:
• ---- “2015 A” (header)
• ------ Revenue: $32m
• ------ EBITDA : $68m

 

• ---- “2016 E” (header):
• ------ Revenue: $32m
• ------ EBITDA : $68m

2. Pipeline (phone view)

Phone version of this screen. For phones we would see these differences:

• remove logo
• remove  “welcome user / logout”
• show icons or button to access sort / filter options
• remove pagination related elements
• remove footer element
• add a “menu” icon
• add “load more” button/bar across bottom

 

3. Pipeline Alt View / No Search Result  (desktop view):
User has typed the name “Appirio” into the search box but rather than results in drop list below, we see “No match” and  “Add New Company” button

4. Add a Company MODAL  (desktop view):
This is a form, where user has not found a company via search and has tapped “add new company” to trigger this modal window. There are multiple sections in this form, please separate these visually.

Content here is:

[ section A]

- Company Name (text input field)

- Include in SC Weekly email? (checkbox - default is NOT checked)

NOTE: everything else on this form is optional, call this out visually / separate it from the rest and make sure it is clear that everything below it is “optional”

[section B]

- Include in my pipeline? (radio - y / n - show “yes” as selected here)

---- related picklist for “Stage” (show “Investigate” as selected)

- Include in Sales Committee?  (radio - y / n - show “no” as selected here)

- Add to other Pipeline(s) (checkbox - show this one as CHECKED here)

----Sector Pipelines (multiselect: in this element, the  user can select some of all of the following: Internet / Technology, Business Services, Financial Services, Healthcare, Consumer )

----Geo Pipelines (multiselect: in this element, the  user can select some of all of the following: Health Care, Consumer , Europe, Latin America, India / Southeast Asia, China)

[section c]

- Location (text input fields for “street address, city, state” AND picklist for “country”)

- Business Description (textarea - show “140 character max” so that users don’t have to guess how much they can add here)

- Comments / Interaction with company   (textarea - show “300 character max” so that users don’t have to guess how much they can add here)

- Team (search for team member element / type ahead)

NOTE: user can add more than one team member AND they can remove one, if they add by mistake..so please show that the user has added “Christopher  Longnamus” and “Casey Longnamus” here already (with “x” option to remove them)

- Add a document (Upload document element)

[ section d]

- Currency (picklist)

- Financial year end (picklist - show “December” as selected)

[section e]

• cancel button
• save button

 

5. Add a Company (phone view):
Phone version of this screen. For phone, this screens would not be a modal, rather it would be a standard screen with a “back” button at the top.

6. Pipeline Success Popup  (desktop view):
Show a “Success” popup on pipeline screen for “New company ‘Acme Company’ has been created.”

7. Company Page  (desktop view):
This is a read only view of all data related to an existing company , where user tapped on a company name within a pipeline result module.

Content is here is contained in two accordion elements -- each one can be opened / closed by the user -- one for “company profile” and one for “company financials”.. We need a way to open / close each one (expand / collapse element) but for this screen, show BOTH of these accordions as open.

• Acme Company Profile content:
• -- “edit profile” button
• -- read only (no form) view of all sections / data captured in “add new company” form EXCEPT for these two fields (which will instead display in the financials section): currency and financial year end
• Acme Company Financials content:
• --- Currency: US Dollar
• --- Financial year end: December
•  
• -- “2014 A”element (show “edit” button option)
• ---- Revenue: $32m
• ---- EBITDA : $68m
• ---- Net Income: $92m
•  
• -- “2015 A”element (show “edit” option here has been tapped and the numeric “32” and “68” and “92” are now inside text inputs)
• ---- Revenue: $32m
• ---- EBITDA : $68m
• ---- Net Income: $92m
• ---- show “cancel” and “save” buttons, since edit mode has been triggered
•  
• -- “2016 E” element (show “edit” button option)
• ---- Revenue: $32m
• ---- EBITDA : $68m
• ---- Net Income: $92m

8. Company Page - View A  (phone view):

Phone version of this screen. For phone, this screens would not be a modal, rather it would be a standard screen with a “back” button at the top.

• in View A, show the company profile accordion open and financials accordion as closed please

9. Company Page - View B  (phone view):

Phone version of this screen. For phone, this screens would not be a modal, rather it would be a standard screen with a “back” button at the top.

• in View B, show the company profile accordion closed and financials accordion as open please

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:
- User 1 – Sales:
-- Enters companies into the application for investment opportunities
- User 2 - Sales Management:
-- Investment committee (decides in which companies to invest)

Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Your design should be easy to adjust for small mobile screens.

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 versions 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.