Challenge Summary
Welcome to the Hestia UX - Find Transactions Responsive Mobile Design Contest.
The goal of this contest is to update the existing "Find Transaction Search" design based on the provided requirements below and create new screens on how the page would break down into Responsive layouts for smaller devices.
Note: You are not redesiging the Desktop version - this contest is focused on the Mobile views.
Round 1
Initial Responsive page designs for Find Transactions
Order Screens
- Portrait: 320 x 444
- Landscape: 568 x 208
- Portrait: 720 x 720
Edit: Please capture the "scroll/length of the page"
- The important item in these screens is showing the design within these screen widths and how the page will scroll
Notes.jpg: Any comments about your design for the Client
Round 2
Final Designs - all requested updates and Responsive screens
1). Find Your Transactions Order Page Desktop Updates
2). Find Your Transactions Quote Page Desktop Updates
3). Find Your Transactions Order Page Mobile Screens
4). Find Your Transactions Quote Page Mobile Screens
Notes.jpg: Any comments about your design for the Client
Contest Details
Hestia is always looking to give their customers a better user experience by updating and enhancing the user experience (UX) of their existing websites and web applications. This time we would like you to update the "Find Your Transactions" page by designing the Mobile "Responsive" screen designs.
Click around the attached Prototype: (fol-prototype-find-an-order.zip) to get familiar with the "Find Transaction" pages and Use Hestia Style Guide to make sure you stick with the Hestia UX design theme.
- Use "Find-Transaction-Updates-Storyboard.zip" as base of design updates.
Contest Requirements
We first have some simple design updates
1). Find Your Transactions Order Page Simple Updates
Desktop, Mobile views
Prototype Page: fol-find-transactions/find_your_transactions_orders.html
Current Design: 01_order.png
- Add a NEW column in the end of table for “Total”. Example: $999,999,999.00
- Fix the labeling "Search By" dropdown to show default “Orders”. Also update the input label value to "Order".
- Remove "Credit" as a Status. (no longer used)
- Remove "Submitted" as a Status. (no longer used)
- When the customer mouses over a STATUS icon, need to show a definition of the status (a tooltip)
Example Tooltip: Draft Order: You have not submitted this order to Ferguson.
2). Find Your Transactions Quote Page Simple Updates
Desktop, Mobile views
Prototype Page: fol-find-transactions/find_your_transactions_quotes.html
Current Design: 02_quotes.png
- Add a NEW column in the end of table for “Total”. Example: $999,999,999.00
- Fix the "Search By" dropdown to show default “Quote”. Also update the input value to "Quote".
- When the customer mouses over the status icon, need show a definition of the status (a tooltip)
Example Tooltip: Draft Quote: You have not submitted this quote to Ferguson.
3). Responsive Design Mobile Screens
Mobile views
- After updating the tasks above, we need you to design the "mobile" responsive design view
- We are using 720 fluid as our breakpoint between Mobile and Desktop views
- Make sure design looks consistent with desktop version.
- You are allowed to design/remove things to make the design work better on the smaller screen (think mobile first and maybe we will update the Desktop design if needed)
- Research "Responsive Table design" and decide how you will handle the table of information (how will it break down and still be usable)
- Make sure your responsive design is possible to build/implement
- Link Reference for best practice Responsive Design
- We are looking for you to design the Find Transactions page to work "fluid" at a max of 720px and a min of 320px
Responsive Screen sizes we would like to see:
Order and Quote version
- Portrait: 320 x 444
- Landscape: 568 x 208
- Portrait: 720 x 720
Edit: Please capture the "scroll/length of the page"
- The important item in these screens is showing the design within these screen widths and how the page will scroll
IMPORTANT
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
Target User
- Current Customers
Judging Criteria
- How well you design the Responsive views for the Find Transaction Page.
- Cleanliness of your graphics and design
- User Experience
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
All Requested Contest Submission Requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD 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.
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.