Challenge Summary
Welcome to the AppXpress - Appointment Booking Responsive Web Design Challenge!
We are excited to involve our talented community to help us develop a modern and thoughtful concept for a responsive application conceived to help banking agents and customer setting appointments fast and easy. We are providing you with the application concepts and the user flow for you to get creative with!
We are looking to see design concepts on how this application will work, considering the best practices for an easy experience to the user considering the target audience.
Round 1
Checkpoint Design should contain:
1. Appointment Selection (iPad and iPhone views)
2. Book Appointment (iPad and iPhone views)
3. Appointment Confirmation (iPhone view only)
- If you have time please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Final Design plus Checkpoint feedback (iPad and iPhone views):
1. Appointment Selection
2. Book Appointment
3. Appointment Confirmation
- If you have time please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to create design concepts for a responsive web application targeted to banking agents and customers who are looking to set up appointments. We envision a very easy-to-use flow and time saving paths. The final design should provide visual information on a map which highlights nearby branch locations with appointments available to book and also includes predicted travel time to the selected branch.
You’re provided with simple user stories and features we want to see. You must analyze this and propose a modern design that shows how the application work. Ideas are always welcomed as long as they help to understand this process and make the application easy to use.
Branding Guidelines
- Colors are open to suggestions. Keep them simple, not too many colors.
- There is no logo. You can use a placeholder or simply nothing.
Design Concepts Goals
- Read the user story and decide what should the priority features be.
- Designs should be professional, simple, elegant and still cover the entire functionality.
- Designs should really take into account simplicity and accessibility.
Key Focus
- Simplifying the appointment booking process
- Making SIMPLE the whole workflow. Think about non expert users.
- Map functionality (focus of the starting point).
Screen Sizes
- iPad: 2048px x 1536px (landscape orientation only).
- iPhone: 750px x 1334px (portrait orientation only).
- Make sure you create graphic in 'shape' format, so when resize for retina versions, graphic still look sharp!
Main Features
1. Appointment scheduling and agent's availability either at current branch or chosen Branch.
2. Location based Branch information [visual on Map] - this can be current location or depending on the postcode.
3. Predicted Travel Time from current or chosen location to selected branch.
4. Sending email notification.
5. Optional printing of booked appointment.
User Flow
1. As an agent or customer, I should be able to search and schedule an appointment for the customer either at the current branch or a branch in the vicinity (5,10,15,20 miles) of my current location or a post code specified by the customer. Ability for agent to capture customer details as part of the process. if the customer is trying to use to the functionality the details should be picked up from his profile information.
2. As an Agent or Customer When booking the appointment, I should be able to select from a set of available time-slots and agents for the chosen Branch and appointment type.
3. The solution should be able to provide the customer with predicted travel times from current location to selected or searched Branches.
4. As an agent or customer, the available Branches and time-slots slots should be sorted for me with the closest Branch to my location or the specific post code provided at the top of the list.
Features and Suggested Screens
- In a concept design challenge we would like you to suggest features/screens that this app should incorporate.
- Feel free to reorganize screens or split if necessary. It’s your show, run it!
1. Appointment Selection
- User should be able to see a very visible map with branches nearby the user.
- User should be able to see branches by postcode, location proximity (5, 10, 15, 20 miles) or by selecting the same branch where he is at (first option by default).
- When clicking on a branch the following information should be presented in form of layover or any other idea you have:
-- Name of the branch
-- Address
-- Phone
-- Schedules (open/close "at this moment" visible feature would be nice).
-- Predicted Travel time (prominent). User should be able to see travel time by foot (default), car or public transportation.
-- Add a “Book Appointment” button (prominent).
2. Book Appointment
- This screen could be display over the map in a popup or as a new blank one. We’re open to suggestions that improve the user experience.
- This screen is very important to be easy to use, think of the best flow and add thoughts to each step the user needs to follow to complete this appointment selection intuitively.
- During the appointment set up, capture the following (below the proposed order of the fields according to availability criteria, you can suggest another order):
-- Date (today by default). You should probably display a calendar? What do you suggest?
-- Agents. The user can set the agent who is going to take care of the customer. If it’s an agent who is using the application and it’s “this” branch then the default agent would be him/herself. If not a new agent could be assigned. It would be nice to offer quick search tool for an agent (by name).
-- Time. There are 15min slots starting from 8AM until 5PM. There may be available or busy slots for appointments.
-- Appointment type. Display the following options: First Appointment, Choices Review, Open an ISA, Open New Savings Account, Open New Sole Account, New Premier Customer, Savings and Investments Review, Set up a New Loan (up to $25k), Top Up Existing Loan, Other.
-- Requirements. For certain types of appointments the customer will be required to deliver some items, for instance, when opening a new bank account the customer should deliver an identity card, service bill, etc.
-- Comments input box.
-- Customer’s name, last name, email address and phone number.
3. Appointment Confirmation
- Overall collected information is displayed to confirm the details captured in #1 and #2 steps above.
- Additionally, add agent’s phone number in this details screen.
- Consider the user could edit the information of the appointment somehow if there was any undesired selection.
- Add a way to confirm if the user would like to be notified by SMS the appointment details and a reminder. Probably a checkbox?
- Display an option to print the details to hand over to the client.
- Finally, book the appointment!
- Display a friendly message after the booking. Additionally, place a booking reference number, i.e. #47612812.
Target User
- Non tech savvy users.
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.