Meli - FFI Support Portal Mobile Design Challenge 2

Welcome back to the Meli - FFI Support Portal Mobile Design Challenge 2. In this challenge, we are looking to continue the success of our first design concepts challenge. 

Meli is looking to change how their employees think about and experience their mobile “IT Help Service”.

Continuing with our “mobile first” focus we want your help to continue designing and refining our modern, user-centric “mobile FFI support portal”

This is our second challenge as we are planning out our new mobile support portal. Download the provided PSD source files and continue to document, refine and enhance the user experience based on:
- Our priority items/requirements
- Our design guidance
- Your design ideas, concepts and solutions on how to make this application engaging for our employees.

Good luck and we are looking forward to your submissions!

Round 1

Submit your initial designs for checkpoint feedback!
Checkpoint Focus:
01. Login
02. Home
03. Dashboard Screens
04. Create Request Screens
- 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 Screens
04. Create Request Screens
05. Profile Screens
06. Search Screens
07. Alert Screens
08. Navigation
- Make sure to number your screens (00, 01, 02, 03 etc.)

 

Challenge Description
This challenge is focused on refining and improving the provided experience based on the updated requirements. Think as a modern mobile user and consumer of technical support services - lets strive for a simple user experience!

The Design Problem
- Meli is a very large global company that needs to support their employees IT Help requests and services
- Meli IT Support currently provides regional support around the world to their employees and this experience can be a confusing based on the type of support you are requesting.
- The current IT Help support portal has a lot of features, links and tools but has grown to a point where it is a confusing and sometimes time consuming (too many clicks) user experience.
- Meli does not currently have an IT Help mobile application

Design Thoughts
- Think about apps you currently use that are simple and easy to interact with. Apps that allow you to keep requests and tasks simple for the user
- Employees should be able to request help but also manage/search for solutions in a quick and timely manner
- Simple and minimalistic design
- Limit the number of clicks
- Intuitive for non-IT users
- All employees should feel like their issue is a priority and empowered to help themselves if possible
- 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)

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 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, System Alerts, 

Important
Fix, Fulfill, Inform are “concepts” of how you should think about a user interacting with this application. Do not create tabs that say “Fix, Fulfill, Inform”. The idea is how does an employee interact with the application if they are looking to Fix something or looking to learn about a new application.

User Personas
Key users of this application

Executive
- Quick request for help - super easy 1-2-done process.
- Wants to quickly access help and get help immediately (right now!)
- Might delegate their request to someone else who need to get answers quickly
- Wants to experience a modern "uber" and cutting edge user experience (even for IT Help!)

Mobile Workforce
- Traveling and just needs things to work!
- Normally at the airport, on trains or in their car 
- Always on their phone (email, chat, phone, doing all type of work from their phone)
- IT Help is hard, confusing and not simple enough for mobile
- Typically needs immediate help and doesn’t have time as they are on the go 

Power User
- This is an Employee who is very tech-savvy
- Submits many IT Help support tickets
- Thinks why is IT Help so hard?
- Frustrated with the Support Portal process and multiple steps to accomplish goals
- Would prefer a personalized experience and "smart" application that shows them information that matters to them.

~
What is "self-service support"?
Large companies have support websites (portals) where employees can quickly request support or manage their own support issues (self-service) by logging in and searching for solutions (FAQs), managing their support requests (tickets) and reading or viewing tutorials. Support requests are things like computer and mobile phone issues, software issues or requesting things ordering a new phone or spinning up a virtual machine for software development. Many support portals are built for desktop computers and are not focused on providing a modern and engaging user experience let alone a great mobile experience.

~
Screen Requirements and Updates
01. Login
See Images in the 01-Login Folder
- We want to keep the application marketing area but need the login to be available on the first screen 
- Look to update the login/refine the space/priorities when first opening the application
- Create what the tutorial (first time user experience) overlay design might be like 

02. Home
See Images in the 02-Home Folder
- We like the simplicity of this experience
- It allows the user to quickly request support (Call, Email, Chat or Input) 
- We want to enhance this page (it needs more depth visually)

1) Search
- Should the search be higher on the page? and easier to see/start searching?
- We like how the search results quickly takes you to organized results (02-4_search.png)

2) Support Buttons
- Right now all the support buttons have the same weight/size - should they have priority size? - Assuming we want employees to use the application (before calling) would “input or chat” have more of a priority?
- Focus on the priority items of this page - make it easier to use and engage
- Capture the Call, Email, Chat, Input (Request) flows. 
- Keep the flows simple (ex. Call might show a quick and simple screen with a local support numbers and once you tap a number it transitions to the actual phone)

Support Requirements:
- Call: Simple one click call to regional and appropriate Service Desk based on current location
- Email: Simple one click to email regional and appropriate Service Desk based on current location
- Chat: Simple on click to chat with regional and appropriate Service Desk based on current location
- Input: Ability to create a Support Request through text input/typing
- Appointment: Ability to schedule an appointment with the closest solution center based on location

