TCO18 UI Design Championship Final 1

Welcome to the TCO18 UI Design Finals Round 1 Challenge!

This challenge is for TCO18 UI Design Finals participants ONLY.

Welcome to the TCO18 UI Design Finals Round 1! In this challenge, we are still working on the same HON application, but adding in additional sections and user experiences. We will be looking at 2 new sections in this challenge; Account Details and Queues, while also looking for refinements to your Dashboard based on the discussions during the Design Workshop. We are still exploring concepts and ideas, but you should start to think about creating a cohesive and consistent user experience across everything you are designing so far.

Good Luck!

ALL TOPCODER DESIGN RULES APPLY. Entries must be your original work, and must not infringe on the copyright or licenses of others. All standard Topcoder Terms, Topcoder Policies apply to this challenge. Your design must be created by you and original to you. You are allowed to be inspired by design research but copying and submitting someone else's designs is against Topcoder policies and will not be tolerated. 

RESPECT OTHER DESIGNERS. If you have any doubts ask! 

Topcoder Community Code of Conduct
 
Challenge Problem
The application we are designing is used by HON representatives (call center employees) to track and view account information, billing, and to resolve patient (HON's clients) issues and questions. The users of this application can also find valuable employee information such as HR policies, company documents, training, and more. During the TCO Design Finals, we will just be tackling a small piece of the much larger application. The specific screens and sections we will design for each TCO competition are outlined below.

Challenge Goals

• Establish a base level UI design and structure for the much larger application
• Redesign current screens and user flows from the existing application and make them more user-friendly
• Propose a much more efficient layout, set of functionality, and a better overall user experience
• Design one cohesive web application that contains various sections and sets of functions
• The application should be extremely easy to use and understand. This is a largely utilitarian application, but it should still look clean, modern, and fresh.

Screen Size
We are focused on the desktop resolution for this challenge

• 1440px width (height can expand as needed)
• 4:3 aspect ratio
• Remember, this is primarily a utilitarian application so it's important to not hide or force the user to scroll a lot of find information. Create the most productive and best user experience. This is an internal application focused on productivity… it is not a website! 

Branding Guidelines & Inputs
Client Logo
You can download various logos here: https://drive.google.com/a/appirio.com/file/d/1T0Jwn8bhXGJvP3SNNINTi0qCBqzUszu3/view?usp=sharing

Colors

• We are leaving the color and branding open and will provide feedback in the workshop.
• The application should remain professional and be focused on productivity
  • This generally means that we should stay away from dark backgrounds
  • Contrast should remain high
  • Text should be easy to read
  • White space should be used effectively
  • Smart use of color to aid the user

Wireframes & Screenshots

• We are supplying basic wireframes and screenshots from their current apps
• Use these as reference ONLY
• For the screenshots, we are supplying these so you have an idea of the type of data that should be included.
• Do NOT copy the layouts or organization of content. We are looking for the best user experience and the best layout. The TCO UI Design Championship is about showcasing your design skills and thought processes you have been improving and pushing throughout the year - not copying existing layouts.

Design Screens
00) General Information

• Search is the number one feature of an agent
• Accounts = an individual hospital visit
  • A single patient might have 10 accounts, for example
• Top navigation (could be a secondary nav within each of the below sections). Think about how the user gets from one section to another easily and efficiently. There shouldn't be any dead ends.
  • My Dashboard
  • Accounts
  • Queues
  • Profile (avatar)
  • Any additional relevant nav items
• Phone/ agent status (green, orange, red)
  • On a call
  • Away from desk
  • Training
  • Break
  • Follow up time
    • Setting up a client request
    • Sending a follow-up request
    • Updating the account
  • Sends notifications and alerts if they are in follow-up for too long
• High-level account view. These data points would appear on a summary view of an account:
  • Name
  • Account number
  • Facility (hospital)
  • Status
  • Date of service
  • Actions
    • Call
    • Send itemized bill
    • View Account Details

01) Dashboard
Make any updates or refinements based on the feedback and design workshop with HON last night
Basic Wireframe: https://drive.google.com/a/appirio.com/file/d/15-_5hmuaWzQCnjshUYG9esvKw-Ku7_2o/view?usp=sharing

