BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to “MEGA Mobile Services Platform Design Concepts Challenge”, in this challenge we are looking for your great design skills to quickly conceptualize modern UI and UX practices to help a large Mobile Phones Wireless Services provider to showcase their products, services and offers online. The overall design should be in the context of US market and wireless services. For this challenge, you will focus on the following items:
  • Responsive design: Desktop and Mobile Phones only
  • Modern UI/UX Practices
  • Concepts Exploration

Round 1

For the first round provide the initial designs for the following screens:
1) Landing Page (Desktop and Mobile)
2) Service/Plans Details (Desktop and Mobile)

- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 2 MarvelApp prototype for Desktop and Mobile.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

For the final round provide the final designs for the following screens:
1) Landing Page (Desktop and Mobile)
2) Service/Plans Details (Desktop and Mobile)
3) Hire/Purchase Workflow (Desktop and Mobile)
4) Extra Screen/Feature (Desktop and Mobile)
5) Presentation Screen

- Important: As part of your final submission, you must update your MarvelApp link from the Checkpoint.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Project Background
MEGA is a large US Satellite TV company that are just including Wireless Mobile Services as one of their new products offerings. This new wireless product offering shall be independent of their existing Satellite TV services. This is where they need your help on conceptualize and design how this new independent web portal should look. Think on the following aspects while thinking and designing your concepts:
  • Clean, Professional and Minimalist Designs
  • “Less is more”, keep things simple
  • Think that customers might not be techy nerds
  • Think “Mobile First” while creating your layouts
  • All key information should be easy to see, read and understand
  • Take advantages of high definition imagery
Workflow
Please make sure your design incorporate this workflow.

Step 1
- Users access MEGA Website through their favorite web browsers and lands into a highly visual and elegant landing page

Step 2
- On this landing page, customers are able to quickly see what MEGA have to offer in the Wireless Mobile world, how they compare over regular companies, what are they services, products and offers.

Step 3
- Customers can dive into the different options, see details, compare, and once ready they should be able to select a plan/package to hire it. The
plan/package can be either;
  • Wireless plan with either iPhone or Samsung device bundled
  • Wireless plan without device i.e. Customer would like to “Bring
  • Her/His Own Device (BYOD)

Following are some of the variables / dynamic processes through which
  • Customer shall go through to complete the order
  • Check the Service Coverage by providing the ZIP code
  • Select the plan/package and compare
  • Select “New Mobile Number” or “Port-in” her/his existing Mobile
  • number from another wireless provider
  • Select either Physical SIM or eSIM
  • Select either Single or Multi Line connections
  • Add device related accessories
  • Confirm the shipping method (Standard or Expedited)
  • Customer provide required demographic details
  • Provide addresses
    • Service Address
    • Shipping Address
    • Billing Address
    • E911 Address
  • Confirm payment method
  • Finally submit the order for fulfillment
During entire Customer order journey, the web portal provide required information/guidelines for each of the step of the process

Required Screens/Features
Please make sure your design includes the following screens:

1) Landing Page
  • This is the screen where users lands once they get into MEGA’s website.
  • User should be able to see here:
    • Overall view of What’s the company have to offer over the regular companies
    • Plans/Packages list view
    • Wireless device information (iPhone and Samsung)
    • Products and Services
    • Costs
    • Comparison Charts
    • Shipping methods
    • Payment methods
  • Think of everything that might help a user to hire these services:
    • Chatbot
    • Live Chat support
    • Current plan comparison
    • Company Migration
    • Etc
  • Use your imagination on providing a new and fresh user experience on the mobile services world.
  • Put yourself in the shoes of a new customer purchasing wireless
  • services with or without mobile device

2) Service/Plans Details
  • Once the user quickly overview what MEGA have to offer they can click on any plan and service to see the details
  • Avoid any boring experience here such like:
    • Long paragraphs with lists of texts
    • Charts that get the customers more confused
  • Add any new and modern UX practice that might cause a “WOW” effect new customers

3) Hire/Purchase Workflow
  • Customers should be able to hire and acquire the new plan or services from this page
  • How this workflow should look if customers are buying a new line or are just moving from their current carrier?
  • Make this innovative and easy to use

4) Extra Screen/Feature
  • As this is a concept exploration challenge, you are free to add any screens or features (in the context of wireless services and US market context) that complement your design.
  • Provide a good workflow that makes sense in the real world

5) Presentation Screen
  • Similar to LUX/RUX Challenges, we need a single presentation screen to showcase your design concepts in a meeting
  • Do not add any texts, logo or additional information on this screen, just a few of your key screens.
  • Use it to showcase your best screens! This is a good opportunity to "sell" your design
  • Make it 1920px width by 1080px height

Users/Roles
Please make sure your design supports the following roles.
- Potential MEGA Customers: Public Access for customer (Without Login)

Design Form Factors
Please make sure your design supports these form factors:
  • In-scope
    • Desktop Landscape
    • Mobile portrait
  • Out of scope (DO NOT DESIGN)
    • Tablet portrait or landscape
    • Mobile landscape

Operating Systems
  • Desktop and Mobile Web Browsers
  • Responsive Design

Branding Guidelines
- Branding guidelines can be viewed here:
https://drive.google.com/open?id=1tZVbPZ6A1X_BxxBkiphLETj37Bf7nykV
(We recomend to download this file in case link failure)

- Font: Open to designers. Document mention Proxima Nova, but in case you don't have it, you can use Open Sans.
- No Logo is required, a placeholder is acceptable. We have client logo and will be replaced later if needed.

Additional Design Information
The following are the company competitors that you can use as reference for your designs. Have in mind we are looking to improve their current experiences significantly, so DO NOT COPY:
- Xfinity: https://www.xfinity.com/mobile
- T-Mobile: https://www.t-mobile.com/T-Mobile

Final Deliverables
- All original source files.
- Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file, Adobe XD or Sketch

Marvel Prototype
We need you to upload your screens to Marvel App.
Please send your marvel app request using the correct thread on this challege forum.
You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).

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.

ELIGIBLE EVENTS:

2020 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 "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" 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.

Screening:

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
  • AI files created in Adobe Illustrator or similar
  • Sketch
  • Adobe XD

You must include all source files with your submission.

Submission limit

5 submissions

ID: 30111804