Connected Clinic Responsive UI Prototype

Welcome to Connected Clinic Responsive UI Prototype

Connected Clinic is a new health services application that allows health care providers and patients track their progress on detailed health care plans and templates. As a mobile application, this will be used to help manage the patient care process on a variety of platforms.

The main task of this project is to create the Connected Clinic - Mobile Application UI Prototype based on the provided PSD Storyboard design. UI Prototype will use Responsive Design solution that will works within Desktop, Tablet and Mobile Platform.

In the end of this challenge we need solid UI prototype result with best practice solution, that can be updated easily in the future challenges.

Final Submission Guidelines

Read more details UI Prototype Requirements and Flow below.

CODE REQUIREMENTS:
HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- You’re encouraged to use HAML to make the HTML code clean, provide source files on your submission.

CSS3 and JS
- You MUST USE LESS when create stylesheet for this challenge
- Provide comments on the CSS/JS code. We need CSS/JS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS/JS so developers can easy to read the code.
- All CSS/JS naming should not have any conflicts.
- As possible use CSS3 style when create all styling for rounded corner shape.

IMAGES
- Images should be properly compressed while still having good visual quality.
- Use best practice repetition usage of background based image.
- Use sprites when using icons for your submission.

PAGE REQUIREMENTS:
General Notes
- All pages of Connected Clinic UI Prototype must support responsive design solution.
 - Sidebar must displayed on the left side of browser screen, with another content placed fluid as browser width.
 - Page background must always fill the browser height.
- As possible we need all pages on this prototype linked each other. Let us know if you need clarification about the flow.
- FYI: Storyboard use “Proxima Nova” which is not free web font.  You need replace the font with this font http://www.google.com/fonts/specimen/Montserrat on your prototype submissions.

1. Welcome
screenshot: 1_Welcome.png
- Welcome page will contains fullscreen background that will resized as browsers width. Refer this sample demo
- ConnectedClinic logo should can easily updated
- Text below the logo need editable
- Main actions button placed in the bottom right. Both text and buttons are clickable
- Login button will take user to Dashboard page
- Put dead link for Register and Get started button

2. Dashboard
screenshot: 3_Dashboard.png
- This is default look for Dashboard screen, layout divided by: Header Bar, Sidebar and Main Content area
- You need set 1024px for minimum width size
- On desktop version, left sidebar will be fixed, header and content area will stretching as the browser screen width
- Read details information for each section below:

Header Bar
- ConnectedClinic logo will take user to dashboard on every pages across protoype
- Dark background area will be fluid on desktop version. Use proper adjustment for each cells on desktop version
- User profile area will be clickable, put dead link for now
- Date area showing as 2 lines format
- Time displayed in the right side.

Sidebar
screenshot: 2_Navigation.png
- Sidebar will collapsed by page load
- Implement active and inactive state for each menus
- Remember to use sprites when create all icons
- On collapsed state, sidebar just displayed button. On Expanded state, need show the text menu.
- All row menu area need clickable
- Notice in the bottom, there’s arrow to expand/collapse the sidebar
- We need slide transition effect when expand/collapse the sidebar. Need make sure transition running smooth without no lag
- Use slide from left to right when expand and slide from right to left when collapsed.
- Left sidebar background on desktop version need show fluid height solution. You can use javascript solution to achieve the expected results
- Notice there’s shadow behind the sidebar on expanded state

Main Content Area
- All main information displayed on main content area
- All boxes need use fluid width
- Content area divided by 2 columns layout
- On Desktop version, you can set “My Patients” and “My Calendar” boxes use fixed width, while other boxes use fluid.

My Goals
- Title and icon placed on top left
- There’s View All and Sort Date button on top right. Whole cells area will be clickable
- Click Sort Date will open modal windows (3_Dashboard_2_Sort.png)
- You can use radio browser based style.
- User can can click or label to checked on/off the checkboxes
- Click Apply will update the My Goals row order
- Simulate by put different Due date so we can aware the differences
- “x” button will close the modal
- View Detail button will take user to Goal page
- Click “!” button will show the tooltips
- Show animated progress at first load this page.
- Progress bar and text should easily modified, documentation how to update the number.

My Open Tasks
- View All and Add Goal placed on top right
- Basically this box use same layout with My Goals except Assigned to and Due Date column
- User can checked on/off each checkboxes. Use browser based style
- Match My Open Tasks icon and title
- Use different progress bar and text.

Activity Feed
- This box display list of Activity Feed
- Profile picture and Profile Name are clickable
- 5h displayed before the main action buttons
- Put dead link for 3 action buttons for now

My Patients
- This box display list of My Patients
- Case number is clickable, put dead link for now
- Arrow button will take to Case page below

My Calendar
- Add Event button placed in the top right
- Calendar need work when navigate prev and next month
- Show easy way to set up the event on calendar date. Documentation how to add the event
- Notice there’s different color usage and small rectangle on the bottom right of event date. (3_Dashboard_calendar_note.png)
- Blue background on cell = today
- Light blue background on cell = next event need to completed
- Grey background on cell = pass event

Tooltips
screenshot: 3_Dashboard_info.png
- When user click on each “!” button, need show up the centered modal window
- Click “X” button need close the modal
- When filled with more text in the bottom, box height should auto expand.

