Exousia Salesforce Community Portal Design Challenge

Welcome to "Exousia Salesforce Community Portal Design Challenge". In this challenge we are looking for the Studio Community to help us in designing Exousia’s new Community Portal.

Exousia is a manufacturer of commercial power products, both large and small, that are used world-wide. Their distributor network spans the globe and to better help their distributors, Exousia is creating a Community Portal. This portal will give the distributors easy access to their data to help in managing their orders, invoices, claims and products. Exousia wants the distributors to see this portal as both helpful and useful and as the first place the distributors will go to help manage their business with Exousia.

We are looking forward to your participation in this challenge!

Round 1

Submit your Initial Designs for Checkpoint Feedback:
00 - Login
01 - Home
02 - My Orders
03 - Create New Order
09 - Campaign Detail
- Notes.jpg: Please note any comments about your design for the Client
- Use correct file numbering on your jpg/pngs. (01, 02, 03, etc.)

Round 2

Your Final designs with all Checkpoint Feedback implemented:
00 - Login
01 - Home
02 - My Orders
03 - Create New Order
04 - Shipped Order Detail
05 - Product Detail Popup
06 - Create a New Warranty
07 - Submitted Warranty Detail
08 - Product Detail
09 - Campaign Detail
- Notes.jpg: Please note any comments about your design for the Client
- Use correct file numbering on your jpg/pngs. ( 01, 02, 03, etc.)

The goal of this challenge is to design the screens based on the wireframes and to use Exousia’s branding and colors in your designs.

For this challenge, as always, we are looking for the best UI/UX possibility. Since this is a Business to Business portal, we are looking for the designs to be creative, clean and professional, but also be visually engaging to the user. The end-users will be on this portal weekly, if not daily, and may not have any training on how to use it so the experience needs to be as intuitive as possible.

The wireframes were created for a desktop screen but when developed, the screens will be responsive to all mobile devices. Keep that in mind when creating your designs; however you only need to design for the desktop as per the wireframes.

Design Considerations
- This is a web app that will be available for desktop and mobile but for this challenge you only need to design the screens for the desktop as per the wireframes.
- The wireframes show the data and hierarchy that need to be shown on each screen
- Any icons used in the wireframe are for placement only; feel free to use other icons that match your design, or to use links if you feel that will fit in better with your design
- Simple, Professional, Easy to Use, and Clean  design
- Make sure all elements in your designs are vectors, so they can be resized to any size.
- Keep things consistent. This means all graphic styles should work together.
- The provided wireframe is starting point for your submission! You must to submit and suggest better solution for Best Practice User Interface and User Experience
- DO NOT just color existing wireframe, we need you suggest ideas on layout and functionality within the application. If you just follow existing wireframe all submissions will look same.
- Screen Size: 1280px width x height as needed

Branding Guidelines:
- Colors: please follow the client’s branding guidelines, attached to this challenge
- Typography: the brand guidelines specify using Arial or Segoe font.
- Logo: Client’s logo is not yet available; please use a placeholder in your designs
- Stock art or stock photography is allowed
- Look for images that are reflect manufacturing or power

Supporting Documents:
- Brand standards: exousia_brand_guidelines.pdf
- Wireframes: exousia_wireframe_html.zip

Design Submission Requirements:

00 - Login
(see wireframe Login)
- Design how Login page look and feel
- Put logo placeholder
- Make sure username and password fields easy to access
- There’s link of Forgot Password and Call
- You also need put Remember Me checkbox
- Suggest graphic that represent the Distributor Community
- Feel free to suggest how other element for this page designed.
- Feel free to place additional images on this page
- Show how the Login validation error message will look

01 - Home
(see wireframe Home_withMarketing)
- This is Homepage of Exousia Salesforce Community Portal
- Client’s logo is not yet available; please use a placeholder in your design
- Create separated screen show an example of the top navigation dropdown (Try click username, account & help menus)
- Marketing Carousel placed below the the header
- Think about how Main Navigation designed
- Create clear active and inactive state for current menu
- Think about how page layout designed for this homepage
- Scorecard contains some donut chart with label information
- Tasks give initial information to user about Overdue and Upcoming Tasks. Also put way to view all tasks
- Shipments area contain table list information
- User can view modal Shipment Detail by click the Shipment number
- Inside Shipment Detail modal window, there are Status and Shipped information that are need easy to read easy to read for users
- Create Shipment Order in table layout, view order will take user to Order page
- In the bottom of form, you need display Go to Shipment page and close the window
- On the last column of Shipment table, click Confirm Delivery need able show up datepicker
- Create separated screen show datepicker look and feel and after user save the date
- Notification section, need display in table layout
- No need create screen for Notification modal window
- In the bottom of table we need way to take user to see all notifications
- News section will be list of some sample news
- There’s Vote area on top of News section.
- Design how footer look and feel

02 - My Orders
(see wireframe My_Orders)
- Left Navigation for My Orders is expanded; shows highlighted sub-navigation and sub-navigation with an icon indicating the link opens a new tab
- Need to also show what the filters option look like (click on Filter List button to see this)
- This page show My Orders as table list
- Display sort icon on table header.
- Display pagination and records per page for table information
- Order Number will take user to Order Detail page
- There’s some different Order Status in table, how you make user easy to recognize each different status?
- Order row with “Denied” status need highlighted
- On the last column, we need put icon to indicated there’s attachments on Order

