hmv Digital is an entertainment company from the UK that provides music, films and games for consumers. With the hmvPlayer, users can discover new bands, artists, album and tracks, read about the latest films, stay up to date on entertainment news and watch exclusive interviews with the people behind the music, film and games they love.
hmv approached me looking to expand the functionality of their native Mac OSX hmv Player and create an E-commerce checkout experience using the 7Digital API. They were looking to create a simple way for customers to purchase songs from their player with a seamlessly integrated checkout app.
hmv Digital had an existing brand style guide that helped to guide the checkout design, but they still needed new components that were specific to a new flow. They also needed a self-contained iFrame that could be embedded into their native Mac OSX App. Along with understanding the needs of the front-end design, I spent a good amount of time studying the 7Digital API and took advantage of the Node.js SDK. We decided to use the API's main services:
- Catalogue (searching the desired tracks and releases)
- User Management (to register/login users)
- Locker (checking a user’s existing locker for items already purchased)
- Card Management (adding/removing new credit cards)
- Purchasing (charging through 7Digital accounts)
Along with utilizing the API functionality, hmv needed localization support for purchasing being done in the UK, Ireland, and Canada. We learned that this could be handled through a specific `shopid` that was registered directly with 7Digital for store accounts.
Designing the Checkout Experience
Within the player, users needed the ability to click a “buy” button on a track or release, and open a popup to navigate through entire checkout flow, make a purchase, and close the popup. Considering there was a similar checkout flow for 7Digital’s own store, we decided to start with that and iterate on the experience as needed. Upon selecting a track or release the popup would pre-populate the item information.
The checkout experience had 3 main screens:
- Add/Choose Credit Card
Full-stack Web App
Along with utilizing the 7Digital Node.js client for API endpoints, the front-end web application was created using Angular on top of an express app. With this set up, routing was handled on the client and could be served by the express server next to an REST API that would proxy 7Digital requests and handle session management.
When a user selected a track for purchase in the hmv Player Mac application, they would trigger the popup which passed in the song ID. With this ID, we used the Catalogue API to search for that specific track or release and cached the results in a session for easy access.
With the User Management API, we could easily handle registration and login to 7Digital. When users logged into their 7Digital account, they were advanced to a checkout screen where they could enter their credit card and finalize the purchase. For this functionality, we used the Card Management API which allowed us to either register a new localized card in compliance with the shopid passed from the URL for specific countries (UK, Ireland, Canada) or proceed with their existing card on 7Digital.
With the Purchasing API we could charge their card for the item and it would update their locker in 7Digital. Also, with a user logged in, we could easily access their 7Digital locker to check if the release already existed. If they had the track, we would just send them to the confirmation page. Otherwise, we would take them to the pay route, where they could add/choose a credit card.
After they confirmed the purchase, they were taken to a confirmation screen. At first we allowed them to download the track directly from this screen but decided that they should instead stay within the app and view their downloads from the track list section. When they got to the last screen we showed simple listening instructions and an Ad to finish their experience.