Challenge Summary
Welcome to the Hestia BI Enterprise Portal Design Challenge. This is the third and final design challenge to design the Hestia Business Information (BI) "brand" and user interface for their Business Information application. The main tasks are to take the provided Hestia Business Information (BI) branding and screens and:
1. Create the new BI Enterprise Portal page within the new look of Hestia BI
2. Update and complate existing desktop and mobile screens to finish the Hestia BI application design.
Round 1
Initial Submission for design review:
1. Create BI Enterprise Portal Page and Infographic (for a design review)
2. Create Summary Report Page
Notes.jpg: Any comments about your design for clients
Round 2
Final storyboard design plus any Checkpoint feedback
1. Final BI Enterprise Portal Page and Infographic (for a design review)
2. Final Summary Report Page
3. Update Hestia BI Desktop Screens
4. Update and create missing Hestia BI Mobile Screens
Notes.jpg: Any comments about your design for clients
Challenge Details
Hestia always looking to give their customers a better user experience by updating and enhancing the User Experiences of their existing websites and applications. This is the third and final challenge to design the Hestia BI brand and business information application. We need you to focus on completing the BI user experience and complete the missing mobile screens!
Important!
- DO NOT create a new brand - we have approved the provided design - we need you to create new screens or finish existing screens to complete this project.
- Your submission must use responsive design. You need submit these following sizes
-- Desktop Screen Size ( width = 1024px, height = up to your design.)
-- Mobile Screen Size ( width = 320px, height = up to your design.)
Challenge Requirements:
1. Create BI Enterprise Portal Page and Infographic
screenshot: HestiaBI-Portal.png
screenshot: HestiaBI-Portal-Design-Area.png
screenshot: HestiaBI-Portal-Infographic.png
The BI Enterprise Portal Page is a Sharepoint site that all Hestia employees will use to access the Hestia Business Information (BI) group and information. We need this page to be updated (look like the correct Hestia BI branding) and also update the navigation to make sense for anyone who wants to access their BI reports.
Note: This page is separated from the Business Information Application. This page will just be hyperlinks into the Business Information Application (think of it as 2 separated applications)
- Only design within the content with the red area on HestiaBI-Portal-Design-Area.png
- A user will use this page to quickly learn about the BI group and quickly get to imporant BI links
- We need a new and improved infographic for this page - we are looking for design concepts that are better then the existing (see HestiaBI-Portal-Infographic.png)
- We need suggested navigation solution (still 3 column or 2 column layout?)
- Note we need design concepts (for navigation, layout) as the items you design can be populated using the CMS
Possible "quick links" - This links would provide a user a quick "1 click" to these types of reports
-- Finance
-- Vendor Funds
-- Credit
-- Risk Management
-- Managed Pricing
-- Inventory
-- Supply Chain
-- Branch Operations
-- Business Groups
-- Ebusiness
-- Sales Management
- Your new page should showcase the BI brand
- The infographic should be larger and help tell the BI story/be part of the page layout
- Use the provided Hestia BI color pallete
2. Create Summary Report Page
screenshot: summary-report-update.png
reference: 06_form_creation.jpg
- This is Summary Report page with table information
- We need this page designed to match the Hestia BI layout.
- Make sure to use the current BI colors
- Note the size/width of the example
- Reference 06_form_creation.jpg for the header and page layout
- On header part, mimic information existing table information
- Show us differences for "Aging" columns
- How total row designed?
- Mobile: We need a mobile/responsive design of this screen
3. Update Hestia BI Desktop Screens
Reference: Missing-Desktop-Screens.zip
Open Order
Screenshot: 03_1_open_orders.png & 03_2_open_orders.png
- These open orders page need show updated header like attached "BI-final-fixes.zip"
- Show active tab for "Open Orders"
- Chart and Table need displayed on page. Refer placement chart and table like attached 02_Sales_Overview.jpg
Vender Search
Screenshot: 04_Vender_Search.png
- Adjust input and Table Search Result to fit with new screen.
- Show active tab for "Vendor Transaction"
- Update table style and link color to match with 02_Sales_Overview.jpg
Account Payable
Screenshots: 05_1_account_payable.png & 05_2_account_payable.png
- These "Accounts Payable" pages need show updated header like attached "BI-final-fixes.zip"
- Show active tab for "Accounts Payable"
- Chart and Table need displayed on page. Refer placement chart and table like attached 02_Sales_Overview.jpg
4. Update and create missing Hestia BI Mobile Screens
- We need you to create the responsive "mobile" version of the completed desktop BI application design. (BI-final-fixes.zip)
- Reference BI-old-mobile.zip (This is older version) you can grab some old mobile storyboard design and update to the new design.
- Pay attention when creating the mobile versions - there are some small/minor details that need to be captured on mobile version.
Landing Page
Screenshot: 01_Landing_page.jpg
- Use consistent "Ferguson Business Information" with green text only, no need big BI logo. (see desktop version)
- Match Welcome message
- There's quick information with some numbers in page, how you design for mobile version?
- Update all icons look and the ordering with desktop version
- How you arrange the layout for mobile version?
Sales Overview
Screenshot: 02_Sales_Overview.jpg
- Use consistent "Ferguson Business Information" with green text only, no need big BI logo.
- How main navigation on top designed for mobile version? Use consistent icons.
- How page tab designed for mobile version?
- Chart need show consistent look. How you design it?
- Notice that you need show chart first then table information. What best way view table and chart? Still need use toggle option?
- There's chart view option, how you design for mobile?
Sales Overview Month Compared
Screenshot: 03_Sales_Overview_month_compared.jpg
- Chart need show consistent look. How you design it?
- There's chart view option, how you design for mobile?
Open Order
Screenshot: 03_1_open_orders.png & 03_2_open_orders.png
- Create mobile version of updated screens on previous task. Refer to "3. Update Hestia BI Desktop Screens" task.
- Use existing 09_1_Mobile_open_orders.png & 09_2_Mobile_open_orders.png as base updates
Vendor Search
Screenshot: 04_Vender_Search.png
- Create mobile version of updated screens on previous task. Refer to "3. Update Hestia BI Desktop Screens" task.
- Use existing 10_Mobile_vendor_transanctions.png as base updates
Account Payable
Screenshot: 05_1_account_payable.png & 05_2_account_payable.png
- Create mobile version of updated screens on previous task. Refer to "3. Update Hestia BI Desktop Screens" task.
- Use existing 11_1_Mobile_account_payable.png & 11_2_Mobile_account_payable.png as base updates
Challenge Attachments:
Enterprise-Portal-Page.zip - Screens of the Sharepoint site screens that need to be designed with the new BI Brand
summary-report-update.zip - New report page that needs to be designed with the BI Brand
BI-final-fixes.zip - This is approved Hestia BI storyboard design (desktop only)
BI-old-mobile.zip - These are an older design of the mobile screens that you can use/reference to help speed up your design process.
Target Audience
- Internal Hestia users looking to see business information and reports
Judging Criteria
- How well you create the BI Enterprise Portal Page and Infographic
- How well you create the BI mobile versions of the completed desktop version.
- Cleanliness of your 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. 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 and number your files (01, 02, 03 etc) in the order you would like to see them viewed.
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.