Challenge Summary
We want you to critically think about the problem and propose the best solution for how content should be displayed, what’s the best navigation mechanics, and how the user moves through the site. Your designs should have a simple, modern, and responsive UI and UX to allow for the user to quickly move through the application. The goal is to keep the experience intuitive, easy to use, and above all, allow the end user to source talent more easily. As always, reach out in the forum with any questions. Good luck and looking forward to your design ideas!
Round 1
For checkpoint we want to see all of the screens, states, and flows designed for desktop only.01. Input Criteria Screen (desktop)
02. High Level Summary Screen (desktop)
03. Country Specific Screen (desktop)
04. Individual Summary Screen (desktop)
Round 2
For finals we want to see all checkpoint feedback completed and all screens, states, and flows for desktop AND tablet01. Input Criteria Screen (desktop & tablet)
02. High Level Summary Screen (desktop & tablet)
03. Country Specific Screen (desktop & tablet)
04. Individual Summary Screen (desktop & tablet)
Background Overview
The main goal of this challenge is to allow system users to search and rank their global workforce for the best match for specific roles based on requirements. Organisations will benefit by ensuring that the best candidates are placed in global roles or projects resulting in enhanced overall performance.
We do not have a guideline, as we are looking for innovative and creative designs. It is paramount that the user will have the ability to easily access the tool, navigate around it and view on their desktop and tablet device. Your layouts and design should take the content and reorganise it in a way that is simple to follow, find information and read content in the most beneficial way for the user. The key emphasis of this tool is to display to the user the best matches in their global organisation for specific roles.
Think about simple navigation mechanics and patterns that you can use to keep things organised. How will the content be displayed that allows the user to easily view and interact with the tables and data? The user should be able to recognise easily from the data where their best talent is located according to their search criteria. This should be a simple and interactive web application where the user selects their own input and navigates around the tool themselves. Are there additional pieces of interactivity within a table that will make it easier for the user to cross-reference content and/or make the data more useful and engaging? Show us your ideas and concepts. This is an exercise in modern UI and great UX!
Required Screens:
01. Input Criteria Screen (reference screenshot 1)
- This screen will be where the user will enter their own specific search criteria, which the tool will then search against to display the talent available based on this chosen criteria. Suggested input options are:
-- Job Family: 15-20 items in the list
-- Skill: These will be generic job skills. Up to 50 items in the list. Multiple skill selections are needed
-- Duration: Defined ranges of time. (example: 0-3 months, 3-12 months, 1-3 years. 3+ years)
-- Country: 50+ items in list. Select country in which the role is required
-- City: 50 items in list (Depends on what country is selected). Appears once Country is selected and will allow the user to narrow their search criteria if they wish
-- Experience: (example: Recent Graduate, Experience 0-5 years, Experienced 5-10 years, Experienced 10+ years)
-- Start Date: Single input. Enter the date user wishes individual to start
- What is the best way to organise and group sections together? Do certain sections of data make sense to group together? All the inputs should be on one page
- Secondary buttons: Home and Menu
- Think about an engaging and visually stunning experience for the homepage and presenting the content sections to the user
- Consider an introductory section or overlay (on first visit) that explains the purpose of the application, what it’s used for and/or how to use it.
02. High Level Summary Screen (reference screenshots 2 and 3)
- This will be the main section of the tool and must be visually attractive whilst also simple to navigate. It will consist of two main parts:
-- 1. A high level summary of the output results produced based on the input criteria selected by the client.
-- 2. A world map, which is the main focal point of the screen It should be interactive with an attractive design. The user should be able to click on different areas of the map and be able to view a summary of the location and candidates within it. Think simple, but interesting.
- Please refer to screenshot 2 as an example to provide you with some ideas. Again, we are open to creative ideas and they would be greatly valued over simply following our designs!
03. Country Specific Screen (reference screenshot 4)
- A more drilled down/ deeper level overview of the output results when clicking on a country – refer to both screenshots 3 and 4. The per country suggested outputs should include:
-- Home country
-- Host country
-- Move type: this will be binary output (International/In-Country)
- In-country matches: the number of exact matches already based in the country
- International matches: the number of exact matches in the organisation globally
- Immigration complexity: This would just be a score from 0-1000
- Average cost: Single cost number. Example: 200,000 USD
- Tax rate change: we have provided a table showing the tax rate for each country. This can be compared for each home-destination country combination to show if there is an increase or decrease between the home and destination countries
- Tax treaty: This will be a binary output (Yes or No)
- Social security agreement: This will be a binary output (Yes / No)
- Change in standard of living: The results should be restricted to 'Greater', 'Lower' and 'Similar' dependent on whether the index of the host country is higher, lower or within 10 points of the home country
- Language: This could list up to 3 languages for a country/ city
04. Individual Summary Screen
- A further drilled down/ deeper level summary displaying more detailed information relating to specific individuals and assessments against all matching criteria and rankings.
- The screens should be presented in a way that makes sense to the user and remains usable and understandable.
- The information for how each individual scores in each ranking category should be shown.
- The statistics based on what the user has entered should be on the output screen. It should be presented in a way for the user to easily understand. They should be short, fast and snappy i.e. straight to the point, but also visually engaging.
- Think through the user experience of this and show us some of your ideas.
Design Direction:
- The application must adhere to the Dinnaco branding. We have provided a style guide that includes necessary branding information, additional inputs, examples and supporting documents needed for the challenge. Please refer to the Dinnaco Branding/ UI Guidelines PDF for further information.
Screen Size:
Your designs should walk across desktop and mobile devices. Think about a unique and appropriate experience for the tablet and mobile views. DO NOT just shrink down the desktop version to for the smaller screens. Think about the navigation, layout and content that needs to adjusted for the smaller screen sizes. Make sure you are using appropriate button (be mindful of suggested tappable area dimensions) and font sizes.
Desktop: 1024px width (height can expand based on content)(reference the supplied grid system PSDs)
Tablet: 768px width (height can expand based on content)(reference the supplied grid system PSDs)
Input Documents:
- Dinnaco Branding/ UI Guidelines
- Sample Screens - Remember these are for reference ONLY. We are looking for your original ideas and concepts.
- Bootstrap Grid System - We would like you to use an underlying grid system to build your design upon. This will ensure that everything is organized, translates easier to tablet, and will aid in development.
Target Audience:
- Dinnaco employees sourcing and looking for new talent within the company
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Overall design, UI and user experience
- How well you interpret the example screens and show us new ideas and concepts
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.