Challenge Summary
Welcome to Experian Identity Theft Client Portal Responsive Design Challenge.
At Experian, we are a leader in protecting you from identity theft. We offer companies enrollment codes which they can give to affected customers for free enrollment in our identity theft service. We need your help to design a portal for ourselves and these customers to purchase these codes, download a spreadsheet with the codes and manage our additional services such as mailing letters and offering phone call center support.
We have some very prescriptive branding guidelines so we’re looking to the crowd to help define new patterns and help with layout and user experience in addition to design.
Don’t let the amount of screens fool you, most of the content is very repetitive across the pages. Jump in now!
Best of luck!
1. Engagement Details (Implementation) [Desktop and Phone]
2. Engagements Set [Desktop and Phone]
4. Create Engagement (CRM Option or Ecommerce Option) [Desktop]
8. Send Order Form Popup [Desktop]
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
1. Engagement Details (Implementation) [Desktop and Phone]
2. Engagements Set [Desktop and Phone]
3. Create Engagement (CRM Option or Ecommerce Option) [Desktop and Phone]
5. Engagement Details (Codes only) [Desktop and Phone]
6. Engagement Details (Signed) [Desktop and Phone]
7. Engagement Details (Launched) [Desktop and Phone]
8. Send Order Form Popup [Desktop and Phone]
- Please provide a MarvelApp Presentation (see details below).
- 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 a digital security purchase portal. We are looking forward to create an engaging process towards the customer with a very straightforward conversion process.
You are provided with a content prototype that contains information about the pages/features, as well as the style guide from the client so your design adheres to the existing branding. You should focus on UX more than reinventing layouts or colors.
Resources - Drive Link
1. Guides: company branding information and guidelines (focus on web styleguide).
2. Icons: set of png and svg icons for usage across pages.
3. Logo: set of company logos in several formats.
4. SketchAssets: Sketch files containing layout components, symbols, page sections, buttons, etc ready to use to save some time. Not available in other format, but it’s basically the same you can see in the web styleguide pdf document, can be recreated in Photoshop or Illustrator if needed.
5. Data Art: PSD artwork illustrations.
Concept Goals
We offer credit monitoring and identity protection services to customers that help them stay safe from credit fraud. Our clients need a portal to login and order batches of codes, like coupon codes, for our online service so they can hand them out to their customers. The portal will need to track delivery and logistics of orders. It needs to allow for ordering new codes and providing traditional mailing or direct email to customers.
Enable our clients to purchase our services and modify their orders without having to call our account managers to manually perform the operations.
Our main goals with this design exercise is to fulfill the following:
- Looking for innovative ways to drive the user through the different amount of data offered to them in a pleasant way so they can focus on what is important for the conversion.
- Focus on layout and user experience.
- Branding must follow the provided styleguide.
Screens Requirements
Overall
- For content and features description of each page, please follow this prototype.
- Header and footer information should be extracted from the styleguide.
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
1. Engagement Details (Implementation) [Desktop and Phone]
See page 2.
2. Engagements Set [Desktop and Phone]
See page 3.
3. Create Engagement (CRM Option) [Desktop and Phone]
See page 4.
4. Create Engagement (Ecommerce Option) [Desktop and Phone]
See page 5.
5. Engagement Details (Codes only) [Desktop and Phone]
See page 6.
6. Engagement Details (Signed) [Desktop and Phone]
See page 7.
7. Engagement Details (Launched) [Desktop and Phone]
See page 8.
8. Send Order Form Popup [Desktop and Phone]
See page 9.
Branding Guidelines
- Use attached branding book for typography, color, layout and UI reference.
- Keep things consistent. This means all graphic styles should work together.
Design Reference
The following references are for inspiration only, DO NOT COPY anything.
- Amazon: we like the aspects of ecommerce of the site (catalog listing/browsing).
- SalesForce: great CRM reference.
- JIRA & ASANA: project management features references.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com). Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Photography ONLY)
- Stock photo is allowed for this challenge. Icons or artwork is not allowed. See styleguide.
- Make sure to declare all your assets properly or you might fail screening.
Target User
We have three different target users aimed to the US only.
DB Team - Data Breach Team is our Internal Team such as account managers, admins, and product owners.
Traits:
24/7 on call
Laptop primary but mobile for key tasks
Organized
Able to Mutlitask
Patient
Goals:
To be productive
To keep client and team on schedule
To set client at ease and maintain client satisfaction
To be able to investigate issues
Ensure/confirm accuracy
Legal - Large companies involve law firms to help with their breach resolution. The legal team may handle multiple breaches at one time.
Traits:
High experience level with data breach requirements/needs
Prepared
Organized
Manages larger data breaches with multiple moving parts
Manager multiple data breaches for different clients
Goals:
To be efficient
To be self sufficient
To be informed of the status at all times
To be able to scrutinize approvals/materials for accuracy
To be able to report on confirmation
Client - The client is a representative from the company that experienced a data breach. Clients would use the portal to order small orders like codes-only.
Traits:
Mobile and desktop usages
Low experience level with data breaches
Nervous
Smaller Data breaches, often dealing with codes only
Goals:
To be informed of process (what to expect?)
To be informed of status
To be set at ease
To be self sufficient
To have a personal connection with the account manager
To receive rapid response and expectations of timing and deadlines
Judging Criteria
- How interesting and engaging is the process is?
- Is the design consistent and adheres to the provided styleguide?
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- 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 Sketch, Adobe Photoshop or Illustrator. 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.
At Experian, we are a leader in protecting you from identity theft. We offer companies enrollment codes which they can give to affected customers for free enrollment in our identity theft service. We need your help to design a portal for ourselves and these customers to purchase these codes, download a spreadsheet with the codes and manage our additional services such as mailing letters and offering phone call center support.
We have some very prescriptive branding guidelines so we’re looking to the crowd to help define new patterns and help with layout and user experience in addition to design.
Don’t let the amount of screens fool you, most of the content is very repetitive across the pages. Jump in now!
Best of luck!
Round 1
Submit your design for a checkpoint feedback.1. Engagement Details (Implementation) [Desktop and Phone]
2. Engagements Set [Desktop and Phone]
4. Create Engagement (CRM Option or Ecommerce Option) [Desktop]
8. Send Order Form Popup [Desktop]
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Submit your final design plus checkpoint feedback.1. Engagement Details (Implementation) [Desktop and Phone]
2. Engagements Set [Desktop and Phone]
3. Create Engagement (CRM Option or Ecommerce Option) [Desktop and Phone]
5. Engagement Details (Codes only) [Desktop and Phone]
6. Engagement Details (Signed) [Desktop and Phone]
7. Engagement Details (Launched) [Desktop and Phone]
8. Send Order Form Popup [Desktop and Phone]
- Please provide a MarvelApp Presentation (see details below).
- 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 a digital security purchase portal. We are looking forward to create an engaging process towards the customer with a very straightforward conversion process.
You are provided with a content prototype that contains information about the pages/features, as well as the style guide from the client so your design adheres to the existing branding. You should focus on UX more than reinventing layouts or colors.
Resources - Drive Link
1. Guides: company branding information and guidelines (focus on web styleguide).
2. Icons: set of png and svg icons for usage across pages.
3. Logo: set of company logos in several formats.
4. SketchAssets: Sketch files containing layout components, symbols, page sections, buttons, etc ready to use to save some time. Not available in other format, but it’s basically the same you can see in the web styleguide pdf document, can be recreated in Photoshop or Illustrator if needed.
5. Data Art: PSD artwork illustrations.
Concept Goals
We offer credit monitoring and identity protection services to customers that help them stay safe from credit fraud. Our clients need a portal to login and order batches of codes, like coupon codes, for our online service so they can hand them out to their customers. The portal will need to track delivery and logistics of orders. It needs to allow for ordering new codes and providing traditional mailing or direct email to customers.
Enable our clients to purchase our services and modify their orders without having to call our account managers to manually perform the operations.
Our main goals with this design exercise is to fulfill the following:
- Looking for innovative ways to drive the user through the different amount of data offered to them in a pleasant way so they can focus on what is important for the conversion.
- Focus on layout and user experience.
- Branding must follow the provided styleguide.
Screens Requirements
Overall
- For content and features description of each page, please follow this prototype.
- Header and footer information should be extracted from the styleguide.
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
1. Engagement Details (Implementation) [Desktop and Phone]
See page 2.
2. Engagements Set [Desktop and Phone]
See page 3.
3. Create Engagement (CRM Option) [Desktop and Phone]
See page 4.
4. Create Engagement (Ecommerce Option) [Desktop and Phone]
See page 5.
5. Engagement Details (Codes only) [Desktop and Phone]
See page 6.
6. Engagement Details (Signed) [Desktop and Phone]
See page 7.
7. Engagement Details (Launched) [Desktop and Phone]
See page 8.
8. Send Order Form Popup [Desktop and Phone]
See page 9.
Branding Guidelines
- Use attached branding book for typography, color, layout and UI reference.
- Keep things consistent. This means all graphic styles should work together.
Design Reference
The following references are for inspiration only, DO NOT COPY anything.
- Amazon: we like the aspects of ecommerce of the site (catalog listing/browsing).
- SalesForce: great CRM reference.
- JIRA & ASANA: project management features references.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com). Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Photography ONLY)
- Stock photo is allowed for this challenge. Icons or artwork is not allowed. See styleguide.
- Make sure to declare all your assets properly or you might fail screening.
Target User
We have three different target users aimed to the US only.
DB Team - Data Breach Team is our Internal Team such as account managers, admins, and product owners.
Traits:
24/7 on call
Laptop primary but mobile for key tasks
Organized
Able to Mutlitask
Patient
Goals:
To be productive
To keep client and team on schedule
To set client at ease and maintain client satisfaction
To be able to investigate issues
Ensure/confirm accuracy
Legal - Large companies involve law firms to help with their breach resolution. The legal team may handle multiple breaches at one time.
Traits:
High experience level with data breach requirements/needs
Prepared
Organized
Manages larger data breaches with multiple moving parts
Manager multiple data breaches for different clients
Goals:
To be efficient
To be self sufficient
To be informed of the status at all times
To be able to scrutinize approvals/materials for accuracy
To be able to report on confirmation
Client - The client is a representative from the company that experienced a data breach. Clients would use the portal to order small orders like codes-only.
Traits:
Mobile and desktop usages
Low experience level with data breaches
Nervous
Smaller Data breaches, often dealing with codes only
Goals:
To be informed of process (what to expect?)
To be informed of status
To be set at ease
To be self sufficient
To have a personal connection with the account manager
To receive rapid response and expectations of timing and deadlines
Judging Criteria
- How interesting and engaging is the process is?
- Is the design consistent and adheres to the provided styleguide?
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- 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 Sketch, Adobe Photoshop or Illustrator. 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.