Challenge Summary
- 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
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
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.