Submit a solution
The challenge is finished.

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!

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
- 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 ( 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.
24/7 on call
Laptop primary but mobile for key tasks
Able to Mutlitask
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.
High experience level with data breach requirements/needs
Manages larger data breaches with multiple moving parts
Manager multiple data breaches for different clients
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.
Mobile and desktop usages
Low experience level with data breaches
Smaller Data breaches, often dealing with codes only
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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.


2018 Topcoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "" file.
  3. Place all of your source files into a "" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.


All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • Vector AI files created in Adobe Illustrator or similar
  • Sketch

You must include all source files with your submission.

Submission limit


ID: 30061401