• This is the first and main screen that the user will see when they log in to the application
• We are looking for ideas on what sections or pieces of content could appear on the dashboard.
• The key important pieces of information:
  • Good morning/ welcome message for the user
  • Gamification and Stats
    • Goal statement. What is my number of call goals (per day, per month, etc. The goal is 100 calls per day)
    • Call volume from yesterday (potentially a trending report
    • Individual and team stats
    • Individual performance progress
• Points and rewards
  • Achievements
  • Badges
  • Status: silver, gold, platinum, etc.
• Agent assistance button
  • Access to Call cheat sheets (download/ view a PDF)
• Recent patients
  • Useful to have as a tool, but agents generally don't go back into an account
  • Doesn't make sense to have on the dashboard all the time
  • Is useful if an agent is working in an account, answers a call, and then needs to go back into an account to finish something after the other call is ended.
    • Allows them to quickly pick up where they left off
• Also, think about customization. Can the user customize what they see? Or does the information change depending on the time of day (data driving the experience)?
• It's important to think about the user and what makes sense for them
• Think through the user interactions and how features will work. We should be able to understand how a user navigates and uses the Dashboard screen/ section.
• DO NOT copy the wireframe or just color it in. Use the wireframe for a very basic understanding of the application and a general idea of the nav structure. Show us your ideas and break away from the wireframes.

02) Account Details
Current App Screenshot: https://drive.google.com/a/appirio.com/file/d/1ZayFWdNNbiOHoNUgGquYZ9cptzKDSTHD/view?usp=sharing

• The user can view the details of a specific account
• The user should be able to search for or find a specific account either from the Dashboard or some other method
• Account tracking
  • The average account is 120 days
  • Timeline tracker of where they are in that 120-day timeline (a timeline could be longer than 120 days)
  • In the accounts lifetime: generally 3 calls and 3 letters
  • Ability to click on the timeline items to view the call log and the letter statement
    • Inbound (patient calling in) vs. outbound (agent calling patient) phone calls
• We are sharing a screenshot of the current account details screen. Use this as a reference for the types of data ONLY.
• We are looking for a better user experience and layout to make the information easy to read and understand
• The included screenshot should be used for gathering the types of data that should be on the account details. DO NOT copy the layout or general structure. We are looking for your ideas, concepts, and user experience suggestions
• You are free and encouraged to expand upon what is included in the screenshot to fit with your designs.

03) Queues

• The queues are kind of like tasks for the agent
• What does the initial screen of the "Queues" section look like?
• How does the agent then select a queue item and how does it display the details?
• There are various types of queues, each with their own functions and information. We are only looking at a few of the queues:
• Callback Queues
  • Current App Screenshot: https://drive.google.com/a/appirio.com/file/d/1W8iJavPfDiVZ7G4EqDE9zpDW9KLUv4uW/view?usp=sharing
  • These are pretty self-explanatory. A patient has requested a callback or follow-up on an outstanding issue
  • The included screenshot should be used for gathering the types of data that should be on the account details. DO NOT copy the layout or general structure. We are looking for your ideas, concepts, and user experience suggestions
  • You are free and encouraged to expand upon what is included in the screenshot to fit with your designs.
• Voicemail Queues
  • Current App Screenshot: https://drive.google.com/a/appirio.com/file/d/1F0TCeOCNcKuqaro3_Uu_0CUMtJIDLebu/view?usp=sharing
  • Respond to voicemails left by a patient
  • The included screenshot should be used for gathering the types of data that should be on the account details. DO NOT copy the layout or general structure. We are looking for your ideas, concepts, and user experience suggestions
  • You are free and encouraged to expand upon what is included in the screenshot to fit with your designs.

04) Presentation Screen - 1920x1080 (16:9 Ratio)

• This screen is very important! So make it look good!
• If you were walking into a meeting and needed to sell your design - use this screen to showcase your concept.
• DO NOT put extra text on this screen - use it to showcase your application!

Judging Criteria

• UI Design
  • Color usage
  • Imagery usage
  • Typography
