Challenge Summary
Welcome to the Chronos InStore Customer Service Application Design Concepts Challenge!
For this challenge we are looking for initial designs for the look and feel for the Chronos in-store customer service Application.
We will be providing you with a basic use case scenario and some other basic direction and are looking to you to help us design the application user experience.
Round 1
Submit initial design on Desktop screen size (1024px x 768px) of these following pages:
1) Landing Page/Dashboard
2) Customer Overview
3) Services
4) Bill Activity
5) Equipment Swap
Round 2
Your Final design with updated based on Checkpoint Review on Desktop screen size (1024px x 768px) of these following pages:
1) Landing Page/Dashboard
2) Customer Overview
3) Services
4) Services Detail
5) Remove Service
6) Modify Service
7) Modify Service - Pricing Tab
8) Equipment Swap
9) Bill Activity
10) Bill Images
About Client
Chronos is a diversified communications company providing five services -- voice, video, data, wireless and security -- at the retail level; as well as, providing security monitoring and directory publishing for its industry customers.
Challenge Goal
The goal of this challenge is to create an application for our customer service reps to use in our stores. We are providing you with existing screen shots of our appliction, but the main goal of this challenge is to redsign this application and rethink the user experience. Use the screen shots as a guideline for content you need to display, but we want to see a fresh approach to this application. Imagine a customer service representative walking up to a customer with an iPad or Tablet, finding out what their problem is or what information they are looking for, and then immediately processing their request using this application! The application must work fast with a touch interface so customers feel like they are being helped quickly and correctly. The application will take advantage of web services we’ve already developed, but it may potentially require additional services as well.
Style Theme
- We'd like to follow existing color theme based on attached current-app-screenshots.zip, however, please keep in mind this is a redesign. See this board for some ideas to get you started on thinking about creating a clean, modern, dark UI: http://www.pinterest.com/bwalles/dark-ui-examples/
Fonts
- Open to Designers
Page Layout
See screenshot: “apoverview.jpg” for general idea of existing app to be redesigned for tablet.
Header
- Put logo placeholder in your design
- Need show welcome message, Account #, and Cart ID information. How you design this section.
- Need search function, there will be options which can selected by user to search by Service Name, etc
- There will be “Messages” indicator, so user aware there are some messages from company
- Big arrow below the message will hide/show the quick information area.
- There are some icons displayed on header are, they are:
-- Earth icons - create a new service
-- Home Add Links - Change of address
-- Home with Add button - Add New Service
-- Dollar sign - Customer Service can make a payment for the customer
-- Add Notes icon - Add Comment/Notes
Navigations
These are main navigations needed on application:
- Overview
- Services
- Billing
-- Should add ability for submenu
- Customer
-- Should add ability for submenu
- History
-- Should add ability for submenu
- Forms
-- Should add ability for submenu
Notes
- You need make sure all graphics created as shape format on your design source file. So, storyboard will look sharp when resized on Retina display.
- Notes for how to simplify, ensure clean experience on tablet but need lots of info/options on desktop version.
Required Screens:
1) Landing Page/Dashboard
- Customers has a landing page once they login to the application.
- You might need add new icon on main navigation to access landing page
- This landing page could be dashboard of high-level nav to landing page.
- What quick informations can displayed on homepage based on other pages in application.
- Need show some way to look up a customer
- Need show some way to look up a piece of hardware devices, get to a customer that way.
- How to handle Brand new customer?
- You can refer this site for best practices of dashboard look
2) Customer Overview
screenshot: apoverview.jpg
- This screen shows the Customer overview of Chronos application
- Below the main navigation there’s quick information of customer. How you clean up that section?
- Customer Overview page need show these following sections:
Billing Address
- This section displayed text information of Billing Address
- Notice there’s pdf link for Most Recent Bill Date
Billing Summary
- Create how table should design
- Give proper styling for Total and Draft Payment
Service Address
- This section displayed text information of Service Address
Service Summary
- This will be series of services user used indicated by active/inactive icons:
- You need recreate the icons, here’s icon meaning from left to right:
-- Telephone icon
-- Computer icon
-- Mouse icon
-- Wireless Handphone icon
-- Home icon
-- Misc icon
Credit Summary
- This is quick information of Credit Summary
Account Status
- Account status need show table information
- Active/Inactive status displayed prominent
- There’s option to Hold and Release
- Treatment History showing table list in year range
- Show update button in the row
- below table information there’s notification area for SubscriberWise
3) Services
screenshot: apoverview.jpg
- There will be 2 type of Services tab: “Core Type” and “Address”
- On both tab, there will be list of Username
- Each Username can have more than 1 account
- Each account will displayed Service they using, you can put “Telephone”, “Video” and “Internet” for example.
- We also need Search function on this page, search criteria can set up to “Account Number” by default. There will be another option user can choose.
- You need display table of Services information
- Columns need displayed on page
-- Details
---- This will be a text link
-- Status
---- Available Status are “Out” and “In”
-- Account Number
-- Telephone
-- Type
-- Description
-- Name
-- Listing Type
-- Address
-- Contract
-- Total
-- Future Usage
---- Show delete button
--- You need add new Edit Button that will take user to Modify Service page
-- Deny
---- Filter will sort the Deny row only.
4) Services Detail
screenshot: apservicedetail.jpg
- This page accessed from View link on Service page
- This page showing quick user information on top area
- Available Services need show check on and check off mark.
- Need show yellow checkmark sample
- Current Pricing and Converter will be table table list, match existing content.
5) Remove Service
screenshot: apoutorder.jpg
- This screen show after click Delete button on Services page. This page will remove 1 service from user account.
- Quick information displayed on top. Match with existing content
- Below there tab layout for Main and Remarks
- You can design how the layout look for Main tab only
- Plant Remarks is textarea that have ability to move content from value in the right side “ASAP”, “Contact Phone” and “Email Address”
- Order Code show as dropdown option
- Match fields for Notify Plant, Due Date and Responsible Person
- On the right side, user see the Contract fields
- Need Finish button to confirm Remove the service.
6) Modify Service
screenshot: apsimpleorderinfo.jpg
- Basically this page will look similar like Remove Service above.
- You need match the different table tabs and form content based on screenshots
7) Modify Service - Pricing Tab
screenshot: apsimpleorderpricing.jpg
- This is Pricing Tab look of Modify Service
- Current Pricing table displayed as main content
- you need show Add Pricing flow
- Refer Add Pricing form in the bottom of table
- Each row have Add and Remove link
- Add link will activate/enabled the Qty cell
- Remove link will remove related row
8) Equipment Swap
screenshot: apequipmentswap.jpg
- This screen show up when user tap on table row on Service Details page
- That will displays all equipment and you can select and perform the swap function.
- Page divide by “Equipment in Account” table and “Charges that Require Equipment”
- “Equipment in Account” have Delete and Undo link
- Finish button show up in the bottom right
9) Bill Activity
screenshot: apbillactivity.jpg
- This page contains table list of history, payment, credit information
- Put Filter for transaction date range on top of page, there’s also option to drill down for Transaction Type
- Match table information, show active/inactive sort on table columns
10) Bill Images
screenshot: apbillimages.jpg
- Bill images will be table list of Billing
- User can download the pdf files for each row
- Use consistent table style and and match table content.
Design Considerations
- Focus on the design being a great responsive experience
- Give importance to the overall layout and think about how a user would interact with the content on the page.
Target Audience
- Chronos Customers
- Chronos Customer Service Representative
Judging Criteria
- How well you create responsive design look for Chronos application
- Cleanliness of your graphics and design.
- User Experience.
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload PNG images in a zip file with all requested contest requirements stated above. Number your files (01, 02, 03, etc) this will help review them in order.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics.
Challenge winner need create 1 - 2 screens of Wider Desktop version (1280px x 1024px)
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.