Challenge Summary
Welcome to Seto - DSPA Responsive Mobile Design Storyboard
In this contest we need you to design a responsive mobile design of the client application, where a customer can submit a request for special pricing. Actually there are 8 pages that need to be designed in this contest.
At the end of this contest, the client is looking for a responsive, clean and easy to use mobile storyboard.
Round 1
Submission design for client review:
All page in Portrait Orientation (320 x 480 px 163 ppi)
- Notes: Any comments about your design for the Client
- Please number your files in the order they should be viewed (01,02,03,04,etc)
Round 2
Submission design for client review:
- All the screens in both orientation listed in the requirement and round 1 feedback included and implemented.
- Notes: Any comments about your design for the Client
- Please number your files in the order they should be viewed (01,02,03,04,etc)
Project Overview:
Seto - Debit Special Pricing Aggrement (DSPA) is an application where customer can submit a request for special pricing. The current version is not optimal on all mobile devices(specifically smart phones).
Primary Goal:
The goal of this contest is to design a mobile storyboard for Seto DSPA application. We will provide the document containing the client application flow (DSPA Mobile Re-Design.pdf). You need to use this document as your basic input in your design.
General Design Guidelines:
- We are focus to see this design in smartphone size, but please consider that this maybe will be develop to bigger size for tablets, so your design should be fluid and flexible.
- We prefer a responsive design. Responsive Design is a site that is designed in a way to interact and scale friendly with any size computer, tablet, or phone.
More info: http://en.wikipedia.org/wiki/Responsive_Web_Design
Examples: http://mediaqueri.es/
- Prefer HTML5 and Hybrid approach to the app instead of native applications.
reference: http://wiki.developerforce.com/page/Native,_HTML5,_or_Hybrid:_Understanding_Your_Mobile_Application_Development_Options
- We are looking for a fresh new user experience to provide a seamless navigation through the application on a mobile device.
- Althought this is current used on smart phones we want it to be responsive enough to be used on any mobile device(tablets included).
- Suggest us more better ideas and soulutions. No restrictions!
- Design icons or graphics to make your design stand out than others. All the graphics need to have the same feeling and look and feel on the entire storyboard.
- Please provide hover condition for buttons, links, or images in the storyboard to help us better understand in reviewing the storyboard.
- Provide any notes about your design or each elements to help us better understand the storyboard.
- Number your screens and put screen names in your submission file to help us easily reviewing.
Required Pages:
1. Landing Page
- see page 2 on the pdf.
- there is a pagination function under each table, we need you to design this to be more intuitive and easy to use. Suggest us some ideas.
2. Summary View Page
- see page 3 on the pdf
- User will see this page upon clicking the RFQ number on the landing page.
3. Search Page
- see page 4 on the pdf
- Suggest us a better ideas how to present this, the search results my show tons of data.
4. Create SPA Page - Step 1
- see page 5 on the pdf
5. Create SPA Page - Step 2
- see page 6 on the pdf
6. Create SPA Page - Step 3
- see page 7 on the pdf
7. Create SPA Page - Step 4
- see page 8 on the pdf
8. Validation Page
- see page 9 on the pdf
Notes: SOme of the page in the pdf maybe need some additional pages for you to design it in a mobile version. You may provide this by numbering your design (for example, 5a_Create_SPA_Page - Scrolling, or Modal_window etc)
Branding Guidelines:
- Size:
You need to design this storyboard in both orientation:
320 x 480 px (Portrait) - Required in Milestone
480 x 320 px (landscape) - Required in Final Round
163 ppi
(DO NOT USE ANY PHONE FRAME WORK IN YOUR DESIGN)
Logo: Use placeholder for logo at the top of your storyboard
Fonts: Open to the designer
Color:
Preferred Color - PMS - CMYK - HEX
Regular Teal - (PMS)321 - (CMYK)c=100 m=3 y=34 k=12 - (HEX)009999
Bright Teal - (PMS)3262 - (CMYK)c=81 m=0 y=36 k=0 - (HEX)00CCCC
Regular Slate - (PMS)431 - (CMYK)c=45 m=25 y=16 k=59 - (HEX)333333
Bright Slate - (PMS)429 - (CMYK)c=21 m=11 y=9 k=23 - (HEX)999999
Target Audience:
- Current SPA customer
- Potential Customer
Judging Criteria:
- The completeness of your storyboard
- User experience of the storyboard
- The quality of your design as well as following the provided guidelines.
- How well you follow the document and application flow or provides new idea about how the screen must looks.
Submissions & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPEG or PNG file in RGB color mode at 72dpi and place a screenshot of your submissions within it.
Submission File
All requested Contest Requirements stated above in PNG files.
IMPORTANT - If you are submitting "small updates or changes" with multiple submissions please include in your notes file what is different or changed - this can be confusing to the client sometimes when they can't tell what is different.
Source Files
All requested Contest Requirements stated above in PSD files.
Final Fixes
As part of the final fixes phase you may be asked to modify your storyboard.
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.