Challenge Summary
Welcome to the Hermes Partners Admin Pages Design Challenge.
For this challenge we are looking for you to help us design our admin module. We have provided a design style guide to help you create a design for us that is "in-brand". We expect you to create design concepts and user flow based off of the provided wireframes. Please feel free to add any interactions or screens that help demonstrate your concept. We're looking for good clean design and a design that looks like our brand.
Round 1
Your submitted initial design solution for a review.
1. ‘My People’ Member + any additional screens
2. Person Page + any additional screens
Please number your files in the order they should be viewed.
Notes.jpg: Any comments about your design for the Client
Round 2
Final Design + any Feedback on Checkpoint Review
1. ‘My People’ Member + any additional screens
2. Person Page + any additional screens
Please number your files in the order they should be viewed.
Notes.jpg: Any comments about your design for the Client
On this challenge you need create storyboard design of website application based on attached wireframe and details requirement stated below.
Please ask questions if you need any clarification on the challenge.
Attachment Files:
- Admin_Wireframes.pdf is Client's wireframe sketch of Hermes Partners Admin Pages.
- Digital-Style-Guide.pdf is client digital style guide, keep same branding/theme and style rules for any design element. Colors, fonts, and overall look and feel are fairly established in this style guide and the designers should take note. Also, the client has provided an icon set which the designers can use in your submission design.
- current_layout.tiff - This is how current layout of Admin pages. You need follow existing header, body and footer composition and the style branding.
Design Challenge Requirements
1. ‘My People’ Member
wireframe: Admin_Wireframes.pdf > page 4
- This is how profile page look.
- Please show this page flow in your designs wireframe: Admin_Wireframes > page 3, and 5
- User can conduct basic search and filter of people lsit based off criteria in the left hand filters column.(Please reference Page 6 of the PDF for filter states)
- User can also perform bulk acitons from this page by selecting names and desired bulk action
- Keep same content like attached wireframe.
- Header divided by left and right sections.
- In the left side, there’s a Home button that will take user to dashboard page
- Username text next to Home button
- In the right side, started with “100 Licences Available” progress information. How do you display this information?
- Then, there’s number indicator. Click that indicator will take to separate page.
- Setting button, will take user to separate setting page that will contains all user preferences.
- Logout button, will end login session
- Below top header, there’s bar contains back button and Username text on the left side.
- Then, there’s main content area
- Main content area divided by “User Information”, “Apps” and My People sections
- How the layout/placement of this Profile page should designed. Wireframe is just starting point, we’re looking for best practice design. You can refer this site for some inspirations.
User Information section
- User Profile picture and big Username placed on top
- There’s Edit button that will allow user to edit information
- Put “Job Title” and “Location” field
- “Manager” section allow user to add and edit manager. How your design look?
- Put “Phone” and “Email” field
- “Grade Structure” will be a dropdown.
- “Grade” field has Edit ability
- “Survey Report”, “Survey Completion” and “Usage Report” are action buttons
Apps section
- This area will listed all user Applications
- There’s 3 boxes show up on this section, they are “Styles & Climate”, “Job Grading” and “Job Pricing”
- You should design icons before the title. Make sure all icons clearly explains about section purpose
- There’s also “Off” and “On” option aligned with section title
- Match content for each section like show up on wireframe, you need anticipate how those form look across browsers.
My People section
- This will be a table contains of “My People” list
- There’s “Edit” and “Add Person” button.
- “Edit” button will do bulk copy and delete options. Create separate screens show the flow
- 1st column is “Name (First/Last)”, this will be a link.
- 2nd column is “Title”
- 3rd column is “Grade”
- In 4th column user will have options to “Copy to another Manager” and “Delete Person”
2. Person Page
wireframe: Admin_Wireframes.pdf > page 5
- Use same header like Profile page
- Below top header you need show navigation for “Company”, “People” and “Style & Climate” tab
- “All People” show up as a page title. Notice there’s also arrow next to it. refer to Admin_Wireframes.pdf > page 1 for dropdown sample.
- Set “People” as an active tab
- Main section area divided by:
Filter
- Filter area contains some optional filter to narrow search result on the table in the right side
- “Reset” link should revert all value to default value
- User can Add more than 1 Location, there’s input to search the location
- User can checked on/off search location
- There’s also ability to delete the location
- “Grade” option will works as tree view with ability to expand/collapse
- “Title” option will allow user to select more than 1 title.
- There’s also option for another section
- We provide details interactions for filter area. refer to wireframe: Admin_Wireframes.pdf > page 6
- Create separate screens showing the click flow.
Search Result
- In the right side, user see table list
- On table header, there’s option to select all checkboxes
- Dropdown show “Bulk Actions” value
- App Setting is a button action that will take to App Setting page
- Also dropdown that will allow to Assign Admin to another user.
- Search input in the right side will show related search result right away on table.
- You need create screen when there’s no search result based on typed value on table
- Table need support horizontal and vertical scrollbar
- Match table content like provided wireframe
Target Audience
- Hermes Partners Customer
Judging Criteria
- How well you create design screen for Hermes Partners Application and keep things consistent with the current site design.
- Cleanliness of your graphics and design.
- User Experience
- Consistency Branding with Style Guide
Submission & Source Files
Preview Image
Please create your preview image as one (1) 800x800 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
Submit JPG/PNG for your submission file. IMPORTANT - If you are submitting "small updates or changes" with multiple submissions please include in your notes file what is different or changed - this can be confusing to the client sometimes when they can't tell what is different.
Source Files
All original source files of the submitted design.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.