Meli - FFI Support Portal Mobile Design Challenge 3

Welcome back to the Meli - FFI Support Portal Mobile Design Challenge 3. In this challenge, we are looking to apply new branding to our application and continue refining the overall user experience!

This is our third challenge as we continue to refine and iterative through the "Support Portal" mobile user experience. Download the provided PSD source files and continue to refine and enhance the user experience based on:
- New branding guidelines
- Our priority items/requirements
- Any new design ideas, concepts and solutions on how to improve the overall user experience for our employees.

Good luck and we are looking forward to your submissions!

Round 1

Submit your initial designs for checkpoint feedback!
Branding: Show us branding updates and any questions you have around the branding
- 01 Login
- 02 Home (updated page/flow "Self-Service" requests, diffrent types of help request flows)
- 04 Create Request
- Feel free to submit any additional screens at the checkpoint
- Make sure to number your screens (00, 01, 02, 03 etc.)

Round 2

Final design + updates from checkpoint feedback
- 01 Login
- 02 Home
- 03 Dashboard
- 04 Create Request
- 05 Profile
- 06 Search
- 07 Alerts
- 08 Navigation
- Make sure to capture the flows within the different areas
- Make sure to number your screens (00, 01, 02, 03 etc.)

Challenge Overview
This challenge is focused on refining and improving the provided mobile experience and updating the overall application branding based on the provided brand guidelines.

Think as a modern mobile user and consumer of technical support services - continue to think “simple” mobile experience!

Project and Application Theme
The key concepts of this mobile "IT Help portal" is to “Fix, Fulfill, Inform” = FFI Support Portal

Fix 
The ability for an Employee to find and fix their technical support issues or request help from Support.

Fulfill 
The ability for IT Support to satisfy an order request (example: provide an employee with a new phone, provide a virtual machine for development, request a local support technician) 

Inform
The ability for the Support Portal to keep Employees up-to-date on technical issues and to help educate through Search, FAQ's, News & Alerts.

Important
Fix, Fulfill, Inform are “concepts” of how you should think about a user interacting with this application. We are not actually saying “Fix, Fulfill, Inform” in the application. This is more of how conceptually the application should help an employee.

Mobile Design Goals
- Think about apps you currently use that are simple and easy to interact with.
- Employees should be able to request help but also manage/search for solutions in a quick and timely manner
- Simple and minimalistic design
- Intuitive for non-IT users
- Personalized: Assume the user will have content available to them based on who they are, past IT Support requests and where they are in the world (global and regional support features)

NEW Branding Guidelines
- Follow the NEW branding guidelines provided in “MELI-Mobile-Application-Guidelines.pdf”
- The colors and patterns need to be updated! 
- Continue to push for simple, clean and rich user experience. 

Screen Requirements and Updates
1) Login Screens
Please see 01_1_login.png
- Update the branding
- Remove Forgot Password
- Remove Register
- Change the stock photo of the people and make the marketing images more about “Application Features”

���~
2) Home Screens
Please see 02_1_home.png
- Update the branding
- Continue refining the user experience on this screen
- We think the Request Support has been simplified but also need the Self-Service aspect to be easy, inviting and informative.

1) Self-Service
We are trying to make sure self-service is easy (Search, FAQ’s etc) 
- We like how easy it is to Request help but there needs to be more emphasis on the application providing “Self-Help”
- How do we make it easier/clear that the user can explore and help themselves before requesting help?
- The search box needs to be larger/more available with labels that are inviting to the user to help themselves before triggering a Request to Support
- Placement of “Browse FAQs” is prominent and easy to use.
���- Quickly be able to trigger a Support Request
- We like the content hierarchy on this page - but it can still be improved.

2) Request Help
- We need to simplify this more 
- Is it two rows of buttons? (look at how these button work on the iPhone)
- Is it 3 primary buttons with a show more? (what interactions make sense here?)
- Buttons should all be the same color/same type of interaction
- Order: Create, Chat, Email, Schedule, Call
- Size (hierarchy) of items on the page really matter

Home Screen: Functionality
Functionality Scenario: When designing the tap flows for the Request Help buttons (Chat, Email, Schedule, Call) we need you to think about each path having a landing page with very simple "targeted" best options (keeping the experience simple). As part of that flow if the user needs to find more phone numbers etc beyond the provided list - they need to be able to see the full list. We need to include a "view all" flow that then provides more of a directory experience.

Chat Flow
- We need to capture the details of the Chat experience
- You can reference the features of this Chat Tool
- The first screen will either:
1) Tell you if Chat is not available right now or
2) Will provide you with Available Agents to chat with
- User will Pick the Agent
- User will Chat with the Agent
- Important Note: We need to capture how Chat would look if I close and come back and a chat is still open. What does the user see? What tells them they have an active Chat?

Create Request Flow
- See Create Request section
- Important Note: Just like the Chat flow we need to capture how a Request would look if I close and come back and I didn’t complete my Request. What does the user see? What tells them they have an active Request? The user should be able to continue and complete their Request or close/cancel it.

