Challenge Summary
Welcome to the AGUSTSO Responsive Form Design Concepts Challenge. For this challenge AGUSTSO is looking for your creativity and ideas to redesign an existing customer facing form application.
Round 1
Initial Design Concepts for checkpoint review
01: Short Form - phone
02: Long Form - phone
03: Short Form - tablet
04: Long Form - tablet
Any additional screens you need to explain your design
Round 2
Final Design Concepts plus any checkpoint feedback and updates
01: Short Form - phone
02: Long Form - phone
03: Short Form - tablet
04: Long Form - tablet
Any additional screens you need to explain your design
AGUSTSO is an international engineering and environmental consulting firm specializing in full-service solutions in the fields of environment, infrastructure, urban planning and water.
For this challenge, we are looking for you to redesign the mobile user interface using responsive techniques for mobile and tablet devices. The application is a simple form where a user opens, enters data, answers questions, and saves. The form questions and layout are completely customizable when being created by an Admin and can vary greatly from one Customer to another.
The forms consist of any combination of:
- Text
- Picklists
- Numeric
- Date fields
as well as section breaks (as shown in the long form example).
Design Problem
Our current application is developed using Sencha Touch which provides a templated user interface and style. Many companies using Sencha, including our application, use this default styling which doesn’t help the design of our app stand out and doesn’t create a lasting experience with our Customers.
The design needs a refreshed, modern, and simple look and feel instead of using the default design.
Existing Sencha Touch Examples
http://docs.sencha.com/touch/2.3.1/#!/example/forms
Challenge Design Goals
The goal of this challenges is to focus on a NEW look and feel/user interface for the application. We want a memorable and aesthetically pleasing design but most importantly it needs to be friendly and easy to use.
- We are not looking for wacky and hard to build custom forms - we are looking for a better user experience!
Overall Design Requirements
- This should be designed for both mobile (320px width) and tablet (768 width). Design should be flexible and responsive for both devices.
- We are going Mobile first so our touch points need to be large enough so the users do not struggle
- Simple/fresh/clean layout
- The forms are already fairly simple, what can we do to make them even easier so the user doesn’t have to think
- Think about how the forums will be used (do they stay in a scroll or is it easier to do them wizard style?)
- Good contrast between the fonts and background - Again, mobile, make sure fonts are large enough to see
- Examples show the ability to Save, Clear, Send, Attach, Logout. We need all of these options.
- Right now all of the buttons carry the same weight, how can we call out the Send button/action so it’s the most prominent.
- Create hierarchy with the buttons (smaller for less important)(less prominent placement for less important)
- Design the section headers (long example) so there is a clear break in the form and the user understands it’s a header.
- An easy way to access the buttons/calls to action at any point throughout the form (especially for the longer form)
Required Screens
01: Short Form - phone
02: Long Form - phone
01 and 02 Phone Screens - 320px width. Design the form in a way that it’s easy to see on a smartphone. Be aware of the size of elements for touch points
03: Short Form - tablet
04: Long Form - tablet
03 and 04 Tablet Screens - 768px width. We have more room to work with here on tablet but make sure it’s easy to read and nagivate. Be aware of the size of elements for touch points
Supporting Documents
- ShortForm.jpg
- LongForm.jpg
- AnteaGroupLogo.gif
- AnteaGroupBrandStandardsManual.pdf
Judging Criteria
- As mentioned above, a simple/clean/fresh/modern design
- How well did you execute and design the new forms
- Cleanliness of your graphics and design
- Is it easy to use on a mobile device (size of buttons/links/spacing)
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024 x 1024 JPG or PNG file in RGB color mode at 72dpi and plac ea screenshot of your submission in it.
Submission File
Please uplaod PNG images in a ZIP file with all requested contest requirements states above. Number your files (01, 02, 03, etc) in order. This will help when reviewing with the client.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
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.