Challenge Summary
Welcome to the GE SF Opportunity Interface Design Challenge. This design challenge is focused on creating storyboards which illustrate your concept for an improved user experience. This will be a custom designed interface for a section within the Salesforce platform.
The portal will be focused on sales opportunities for users across 3 product lines: Waukesha, Jenbach, and GT. We will be working on the first product line (Waukesha) in this challenge.
We look forward to your solutions!
Additional Challenge Rules:
- Please refer to the attached Official Rules applicable to this challenge Link
- To the extent there is any conflict between these Official Rules and additional Topcoder Terms and Conditions of Use referenced of the Website, these Official Rules govern.
Round 1
Submit your initial design for Checkpoint feedback and guidance
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final Designs plus any Checkpoint Feedback
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The opportunity section of this application is currently perceived as confusing by the users and it is your task to make the experience more intuitive and user-friendly. You must cover the following three (3) main concepts in your submission:
1. Interface for view / edit of an existing opportunity.
2. Interface for adding a product & configuring the specifics of those products (show the user has added two products and must configure them both)
3. Interface for creating a new opportunity.
4. Plus any secondary screens that are necessary to fully illustrate your concept (expand / collapse divs, form element states, hover states, popups, etc)
NOTE: Opportunity refers to the case where a sales person has deternined there is an OPPORTUNITY to sell one or more products to a particular customer. In SF they create an "opportunity" which contains infomation around the potential customer and also all of the the details of the percieved opportunity (products to be sold, potential money to be made, etc standard sales opp) - see screenshots.
Design Considerations
Template:
- For this challenge, you will use the provided SF Template and drop your design for the content area into the area outlined in red within the template. You may not alter any of the content outside of the red area indicating where your designs should be placed. Please remove the red from the content area before submitting your concepts.
- You may NOT alter the header, sidebar or footer in this template in any way.
Form Fields:
- The client has provided screenshots of the existing opportunity screens for all required concepts (view/edit existing opp, add & configure products, create new opp) . Please note that the data and prices provided within the screenshots are fictitiousand. We have also provided an excel file named “Field Removal Data” which includes a list of all fields included and a column titled “Hide for Waukesha Persona” where an “x” here for a particular existing form field means that you should NOT include that field in your concept.
Product Option:
- While this challenge only covers a user creating & managing opportunities for the Waukesha product line, your first element on the screen should be an option to select the product line that the user wants to work on - options are: Waukesha (active), Jenbacher or GT Products. NOTE: You will NOT show what happens if the user selects an option other than Waukesha, you only need to show that the option exists.
General Page Requirements:
This is a working web application, so make sure that :
- Fonts are Arial or Helvetica (standard web)
- Typography is simple and easy to read (use #2b2b2b for text on light backgrounds, rather than #000 for best readability)
- All elements are well spaced / padded and it is easy for the user to comprehend the data
- Elements are consistent & predictable. Define your element rules and stick to them, for example: if action buttons are generally right aligned in your design, do not show some action buttons centered / some left aligned, etc inconsistent experience
- You are free to use colors from the provided “client brand colors” png, but make sure to choose colors which work well with the existing colors in the SF header / sidebar / footer (which cannot be altered) and keep color use consistent throughout the experience.
Note that you are expected to design custom elements (expand / collapse divs, buttons, etc) and are not required to reuse the existing SF styles - However, your design should fit comfortably into the SF template and not clash or work against with the established look, feel and styles.
Section Expand / Collapse:
- Currently the user sees all divs expanded on page land (has ability to collapse sections), but the client would prefer to see only the primary div open on landing (in both create and view/edit modes) and then let users expand other sections as they are needed. Note that you must show at least one screen with all divs expanded, so we can see the content within.
Adding & Configuring Products:
- Currently the user goes to a secondary screen in order to manage products (add, remove, configure) but the client would prefer to have all actions take place on a single screen.
Scrolling:
- The client would prefer to reduce the amount of scrolling needed to work on these screens. While collapsing most sections from the start will help with this, you will also want to consider this when designing content within the divs - for example, utilize the space well.
Target Audience:
- Sales professionals (working on a desktop machine) user who creates and manages opportunities primarily for Waukesha products.
Judging Criteria:
- How well you cover all content included in the provided screenshots and the related field removal list
- How well you visualize the data in a logical manner
- How well you create an intuitive user experience
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 will be asked to update the style tile to reflect any new elements that you have added to the design. You may also 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.