Challenge Summary
Welcome to the KAR Social Intranet Design challenge. This is KAR’s first design challenge and they are looking to our designers to help them come up with great ideas for two (2) pages of their intranet. This is an employee-facing site that will be viewed on desktop and mobile devices. This challenge covers designing two types of pages, for desktop viewing.
IMPORTANT! Note that this challenge will have an extended turnaround on checkpoint selection and related feedback - 96 hours (4 days!) rather than the standard 24 hours. Please review the dates and plan your schedule accordingly!
ABOUT KAR AUCTION SERVICES:
KAR Auction Services, Inc. (NYSE: KAR), a FORTUNE® 1000 company, operates worldwide vehicle auction services and provides related services. Based in Carmel, Indiana, the KAR group of companies is comprised of ADESA, Inc. (ADESA); Insurance Auto Auctions, Inc. (IAA); Automotive Finance Corporation (AFC), and additional business units, with approximately 13,000 employees and 240 auction facilities. Together, KAR’s complementary businesses provide support, technology and logistics for the used vehicle industry. For more information, visit karauctionservices.com.
Good luck on this challenge!
Round 1
Submit your initial design concepts storyboards for the Checkpoint:
SCREEN 1 (KAR HOME PAGE)
IMPORTANT! Note that this challenge will have an extended turnaround on checkpoint selection and related feedback - 96 hours (4 days!) rather than the standard 24 hours. Please review the dates and plan your schedule accordingly!
- Notes.jpg: Please include any comments about your design for the Client.
- Feel free to add additional views showing alternate states (drop select, hover states, etc).
- Make sure all pages have a logical flow / Use correct file numbering (01, 02, 03)
Round 2
Your final storyboard designs, based on the provided R1 winning design concept(s) / PSD(s), with all Checkpoint Feedback implemented.
SCREEN 1 (KAR HOME PAGE)
SCREEN 2 (KAR TEAM PAGE)
SCREEN 3 (KAR STYLE GUIDE)
- Notes.jpg: Please include any comments about your design for the Client.
- Feel free to add additional views showing alternate states (drop select, hover states, etc).
- Make sure all pages have a logical flow / Use correct file numbering (01, 02, 03)
Design Considerations:
Please:
- Make sure to logically group all PSD source file layers AND logically label both your individual layers and groups.
- Make sure your style guide matches your design
- Remember that this is responsive / for all device sizes, so use module design and good tap target sizes for tappable links.
Please take a look at this article on best practices for responsive web design:
http://www.incomediary.com/best-practices-responsible-responsive-web-design
This will be a responsive website, so think in terms of content “modules”, which can easily be reorganized on the page when viewed on mobile devices. Also, see notes below (“design size”) on the requirements for a 3-column grid layout.
Included Assets:
- PSD Template (KAR Project Template.PSD)
- KAR Logo
- KAR Brand Colors
- KAR Allowed Color Variations (variations from the brand colors, which are allowed by KAR)
- Ideas Element Rough Wireframe (ideas-screenshot.png)
- Style Guide Example
Design Size:
YOU CAN USE THE PROVIDED PSD TEMPLATE FOR YOUR SOURCE FILE (KAR Project Template.PSD). If you need the screen to be longer than the template allows, you may create your own PSD file - so long as the template guideline dimensions remain the same.
TEMPLATE NOTES:
Your PSD must be 1270 pixels wide, with only the first global element --- 3rd party black “Office 365” nav bar placeholder, detailed below -- extending to 100% width. All other content -- header, main content, footer and legal sections -- must live within a centered area that is 1170px wide (so there will be 50px on either side of this main design area, where we can see what your screen background will look like).
Note that the 1170px design framework is built to be responsive (ie reorganize itself to work on any size device) and it consists of three (3) columns at 380px each, with 15px of padding on either side of the center column. You may design elements that take up the space from one, two or all three columns, so long as they work within this responsive framework.
Height of the screen is open to the designer (no restrictions).
Please comment in the forums if you have any questions about the design size requirements!
Required Screens:
SCREEN #1 (KAR HOME PAGE):
1. 3RD PARTY TOP NAVIGATION PLACEHOLDER:
Above all other content, show a BLACK (#000000) nav bar placeholder across the top of the screen (100% width). Please label this “Office 365 Navigation Bar”. IMPORTANT: the color of this bar will not change regardless of which page the user visits.
2. HEADER SECTION
- KAR LOGO
Use the provided KAR logo
NAV BAR
Show six (6) menu items. The first item should be “Home” - use “Acme Menu Item” for the other five items.
PROFILE / LOGOUT
Show an element for the user welcome / profile / logout that contains:
- Profile photo thumbnail image (use stock photo)
- “Welcome, Jon Snow” (where jon snow is a link to the profile page) | Logout (link to logout)
SEARCH ELEMENT
Standard search element
BUSINESS UNITS
- This element will be where the user can learn more about other business units. It would be a pick list for “Select a business unit”
STOCK LINK
Show an element that contains stock data for KAR stock - Notes:
-The user can click on this element to go to an external webpage for more stock info.
- The color of the text here would be color coded, based on if the stock is going up / down or remaining the same (red=negative movement, gold=no movement, green=positive movement).
- Please show the text here as “KAR $45.27” and a related arrow (up / green=positive movement).
3. MAIN CONTENT AREA
IMPORTANT NOTES: Each of the modules listed below should include the name of the module. Many of these modules need a “View All” option, that opens a new page. The placement & style of this element on the module should be consistent across all modules, where present.
NEWS
This module will be a section where we highlight some new company news articles. There should be 3-5 articles visible here, with one larger than the others (featured article).
We need a “View All” option on this module.
For each article, show the following content (entire element is clicked to go to full article):
- Title of Article (use “Lorem ipsum dolor sit amet, consectetur adipiscing elit.”)
- Category of article (smaller, use “Acme News Category”)
- For the larger / featured article, show a snippet from article -- (use, “Maecenas posuere metus sed nulla dapibus, ac fermentum eros condimentum. Pellentesque ac venenatis sapien. In sagittis ullamcorper orci et ultricies…”). Note: this is not needed on smaller articles (just title and category for smaller ones).
- Stockart / related article image.
QUICK LINK ICONS
This module will show a number of icons and text labels for quick access to commonly visited pages. Please show the following icons and related label text:
- WORKDAY (icon note: please use some icon version of the actual workday product logo for this icon. See the workday logo here: http://www.workday.com/)
- TRAVEL (icon note: standard travel concept)
- SAFETY (icon note: training and safety concept)
- DIRECTORY (icon note: company directory, people)
- HELPDESK (icon note: IT / support)
RECOGNITION
- This module will be a section where we show a standard Salesforce chatter feed element (similar to the social feed, below). We cannot edit chatter, so please just show the container for it here (content to be added in build), as a placeholder.
- We need a “View All” option on this module.
IDEAS
- This module will be a section where we show ideas that have been submitted and give them the option to vote these ideas up or down. Please see the “ideas-screenshot.png” resource for required content here (note: you can use lorem ipsum for idea text!)
- We need a “View All” option on this module.
WEEKLY POLL
This module will be a section where we post weekly company-wide polls. The poll module will contain:
- Poll question (use “Donec vulputate urna orci, eu vestibulum lacus rutrum eget?”)
- Five (5) short answer options to choose from (radio button / only one can be selected)
- “Submit Answer” button
COMPANY DIRECTORY
This module will allow users to search for an employee. Show a short sentence of lorem (headline) and then a smaller subtext (2 short sentences of lorem), and then a Search box with “Find Someone” inside of it.
- We need a “View All” option on this module.
QUICK LINKS
- This module will be a list of quicklinks. Show a number of items, each with a short title and short description sentence below it (use lorem). The entire item block will be clickable / link to another page.
- We need a “View All” option on this module.
STAYING SOCIAL
- This module will be a place to view feeds from external social media. Show icons for these social media across the top : Linkedin, Facebook, Twitter, Youtube -- and show one as active. Below this show a standard social media feed (small profile pic of person who posted, short greek sentence for post content, and post date/time stamp. The entire item block will be clickable / link to another page.
WHAT’S NEW
- This module will be a small banner area for marketing news to place a weekly item. Use stock photography for the background; show a short title and a couple sentences of subtext (use lorem) and a call to action for “Get Started!”.
4. FOOTER SECTION
This will be a large modern footer block, which contains several link block elements, by category. Label this entire section “Toolbox” and show a number of categories (not clickable), each with 6 text links below them (you can use “lorem ipsum text link” for these text links)
Categories to show (each with 6 text links below them) are:
- HR / Workday
- Safety / Training
- Travel / Expenses
- IT / Support
- Purchasing
- Other Resources
5. COPYRIGHT / LEGAL SECTION
Below the footer section, show one line of smaller copyright and legal links text: “Copyright © 2016 KAR. All rights reserved. Privacy Statement | Security Statement | Terms of Use” (where the text items after ‘all rights reserved” are displayed as text links)
SCREEN #2: KAR TEAM PAGE
IMPORTANT! the header and footer from the KAR dashboard will also be the header and footer for this page. Content detailed below is what will live in the main content area of this page.
MAIN CONTENT AREA
PAGE TITLE (Use “Team Page”)
CALENDAR
This module will be an event calendar shown in MONTH view. Show:
- The current month (use “February 2015”)
- A way to choose which month to view (maybe previous / next nav)
- One day indicated as the current day
MINI BANNER
Note: this model does NOT need a title. It will be a banner spanning 2 columns that is short and shows small “dot” navigation across the bottom for sliding through 3 different banners.
NEWS
This module will be a list of news articles. For each article show:
- Article thumbnail image
- Article title (use “Acme Article Title”)
- Article category subtitle (use “Acme Category”)
- One short paragraph of content text (use lorem), ending in “... [read more]” text link.
We need a “View All” option on this module.
FAQ
- This module will contain a list of questions, with answers below each one. Use short to medium lorem text for question and a short paragraph of lorem for the answer. This element should show the questions only by default and then the user clicks on the question to view the answer, hidden below it (accordion style). Please show one question as clicked (answer visible).
- We need a “View All” option on this module.
RESOURCE LIBRARY
This module will contain a list of top level categories, where the user can click to “open” a category to view a number of links within it. Use “Acme category” for each top level category / show one category as “open” and within it show a number of resource articles. Each article will contain:
- Document title (use “Lorem Document Title”)
- Short description text (use one short sentence of lorem)
We need a “View All” option on this module.
CHATTER
This module will be a section where we show a standard Salesforce chatter feed element (similar to the social feed, below). Unlike the “Recognition” module on the homepage, this module should span two columns. We cannot edit chatter, so please just show the container for it here (content to be added in build), as a placeholder.
We need a “View All” option on this module.
SCREEN #3: KAR STYLE GUIDE
We would like you to provide a style guide to accompany your submitted design.
For your style guide screen, we ask that you cover the basic styles for a website (color scheme, typography / paragraph padding / text link / etc, form elements, module frame style, etc), along with any elements that you specifically include in your design.
We are providing a style guide template resource that you can use to get started on your template for this project, but use of this template is not required - You are free to add / remove sections and elements from this template as you see fit or you may create your own, from scratch.
Target Audience:
- English speaking, diverse work force / employees. Medium level “tech-savvy”.
Judging Criteria:
- Completeness (design includes all required elements).
- Cohesiveness (how well all elements work together seamlessly with the existing screens).
- Cleanliness (successfully engage users in a simple way / ease-of use).
- Modernness / RESPONSIVE Design (how well your elements fit with the concept of responsive design).
- Source File Best Practice (how well your PSD source files are labeled and organized).
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.
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.