Challenge Summary
Welcome to the Harbison Fischer Dashboard Design Challenge.
Harbison Fischer is a global company that manufactures and sell oil well pumping equipment. While they do not repair any pumps themselves, they do work with Pump Shops who do the actual repairs on the equipment for their Customers. Harbison Fisher is looking to create a Dashboard with charts to show various metrics on Pumps that are being repaired.
Harbison Fischer is very excited to see what our designers can do.
Good luck on this challenge!
Round 1
Submit your Initial Designs for Checkpoint Feedback:
1. Dashboard showing these charts:
- Pie Chart
- Diagram Chart
2. Color Palette
- Notes.jpg: Please note any comments about your design for the Client
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs with all Checkpoint Feedback implemented:
1. Dashboard showing these charts:
- Line Chart
- Pie Chart
- Donut Chart
- Vertical Bar Chart
- Vertical Stacked Bar Chart
- Diagram Chart
2. Color Palette
- Notes.jpg: Please note any comments about your design for the Client
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Description:
Harbison Fisher is looking to create a Dashboard with charts to show various metrics on Pumps that are being repaired.The use case for this dashboard is that a Customer logs into the application and sees a dashboard displaying different Metrics for the pumps that they own. The overall application is out of scope for this design challenge.
The goal of this challenge is to design the different charts on the Dashboard so the data is easy to see at a glance and the charts will present a unified design language to the user.
Design Considerations:
Charts should be FLAT (no drop shadows / gradients) and simple / clean while still looking “polished” and professional.
Icons should be kept to a minimum, if used.
Icon source files must be included as scalable vector graphics (SVG or AI), separate from your storyboard PSDs
Colors:
Client is open to colors.
You will be creating a color palette that unifies the different charts on the dashboard
Typography:
- Use Arial or Helvetica fonts for all text.
- Keep typography simple and clean. Use bold and italic text sparingly please - Instead, use font size or all caps to call out hierarchy. Leave good white space between and around text.
Design Size
Although the majority of users will be using desktop browser, enough will be using the browser on a tablet that 3 charts on a row across need to fit in a 1280px screen size.
Supporting Documents:
- Explanation of Chart Types: https://developers.google.com/chart/interactive/docs/gallery
- Format for Color Palette (Colors_example.png)
- Drawing for Diagram Chart (pump_diagram.svg and pump_showing_section_names.svg)
Required Designs
1. Dashboard
This one storyboard will show the layout for all six charts in one dashboard
The charts do NOT have to be a uniform width but they must be a uniform height
Line Chart
- Chart title: Pump Life
- Vertical axis : average run days (numbers from 0 to 30)
- Horizontal axis : show months for 2 years
- Data:
-- show 5 lines on the chart over the 24 months
-- each line will represent a different pump (pump 1, pump 2, pump 3, pump 4, pump 5)
- Include a legend showing which line color is for which pump
Pie Chart
- Chart title: Component Failure
- Chart subtitle: prior 12 months
- Data:
-- show 10 different pie sections
-- each section will show number %, for example 10%
-- total of the numbers need to add up to 100%
- Include a legend showing which pie color is for which component (barrel, plunger, standing valve, standing valve ball, standing valve seat, traveling valve, traveling valve ball, traveling valve seat, pull rod, fittings)
Donut Chart
- Chart title : Top 5 Pull Reason
- Chart subtitle : prior 12 months
- Data:
-- show 5 different donut sections
-- each section will show number %, for example, 10%
-- total of the numbers % need to add up to 100%
- Include a legend showing which donut color is for which reason (Pump - Change Capacity, Pump - Low Production, Rod - Failure, Tubing - Leak, Well - Inflow/Outflow Problem)
Vertical Bar Chart
- Chart title: Total Work Orders
- Vertical axis : total (numbers from 0 to 10)
- Horizontal axis : show months for 1 year
- Data:
-- each month will show a vertical bar for the total work orders for that month
Vertical Stacked Bar Chart
- Chart title: Foreign Material
- Vertical axis : total (numbers from 0 to 10)
- Horizontal axis : show months for 2 years
- Data:
-- each month will show a stacked bar for 6 different materials
- Include a legend showing which color on the stacked bar is for which material (Paraffin, Sand, Iron Sulfide, Shale, Coal Fines, Salt)
Diagram Chart
- Chart title: Component Failure Rate
- Chart subtitle: prior 12 months
- Data:
-- pump diagram
-- somewhere on or around the diagram differentiate which sections are failing more than others. Either show this by color, or a number, or an icon -- use your imagination and ask questions if you need more information for this diagram
-- attached to this challenge is a diagram showing the different section names of the diagram.
- You’ll need to show two filters that user can select:
-- customer
-- region
- Include a legend showing explaining the diagram is needed
2. Color Palette
-- see example attached to this challenge for the layout
-- there is a maximum of 10 colors that will be used on the charts, not including any black or greys that you may decide to use
Target Audience:
Owners of oil well Pumps who want to see a quick overview of health of their pumps
Judging Criteria:
- How well you visualize the data in a clear and logical manner
- Cleanliness and the visual appeal of the graphics and design
Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024 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
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.