Challenge Summary
Welcome to Pillar to Post – EZPost Wirefame Challenge!
The goal of the EZPost / e-commerce website is to facilitate the customer’s research on the home inspection process and options, and to sell customers on inspection package upgrades and added services, as well as making it easy for the customer to finally sign necessary VIAs/contracts and then either pay now or chose to pay on site.
You will be provided with current website screenshots for content reference ONLY!
Round 1
Submit your initial wireframe for checkpoint feedback:
1. Your initial wireframe.
- If you have time - Provide us with a click map for your design.
- 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 wireframe plus any checkpoint feedback:
1. Your final wireframe.
- If you have time - Provide us with a click map for your design.
- 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 goal of the EZPost / e-commerce website is to facilitate the customer’s research on the home inspection process and options, and to sell customers on inspection package upgrades and added services, as well as making it easy for the customer to finally sign necessary VIAs/contracts and then either pay now or chose to pay on site.
Currently package selection is on page 1 and then added services selections are on another page. We are by no means married to that format, should there be a more effective way to present the packages and added services, and better highlight the impact of the discounts that come with the added services based on a package upgrade.
We are looking for wireframe (Axure) solutions based on requirements below. We’re also looking to the community to come up with interesting ideas for the workflow. We need modern creative solutions that are proven to drive sales!
At the end of this wireframe challenge, we are looking to have a complete solution for the user experience and flow.
Wireframe Expectations:
- Produce HTML click through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The website must be very easy to use and intuitive. Keep that in mind when designing your solution.
- You MUST cover all screens mentioned in required sections below, if any requirement is missing in final submission the client will not look at it, so make a checklist for the required screens to make sure you designed all of them.
- Please show us your proposal as a movie or series of wireframes that communicate the user’s intended interaction with your proposed solution.
- You MUST use wireframes note pane in every single page you design to explain what items are addressed in that page from the documentation, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.
Notes:
- Your wireframe submissions need to be able to drill down for all page flow.
- Show your wireframe solution for:
-- Desktop view (width 1280px and height as required).
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.
Challenge Goals:
- Your design needs to be responsive; please consider that while designing the pages.
- The application needs to be very easy to use and self evident in navigation.
- Focus on the user experience of each page and make sure each page has a complete flow.
- Give importance to the overall layout and think about how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path, so we can see how the interactions fit together in the application.
- We need to indicate what packages and added services the customer currently has but this is not the main goal. The main goal is to educate on the further value of package upgrade or further added services.
- We are looking for a modern web looking feel, intuitive.
- Don’t just show a percentage of discount, also show how much money they would save when selecting a package.
- We are just showing checkboxes and savings but we are not showing the added services value. What is the added service doing for the client? Why he should go for it? We need to think of this as a sales tool as well.
-- Try to let the user read less for that purpose and see more as visual content (maybe a video, limited to 1 per package or added service).
- The client is not looking for a redesign of what they currently have, they are looking for your ideas and best practices to show the packages, added services, what the client saved and present this as a sales tool.
- We are looking for what works when it comes to sales.
- Avoid brochure like designs.
Things to Consider:
- The customer that is coming to this page has already purchased a package and possibly added services so there needs to be some type of indicator of what they currently have. Also it is very important to understand the workflow. A customer initially buys a package over the phone and then they receive an email with a link that will bring them to this page. The focus is on value / upgrades / added services but they aren’t starting from scratch.
- The customer can’t downgrade the package from the page. They can do this by calling but not through the site. However they can remove added services.
Supporting Documents:
- Screenshots (Screenshots.zip); content reference ONLY.
Required Functionality:
The quoting tool should contain the following functionalities:
1- Confirm/Upgrade Package:
- Please refer to screenshot Packages.png
- What we are trying to achieve here:
-- Ability to be able to present better educational material on the packages.
---- For example a short video overview for each of the three packages (the video at the top of the page is only there due to limitations of the current system, and not being able to put better content elsewhere in the page).
-- Improve the hover over (?) functionality (Please refer to Hover Over.png). Make this more intuitive, and with greater flexibility for the type of content that can be shown (text, pictures, embedded video, etc.).
2- Added Services:
- Please refer to screenshot Added Services - Part1.png & Added Services - Part2.png.
- What we are trying to achieve here:
-- Ability to be able to present better educational material on the added services. Again, this is a big opportunity to educate a customer why they might want an Added Service, what the inspector will do specifically on site for this service, and so on.
---- For example a short video overview, images and/or text content for each added service (only one of each file type per service).
-- Display the discounts more clearly to the customer - either in the row with each item, or more clearly at the bottom of the page.
-- The current text in teal stating “You have saved $18.75 today by selecting our Premium Package” is not visually striking and can be missed.
-- If a customer has selected one or more added services, but have selected Plus or Premium, give customer indication that if they were to “go back” and upgrade to the next package (Premium or Prestige) level they would get a discount of $__ on their added services.
Learn Axure:
New to Axure? Here are some quick tutorials to help you get started.
http://www.axure.com/learn
Target audience:
- People who have purchased home inspection services and are now confirming the order and being offered more value.
Judging Criteria:
- User Experience of the tool.
- Completeness and accuracy of the wireframe as defined in the spec requirements.
- How well your wireframes provide a consistent user flow.
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
Generated HTML files with all the requested contest requirements stated above.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.