3. Templates
screenshot: 4_Templates.png
- Templates page accessed from the Care Templates menu in the left sidebar
- Title on left side and Create New button on the right side
- Page grid showing and 3 columns format
- Each Box title, picture and View Template button are clickable. Set the link to CarePlan page.
- When filled with less or much text, all 3 boxes in a row must stay use same height. Please show random text to simulate the look
- When user scrolled down the page, you’ll see title and Create New button fixed on page. (screenshot: 4_Templates_scroll.png)
- Need show shadow effect behind the title area when user scroll down the page
- Click any View Template button will take to CarePlan page

4. CarePlan
screenshot: 5_CarePlan.png
- This is blank CarePlan page look
- Back button will take user go back to Template page
- CarePlan picture and title placed on top left.
- Assign to a Patient placed on bottom right. Refer the flow below.
- Action list display some row of data, set checkboxes to off, Who’s helping show grey background.
- Add Goal and Save buttons in the top of list
- Show CarePlan for Total Knee Replacement and OnBoarding
- Match the icons color
- Status text show "N/A" by default
- Who's helping column show grey background.

CarePlan Assign Flow
screenshot: 5_CarePlan_Assign.png
- When user click Assign to a Patient button, need show the modal
- Each row should checked on/off the radio button
- You can use radio browser based style.
- Done button will close the modal and then set the value into CarePlan page(screenshot: 5_CarePlan_Assigned.png)
- Progress bar and text need show animation effect when loaded
- Assigned to filled with Patient Name and Picture
- Some Action button filled with checked on Status columns also the Who’s helping text

5. Case
screenshot: 6_Case.png
- User landed on this page after click patient  Case Number or arrow button on Dashboard page
- Page divided by 2 columns:

Left Column
- Back button will take user back to Dashboard page
- Search Case record input placed on top
- Case type displayed with number indicators. You need make sure when add more than 1 digit number, background will auto expand the width.
- My Case Team and External Case Team, “+” button on the right side of title.
- Need make each row clickable
- FYI: for desktop version, you can set fixed width for this column
- When filled with more data this area need scrollable like center column

Right Column
- This column consist of Details Patient Information
- Match the layout Patient Information
- Edit link, put dead link for now
- Orthopedic Care Plan box placed below Patient Information box
- User can navigate to the right side, refer dot pagination in the bottom
- Activity Feed show up when user navigate the page (screenshots: 6_Case_2_feed.png)
- You need create collapse/expand function for content inside Orthopedic Care Plan box (6_Case_1_goal.png)
- Refer content on psd
- Put edit link in the top right
- “!” button will show the tooltips, you can re-use content from 3_Dashboard_info.png
- Show table format of Orthopedic Care Plan box
- On page load need show animation progress bar
- Next Steps box, create goal link placed on top right
- Post an Update is a textarea.
- Connected Clinic is button put dead link for now
- Match box content for “Heart Healthy Lifestyle” & “Quit Smoking”
- Put dead link for View All button
- Share button placed in the right side
- Show another list for “Heart Healthy Lifestyle” and “Quit Smoking”, need add View Details for each row

6. Goals (Mobile)
screenshot: 7_Mobile_1_my_goals.png
- You just need create this page for mobile version
- Use separated css and js files related to this mobile version
- This is mobile version of Dashboard page
- Top left will show the menu like desktop version, slide from left to right.
- Each sections transformed into top navigation on mobile version
- Arrow button on the right will open new layer contains all sections on dashboard page (screenshot: 7_Mobile_4_mdp.png)
- Show x button in the bottom to close the layer
- Here’s details requirements for each sections, since no details screen explains about the mobile requirements

My Goals
- Each boxes need use fluid width
- Match the spacing between table
- On each boxes notice there’s no Add Goal button
- And View Detail button move to bottom
- After the last need add View All button and Sort Date button
- “!” and Sort Date button will show modal windows, re-use existing style. You need adjust to fluid width

My Open Tasks
screenshot: 7_Mobile_2_my_open_tasks.png
- This box will use same layout like My Goals mobile version
- Notice the content differences
- Add Goal button placed at the bottom
- Also, please add new View All button before Add a Goal button

Activity Feed
- Each Username row should display as separated box, refer mobile version look of My Goals section
- Show 5h, arrow button, star and arrow button in the bottom row

My Patients
- Each Patient information display as separated row
- Arrow button replaced to View detail on mobile version

My Calender
- Display fluid calendar look on mobile version
- Add Event button placed after calendar

 
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Documentation of your prototype

The following pages are required in your submission:
1. Welcome  
2. Dashboard
3. Templates
4. CarePlan
5. Case
6. Goals (Mobile)

HTML/CSS Requirements:

You're encouraged to use and take advantage of CSS3 and Use LESS
Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
No inline CSS styles- all styles must be placed in an external stylesheet.
Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
Label all CSS, Javascript, or HTML hacks with explanations so others will understand.
Your code must render properly in all browsers listed in the Browser Requirements section.  

Browsers Requirements
- Safari, Firefox & Chrome (Desktop)
- Safari Mobile, Chrome Tablet & Mobile

Documentation Provided
connectedclinic-storyboard.zip - Connected Clinic Storyboard Design