Challenge Summary
Welcome to "Window Popup Checkout Process Design Concepts Challenge". In this challenge, we need Topcoder community help to create the look and feel for our window/popup checkout process, a purchase flow where "buyers" are directed to purchase an item on sale. We need to create the checkout process window with all the possible interactions.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
01) Mobile Checkout General Screen
02) Mobile Checkout Variation Screens:
- Multistep Checkout, Personal details
- Multistep Checkout, Cart Turned Off
- Short Checkout, Personal Details Field Enabled
- Expanded Cart View
Desktop
01) Desktop Checkout General Screen
02) Desktop Checkout Variation Screens:
- Simple Checkout
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
01) Mobile Checkout General Screen
02) Mobile Checkout Variation Screens
- Multistep Checkout, Personal details
- Multistep Checkout, Cart Turned Off
- Short Checkout, Personal Details Field Enabled
- Expanded Cart View
- US Tax Screens
- Shipping & Billing Addresses
- Payment Method Selection
- Credit Card Flow
- Short Checkout, Address Not required
- Country and Language Selector
- Completion States:
-- Successful order without product details
-- Successful order with product details
-- Successful order with product details, one expanded
-- Successful order paid with bank wire transfer
-- Order is pending approval
-- Failures
03) Mobile Checkout UI Kit Screen
Desktop
01) Desktop Checkout General Screen
02) Desktop Checkout Variation Screens
- Simple Checkout
- Cart Checkout
- Order Completion Rate
- Country and Language Selector
03) Desktop Checkout UI Kit Screen
- As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Our Sellers (seller is a company or an individual which sells something online) are provided with an easy way to sell their digital (and sometimes tangible) goods and services by accepting variety of payment methods – including immediate (credit cards, paypal), cash based (Kanbini, Boleto) or "pay over time".
All payment related features will be managed through our services so that sellers can concentrate on creating value for their buyers while we handle all the "boring payment stuff", such as:
We provide lots of features for sellers but those mentioned above are critical to understanding for the purposes of this project.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Mobile01) Mobile Checkout General Screen
02) Mobile Checkout Variation Screens:
- Multistep Checkout, Personal details
- Multistep Checkout, Cart Turned Off
- Short Checkout, Personal Details Field Enabled
- Expanded Cart View
Desktop
01) Desktop Checkout General Screen
02) Desktop Checkout Variation Screens:
- Simple Checkout
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Mobile01) Mobile Checkout General Screen
02) Mobile Checkout Variation Screens
- Multistep Checkout, Personal details
- Multistep Checkout, Cart Turned Off
- Short Checkout, Personal Details Field Enabled
- Expanded Cart View
- US Tax Screens
- Shipping & Billing Addresses
- Payment Method Selection
- Credit Card Flow
- Short Checkout, Address Not required
- Country and Language Selector
- Completion States:
-- Successful order without product details
-- Successful order with product details
-- Successful order with product details, one expanded
-- Successful order paid with bank wire transfer
-- Order is pending approval
-- Failures
03) Mobile Checkout UI Kit Screen
Desktop
01) Desktop Checkout General Screen
02) Desktop Checkout Variation Screens
- Simple Checkout
- Cart Checkout
- Order Completion Rate
- Country and Language Selector
03) Desktop Checkout UI Kit Screen
- As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
Our company enable global subscriptions & payments for online, mobile, and in-app experiences. If you sell software, content, or apps online, our full-stack digital commerce platform is built for you.
Our Sellers (seller is a company or an individual which sells something online) are provided with an easy way to sell their digital (and sometimes tangible) goods and services by accepting variety of payment methods – including immediate (credit cards, paypal), cash based (Kanbini, Boleto) or "pay over time".
All payment related features will be managed through our services so that sellers can concentrate on creating value for their buyers while we handle all the "boring payment stuff", such as:
- Payment process (accepting credit card information and processing payment, allowing to checkout with PayPal etc). Sellers do not need to take care of their own merchant accounts, we do that.
- Compliance (Terms of Sale, Privacy Policy and additional check out requirements per country).
- Tax (collecting all applicable taxes and paying them on seller's behalf). Sellers do not need to register with all tax authorities and handle taxes.
- License generation and fulfillment.
We provide lots of features for sellers but those mentioned above are critical to understanding for the purposes of this project.
Challenge Goals
- Create a production/development-ready UI design of all checkout steps in all stages according to the UX wireframes.
- Create Style guide which describes all elements of the UI and usage guidelines – we need to provide all the information to developers about the intended use of elements. We add new elements and layout options on a regular basis and we'd like to make sure that new elements can be added based on the existing guidelines.
Design Considerations
- UI/UX Best Practice for the Checkout Window Features!
- Your design creation needs to be Responsive. We switch to desktop "on the fly" using the same code as screen size increases.
- The interface will be easy and intuitive to navigate
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the checkout flow
- How good your UI Design to be implemented in responsive framework such as Bootstrap, Material. Please account for framework specifics (grid, standard elements, etc)
- We provides sellers with customization options for our checkout. Sellers can easily customize elements like logos, colors, border radius, fonts etc.
- Please provide various "styles" of the UI to make sure that the UI looks acceptable and professional when customized.
- As part of the delivery please provide suggestions for "options" – fonts we should offer as options, range of customizable elements etc. For example if your UI assumes both round and square corners please provide acceptable radius range.
Notes
- As part of this challenge you will received complete Documentations (Popup UI.pdf and Wireframes from previous challenge) about our checkout flow.
- Important: We are open to improvements to the UX as well if your suggestions are valid and reflective of our goals. If your UI requires adjustments to the layout we are happy to discuss and consider.
- For example: On the desktop version of the popup, the company name is located in the top bar which makes sense for a company name. However, if the checkout is for the ‘product’, then the product will fit better into the body of the popup closer to the product price.
Target Devices
- Your design creation needs to be Responsive.
- We switch to desktop "on the fly" using the same code as screen size increases.
- Desktop: Our desktop users are often as narrow as 1000px so we'd prefer to stick to the grid's standard width of 960px for Desktop
- Mobile: 375px width with height adjusted accordingly
Branding Guidelines
- Modern Crisp look and feel adhering to our standards.
- Follow our site https://fastspring.com/ as your starting point for Branding Guidelines Document for design style, font and colors.
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
Screen Requirements
- For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
- Please refer to Popup UI.pdf and the wireframes to get more information about the detail requirements.
Mobile Checkout
01) Mobile Checkout General Screen
Please refer to Popup UI.pdf, Page 1 to 6
- Please provide the general design of checkout flow for mobile devices (default view).
- This screen will become design base for all screen variation needed on Mobile.
- The following design elements and features mentioned below are important aspects of the checkout flow and should be considered as main priority when design the UI for all screens.
- Here are the features that needs to be consider:
-- Security, it is a very important aspect of online transactions and we must always remind our buyers that their transaction is secure. For mobile checkout layout we put a "secure checkout by fastspring" line to make buyers feel secure.
---- Checkout title options, sellers have multiple options when it comes to the checkout title: Static (predefined) checkout name
---- Title of the product(s) in the cart
---- Sometimes icons are provided and sometimes are not. Please show the state when multiple products are in the cart and reflect multiple icons overlaying each other.
-- Checkout summary, provides order total, tax summary and recurring billing summary for the order.
-- Tax: US sales tax, VAT, GST and other types
-- Personal Details Fields, Based on checkout settings buyers might see different sets of fields for personal information. Mind that "Continue" and "Pay" buttons are always "fixed" at the bottom of the screen.
-- Cart view, We are not sure that the suggested quantity display will accommodate cases with random product icons. Please show options or suggest a different way of displaying them.
-- Payment method selection, when Apple Pay is available it is shown and offered by default. Buyer can click "other payment methods: to choose another option. Apple Pay has very strict UI guidelines for their buttons, please stick to them. Otherwise a set of payment options is presented and buyer chooses one of those. For payment methods make sure to visually identify "primary" payment methods (credit card, paypal, amazon) and "secondary" (everything else). For example, primary. can be identified by button colors and pictograms.
02) Mobile Checkout Variation Screens
Please refer to Popup UI.pdf, Page 6 to 26
- Multi-step checkout, personal details (Minicart -> 1.Details_ No Company-Phone.jpg)
- Multi step checkout with cart turned off. In this case "coupon" link is available instead of the cart "Details" link. Multiple screens show different states of coupon fields (Static Text Cart -> 1.No Product Image.jpg, 2.Product Image Given.jpg, 5.Coupon Code Applied.jpg)
- Short checkout with more "personal details" fields enabled. Sellers can choose to collect more information from buyers (Minicart -> 4.Details_ All.jpg)
- Expanded "cart" view. On the right – expanded cart view with VAT field shown (Minicart -> 5.Cart Shown.jpg, 6.Enter Vat ID outside Cart.jpg, 7.Enter Vat ID.jpg)
- US Tax screens (Minicart -> 8.Cart Shown US Tax.jpg, 9.US Tax.jpg)
- Depending on the checkout context buyers might need to provide Shipping & Billing addresses, Billing only, or no address at all (Minicart -> 12.Shipping Address.jpg, 14.Billing Address.jpg, 15.User Details + Shipping Address Open.jpg)
- Payment method selection screens (Minicart -> 16.Apple Pay.jpg, 17.Apple Pay Others Shown.jpg, 18.Select Payment.jpg)
- Credit card flow (Minicart -> 19.Credit Card.jpg to 24.Credit Card Details Incorrect.jpg)
- "Short" checkout – when address is not required sellers can choose "short" checkout – all required fields are on the same screen (Minicart -> 27.Short Checkout Apple Pay.jpg, 28.Short Checkout All Methods.jpg, 29.Short Checkout Credit Card.jpg)
- Country and language selector states (Language-Country Selection folder)
- Various order completion states:
-- Successful order without product details (Success-Failure -> 1.Success No Product List.jpg)
-- Successful order with product details (Success-Failure -> 2.Success.jpg)
-- Successful order with product details, one expanded (Success-Failure -> 3.Success Product Open.jpg)
-- Successful order paid with bank wire transfer (Success-Failure -> 4.Wire Transfer.jpg)
-- Order is pending approval (Success-Failure -> 5.Purchase Order.jpg)
-- Failures (Success-Failure -> 6.Failure.jpg)
03) Mobile UI Kit Screen
- Since this window popup checkout will be customizable, we need you to create UI Kit so our user can customize their window popup easily.
- We need you to provide the following UI Kit elements:
-- Colors (Main, Secondary, etc)
-- Form elements (Input text, Selectbox/Drop Down, Radio box, etc)
-- Icons (All icons used in this checkout flow)
-- Typography (Main font, Secondary font, title, colors, paragraph settings, etc)
-- Etc
Desktop Checkout
- Since "Desktop" and "mobile" are simply two states of the same responsive layout it should also look/behave differently if "cart" is turned on or off. There obviously are a lot of similarities between desktop and mobile version.
- Desktop checkout appears as an "overlay" on top of the seller's website and it's semi-transparent.
01) Desktop Checkout General Screen
- Please provide the general design of checkout flow for desktop (default view). This screen will become design base for all screen variation needed on Desktop.
- The following design elements and features mentioned below are important aspects of the checkout flow and should be considered as main priority when design the UI for all screens.
- Here are the features that needs to be consider:
-- "Simple" checkout – cart is turned off.
-- "Cart" checkout
-- Headers (Please refer to docs)
02) Desktop Checkout Variation Screens
A. Simple Checkout
- Refer to Micro Checkout -> 3.Total on Top.jpg to 14.Failure.jpg
- Most frequent checkout case – subscription product, total, bare minimum data. In this case Seller starts with Credit Card as a payment option.
- Apple Pay availability is detected and sellers start with Apple Pay as a payment method.
- After clicking "other payment methods" on Apple Pay screen seller is presented with other options.
- Same considerations apply as for mobile
- VAT and US Tax views with expanded fields. Again, same logic applies as on mobile.
- CVV hint popup.
- Error states
B. Cart Checkout
Refer to Order Summary on Left (requirement for finalfix) and Order Summary on Right folder
- The layout is "modular" – the only difference from the "simple" checkout is the cart column – all elements are otherwise the same.
- Please show the option with the cart column on the left (Order Summary on Left folder) and on the right (Order Summary on Right folder)
- Common view – cart checkout with a few products and credit card pre-selected as a payment method. As mentioned above, the left column here is shared with the "simple" checkout so all elements/sizes etc apply. (Order Summary on Right folder ->1.Checkout Landing.jpg)
- When dropdown is shown it must follow the same logic as outlined above for multiple payment method selection. Some payment methods are more common/important.
- VAT ID and US ZIP code for tax inputs shown (Order Summary on Right folder -> 3.Dropdown Out.jpg, 4.Enter VAT.jpg, 5.Enter US Tax ID.jpg)
- When address is required checkout becomes 2-step – buyer data on the first step and payment details on the second step (Order Summary on Right folder -> 6.Address Input.jpg to 9.Address + Details Given.jpg)
- There's some discrepancy in how section titles are displayed on desktop and mobile (for example, address has 2 titles on mobile and 1 title on desktop) and we'd like to align to the way desktop sections are named (so billing address and shipping address become 2 visual sections, not 1 as it currently is on mobile)
- CVV popup
- Credit card error states
C. Order completion state
Refer to “Success-Failure Post Checkout” folder
- Seller has chosen to not show product details on the order completion page
- Regular order completion screens
- Order is made with Wire Transfer as a payment option
- Order is made with the Purchase Order
D. Country and language selectors
Check “Country-Language Selection” folder
- Before made any order, the customer needs to select their country and language first.
03) Desktop UI Kit Screen
- Since this window popup checkout will be customizable, we need you to create UI Kit so our user can customize their window popup easily.
- We need you to provide the following UI Kit elements:
-- Colors (Main, Secondary, etc)
-- Form elements (Input text, Selectbox, Radio box, etc)
-- Icons (All icons used in the checkout flow)
-- Typography (Main font, Secondary font, title, colors, paragraph settings, etc)
-- Etc
Important:
- DO NOT JUST COPY the wireframes, treat it as your references and improve the UI/UX.
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your marvelapp request to fajar.mln@gmail.com
- You MUST include your Marvel App URL (in your marvelapp prototype, click on share and then copy the link & share it within your notes/comment this link while you upload).
Documentations
- Popup UI.pdf (Main Requirements, Information inside this doc will overlay existing content on the wireframes)
- Wireframes (for references)
- Client Logo (Branding Purpose)
Target Audience
- Our users are very diverse – given that our sellers sell goods for all audiences, we serve "everyone", including Consumer Buyers and Business Buyers.
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
- Submit JPG/PNG image files based on Challenge submission requirements stated above.
- Marvel App link for review and to provide feedback
Source Files
All source files of all graphics created in Sketch, Adobe Photoshop, or Illustrator and saved as editable layers.
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.