Challenge Summary
Welcome to the Telco - Enterprise Customer Portal Web App Design Concepts Challenge. In this challenge, we are looking for your design concepts for a responsive website that will act as a self care portal for telecom providers. The application will be white-label, meaning it should be easy to change the colors as required according to the client's branding. We are looking for intuitive experience and the screen should be developer-friendly and easy to develop and build.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Challenge Objectives
- Responsive Web Application (this challenge focuses on desktop screens)
- 15 unique Desktop Screen views
- Concept Design
Round 1
Submit your initial designs for the checkpoint review. Feel free to add any screens which are necessary to explain your concept:
- 01 Telco Landing Page
- 03 Explore Products & Services
- 05 Customer 360 Landing Page with Tabs/Navigation (English and Arabic version)
- 14 View Order Detail
As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your final designs plus checkpoint feedback implemented for the final round. Feel free to add any screens which are necessary to explain your concept:
- 01 Telco Landing Page
- 02 Create enterprise Profile Page/Registration Page
- 03 Explore Products & Services
- 04 Compare Products
- 05 Customer 360 Landing Page with Tabs/Navigation (English and Arabic version)
- 06 My Account
- 07 My Orders
- 08 My Invoices
- 09 My Payment
- 10 My Tickets
- 11 My Products & Services
- 12 My Cart
- 13 Help & Support
- 14 View Order Detail
- 15 Login
Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2
APPLICATION OVERVIEW
We are building a self-care portal for a telecom provider across multiple channels like web, Mobile, Chat, POS, and IVR, etc. This will be used by the end customer, the telco, and the sales personnel. This is for the B2B segment and not the B2C segment.
AUDIENCE
- Telecom Provider: Providing services to B2B enterprise customers
- Enterprise customers can be from any of these areas: Retail, Media & Entertainment, Energy and Utilities, Healthcare, Transportation and Logistics, Banking, Financial Services and Insurance (BFSI), Others (For this challenge, we are focusing on the screens for enterprise customers)
DESIGN GOALS & PRINCIPLES
Below are some of the goals:
- Elegant, clean, simple, user-centered look and feel with a modern aesthetics
- Engaging and easy-to-navigate UI
- How well does your design align with the objectives of the challenge
- Intuitive experience for end customers, sales and telco personnel
- Developer friendly and easy to build designs
- Minimize the total number of screens while keeping the experience intact
- The screen should reflect the telco enterprise user (B2B) journey
- The client prefers designers to use Adobe XD as the tool, optionally they are okay with sketch as well.
REFERENCES:
These are only for reference, please DO NOT COPY
https://www.t-mobile.com/business/enterprise
https://www.business.att.com/
https://www.telstra.com.au/business-enterprise
EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales (ask the client to rate each of the parameters):
Creativity: 8
- 1: barely new ideas
- 10: a utopic product with features not proven to be able to be fully implemented
Aesthetics: 10
- 1: low-fidelity design, wireframe or plain sketch
- 10: top-notch finished looking visual design
Exploration: 8
- 1: strictly follow an existing reference or production guideline
- 10: open to alternative workflows/features not listed here that would help the overall application
- 10: without a properly branded product there is no success
- ���1: don’t care at all about the branding just functionality
USER STORY
- Acme1 is a leading telecom company that provides various services to enterprise customers.
- Acme2 is one of the leading software solution companies that require data facility over its campus.
- Acme 2 is in need of data facility and is looking for solutions
- They visit Acme1's website and goes through various products and services
- They are able to compare the products that they think are useful for them
- They decide to order some of the Acme1 services and go ahead with their order by adding them to the cart and are efficiently able to complete the purchase.
- Once ordered, Acme1 company is able to view its list of orders and manage them.
REQUIRED FEATURES:
- Intuitive experience for end customers, sales and telco personnel
- Developer friendly and easy to build designs
- Minimize the total number of screens while keeping the experience intact
- Ease of rebranding and re-skinning
- Layouts should be configurable and adapted for responsive design
- This website will be used in 2 languages, English and Arabic - make sure you consider your layouts taking this into account because the Arabic language is written from right to left. Please see this reference website. Also read this article on how to design websites: https://medium.muz.li/web-design-for-right-to-left-languages-the-basics-287329d508cf (You will need to show us one of the pages in RTL)
SCREEN REQUIREMENTS
For this challenge, we are looking for the below screens to be created in your submission. The functionality details listed below need to be included in your solution:
01 Telco Landing Page
This is the main landing page.
- This is the page where the enterprise customers will land in first place
- This should display banners relevant to enterprise products like IPVPN (Internet Protocol Virtual Private Network), MPLS (multiprotocol label switching), Cloud, etc.
- This page should have a way to navigate to these pages:
- Shop products
- Search bar
- Login
- Sign up
- Footer can have these links
- Contact us
- Social links of the organization
02 Create enterprise Profile Page/Registration Page
This is the onboarding screen where enterprise customers will create a user profile. It shall capture the customer profile details including, but not limited to:
- name,
- email,
- nationality,
- language,
- contact number,
- Organization name,
- Role of the person in the organization
- office address,
- identity number,
- Upload identity document.
03 Explore Products & Services (reference)
We have provided the list of products
- This screen should allow the enterprise customers to browse through enterprise products in an intuitive manner
- It should show the customer product recommendations
04 Compare Products
This screen should allow the enterprise customer to select a few products and view a comparison for effective decision making
05 Customer 360 Landing Page with Tabs/Navigation (English and Arabic)
This is the landing screen post login
- This screen also should have a welcome greeting and a search bar
- The dashboard will display key information like customer profile, pending due amount, recent orders, last invoices, last interaction, open tickets, key contact (Account manager)
- It will also need to have the following tabs or however you think it would be better “Shop, My account, My orders, My invoices, My payment, My services, My tickets, My rewards, Help & support”
- Need language switch all over the universal navigation (English and Arabic)
- Please show both the English version as well as Arabic (content will be read from the RTL) version of this page.
This should show the customer account details which includes Personal details of the person who is authorized to view this, in addition to that - include a way for the user to handle the below:
- Change password option
- Change registered email
- Change location details
- Language preference
- Channel preference
- Notification preference etc.
- View contract details
This should show a list of all orders in a tabular view to the customer.
- Show the orders in various statuses - Invalidation, in progress, completed, canceled, action needed
- It should show count of orders in such states
- By default ‘All orders’ should be shown
- The screen should display for each order details like order ID, Circuit ID, Owner, Order type, Product name, Actual Delivery date, Estimated delivery date
- It should allow the user to search and also filter the list of orders.
08 My Invoices
This should show invoices for the last 12 months in a screen, with details like
- Invoice name
- Due amount
- Month
- Payment status
- Unique customer identification #
- Unique billing number #
Apart from this, it should have options/link to the below features/links
- Pay directly from this screen
- Search
- View historical bills
- Download bill copy
09 My Payment
This should allow the user to view recent payments made and provide the ability to view/download/email payment receipts.
Apart from this, it should have options/link to the below features/links
- Make payments using online banking, wallets
- View payment history
- Stored payment methods
- Register for auto-pay
10 My Tickets
This is my tickets page, it will have to show the list of all tickets and each ticket will have this information “Show ticket ID, Subject, Date created, Last Activity Date and Status”
In Addition to that have options/link to the below features/links
- Include a button to allow the user to Raise a ticket
- View ticket history
- View status of recent tickets raised
11 My Products & Services
This should allow to View list of services consumed in tabular format, each service will include these details:
- Circuit ID, Service ID
- Service order ID
- Customer ID number
- Service type
- Service start date
- Status
- Raise a ticket option against each service
12 My Cart
- Enterprise customer should be able to view the cart details and perform options to Add, Delete, Save Cart
13 Help & Support
This page should allow the customer to
- Search for help (Guide Text, for eg. How to change billing?)
- View topic-based help (Invoice, Sales, Service support, Account management, etc)
In Addition to that have options/link to the below features/links
- Initiate contact via Chabot
- Include a button to Raise a ticket
- View FAQs
- Have a «call back » button on the portal so that the customer can require to be called back by the telco customer care agent
- Show links to social network pages of the company
14 View Order Detail
This should be shown once the customer clicks on one of the orders from My orders screen (Section 7 above)
Customer should be able to see the following details once they click on an order
- Order # ( Ex: 150802713/1)
- Order status (Invalidation or in delivery or on hold etc.)
- Order summary (This should have the product name, customer id, order type, service bandwidth, monthly cost, order promise date)
- Order form reference #
- Circuit reference #
- Account executive name
- Customer service contact
- Key order dates ( Signed date, creation date, requested date, indicative delivery date, expected installation date, actual date)
- Billing details (Billing reference #, Billing address, Email address, Currency, Billing start date, Billing end date, Term, Contract expiry date, Committed bandwidth)
- Product details (Product name, service bandwidth, topology, technology)
- Site details – A (Customer name, site address, building name, floor and room, PoP, contact person)
- Site details – B (Customer name, site address, building name, floor and room, PoP, contact person)
- Notifications
- Project details (Project ID, Project Name, Project Manager, Project status)
- This is where the enterprise customer can login using username and password.
- Customers should be able to reset the username and also the password.
- Keep things consistent. This means all graphics styles should work together
- All of the graphics should have a similar feel and general aesthetic appearance���
- There are no branding guidelines, it is open to the designers.
- The application will be white-label, meaning it should be easy to change the colors as required according to the client's branding.
- We need you to upload your screens to Marvel App
- Please request for marvel app in the challenge forum
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment on this link while you upload.
Desktop: 1920px (width) and height as required
SUBMISSION AND SOURCE FILES
Submission File
Submit all JPG/PNG image files based on Challenge submission requirements stated above
Source File
All source files of all graphics created in either Adobe XD (preferred) or Sketch and saved as an editable layer
Declaration File
Declaration files document contains the following information:
- Stock Photos Name and Source Links from an allowed sources
- Stock Art/Icons Name and Source Links from an allowed sources
- Fonts Name and Source Links source from an allowed source
- MarvelApp share link for review
FINAL FIXES
As part of the final fixes phase, you may be asked to modify content or user click paths
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.