Challenge Summary
Welcome to SunShot - PVBid Create Bid Design Challenge! In this challenge we are looking to enhance and improve the user experience for a current app that help users create bids and review bids.
You are provided with wireframe on how the client imagines the app workflow will look like but we are looking for your help to provide the look and feel.
Round 1
Submit your design for a Checkpoint feedback:
1. Landing Page.
2. Sign Up Page.
3. Dashboard Page.
4. Create a Bid Page.
5. Create a Line Item Template Page.
- 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. Landing Page.
2. Sign Up Page.
3. Dashboard Page.
4. Create a Bid Page.
5. Create a Line Item Template Page.
6. Generate a Contract Page.
7. View my Bids Page.
- 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 Details:
The goal of this challenge is to provide the look and feel for PVBid application.
Design Considerations:
- Your solution needs to be a Responsive Design Solution.
- Your design submission need able to drill down for all page flow.
- Show your design solution for Desktop view. Use this screen size (1024px width and height as required)
- Feel free to suggest any tools/function that can bring good User Experience for this Application.
Supporting Documents:
- Current App Screenshots (Screenshots.zip), this is only provided as branding guideline.
- Click thru wireframe (PVBid Wireframe.zip)
- Dashboard wireframe (Dashboard Wireframe.zip)
- Client Logo (Logo.zip)
Design Requirements:
1. Landing Page:
Please refer to home.html
- Please capture the required navigation in landing page.
- Logo should come below navigation as shown in wireframe.
- We are looking for a carousel to display some messages and with images and login box to its right.
- We want a video placeholder.
- We like the footer but you can enhance on it.
2. Sign Up Page:
Please refer to sign_up.html
- Here the user the user needs to fill his information:
-- First name.
-- Last name.
-- Nickname. (This is the only optional field)
-- Email.
-- Confirm Email.
-- Password.
-- Confirm Password.
- User will be able to connect using his google plus or linked in information.
3. Dashboard Page:
Please refer to dashboard.html
- Please capture the breadcrumbs and page title.
- We will have Initially 5 widgets in this page:
-- Open Bids (this will link to “View My Bids”) with text search field. When user begins to fill in the text, auto-switch to “my Bids”
-- Calendar.
-- Recent Templates.
-- Graphs and Reports.
-- Add New Pane to Dashboard.
- Ignore the save button at the end of the page.
-- Assume users will add more widgets
4. Create New Bid Page:
Please refer to create_new_bid.html
- User will need to fill following data:
-- Title.
-- From Template (user can select a ready template), show us how YOU will capture template selection!
-- Client Info.
-- Set Inputs.
-- System Components.
-- Bid Summary. (This summary will stick in footer)
--- Links in bid summary will link to the related System Components.
- Save button.
-- “Go to Contract” button takes user to “generate a Contract Page” with the correct bid selected
5. Create a Line Item Template Page:
Please refer to create_new_line_item.html
- Notice the accordion functionality here when clicking on section headers.
- Title.
- Supplies section.
- Work Section.
- Rentals Section.
- Add Unit Type Section.
- Save and Convert to System component buttons. (Convert to System Component button is disabled for now)
6. Generate a Contract Page:
Please refer to create_a_contract.html
- User will need to fill following data:
-- For Bid. (Drop down list)
-- Contract text editor. (Left side column)
-- Text Available. (Right Side)
- Please notice the functionality when you click on “Show Text Available” button and when you click on “Show Contract Text Editor” button.
- Clicking on preview will show Preview popup (please scroll right to see it.)
- Clicking on save will show Save popup (please scroll right to see it.)
7. View my Bids Page:
Please refer to my_open_bid.html
- User will have the ability to search for his bids.
- Create a new bid button will be available.
- User will have the ability to filter his list of bids. (notice accordion functionality here)
- A list of bids results will be shown to the user.
- Capture pagination.
Target Users:
- PVBid users. Typically Sales Minded and Engineering minded people. Construction contractors. People with a basic understanding of web navigation. Not people who are computer savvy.
Judging Criteria:
- Efficient - Top 3 priority - The responsive design will demonstrate an efficient use of space to maximize the functionality. The user has access to all the features indicated in the wireframes and forums while minimizing the click-through and backtracking. Data changes and entry should bring the user to the next input or to the next launching point.
- Intuitive - Top 3 priority - All symbols, menus, and the general organizational structure has a natural and easily recognizable path - The structure is organized, clear and flows from step to step naturally and intuitively. The "standard" next action should be located in the same place and have the same look and feel to it but alternative actions should also be very clear - that is intuitive for the user. The goal is for a user to be guided comfortably through the process without prior training. This means the judging panel should have the same experience prior to reviewing the competitor’s notes.
- Appealing - Top 3 priority - The interface is appealing to view. This means minimal clutter, comfortable paths, and clear fonts. The eyes should be drawn to the important information and distractions should be minimized. “Exhausting” and “tiring” are words to describe what we want to avoid. Simple and clear symbols should be used. The number of levels required to edit data should be minimized.
- Flexible - The responsive design should handle increased dataset sizes as well as it handles the minimum dataset. The flexibility to handle increased data should maintain the simplicity goals outlined in criteria #3 also.
- Low bandwidth - The winning design will handle slow internet connections effectively and minimize the bandwidth required to operate the website. Please minimize non-standard graphics.
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.