Challenge Summary
Welcome to the Meli Design Enhancements Challenge In this challenge, we are looking for Design and User Experience updates to align the application design with the provided style guide. We need to update the background colors, icons and make sure we are capturing the subtle design items to improve and enhance our iPad application. We want this application to stand out and be a great user experience for our customers.
Round 1
Submit your updated screens for Checkpoint feedback
1. Dashboard updates + Alert variations
2. All Assets panel view
3. All Alerts panel view
4. Assets Detail Page
- Notes.jpg: Any comments about your design for the Client
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required screens with all checkpoint feedback implemented.
1. Dashboard screens
2. All Assets panel view
3. All Spaces panel view
4. Assets Detail Page
5. Space Details Page
6. Recommendations Page
7. All Alerts panel
8. Alert Detail Page
9. Expanded Chatter Feed view
- Any screens showing interactions and user click-paths
- Notes.jpg: Any comments about your design for the Client
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Details
The purpose of this Challenge is to update the provided screens/design to align with the provided client style guide. It is very important that we improve and enhance the user experience and make sure it is a great "tablet" user experience.
IMPORTANT!!
- You are required to submit RETINA resolutions for both iPad landscape
- Make sure any new UI elements which you are designing are scalable vectors
- We are providing you with the current design. You need to review the provided style guide and make sure the tablet experience is properly using the suggested style elements.
- If there is a difference between the Source PSD and the provided PNG screenshots, use the screenshots as reference because some of them are updated based on our live prototype
GLOBAL DESIGN NOTES
- We need you to work on the colors, size and overall presentation of this application - use colors, textures and other design treatments as recommended in the Style Guide.
- Look carefully at the color guidelines provided on slides 31-32 - you need to provide effective color usage for the navigation bars, icons and background.
- Also notice slide 33 - Information Salience - it provides reference for how background color, content, navigation and links all fit within the color palette.
- Slides 48-53 should convey the design direction we want to adhere to much more closely.
Required Screens:
We need improvements to the design for the below iPad screens..
1) Dashboard (01 Dashboard Screen)
Download and Review
- Revised_Style_Guide.pdf
- 01-Dashboard-*.png
Design Task:
- We need you to work on the colors, size and overall presentation of this page - use colors, textures and other design treatments as recommended in the Style Guide.
- Look carefully at the color guidelines provided on slides 31-32 - you need to provide effective color usage for the navigation bars, icons, background and how they fit together.
- Also notice slide 33 - Information Salience - it gives reference for how background color, content, navigation and links all fit within the color palette.
1.1) Navigation:
Design Task:
- While the icons are good, their current design and colors make them seem inactive and too subtle, and their active states do not fit in as well with the Style Guide.
- Reference slides 49-51 for examples of icons, typography and color choices for emphasis
- Update the navigation icons
- Update the navigation background colors
- Make sure your graphics are sharp/crisp and look good
1.2) Widgets Area:
We want to improve the provided widgets so they are more aligned with the styles in the style guide.
There are three widgets:
1) Natural Gas (depending on the customer it could be one or the other)
2) Electricity
3) Weather
Design Task:
- Reference slides 49-51 for examples of their widgets in context of a dashboard and bring the color and texture use of the design more in line with the Style Guide.
- Review the color guidlines and alert states - we want to make sure we are using the correct colors
- Update the widget colors based on the Style Guide
- We want to see the widgets in a neutral color (blue - based on the style guide) if there were no current alerts
- We want to see the widgets in alert color - if there happed to be alerts (Reference slide 55 for Widget in Alert state)
1.3) Right column:
We will have two type of messaging on the dashboard as shown:
1.3.1) Alerts (Asset/Space Alerts)
- An Alert would have 3 status types (Critical, Non-Critical and Dispensed) - that will mostly be as in this design
- We would like to see three versions of the Alerts (2 different screens)
- Critical Alerts would be red text as per current version, Non Critical would be emphasized per Style Guide recommendations (neutral colors, shifted in Typography - Slide 37), Dispensed Alerts would be gray.
1.3.2) Recommendations
Design Task:
- Remove the current icons and realign the remaining content so it fits well in with the dashboard overall
1.4) Chatter (component on several of the pages as shown in the designs)
Design Task:
- With the Style Guide and colors in mind, design a way for this to be emphasized in the page, but without overwhelming the rest of the screens they are on
- For this and all instances where Chatter appears in the application, place the Chatter input field, button(s) and associated UI appears at the TOP of the Chatter feed.
- In all instances, remove any Share, Like or Attachment elements
- Remove the Sort by: label and UI elements and realign the UI elements so they fit well with the design
2) All Assets Panel (02 - All Assets panel view)
Images: 02 Asset Panel.png
Design Task:
- We need the panel/flyout design to be improved and polished
- Make the only sorting feature at the top of the Assets be “Show: All Assets | Following”
- Remove the Planned Service column and realign other row elements to look consistent
- Design a few of the rows to show how it can display if an Asset has more than one Space associated with it
3) All Spaces Panel (03 - All Spaces panel view)
Images: 03 Space Panel.png
Design Task:
- We need the panel/flyout design to be improved and polished
- Make the only sorting feature at the top of the Assets be “Show: All Spaces | Following”
4) Asset Details Page (04 - Asset Detail Page Updates)
Images: 04_00 Asset Detail Page.png
- We need the panel/flyout design to be improved and polished
- Update the colors and overall panel/modal graphics to be more inline with the style guidelines
5) Space Details
Images: 05_Space Details.png
- We need the panel/flyout design to be improved and polished
- Update the colors and overall panel/modal graphics to be more inline with the style guidelines
6) Recommendations
Images: 06_* Recommendations-1-none.png
If a user clicks on a Recommendation opens a new view "Recommendation Detail" that describes the recommendation to the Manager
- Remove title section saying “/Manage Portfolio”
- Make any adjustment needed to make this be more inline with the style guidelines
6.1) Recommendation Detail View
Images: 06_04_Recommendations_details.png, 06_05 Recommendations_details.png
- If a user taps a Recommendation from the Recommendations page, this panel appears over the Recommendations Screen (05 - Recommendations Screen)
- When on the Recommendations screen a user can focus in on a single Recommendation and Accept, Reject or Put On Hold - Buttons when tapped will read "Accepted", "Rejected" or "On Hold"
- When “Reject” is chosen, the panel slides vertically to expose UI elements for the user to explain why they are choosing to Reject the Recommendation
See sample images for this interaction: 06_06_1_Recommendations_details-Rejection.png, 06_06_2_Recommendations_details-Rejection.png, 06_07_Recommendations_details_Rejection.png
Design Task:
- We have a panel for this. As with all of the panels, we want it to look more polished and aligned with the provided style guide
7) All Alerts Panel View
Images: 07_01 Alert.png
Design Task:
- We have a slide-down panel for this. As with all of the panels, we want it to look more polished and aligned with the provided style guide
8) Alert Details Panel
Images: 04_02 Alert Details.png, 04_03 Alert Details.png
Design Task:
- We have a panel for this. As with all of the panels, we want it to look more polished and aligned with the provided style guide
9) Expanded Chatter Feed view (sometimes referred to as “News”)
Images: 08 Global Chatter.png
Design Task:
- The base design of this is the Dashboard but with the Chatter feed expanded upward to cover the entire section of the screen previously covered with the Widgets.
- Remove the Sort by: label and UI elements and realign the UI elements so they fit well with the design
Judging Criteria:
- How well you reviewed the brand guidelines and made smart/appropriate design updates
- Cleanliness, sharpness and overall graphic improvement to the user experience
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
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.