Challenge Summary
Welcome to the Meli – ALL NEW Design Concepts Challenge! We have been building the Meli iPad application the last few months and it now time to continue exploring and pushing the user interface design. For this challenge we want to think about the future and version 2! We want to explore ALL NEW designs and layouts for this application. We want to push and enhance the user experience!
We have a presentation next week and we want to show the Meli users all new designs and concepts!
Round 1
Submit your updated screens for Checkpoint feedback
0. Navigation
1. Dashboard
2. Spaces View
3. Recommendations 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.
0. Navigation
1. Dashboard
2. Spaces View
3. Recommendations page
4. All alerts panel
5. Expanded chatter feed page.
- 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
This challenge is focused on creating a new interface for the Meli iPad Application! We are looking for new layouts, new grid designs and overall new concepts on how we can improve this application and provide our users with a rich user experience.
The Design Problem:
- The current User Experience is not exciting or engaging to our users.
- The current colors and alerts are confusing to the casual viewer and need to graphically show purpose and hierarchy on the page
- The design might be restricted by our existing brand guidelines - we want to see what rules we can break (and if we should)
Challenge Goals:
- Now that we have the functionality built we need to continue evolving this application and showing our customers this application is focused on making them more efficient managers
- We want to continue evolving this application and take it to the next level through continuing to explore modern application design
- We want to show our customers new and exciting designs to get feedback on the next direction of this application.
Design Thoughts:
- How can we improve the page design and make sure this is “tablet” design?
- We are looking for the richness and detail of dashboard widgets but in the iPad experience
- We are looking for modern tablet application design (does not need to be iOS specific)
- Think about redesigning the grid
- Improve the user taps - if something is a modal window or flyout how does it interact with the navigation?
- Have fun creating this - pay attention to the graphic details and subtle edges and shadows and highlights
- We want to make the UI “cool” and “sizzle” ;)
User Thoughts:
- We want to make sure the user can quickly see and react to things that are happening on the dashboard.
-This application is a command center if information. A user will be walking around with their iPad and quickly reacting to what the dashboard is telling them.
- Focus on how the user needs to interact with this application (iPad) and focus on what makes an iPad experience great (touch, swipes, navigation etc)
Design Requirements:
- iPad: 1024px by 768px (or longer height wherever scrollable/required - but keep important content above the fold)
- Break the rules
- Try new things
Challenge Resources:
For this challenge we are providing previous storyboards as design guidance for you (Wireframe-DO-NOT-COPY.zip)
DO NOT COPY the wireframes!!
- We are providing the wireframes to help guide you and let you understand the application and how the user currently interacts with it.
- Wireframes main purpose here is to show you the different areas of data and functionality that we need to redesign. For this challenge we need you to re-interpret this application with these areas and functions.
Required Screens:
0. Navigation
- The current navigation is based on a top and left with panels that slide in from the icons.
- Re-organizing the navigation for easy use and understanding is important here, as well as better ways to reveal and hide the different views and panels available to the users.
- Take this opportunity to use a new interface (simple yet sharp and clean) to give the best experience possible
1. Dashboard
- The Facility Manager logs into the application and they can see:
- Dashboard of widgets, controls and reports telling them what is going on within their building(s)
- The ability to navigation to any of their systems
- The ability to see if any systems are not running efficiently - a section indicating critical alerts
- Services in the building that are not running efficiently (need to be shown on all views) those assets fall into 4 primary buckets:
- Maintenance Schedule.
- Tenant Feedback (using Salesforce Chatter)
Design Note:
Gauges
- In the design reference files provided, the gauges dominate the Dashboard - based on customer feedback we need more of the emphasis to be placed on seeing the Alerts and Messages.
- The gauges need to be less dominant (we still need them!) but do they go into the left navigation or a vertical column of gauges? Are they minimized quickly somehow?
- Gauges still need the current information that is being displayed
- Also include UI elements which can indicate a level of customization - where the user can move/change their widgets (any widget)
Alerts
- Alerts are being shown as a feed-like module on the right, but we want them to be more prominent and useful.
- Consider a grid-like arrangement as one option so users can read the information on the Alerts for easy observation and organization.
News
- The News Feed is important but should not interfere with the rest of the layout
- If the user wants greater detail, they can go to the Expanded Chatter Feed view, but they will still need to be able to see the most recent chatter items
2. Spaces View
- In this view the Manager will be able to view all Spaces, select to follow/unfollow them based on priority and see Alerts which help indicate which are not running efficiently.
- Spaces are collections of Assets designated by the system administrator.
3. Recommendations Page
- This page lists out a series of recommendations for the Manager
- The Manager can input different budgets and see how things calculate
- The Manager would be able to edit, print, email this page
- Project related or Maintenance related
- Portfolio Analysis
- Customer Feedback
4. All Alerts Panel
In this view Facility Manager will be able to view all alerts in the building, if the manager clicks on one of the alerts he should be able to see:
A- Alert Feed.
B- Alert Schematics.
C- Service Tickets.
D- Maintenance History.
E - Ability to disposition the Alert as “Acknowledged” or “Ignored” - Acknowledged noting that the Manager is taking action on the Alert, Ignored being that the Manager is aware of the Alert but is not taking action.
5. Expanded chatter feed page (News)
- In this view Facility Manager will be able to view all tenants feedback (i.e. its too cold in building 4).
- Feedback will be displayed using Chatter like messages
- Despite this, there is no need for “Like” or “Share” aspects of Chatter to be included for this design
Design Inspiration:
- Make sure to do research on User Interface Design, Widget Design, iPad Application Design
- Reference link 1 (Crisp sharp user interface: Do not copy!)
- Reference link 2
- Reference link 3
- Reference link 4
- Reference link 5
IMPORTANT:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
- DO NOT copy the provided files - they are only to provide example content.
Target User:
- Managers
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Your design should be possible to build.
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.