Challenge Summary
Welcome to the GE - Global Opps Supplier Connect Design Concepts Challenge!
In this challenge we are looking for your UI and UX skills in designing a responsive application. We have a set of wireframes and branding guidelines to work from, but we need you to design the UI and provide a complete UI kit for future challenges. We are only focusing on Desktop for this challenge, with tablet and mobile to follow in a refinements challenge. Good luck and looking forward to your design concepts!
Round 1
Submit your design for a Checkpoint feedback:
01 - Search
02 - Search Results
02.1 - Search Results - Expanded
03 - Sourcing Questions - Supplier Info
04 - Sourcing Questions - Business Info
05 - Supplier Registration
- 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:
01 - Search
02 - Search Results
02.1 - Search Results - Expanded
03 - Sourcing Questions - Supplier Info
04 - Sourcing Questions - Business Info
05 - Supplier Registration
06 - New Supplier Home
07 - Supplier Profile - Company Info
08 - Supplier Profile - Form Review
09 - Existing Supplier Family Tree
09.1 - Existing Supplier Family Tree Expanded
10 - Sourcing Homepage - My Requests
- 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)
Additional Challenge Rules:
- Please refer to GE Official Rules {RULES - Topcoder GE Global Ops Supplier Connect Design Challenge.pdf } 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.
- An Intellectual Property Release {ASSIGNMENT of Intellectual Property Rights - TopCoder - GE Global Ops Supplier Connect Design Challenge FN.doc} will need to be signed by Prize Winners upon completion of the Challenge.
Challenge Description:
The Global Opps Supplier Connect application is used to find, onboard, and update/add information for suppliers that are approved and have worked with GE. The application servers as a central database of approved supplier information and details. We are designing the front end UI and UX for how the user will access this database of information. We are only focusing on Desktop and xx number of screens for this challenge. However, these designs MUST work across tablet and mobile, which will be addressed in a future design refinements challenge. Your designs must be responsive in nature and use common UI/UX principles and mechanics.
As part of this challenge, we are also looking for you to create a UI kit based on your designs. This kit will be used for future design challenges, but also for the extensive development phase. We are only designing the first few screens to establish the base level design. There are at least 70+ additional screens that will be created using your UI kit as the main input, so it needs to be fairly robust and work across desktop, tablet, and mobile. Look to the UI Kit section below for more information.
Design Requirements and Goals:
- Desktop Resolutions: 1170px wide (height can extend as needed). Use the supplied grid system as a starting point.
- Responsive design considerations (design should be able to work across tablet and mobile. This will be completed in a future challenge)
- Design a modern, clean, and responsive UI based on the GE brand guidelines and supplied wireframes
- Develop a UI kits based on your designs that we can use for future challenges and extensive development
- Minimal scrolling and interactions from the user. There are a lot of input fields, design these in a way that is fast and easy for the user AND works just as smooth on smaller screens/ devices (tablets and phones)
- Your designs should be based on a 12 column grid system. This is VERY important as it will help the responsive design and in development. Because of this we’ve supplied you with the Bootstrap 3 grid system PSDs. Please use the 1170px grid for Desktop resolution and this challenge.
UI Kit:
As part of the challenge, you are required to supply a UI Kit. This kit should include the main UI elements used to build out a designs; buttons, form elements, navigational items, headings, etc. A great example of the type of UI kit we are looking for can be seen here. Keep in mind, this is probably way more robust that what you will be creating, but from a content and organization perspective, this is perfect.
NOTE: Only 1st, 2nd, and 3rd place winners are required to create a UI kit, which will be apart of Final Fixes.
Required Screens:
Refer to the wireframe document for specific functional requirements. You DO NOT need to follow these wireframes exactly, just use them as reference. We are looking for your UI concepts and unique ideas.
01 - Search
- Basic search fields and selections
- General structure for the app: header and navigation links
02 - Search Results
- Search results designed in a way that easy to quickly scan
- Expand/ collapse functionality to expose additional information for each result (02.1 Search Results - Expanded)
- Minimize scrolling for the user.
- Additional functions/ UI elements for additional filtering, pagination, etc.
2.1 - Search Results - Expanded-
- Expanded view of the search results from the screen 02 - Search Results
- Expand All functionality (expands all results at once)
- Expand individual search results
- UI design for dealing with tabs, tables, and robust content within each search result. This should be clear, concise, and easy to navigate/ view.
03 - Sourcing Questions - Supplier Info
- Step/ progress graphics that guide the user through the process
- This is a common design element/ process that will be use in numerous other places within the app. Your design should be easily expandable (number of steps)
- Easily and clearly tell the user what steps have been complete, what the current step is, and what steps are next
- Are their errors on any steps, etc. Notifications/ alerts could appear within the step process graphic
- Make sure you are keeping in mind how your progress designs will translate to tablet and mobile. Make sure they are simple enough to translate, but still informative to the user.
- Simple and straightforward form layouts.
- Make sure you are using the supplied grid system to keep things organized
- If forms get long, consider using 2 column layouts to create shorter pages.
04 - Sourcing Questions - Business Info
- Similar layout to screen 03 - Sourcing Questions - Supplier Info
- Looking for how you handle statuses for completed steps and current steps
05 - Supplier Registration
- Straight forward form/ registration page
- We will need this type of layout and screen design for future screens.
06 - New Supplier Home
- Homepage style screen
- Multiple columns and different styles and sources of information
- Again, make sure you using the supplied grid system to keep you design consistent and organized.
- We are open to other ideas on how to better organize and present this type of information to the user.
07 - Supplier Profile - Company Info
- Larger progress/ steps graphic is needed here. Make sure your previous designs will still work here and accommodate this many steps.
- Longer form elements and different sections
- Make sure you are organizing and designing the form elements in a way that makes sense for the user while NOT creating a long scrolling page.
- Considering multiple columns or separating the content out in smaller sections that easier for the user to work with.
08 - Supplier Profile - Form Review
- Larger and robust form review page
- User will need to the ability to edit this information. This could be a separate “Edit Mode” or have individual “edit” functionality for individual sections.
- We are looking for the layout ideas on how the best organize this amount of content and make it clear and easy to process/ review for the user.
09 - Existing Supplier Family Tree
- Unique design and layout it needed here
- We are open to your ideas and concepts for better ways to organize this type of content
- The basic hierarchy of content idea should still remain and be clear no matter what your designs end up being.
- Make sure you are keeping tablet and mobile in mind and how your design would translate and be navigable on smaller screens.
09.1 - Existing Supplier Family Tree Expanded
- Same screen as 09 - Existing Supplier Family Tree, but showing the ability to expand specific sections or “nodes” of content to view more robust information
- We are open to your ideas and UI/ UX concepts and better ways to handle this kind of information.
- Make sure you ideas and concepts can work on tablet and mobile/ small screen devices.
10 - Sourcing Homepage - My Requests
- Homepage/ dashboard design
- A large table or lots of content needs to be presented here AND organized and presented in a clean and straightforward manner.
- Stats/ graphs are also needed. The user should have the ability to click on these graphs to view more information and details.
- We are open and looking for your ideas and concepts on the best way to design this screen.
Input Documents:
- Wireframes: These are base level wireframes that will set the general structure and layout. You are not required to copy the wireframes, just use them as functional requirements and for reference. We are looking for your concepts and unique designs where applicable.
- GE Branding: These are basic guidelines for colors and fonts. We are ultimately looking for you to design the UI and supply a UI kit based on your designs.
- Example UI Kit: Use this a base level for the type of UI kit that you are creating. This is more robust than what you will be creating, but it’s a good representation of the type of content, assets, and general organization that we are expecting.
- Bootstrap 3 Grid System: It is VERY important that you base your designs on a consistent and defined grid system. This not only helps keep your designs organized, but also helps with translating your design to tablet and mobile (responsive) and helping with development. NOTE: Please use the 1170px grid for this challenge
Target Audience:
- GE employees and suppliers
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Overall UI design and execution
- Cleanliness of your graphics and design���
- Execution of UI kit
- Using common responsive design practices and mechanics. How well your designs can work across desktop, tablet, and mobile
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. 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.