03 - Create New Order
(see wireframe New_Order_Product)
- This is New Order Product page look.
- Create some way to highlight the required information
- Design best way to guide user pick Product Line, Brand and Sub-Brand options
- We also need put search field above the order table
- On the 1st column please display product thumbnails
- User need able to filled Quantity inputs for each rows
- Products Added to Order and Other Informations in the bottom of page
- Also, create error message look when click Add to Order button
- For Products Added to Order, user able to edit the quantity, reset and delete the added product
- For Other information, there’s Discounts table where user need filled the Amount applied
- Shipping Information, Ship to Address is a required field
- No need design Address Lookup modal window
- Account Lead time need display the tooltips
- Requested Delivery Date is using datepicker
- Order Comments need to build as textarea
- Financials, there’s PO Number input
- User can attach more than one file. There’s option to add new attachment
- You also need to show the Error Message when click on Review Order button when user not meet the minimum order.

04 - Shipped Order Detail
(see wireframe Order_Detail-Shipped)
- This is Order Detail page with Shipped Status
- Status, Order Number and ERP Number placed below the page title
- Clone Order and Create Claim buttons placed in the right side
- Order Information, Order Summary and Shipping information displayed below the title
- Products table, show list of table rows
- On Products table, show these as links: Product, Amount and Estimated Delivery Date.
- No need design links as modal window in your submission
- Shipments table, there’s filter placed on top right of table
- By default all rows need to be collapsed
- Create separated screen to display expanded row looks like under the Shipment table
- on Shipments table User need able to see these as links: Shipment Number and Tracking Number
- No need design Shipment number link as modal window in your submission
- Discounts, Financials, Attachments and Order Comments displayed in the bottom of page
- There’s Add attachment link, user need able to add new file to upload
- Also on attachments table, user need able to remove the attachment

05 - Product Detail Popup
(see wireframe Order_Detail-Shipped and click on product name in Products Table)
- On Shipped Order Detail page, click on a Product Name to view the modal window
- On modal window, display Product Thumbnail, Product Description, Technical Information and Size Information
- Go to Product page button will take user to related page
- This popup needs to reflect the creativity you bring to the Product Detail (09)

06 - Create New Warranty
(see wireframe New Warranty)
- Create some way to highlight the required information
- Design best way to guide user pick Brand, Sub-Brand, and Product
- Product information need to added displayed below the Add Product to Warranty selection
- Create some way to indicated the required fields
- Create consistent form element design like text input, date picker, drop-down and upload field
- Add to Warranty button will add selected product to the Products Added to Warranty table below
- For Products Added to Warranty, user see table list of added product
- No need display the detail product for this page
- There’s actions buttons on the right side of table rows for Image attachment, delete, edit and information icons
- For Other information, you need create textarea for Warranty Comments
- In the bottom of page there’s Submit Warranty, Save as Draft and Cancel buttons

07 - Submitted Warranty Detail
(see wireframe Warranty_Detail-Submitted)
- This is how Warranty Detail look after submitted after Create a New Claim
- Status, Warranty Number and Submitted Date placed below the title
- Warranty Information need show Credit Amount, Credit Memo, Manifest and Scheduled pickup
- User can see credit memo detail.
- Products information display as table format
- There’s icons for attachment and information on the right side of table
- Warranty Comments display comments for related Details
- User still need able to Add new Comment

08 - Product Detail
(see wireframe Product_Detail)
- Expected design for this page needs to really stand out since it is advertising the product to the client’s distributors
- Full size Product Image placed below the title
- Add to New Order and Add to Draft Order buttons should easy to recognize users
- Design best way to display the columns: Product Description, Order Information, Product Information, Product Details, Technical Information and Size Information
- Under Technical Information, There’s clickable image that will open technical graphic in modal window format

09 - Campaign Detail
(see wireframe Campaign_Detail)
- This design needs to really stand out, to excite the distributors about the upcoming advertising that they can tell their customers about
- Create separate icons for different type of Campaign medias like:
-- Audio
-- TV
-- Video Online
-- Print
-- Billboard
- Make sure the icons have same aesthetic like your suggested design submission theme

Note: The winner may be asked to complete a secondary task (for additional payment) to create a digital brand guideline (using our template) and/or additional screens

Target Audience:
Exousia’s Distributors, a global network of businesses who purchase and distribute Exousia’s products

Judging Criteria:
- Application of Exousia’s brand guidelines
- Originality and design execution
- Quality of graphics
- Ease of Use / Clarity of UX

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.
- Do NOT use Artboards - Use a single PSD storyboard for each unique “page” plus it’s related alternate views/popups etc.
- Adobe Illustrator (AI) source files are not allowed.
- Logically group all PSD source file layers AND label both your individual layers and groups logically.

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.
- The winner may be asked to complete a secondary task (for additional payment) to create a digital brand guideline (using our template) and/or additional screens