Challenge Summary
Welcome to Online Payments Assistance Wireframe Challenge. In this challenge, we are looking to build a website feature that enables users to save their card details with an online payment assistant that manages their payments across all their subscriptions services or websites where they make regular purchases.
We are looking for wireframe solutions based on requirements below. We’re also looking to the community to come up with interesting ideas for the workflow - we’re absolutely open to creative solutions!
At the end of this challenge, we are looking to see intuitive and easy to use "wireframe concepts" that will help us design and build UI/UX in the next phase of this project!
Be creative in your wireframes!
Round 1
Submit your wireframe for checkpoint review..
- Desktop Screens
Any comments about your wireframe, make sure all pages have correct flow!
Round 2
Final wireframe + any checkpoint feedback implemented!
- Desktop and Mobile Screens
Any comments about your wireframe, make sure all pages have correct flow!
The purpose of this challenge is to come up with wireframes for a responsive application, we will need you to create screens for mobile and desktop.
There are all these places online that have user’s card details: Netflix, Spotify, Amazon, Sky, Uber... and each time a user signs up for a new service, they get their card out, add and verify their details and then finally get to sign up and use it. Not to mention that if they lose their card, or maybe switch banks, they have to do it all over again: that's their Netflix account locked until they’ve updated their card details in the account.
Introducing the online payments assistant:
- The assistant provides the user’s card details to all of the subscription services they tell us to share it with, so there’s no need to get their card out to sign up.
- If the user’s card number changes, the online assistant will let the subscription services know, so they can keep using their services just like before.
- And if the user wants to cancel a service, all they have to do is let the online assistant know and they’ll cancel it on their behalf.
Wireframe Guidelines:
- Provide us with your interaction and click-path thoughts and suggestions.
- 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 you create your solution for the layout and flow information.
- You MUST cover all requirements mentioned in challenge details below.
Notes:
- Your solution need use responsive design solution.
- Your wireframe submissions need to be able to drill down for all page flow.
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.
Screen Sizes:
- Show your wireframe solution for Desktop view (width 1280px and height as required).
- Show your wireframe solution on Mobile Portrait View, use this screen size (375px x 663 px)
Required Features:
Below are some of the features/flow required in this application, but you are not limited to this, we are open to flows and suggestions on how things could work - so feel free to expand and suggest to us what would be best for this type of application!
Think of how you can integrate this online payments assistance within the context of a financial services company or credit card account management. We need three distinct flows to be designed…
Based on these user-flows, we look forward to your help in coming up with the screens/flow required for this application.
Online Assistant Account Set up/Sign up:
Allowing credit card provider to manage subscriptions and share credit card details on behalf of user. Let’s take netflix, amazon, HBO as examples.
- Step 1: Credit Card holder opt into the online assistant service.
- Step 2: They set up subscriptions where user wants online assistant to help manage card details. If the service isn’t listed within a pre-populated list, user can add a subscription.
- Step 3: Confirmation online assistant service set up.
Update credit card details across subscriptions:
Online assistant proactively reaching out to the user to notify them that their card details have changed, and request confirmation that user would like to update card details across all subscription services
- Step 1: Email or push notification asking user to state whether happy for card details to be updated.
- Step 2: If yes, Credit card provider would notify subscription services on behalf of the user so as to avoid service disruptions.
- - Step 2a: Confirmation online assistant service has sent request to update the card details.
- - Step 2b: Confirmation card details have been updated and registered by subscription provider.[1] [2]
- Step 3: If no, card users chooses to manage subscription(s) directly
Cancel one subscription service:
User wants to cancel a subscription
- Step 1: User to cancel subscription with Netflix, by going into the online assistant and requesting that online assistant remove their Netflix subscription.
- Step 2: Online assistant removes subscription.
- Step 3: Confirmation online assistant service has removed subscription with Netflix.
Learn Axure:
New to Axure? Here are some quick tutorials to help you get started.
http://www.axure.com/learn
Target Audience:
- Credit Card Holders
Judging Criteria:
Your submission will be judged on the following criteria:
- User Experience.
- Completeness and accuracy of the wireframe.
- How well your wireframes provide a consistent user flow.
- Any suggestions, interactions and user flow you recommend (provide any notes or comments for the client).
Submission & Source Files:
Preview Image
Create your preview image as one (1) 1024x1024 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.