Create & Checkout Process
Improving the way users subscribe and create a Boston Globe account
Checkout Redesign & Optimization
For many eCommerce sites, the shopping cart or the registration checkout is where transactions go to die.
The registration or checkout process is one of the crucial parts of an application. It is the first thing users do after downloading, exploring the application, and deciding to become a permanent member or purchase an item. When the process fails to be smooth or is not similar to other applications the users already use, the users tend to get easily frustrated and might not proceed further with the application.
Moreover, the user’s impression of the application will be based on how easy and smooth the registration or checkout flow is.
PROJECT TYPE
Solo Design Sprint
ROLE
UX UI Designer | Researcher
Duration
1.5 Weeks (8 days) Sprint
PRODUCT
Mobile First Design | Desktop
For this project, I employed the double diamond process as a method for design thinking. This process is divided into four distinct stages: Discovery, Define, Develop, and Deliver
The Discovery stage is focused on researching and understanding the problem at hand, gathering information, and identifying the users' needs and wants.
The Define stage defines the problem more clearly, and possible solutions are conceptualized.
The solutions are prototyped and tested in the development stage, and the best one is chosen.
Finally, the solution is implemented and delivered to the intended audience in the delivery stage.
DAY 1
The Challenge
I was tasked with improving and proposing a design for one of The Boston Globe's crucial functionalities: the signup/subscription flow for our loyal readers. My goal was to create a seamless process that balances informative information regarding subscribing and consistency with the Boston Globe brand.
My Role
I was the sole UX UI Designer and researcher. I analyzed our datas, conduct additional research if needed, map out an appropriate user flow, and design an MVP prototype that is consistent with our branding.
Timeline & Planning
Day 1 - Understanding The Brief & Define the Problem
Day 2,3,4 - UX Research
Day 5,6 - Design
Day 7,8 - Test, Feedback & Iteration
Design Process
The Problem
Understanding The Brief
Research and More Research
The current subscription process lacks essential elements and information for a smooth subscription ( checkout) flow. The design is outdated, cumbersome, and overly complicated for users, leading to a longer average time spent on the page and a high abandonment rate. Our mobile performance is also below industry averages due to a complicated mobile design that leaves users feeling lost.
Nonetheless, my brief contained specific information for our subscription checkout flow, regardless of my design. These were:
Order Summary ( stating the total amount and, most importantly, the type of subscription)
Allowing a user to return to the previous page
Provide users with detailed subscription benefits
Donation to the Boston Globe section
Once I understood the problem, the goal, and the general request, I immediately started my research to better understand our user’s problem and the top issues to focus on as I designed the flow and user interface.
DAY 2 - 4
Research Overview
First, I researched to determine what makes a checkout or, in our case, a subscription process great. This study presents findings and recommendations for the Boston Globe User Feedback Study:
Product Under Testing: www.bostonglobe.com
Methodology: Remote unmoderated survey
Participants: 10 participants, a mix of mobile and desktop and a mix of backgrounds with subscriptions
Study Goal
The goal is to be able to give feedback on the checkout process. How does this checkout process compare to those who subscribe to other services (across media, streaming, news, grocery delivery, etc.)? Are there pain points for those who don’t frequently subscribe?
Participant Experience
I asked 10 participants to review the landing page and complete the checkout flow in my research study. My summary findings were as follows:
Study Results
For my participants, the study included a variety of subscriptions and news services. The findings were as follows:
For the landing page, the findings were as followed:
For my participants creating an account, my results were as followed:
For my participants inputting their payment method, my results were as followed:
In the final process, my results were as followed:
After conducting my studies, my participant’s top issues and recommendations were the following:
Top Issues:
Participants wanted to see the details of payment after the trial - High
Other forms of payment options like PayPal, Google Pay, Apple Pay, and Venmo were requested - High
Account creation looked like a typical “sign-in” page, which led the participant to think they needed to have an account - High
One participant mentioned the site was asking for too much data for a digital subscription; she did not want to share her phone number and address - Medium
Many did not feel inclined to donate to a for-profit organization - LOW
Some mentioned they may donate later after seeing value in the subscription - LOW
Top Recommendations:
Clarify the payment process after the trial period.
Consider offering additional payment options.
Explore how to differentiate account creation from log-in.
Consider asking for a donation after the new subscriber has enjoyed their subscription for a bit.
Consider highlighting what donations will help with.
I also found that it's all about trust and speed. A fast and trustworthy checkout reduces customer doubts, leading to more successful payments. While things need to be quick and reliable, every single step also needs to be carefully planned to minimize errors, confusion, and uncertainty for the end user.
APPENDIX
The age range of the 10 participants who completed my study was 25 - 55.
2 Participants: were in the range of 25 - 34
3 Participants were in the age range of 35 - 44
1 Participants were in the age range of 45 - 54
4 Participants were in the age range of 55+
Below are more information about my participants:
Methodology
Remote unmoderated testing
Participants complete tasks and answer questions about the ease of use, confidence, likelihood of future use, etc. They do so in their environment, using their own devices. Participants follow a carefully crafted script that has been agreed upon by The Boston Globe.
Remote unmoderated testing
Participants were recruited to mirror the target user groups and are, according to the recruitment profile details.
Participants
DAY 5, 6
High- fidelity & Prototyping
Participants Reinventing the wheel
After thorough research, I began the drill. Every step, every screen was thought through and had an insight to back up the changes.
DAY 7 & 8
Test, Feedback & Iteration
Test For Outcomes
Upon completion, I conducted an A/B test involving my 10 participants. After two weeks, the results revealed that the subscription checkout led to a 4.5% increase in the success rate and a 3% decrease in payment abandonment. Furthermore, 4 out of 10 participants donated to the Boston Globe, whereas only 1 out of 10 users donated after completing their payment. These exceptional results surpassed my initial projections, leaving everyone thrilled!
What Aided These Gains
Mobile-first experience
With 80% of transactions on mobile, we designed a mobile-first interface.
We optimized for touch, made key buttons thumb-friendly, and ensured input forms worked smoothly with the mobile keyboard open.
Clear context settings
The subscription checkout had a straightforward interface, a good balance of informative information, limited page information density, and well-laid-out payment buttons.
The precise form field labels and placement allowed customers to scan and verify final charges before paying, which built their confidence.
Finally, a detailed transaction breakdown is consistently displayed on each page. The placement of the transaction and subscription type on the right rail helps avoid cluttering the page while providing complete transparency.
Accordions vs. Pages
When redesigning subscription checkout, my first big decision was the navigation pattern. Many of our competitor’s checkout pages, and even our old checkout, used accordions for each payment method. This approach is simple and fast but struggles with complex, multi-step payment processes.
To address this issue, we decided to create separate pages for each step, including the profile creation process, a payment page, and a completion page. This approach made the landing page less overwhelming and allowed us to emphasize important information. Additionally, it reduced the likelihood of misclick errors and enabled more detailed user flows if needed.
Minimal input — Minimal error
The subscription checkout focused on minimizing user input throughout the process, starting with creating the user’s profile. Taking feedback into account, I chose to streamline the profile creation process by following the examples set by sources such as The Washington Post and The New York Times. This involved simplifying the process by only requiring an email address and password, eliminating the need for users to input this information multiple times.
Conclusion
We have observed positive impacts on our subscribers with the new Boston Globe checkout design. As a result, we intend to apply the same checkout design to Boston.com to maintain consistency across our platforms.
But we are not stopping there. We are constantly exploring additional improvements and planning A/B tests to ensure our checkout solution remains the best in the industry.
The Boston Globe