Challenge Overview
Welcome to AppXpress - Appointment Booking Responsive UI Prototype Challenge
The primary task of this project is to create the AppXpress - Appointment Booking Responsive UI Prototype Challenge based on the provided PSD Storyboard design. For this challenge, you need to create prototype submission to support responsive on Desktop, Tablet, and Mobile layout. At the end of this challenge, we need solid UI prototype result with best practice solutions
Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
Downloadable Files:
Storyboard - Use this storyboard design
General Notes
- Suggest best practice Responsive Web Design Breakpoints Sizes
- For this UI Prototype submission, we need your submission support responsive solution that works for DESKTOP, TABLET, and MOBILE screen
- For DESKTOP screen, you can use responsive layout from TABLET storyboard
- Make sure your submission support Standard layout with 320px width screen size using best practices of Responsive Web solution.
- All pages need use fluid layout when transform into Landscape or Portrait view.
- Your prototype need submit correct information. Pay attention to all small details, let us know if need clarifications.
- Embed required fonts in your submission.
- Expected technology AngularJS, Bootstrap, and jQuery.
- It’s important that the code is well organized and easy to read. The client’s team has coders that will review the code and add to it after the contest
- All data as possible need to be loaded by JSON
PAGE REQUIREMENTS:
A). USER FLOW
1). Appointment Selection Page Load
TABLET VERSION
screenshot: 00.jpg
- At first page load, Distance Coverage need show up centered on browser screen
- Overlay background covered the whole screen
- Modal window placed centered on browser screen
- User should not be able to close the modal window by selecting the available options
- Create toggle functions to selecting the Distance options
- Set active and inactive style for toggle options
- Click Select button need to capture the value into the Distance buttons on Map and hide the modal window
MOBILE VERSION
screenshot: 00.jpg
- This screen is how mobile look; modal window remains centered on browser screen
- Modal window width need covered the whole screen
2). Appointment Selection Page
TABLET VERSION
screenshot: 01.jpg
- This screen is Appointment page look like
- Blue Header always placed on top of device screen
- Logo Placeholder placed on center of header bar
- In the right side of header bar, there's Notification, Information, and Help Icons
- Notice, there's number indicator for Notification icon. Make sure when we filled with longer text, circle shape not breaks.
- Click Notification icon need shows up the flyout (screenshot: 16.jpg)
- Overlay background need covered the whole screen
- Show list of Notifications
- View more can be dead link
- Main page content divided by two columns explained below
- There's bar at the bottom that contains Selections and Confirmation buttons. Match styling for buttons
Branch Detail Column
- This column can use fixed width
- Section title placed centered
- Branch Photo placed on top of screen
- There's overlay above the image for Branch Name
- Match information list below the image
- Use different icons for every list
- Agents section list of Agents thumbnail.
- Agents section need use slideshow function. User can swipe to navigate all Agents (screenshot: 04.jpg, screenshot: 04_1.jpg)
- Book Appointment button placed in the last row (screenshot: 04_2.jpg)
- Book Appointment button is clickable, and needs show Book Appointment Progress Step screen that will explain below.
Appointment Selection Column
- This column must use fluid width
- Section title set centered, and there's Filter button on the right side
- Map need build with Google Map API
- Distance Coverage button placed on top left of screen
- Possible to match Zoom In/Out style? If not possible, you can use default style from Google Map
- You also need capture user location, indicated by a blue colored circle on the map.
- Black marker showed current selected Branch
- Yellow markers showed all Branch places (screenshot: 01_1.jpg)
- Click another Yellow marker need change the Branch Detail on the left side (screenshot: 02.jpg)
- Change to different radius from the option on top right needs zoom out the map and show bigger area on map (screenshot: 02_1.jpg)
- Show random data to shows some of Branch Location (screenshot: 02_2.jpg)
- Filter button need clickable (screenshot: 02_3.jpg)
- And then, load the Filter Branch option (screenshot: 03.jpg)
- Overlay background need covered the whole screen
- Filter modal window always placed on the right side of screen
- Form label placed on top then followed by form input
- Recently Agent shows a list of Agent thumbnails
- Recently Branch shows a list of Recent Branch
- Click Apply button need to hide the modal
MOBILE VERSION
screenshot: 01.jpg
- For mobile version, user only sees the Appointment Selection Column in fluid width
- Header bar contains Notification icon on the left side, Appointment Selection title and Filter button on the right side
- Map map supports fluid-width
- Selection and Confirmation buttons placed at the bottom of screen
- Yellow markers indicated all Branch places (screenshot: 01_1.jpg)
- For mobile, Click on the yellow marker need show the left sidebar contains information of Branch (screenshot: 02.jpg)
- Click Filter button (screenshot: 03.jpg)
- Then, need to show up Filter options (screenshot: 04.jpg)
- Distance Coverage toggle look (screenshot: 04_1.jpg)
- Filter option remains placed on the right side
- For mobile, keep Recently Agent placed above the Recently Branch
- Only need show Apply button
- Click the overlay need hide the Filter options
- Change to another Branch marker on map (screenshot: 05.jpg), need update the Branch Detail information and show up the left sidebar automatically (screenshot: 06.jpg)
- When user clicks the Notification button on mobile (screenshot: 20.jpg)
- Notification layout need covered all screens
- View more button can be dead link
3). Book Appointment Progress Step
TABLET VERSION
screenshot: 05.jpg
- User sees this screen after click Add Appointment button
- Progress Step area need to placed on top of the Map
- There's overlay background of Progress Step on top of the Map
- Progress Step need use fluid width
- Yellow background circle indicated current active step
- User cannot access step that not completed yet
- User can access step that already completed
Step 1: Appointment Type
- This step contains radio options
- User only able to select one option at a time
- Match checked on/off style
- Next button takes user to the next step
Step 2: Requirements
screenshot: 05_1.jpg
- This step needs show inputs and radio options
- There's text placeholder for the text inputs. When cursor focuses, text needs to hide
- After radio buttons selected, Label text need updated into blue colored (screenshot: 05_2.jpg)
- Back button takes user to the previous step
- Next button takes user to the next step
Step 3: Customer Info
screenshot: 06.jpg
- Match text input label and field
- Back button takes user to the previous step
- Next button takes user to the next step
Step 4: Date & Time
screenshot: 07.jpg
- This screen shows two columns for Date and Time Selection
- Select Date, user can navigate the month from < and > buttons
- Current date shows orange colored text
- There's legend information at the bottom of screen
- On the right side, user can available time for 24hr range
- User can scroll the section
- Show random information with "Already Scheduled." message
- There's "+" button on the right side of each hour
- Once user clicked the "+" button, the row need show the message (screenshot: 07_1.jpg) (screenshot: 07_2.jpg)
- Also, edit button shows up on the right side
- Put dead link for now
- Back button takes user to the previous step
- Next button takes user to the next step
Step 5: Agent
screenshot: 08.jpg
- Search input placed on top of screen
- Show list of Agents with scrollable section
- Match available and unavailable status styling
- Click the Agent need show the blue border on its thumbnail
- Back button takes user to the previous step
- Next button takes user to the next step
Step 6: Comments
screenshot: 09.jpg
- This comment step contains single text area
- On user focus, text placeholder needs to be hidden
- Back button takes user to the previous step
- Next button takes user to the next step
Step 7: Add Appointments
screenshot: 10.jpg
- This screen is the Appointment review information
- Match the box size
- Match the box information
- Edit button for each now needs to allow user to edit the row (screenshot: 10_1.jpg)
- Back button takes user to the previous step
- Appointment button need close the Appointment Progress Flow
Selected Appointment Flow
screenshot: 11.jpg
- Then, after the modal window closed, you need show number indicator in the bottom bar
- Also, in the marker, there's "star" icon above the selected Branch marker
- Notice, we need to show new "Confirm" button in the bottom of Branch Detail (screenshot: 11_1.jpg)
- Click "Confirm" button need take user to Detail page explained below
MOBILE VERSION
Step 1: Appointment Type
screenshot: 07.jpg
- For mobile version, you need show fluid progress steps on top of screen
- Remain display the line between steps
- Each radio options need to show up in different row
Step 2: Requirements
screenshot: 07_1.jpg
- Label and text inputs need to show up in different row
Step 3: Customer Info
screenshot: 08.jpg
- Label and text inputs need to show up in different row
Step 4: Date & Time
screenshot: 09.jpg
- For mobile, you just need to display the dropdown for Date and Time
Step 5: Agent
screenshot: 10.jpg
- Search Agent label need to hide for mobile
- There's no Available text just need to display the circle
- User still can scroll the section
Step 6: Comments
screenshot: 11.jpg
- Textarea need use fluid width
Step 7: Add Appointments
screenshot: 12.jpg
- Review box need covered the whole screen
Selected Appointment Flow
- For mobile, you need show number indicator in the bottom bar
- Also, in the marker, there's "star" icon above the selected Branch marker
- Click "Confirm" button from the left sidebar need take user to Detail page explained below
4). Confirmation Detail Page
TABLET VERSION
screenshot: 12.jpg
- This detail page shows up after user confirms the Appointment
- Or user can click "Confirmation" button on the bottom bar
- Reuse header bar content from Appointment page
- Page shows up as two columns layout
Current Appointment Column
- This column need use fixed width
- This column need show Current and Past Appointment
- User can select and then detail page shows up on the right side
- Match selected style with blue background
- Match information for each row
Detail Column
- This column need use fluid width
- Please show title in the center of this column.
- Edit and Delete button placed on the right side
- Edit and Delete button are clickable (screenshot: 12_1.jpg)
- Detail content needs to be scrollable when filled with more data
- Match each row values
- Click Edit button need shows up the editable form (screenshot: 14.jpg)
- There's drop-down, input and text area shows up when user clicks Edit button
- There are Print Appointment and Confirm button in bottom of Detail content (screenshot: 15.jpg)
- Print Appointment button can be dead link
- Click Confirm button need load the modal window (screenshot: 15_.jpg)
- Overlay need covered only the detail content area
- Show group of radio buttons
- Click the Select button need hide the modal
- Then, in content detail, you need show Alert icon on the left side of title and Hours notification in the right side (screenshot: 15_1.jpg)
- Also, notice Confirm button hidden
- User can select another Appointment (screenshot: 15_2.jpg)
- Selected state for another Appointment (screenshot: 15_3.jpg)
- Click Edit button need show up the modal window (screenshot: 15_4.jpg)
MOBILE VERSION
screenshot: 13.jpg
- For mobile version, you need show Appointment detail page using tab layout for Current and Past Appointment
- Match styling for active and inactive state
- Swipe the row need show the action buttons (screenshot: 14.jpg)
- Click each row need take user to separated Detail screen (screenshot: 15.jpg)
- For Detail screen, back button takes user to the previous screen
- Edit and Delete button placed on top right of header bar
- Click Edit button need shows the Edit screen (screenshot: 15_1.jpg)
- For mobile screen, Edit screen displays the label and text inputs in separated row (screenshot: 16.jpg)
- Click Confirm button need shows up the modal window (screenshot: 16_1.jpg)
- Modal window needs to be centered (screenshot: 16_2.jpg)
- Detail Screen after user confirmed, Hours and notification placed on top of detail content (screenshot: 17.jpg)
- User goes back to see all Appointment list (screenshot: 18.jpg)
- Past tab can re-use same layout (screenshot: 19.jpg)
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.
CODE REQUIREMENTS:
HTML/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.
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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed on the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS 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 so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
- Chrome, Firefox and Safari on iPhone 4, 4s, 5, 5s, 6 and 6+ (Landscape & Portrait View)
- Chrome, Firefox, and Safari on iPad 2, 3, Mini, 4, Mini Retina, Air (Landscape & Portrait View)