• Concepts and ideas
• Originality
• High-level structure and navigation
• Layout and presentation
• How effectively you design for the target users
• Interaction and scenarios/ user flows
• Design progress throughout TCO

Target Audience

• Call Center Employees (agents)

--------
IMPORTANT ONSITE RULES
Rules for Bringing Your Own Computer 
You will have access to your competition workstations throughout the event. We expect you to be an honest, truthful and good "community member" and not try anything dishonest with the use of your personal computer. If it seems like a bad idea – it probably is. No competition work (on your computer) will be allowed in-between rounds within the competition arena. Remember we are following your progress in the arena and throughout the event.

What is Allowed

• You will be allowed to take your computer with you at the end of each round.
• All artwork and designs must be created as original art within each 3-hour design session.
• You are allowed to use Stock Photos and Stock Icons (from Topcoder approved sites). 
• Throughout the challenge, you will have internet access to download and use Topcoder approved stock icons, stock illustration, and stock photo websites.
• Fonts from approved font sites and applications
• You will be allowed to do online research for the challenge
• Artwork and files provided as part of the challenge can be used as part of your submission. 

What is NOT Allowed

• No usage of previous design work or your own stock designs (buttons, icons etc.) that are currently saved on your computer, external drive or in a cloud-based hard drive.
• No pre-existing templates or source files from previous challenges
• No pre-existing templates from template websites
• No blatant copying designs directly from another designer. We will allow inspiration and interpretation from the Design Workshop process.

TCO18 Finals ROund 1 Eligibility

• To be eligible in this round, you must meet the eligibility requirements listed on the Challenge Details page, along with the following additional eligibility requirements:
• You must be listed as a finalist for the round you are competing in.
• You must be present at the start of the Round.
• You must be a TCO18 Finalist and you must be competing onsite, in person, during the TCO18 Championship Finals.
• You must abide by the rules of the onsite championship rounds.
• You must not cheat. All designs submitted must be your original work created solely by you and for the purpose of this competition.
• You must be in good standing with TopCoder with no disciplinary actions against your account.

Placement and Winner Selection

• All submissions from the UI Design Competition Rounds automatically pass screening. 
• After each Round, the Judging Panel is presented with all of the submissions and will have sole discretion in determining the placements for each Round. 

Overall Champion Winner Selection

• The winner of the UI Design Competition will be the Onsite UI Design Competitor with the highest placement given by the Judging Panel from the Championship Round. 

Design Workshop
All designers are welcome to the Design Workshop held from  Wednesday night. We will review your designs and you will be able to ask the customer questions about the design problem. The design workshop should be an interactive and collaborative experience. You will have an opportunity to present/explain your design so the customer understands your approach. You are not required to present your design if you do not want to.

Scorecard and Judging Criteria
The judging panel will be evaluating each submission based on a UX/UI scorecard when judging your submission, such as:

1. UI Design
Overall UI design execution quality and approach to the problem. This takes into consideration design elements like Color, Imagery, Typography

2. Concepts
What we like to focus on at Topcoder - have you thought about the problem and introduced any new concepts to help solve and improve the user experience?

3. Originality
Originality in your design and approach. At Topcoder, meeting the client’s needs is very important. One of the needs, above the requirements listed, is to have an original design. One that is different from other designs that you see every day. Your design should not feel or look like a templated design. We are focused on your approach to solving the design problem. We understand that some things might follow trends etc.

4. High-Level Structure & Navigation
How well have you thought about and structured your application? Is there a clear, comprehensible navigation structure? Primary tasks are promoted, prominent and easy to understand.

5. Layout & Presentation
What is your approach to the application layout and presentation? Do your screens and concepts support the task flow? Have you created an effective visual hierarchy? Have you reduced visual complexity?

6. Users
Have you thought about the users and does that come across in your design and intended user experience? 

7. Interaction & Scenarios
Thinking about the application flow. Have you created an end-to-end scenario? The top scenario is to find a mentor. Is the scenario clear?

8. Design Progress
Are you understanding the challenge problem? Have you taken the design feedback and improved on your previous design? From one design round to the next design round have you pushed yourself and taken any leaps within your design or concepts? 

Good Luck!