Challenge Summary
Welcome to the DocuSign Responsive Design Challenge.
Our client, DocuSign, has a web-application which they provide on GitHub to anyone interested in it. This application runs in office lobbies and requires visitors to the office to sign in/sign out and sign a NDA.
The web-app runs inside a browser on an iPad2 in Portrait mode, but it could it could also be displayed on a desktop computer - so it needs to be responsive. We require you to do a “facelift” for this app, make it look Professional.
There are 12 screens that you need to use as a wireframe and rebuild the graphics and why not suggest how to improve the UX. Please see attached archive.
Round 1
Your submitted graphics for a client review.
For Round 1 we require 6 screens:
01 - Visitor Sign-in
02 - What is your reason for visiting?
04 - What is your email address?
08 - Admin console menu
09 - Change app settings
11 - Edit Visit Reasons
- 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 + implemented checkpoint feedback of all screens!
01 - Visitor Sign-in
02 - What is your reason for visiting?
03 - What is the name of your company?
04 - What is your email address?
05 - Welcome screen
06 - Log-out complete
07 - Admin console login
08 - Admin console menu
09 - Change app settings
10 - Sign-In/ Sign-Out History
11 - Edit Visit Reasons
12 - List of Hosts
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge description:
- The screens you will design will be displayed in a web-browser on an iPad in Portrait view, with the browser bar hidden.
- Please keep the content inside a 768px width (iPad width) and the height is up to you.
- Please keep all your graphics in vector/shape format.
- The logo needs to be visible throughout the screens, please find a nice way to display it. Logo is provided in StyleGuide.zip.
- Keep the design “lite“, avoid cluttering.
- The design needs to deal with the keyboard popping up on the tablet (so fields don’t get covered) – please think about this when designing.
Required Screens:
01 - Visitor Sign-in
- The company name will be customizable, as will the logo. Be sure the design has a nice way to display the logo.
02 - What is your reason for visiting?
- Reasons for visiting can be configured. These are examples. Be sure designs allow for scrolling.
03 - What is the name of your company?
- User will input the company’s name (mandatory) and his job title then he will be able to continue to the next step or go back.
04 - What is your email address?
- User will input his email address then he will be able to continue to the next step or go back.
05 - Welcome screen
If a user enters their name on page 1 and they are already signed in they get this screen. This logo will be customized by each customer.
06 - Log-out complete
- User is now logged out and can return to the sign-in page.
07 - Admin console login
- On this page the admin will be able to enter his password and login.
08 - Admin console menu
- This is the admin dashboard – from here he will be able to perform management tasks.
09 - Change app settings
- On this page the admin will be able to perform changes on company’s name, location and other fields.See img 09a and 09b in the attached files.
- We would appricate if you could come up with some UI/UX ideas to clean up the info here. Maybe some modal windows will work? Please show us your creative ideas!
10 - Sign-In/ Sign-Out History
- The admin will be able to see a log containing the sign-in/out history.
- Please provide 3-4 rows of dummy data.
11 - Edit Visit Reasons
- Admin will be able to view the visit reasons and edit/delete them.
- Would be good if you can show the client a modal window for the "Add new reason" where the user can enter the data found at the head of the table in 11.png.
12 - List of Hosts
- The admin will search through the list of hosts or upload a csv file containing that info.
Branding Guidelines
- Please review the StyleGuide.zip provided.
Target User
- Users of open source lobby app.
Judging Criteria
- Cleanliness of your graphics and design.
- Design need look simple and professional.
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
Your graphics as JPG or PNG 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.
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.