Challenge Summary
Welcome to the ABC - Guided Customer Support Mobile Design Concepts Challenge!
The goal of this challenge is to create design concepts for a new mobile "customer support" application. This mobile application should provide an intuitive and guided support experience that allows our customers to self-service and troubleshoot issues related to our products (laptops, monitors, printers etc.).
We are looking for your design concepts to be very simple modern mobile design using the latest iOS design patterns and a “mobile first” thought process.
Best of luck!
1. Submit your initial Guided Customer Support Concept for feedback
2. We would like to see more of the "logged-in" view to provide you with any critical feedback
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype from the Copilot or Adroc
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
1. Submit your final Guided Customer Support Concept
- Provide a MarvelApp presentation of your design to help the us understand your design concepts.
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
The goal of this challenge is to design the look and feel of an iOS mobile application that will help customers in diagnosing their damaged products and finding solutions in a very easy to use self-service and guided experience.
Design Problem
Customers currently call into our support center and we guide them to a solution but this takes up a lot customer service time. We want to explore a more modern (mobile) customer support flow that allows for customer self-service and puts the customer in control of their time and option.
- We are also looking to integrate modern technology "AI" into the support process and "guided" help/actions to help the customer have a great and simple experience
- For this challenge, we have a specific use case where the user is looking to diagnose a damaged product (covered by warranty) and the mobile application helps them see their different options and solutions for requesting a replacement or fix.
Concept Goals
- Focus primarily on the User Experience - these are the trickiest elements to get right and can make or break the experience for the user.
- Does the user flow through the screens in a logical way without frustration?
- Is it obvious where they should tap to perform important actions?
- What is the most important interaction for the user on each screen?
- Navigation - can the user navigate the application quickly and understand where they are from any screen?
- Do not make the user dig for actions and features
- Think of how the user is guided and helped throughout the support process.
The User Story
Maya owns an ABC laptop and an ABC printer. She used her email/phone number to register both the devices, during installation. While working one evening she accidentally knocks her laptop and cracks the laptop screen.
1. Maya calls into the ABC support center and while waiting for a technician is provided an option to download the ABC mobile support application to quickly help solve her issue.
2. Maya downloads the application from the App Store
3. Maya opens the mobile application and as a GUEST is quickly able to Search and see ABC products, common support issues, related Support FAQ's, Help articles and new products.
4. Maya also quickly notices the option for Unassisted Support that provides a quicker way to diagnose problems by logging into the application.
5. Maya being a registered Customer decides to login using her details.
6. She enters the email/phone number previously used to register her ABC device.
7. Maya then lands on a personalized home screen. (The system is now aware of the details of the devices owned by the customer who logged in)
8. Maya picks her affected device (laptop) from her registered product(s). After selecting the system will let Maya know whether that device is in or out of warranty.
9. They system asks Maya what the issue is with her laptop computer and Maya types in "ABC laptop screen cracked"
10. The information based on this search (and knowing her computer information) allows the application to arrive at a specific list of top five options:
A. Request quote for replacement screen *** (recommended).
B. Buy a self-repair kit.
C. Buy a Monitor now.
D. Upgrade your laptop.
E. ABC’s trade-in program.
11. Option ‘A - Request quote for replacement screen’ has a high ‘relevance’ rating.
- Option ‘A’ also is ‘recommended’ (the reason can be shown on request. Reason: Maya’s Laptop is 13 months old and the warranty expired recently. Hence she will now have to pay for it)
12. She chooses the recommended option ‘A - Request quote for replacement screen’.
- There is an option to upload the image of the screen – to detail out the extent of the damage. (In this case as it a visible damage. the application can conduct an image search for similar photos uploaded by other users in the system, and filter out relevant information for the geography that will help in suggesting few precise options)
13. On choosing the above, the application now.
- Shares the average price, that other people in the geography have paid to get a similar service (system gather GPS location).
- Provides an option to enter a price range within which Maya wants the laptop screen to get fixed, based on the above information.
14. Choosing the selected option above, the page shows the following options:
a. Five (5) ‘relevant’ authorized screen replacement locations near you (in an ‘interactive’ map application)
-- It also shows the rating of these authorized screen replacement locations.
-- Differentiates between authorized and non-authorized service centers.
-- Shows the name of the person they can call/get in touch with.
-- Option to increase the area of search to 10mi, 15mi, etc.,
b. Screen options?
c. Video - How to replace your screen – embed video or link.
d. Why use an ABC authorized partner? Shows up 5 top selected answers.
e. Download latest monitor driver.
15. After going over the choices Maya chooses a service center with a technician who is ‘recommended’ and has a high rating, to attend to her job.
16. The system creates a log of the entry and generates a ticket and the details are shared with the service center Maya has chosen. This ticket also appears within the application allowing Maya to track its progress, as well as emailed to her registered address.
17. The service center is alerted of Maya’s exact request and responds with a message of acceptance. The technician is present at Maya’s doorstep at an agreed time to collect the laptop.
18. A day or two later, the technician returns the fixed laptop. She has a request pending to rate the overall effectiveness of the experience and the options chosen:
- Request quote for the replacement screen.
- Service center and Technician.
19. As Maya is rating the options chosen before and the service center and technician, she notices that the page also displays ‘relevant’ promotions and other cross-sell and upsell options e.g.:
a. Upgrade /extend hardware warranty
b. Current Discount offers on accessories to safeguard the laptop
c. Merchandise bought by other customers who have faced similar issues.
Suggested Screens and Features
- Look to capture the user story in a mobile experience.
- Based on the user story we have pre-login and login views. You can focus on the login views but realize the content that would be available for pre-login.
- Login provides Maya with the personalization features.
- Mobile first, simple experience, "AI" guided and not a lot of extra taps.
- Note the photo taking and analysis feature.
- Capture how the user will tap and swipe throughout the experience.
Branding Guidelines
- Follow color and typography guidelines from the ABC (Site Reference ~ see Forum).
- Create a simple/generic ABC logo.
- Branding should be easy to replace/swap. It should be branded based on the provided ABC reference but keep a “theming” approach so the branding can be easily replaced (avoid gradients, keep colors simple, clean grid design).
Screen Specifications
- iPhone 7 portrait view only, 750x1334px.
- iOS10 assets are available here.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge. You can also pull from the reference site.
- Make sure to declare all your assets properly or you might fail screening.
Target User
- Customers of ABC products (laptops, tablets, printers, etc).
Judging Criteria
- Concepts! Mobile support experience!
- Clean design and use of the brand colors/guidance
- Is the application easy to use?
- Cleanliness of your graphics and design.
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, Illustrator or Sketch. Layers should be named and well organized.
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 goal of this challenge is to create design concepts for a new mobile "customer support" application. This mobile application should provide an intuitive and guided support experience that allows our customers to self-service and troubleshoot issues related to our products (laptops, monitors, printers etc.).
We are looking for your design concepts to be very simple modern mobile design using the latest iOS design patterns and a “mobile first” thought process.
Best of luck!
Round 1
Submit your initial design for a checkpoint feedback.1. Submit your initial Guided Customer Support Concept for feedback
2. We would like to see more of the "logged-in" view to provide you with any critical feedback
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype from the Copilot or Adroc
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback (ALL VIEWS).1. Submit your final Guided Customer Support Concept
- Provide a MarvelApp presentation of your design to help the us understand your design concepts.
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
The goal of this challenge is to design the look and feel of an iOS mobile application that will help customers in diagnosing their damaged products and finding solutions in a very easy to use self-service and guided experience.
Design Problem
Customers currently call into our support center and we guide them to a solution but this takes up a lot customer service time. We want to explore a more modern (mobile) customer support flow that allows for customer self-service and puts the customer in control of their time and option.
- We are also looking to integrate modern technology "AI" into the support process and "guided" help/actions to help the customer have a great and simple experience
- For this challenge, we have a specific use case where the user is looking to diagnose a damaged product (covered by warranty) and the mobile application helps them see their different options and solutions for requesting a replacement or fix.
Concept Goals
- Focus primarily on the User Experience - these are the trickiest elements to get right and can make or break the experience for the user.
- Does the user flow through the screens in a logical way without frustration?
- Is it obvious where they should tap to perform important actions?
- What is the most important interaction for the user on each screen?
- Navigation - can the user navigate the application quickly and understand where they are from any screen?
- Do not make the user dig for actions and features
- Think of how the user is guided and helped throughout the support process.
The User Story
Maya owns an ABC laptop and an ABC printer. She used her email/phone number to register both the devices, during installation. While working one evening she accidentally knocks her laptop and cracks the laptop screen.
1. Maya calls into the ABC support center and while waiting for a technician is provided an option to download the ABC mobile support application to quickly help solve her issue.
2. Maya downloads the application from the App Store
3. Maya opens the mobile application and as a GUEST is quickly able to Search and see ABC products, common support issues, related Support FAQ's, Help articles and new products.
4. Maya also quickly notices the option for Unassisted Support that provides a quicker way to diagnose problems by logging into the application.
5. Maya being a registered Customer decides to login using her details.
6. She enters the email/phone number previously used to register her ABC device.
7. Maya then lands on a personalized home screen. (The system is now aware of the details of the devices owned by the customer who logged in)
8. Maya picks her affected device (laptop) from her registered product(s). After selecting the system will let Maya know whether that device is in or out of warranty.
9. They system asks Maya what the issue is with her laptop computer and Maya types in "ABC laptop screen cracked"
10. The information based on this search (and knowing her computer information) allows the application to arrive at a specific list of top five options:
A. Request quote for replacement screen *** (recommended).
B. Buy a self-repair kit.
C. Buy a Monitor now.
D. Upgrade your laptop.
E. ABC’s trade-in program.
11. Option ‘A - Request quote for replacement screen’ has a high ‘relevance’ rating.
- Option ‘A’ also is ‘recommended’ (the reason can be shown on request. Reason: Maya’s Laptop is 13 months old and the warranty expired recently. Hence she will now have to pay for it)
12. She chooses the recommended option ‘A - Request quote for replacement screen’.
- There is an option to upload the image of the screen – to detail out the extent of the damage. (In this case as it a visible damage. the application can conduct an image search for similar photos uploaded by other users in the system, and filter out relevant information for the geography that will help in suggesting few precise options)
13. On choosing the above, the application now.
- Shares the average price, that other people in the geography have paid to get a similar service (system gather GPS location).
- Provides an option to enter a price range within which Maya wants the laptop screen to get fixed, based on the above information.
14. Choosing the selected option above, the page shows the following options:
a. Five (5) ‘relevant’ authorized screen replacement locations near you (in an ‘interactive’ map application)
-- It also shows the rating of these authorized screen replacement locations.
-- Differentiates between authorized and non-authorized service centers.
-- Shows the name of the person they can call/get in touch with.
-- Option to increase the area of search to 10mi, 15mi, etc.,
b. Screen options?
c. Video - How to replace your screen – embed video or link.
d. Why use an ABC authorized partner? Shows up 5 top selected answers.
e. Download latest monitor driver.
15. After going over the choices Maya chooses a service center with a technician who is ‘recommended’ and has a high rating, to attend to her job.
16. The system creates a log of the entry and generates a ticket and the details are shared with the service center Maya has chosen. This ticket also appears within the application allowing Maya to track its progress, as well as emailed to her registered address.
17. The service center is alerted of Maya’s exact request and responds with a message of acceptance. The technician is present at Maya’s doorstep at an agreed time to collect the laptop.
18. A day or two later, the technician returns the fixed laptop. She has a request pending to rate the overall effectiveness of the experience and the options chosen:
- Request quote for the replacement screen.
- Service center and Technician.
19. As Maya is rating the options chosen before and the service center and technician, she notices that the page also displays ‘relevant’ promotions and other cross-sell and upsell options e.g.:
a. Upgrade /extend hardware warranty
b. Current Discount offers on accessories to safeguard the laptop
c. Merchandise bought by other customers who have faced similar issues.
Suggested Screens and Features
- Look to capture the user story in a mobile experience.
- Based on the user story we have pre-login and login views. You can focus on the login views but realize the content that would be available for pre-login.
- Login provides Maya with the personalization features.
- Mobile first, simple experience, "AI" guided and not a lot of extra taps.
- Note the photo taking and analysis feature.
- Capture how the user will tap and swipe throughout the experience.
Branding Guidelines
- Follow color and typography guidelines from the ABC (Site Reference ~ see Forum).
- Create a simple/generic ABC logo.
- Branding should be easy to replace/swap. It should be branded based on the provided ABC reference but keep a “theming” approach so the branding can be easily replaced (avoid gradients, keep colors simple, clean grid design).
Screen Specifications
- iPhone 7 portrait view only, 750x1334px.
- iOS10 assets are available here.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge. You can also pull from the reference site.
- Make sure to declare all your assets properly or you might fail screening.
Target User
- Customers of ABC products (laptops, tablets, printers, etc).
Judging Criteria
- Concepts! Mobile support experience!
- Clean design and use of the brand colors/guidance
- Is the application easy to use?
- Cleanliness of your graphics and design.
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, Illustrator or Sketch. Layers should be named and well organized.
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.