3) Dashboard Content
- We currently like the functionality of pulling up the dashboard content (My Requests)
- It might be easier to show 1-2 items and a quick swipe. What makes sense?

4) Alerts: 
Also see “07. Alerts”
- Capture how different alerts are shown and work
- Alert History: Top right - how does this work/look?
- Emergency: If there is a system/important alert how is that displayed and closed?
- Simple Notifications: Automatically detect where the user is (new support area) and provide relevant information

Reminders: 
- A user needs to quickly "Fix, Fulfill or Inform"
- Search needs to be easy!
- A user not only need to be able to request help but to also self-help themselves (FAQ’s)
- Think about spacing, size and a user to be able to tap and touch this content

Remove:
- Voice input (we will not implement that in version 1)

03. Dashboard
See Images in the 03-Dashboard Folder
- We need to continue to simplify the dashboard experience
- Too much text/copy right now. Keep the “lists” views to screens that require lists
- We like the idea of swiping between dashboards
- Does it make sense to break the dashboard down into content modules (see “05-Meli-Dashboard.jpg”)

1) Dashboard Navigation
- Look to simplify this experience
- A user will be able to personalize the content they want to see on their dashboards (so does the secondary navigation go away and the user is just able to swipe between dashboards?)
- Search: We still need to be able to search from this screen “going back” doesn’t seem as intuitive

2) My Requests
- Look to simplify this experience
- Latest Request should be shown upon login
- No Photos
- Simple Title, Small Request number, Status. 
- Have the content be available once a user clicks into the content.
- We like the “View Related” but that should be on the Request/Ticket Detail
- Capture the request flow (see 04-Create-Request)

3) News & Updates
Requirement: Updates from IT on new services, upgrades, etc. (personalized to the user and region)

- Also keep this simple - no images in the news feed
- Alerts/Updates will also display here
- Capture a detail screen

4) Frequent Issues
Requirement: Ability to show and choose a list of possible top issues that a user can select.
- This could be a feed of issues based on the users local Support area
- No images
- Keep keywords
- Capture a detail screen

5) FAQ’s
Requirement: Easy access to search Self-Help / FAQs (ability to show relevant FAQs for the person)
- We still need FAQ’s
- How do we see them on the dashboard?
- Capture a detail screen

04. Create Request
See Images in the 04-Create-Request Folder

1) Create Request
- We like the simplicity of this flow
- When a user selects an existing Topic show 2-3 different “template” forms.
- We need to add priority rating to the ticket: See the slide on “03-4_Request Support_New Report.png”
- Remove “Audio” as an option
- Attachments: Photos/Video and Attachments

2) Request Detail
- Show the Request detail
- Keep this simple
- Ability to edit/update their own ticket
- User should be able to cancel/close their tickets
- Quickly see a ticket status
- Show any “Chat” or discussions with the Request (04-6_My Reports_Detail_Discussion.png)
- Make sure it is easy to see the Chat discussion
- Show a way to provide feedback on Requests (when closing a Request)

3) Request Confirmation
See: 03_6_Create_Request.png 
- This looks good - lets simplify
- Remove the title - keep the Request #
- “10 Related questions to your issue” - have this be a link to the related questions
- Remove the “View Related Help Resources” button
- Keep View Request Details

3) Related Questions
- Show the Related questions screen (similar to Frequent Issues)

05. Profile
See Images in the 05-Profile Folder
- Employee will have a profile area that contains their details
- Look to redesign/update this area 
- Remove the profile image
- We like the idea of infographic type information “25-Meli-Profile-Cases-Chart1.jpg” but it needs to make sense

04_2_profile.png
- Design a way to show devices
- Tapping on the device shows additional details
- Show when the device will be renewed (ex. a new computer can be requested after 2 years)
- On the device detail screen the user is able to Create a Request for that device (Fix or Fulfill)

04_3_profile.png/04_4_profile.png
- Show Preference options
- Show how to turn content on/off (toggle) and also how to organize it

06. Search
See Images in the 06-Search Folder
- Continue to simplify Search

1) Home page flow
- Capture the flow from the home screen

2) Search Results
- See (02-4_search.png)
- Make sure to update the design of this screen
- FAQ’s and Requests - only options
- If I want to only see FAQ results - show this screen

3) Search Detail
- Show an FAQ detail screen
- Keywords will be available

07. Alerts
See Images in the 07-Alerts Folder
- Capture how different alerts are shown and work
- Emergency: If there is a system/important alert how is that displayed and closed?
- Simple Notifications: Automatically detect where the user is (new support area) and provide relevant information

08. Navigation
See Images in the 08-Navigation Folder
- Capture the different navigation areas in the application
- Use 07_menu.png as your left navigation base
- Remove “personalization” as this is part of your Profile
- No Photos
- Make sure all the navigation items make sense
- Add: Show a simple feedback mechanism 
- Add: Access to the employee directory

~
Screen Sizes
- Mobile Focus! HTML5/Hybrid application
- Design screens for iPhone 6 portrait display = 750x1334

Branding Guidelines
- See attachment
- Continue to push the brand and overall engagement with the user

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.