Phone Flow
- We need to capture the details of the Phone experience
- User will tap on Phone and it will take them to a screen where they see 5 numbers to select (see examples). 
- The user will also see a “view all” that will allow them to see a listing of 30 phone numbers (directory flow)

Phone Content Examples:
-  IT Service Desk (Infrastructure and Applications) - 855-402-4357
- ACS Global SAP Service Desk - 866-341-9168

Email Flow
- We need to capture the details of the email experience
- User will tap on email and it will take them to a screen where they see 5 emails to select (see examples below). 
- The user will also see a “view all” that will allow them to see a listing of 30 emails (directory flow)

Examples
- IT Service Desk (Infrastructure) - Meli-IT-SD@meli.com
- ACS Global SAP Service Desk - DLACS-SAP-Service-Desk@meli.com

Schedule Flow
- We need to capture the details of the "Schedule" experience
- User will tap on Schdule and it will take them to a screen where they see the closest location (Schedule at this location)
- If they want to Select another location they can view other locations (directory flow)
- See "Schedule Flow.pdf" Attachment for setting up Date/Time screens.

Footer: My Requests/News & Updates
- Keep this functionality
- News & Updates: Change to News & Alerts
- My Requests: Only show active (pending) requests

~
3) Dashboard Screens
Please see 03_1_dashboard.png
- Update the branding
- Navigation: How does a user get here? If its from the Hamburger navigation then we need to change the top left arrow to the Hamburger navigation.
- Page consists of modules - continue to keep this simple

My Requests
- In-Progress
- Pending
- Resolved
- List order: By submit time

News & Updates
- Change label to News & Alerts

FAQ’s
- Keep the right side number design consistent with similar patterns

Dashboard: My Requests List
Please see 03_2_dashboard.png
- Update the branding
- Hard to know you can swipe between dashboards - make this easier on the user
- Sort Icon with both up/down arrow, would it be good to have one arrow at a time (assuming this indicates sort by asc or dsc)?
- How are the issue priority indicated here? (we have this as a filter item)
- Status options: In-Progress, Pending, Resolved
- Capture the Request Detail Screen

Dashboard: News & Alerts
Please see 03_4_dashboard.png
- Update the branding
- Hard to know you can swipe between dashboards - make this easier on the user
- Change label: News & Alerts
- Move “You are now in Los Angeles” remove this type of item
- We need to show “Alert or Outage” type Alert in this list
- Capture the News Detail Screen

Dashboard: FAQ’s
Please see 03_5_dashboard.png
- We allow the user to choose FAQ category, how will the user choose the category from drop-down? (show this)
- Show various keywords so we can see how the spacing needs to work
- Keywords would be the same color?

���~
4) Create New Request Screens
Please see 04_1_Create_Request.png
- Capture any error scenarios
- Update the copy: "What can we help you with?"
- Update the copy: "Type or choose a topic or product"
- Important Note: We want to keep this simple experience but we might have product selections/Help categories beyond the simple experience. We need the ability to tap to a directory of Products, select the product and return to this flow. How can we do that from this screen? 

Request Submitted
Please see 04_7_Create_Request.png  
- Make the checkmark and Request# larger
- Update the copy: "We have found 10 possible items related to your issue" (and make this see more like a tap/link that the user can explore)

Request Detail
Please see 04_8_View_Request.png
- Update this screen
- Remove the top right bell

���~
5) Profile
Please see Profile Screens
- Update the branding
- Support Region: What is this flow?
- My Preferences: We need at least one screen that shows how a value is selected by the user.

���~
6) Search Screens
Please see Search screens
- Update the branding
- Search results will only return FAQ results
- Update the "Not Able to Find a Solution" with any design decisions you made on the Home screen.

Related Help Resources
Please see 06_4_search_results.png
- Update the branding
- This is where a user can go from the Request Submitted screen

Help Details
Please see 06_5_search_results.png
- Update the branding
- Title font size
- Keywords would not be on this screen as you just tapped into the Detail
- Images will be full width (so no need for the text wrap)

���~
7) Alerts
Please see Alert Screens
- Update Branding

���~
8) Navigation
Please see 08_1_Nav.png
- Update the branding
- Remove Notifications
- Remove Frequent Issues
- Remove Help Resources

Employee Directory
- We need to capture this flow
- It should be similar to the other directory designs you have created

Provide Feedback
- We need to capture this flow

Screen Sizes
- Mobile Focus! HTML5/Hybrid application
- Design screens for iPhone 6 portrait display = 750x1334
- Content should be able to fill the screen in a responsive nature

Judging Criteria
- How well you design and present your mobile solution
- Cleanliness of your graphics and design.
- User interface design

Submission & Source Files
Preview Image
Create your preview image as one (1) 1920x1080 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Please upload PNG images in a zip file with all requested contest requirements stated above. Number your files (01, 02, 03, etc) this will help review them in order.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files. 

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colours. We may ask you to update your design or graphics based on checkpoint feedback.