Challenge Summary
Welcome to the FAST!! Hestia UX Design - "Find Transaction" New Design Concepts. The goal of this contest is to design and update the Hestia "Find Transaction" page with NEW user experience updates based on the customer feedback we received.
We are open to the creativity of the TopCoder Studio community to help problem solve for us!
This is FAST!! milestone - get your submissions in soon!
Round 1
Your submitted design concepts for a Milestone review.
- Updated "Find Transaction" pages
Notes.jpg: Any comments about your design for the Client
Round 2
Final Design
- "Find Transaction" pages
- Any Milestone feedback from Round 1
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. Hestia recently did customer user testing of their "Find Transaction" page design and they are now looking to make usability and user experience improvements to the page based on the feedback they received.
Before you start, review the attached Prototype (find-transaction-prototype.zip).
- Start with "find_your_transactions_orders.html"
- This is the current design that was "user tested"
- You can use "find-transaction-storyboard.zip" as the base of your design updates.
"Find Transaction" User Experience Design Updates
Note: We are looking for you to improve the user experience of "Find Transactions". You can try NEW graphic design elements to try and improve the overall page experience.
1). Search and Refinement Tools
Design Problem: We observed a disconnect for the customer between the labels and inputs, when reading the page they literally read from left to right, so, we are trying to simplify that flow. We are open to any new ideas! Any design suggestions??
See the attached mockup for client suggestions on the search and refinement tools
Screenshot: Transaction-Idea5.jpg and Transaction-Idea6.jpg
- Attached screenshots are ony "sketches/ideas" - you need to provide better graphic design
- Note the different labels and text describing what the results show
- Customers didn't understand the "Quick Search" feature - you can remove this
- Update the "Narrow Result" label to "Search By"
- Note the different labels and text describing what the results show.
2) Page Layout
Design Problem: All customers looked first at the data table and had to be verbally led to the search and refinement tools. Customers were not understanding that they could "refine" their results by using the search and refinement tools.
Screenshot: Transaction-Idea5.jpg and Transaction-Idea6.jpg
- Attached screenshots are ony "sketches/ideas" - you need to provide better graphic design
- We are open to any new design/ux suggestion.
- We think the style/color of the data table header should change - the dark blue is too eye-catching.
- The yellow background for the spinner may be too eye-catching as well, focusing attention on that part of the page. Can we try it with white page background or what works with this page design?
- The provided sketches have some suggestions but we are looking for you to think about this and try some new design concepts.
3) Order/Quotes Tabs
Design Problem: Customers didn't reailze they were on the "Order" tab. They had to be told to change to the "Quote" tab.
- We are looking for design concepts on how to make the Quotes/Orders tabs more noticeable.
- How does the tab design work with the Search and Refinement tools?
- What can be done to unify the tab with its tools as one area where I can manipulate the inputs and results?
4) Back to Results
Design Problem: This is a problem spot for customers on the live site. They don’t see it and the browser back button leads to “page expired.” Or they start over in the site menu.
Screenshot: Backto Results.png
- Add “Back to Results” link under the breadcrumb trail.
5) Search Results
Design Problem: Customers were not sure what the "423 Results" meant or that it referred to a specified month.
- Clarify what the results are showing: “423 results for January 2013”
- Suggest to us how the results wording/ui element should look - what makes sense to you? What would make sense to the customer?
6) Miscellaneous Updates
- Order Tab: Add new column for “Date Ordered”
- Quotes Tab: Do not show “Submitted” as a status. The only statuses for "Quotes" are Draft and Quote.
- Quotes Tab: Need change column heading from “Req Date” to “Expiration Date”
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.
- Note: You can deviate from the Hestia Theme - you can introduce new design elements (if they make sense/improve the user experience)
Target User
- Potential Customers
- Current Customers
Judging Criteria
- How well you update and improve the "Find Transaction" page
- Cleanliness of your graphics and design
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.
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.