Problem 1: Scattered navigation
After conducting a preliminary analysis by analyzing web analytics data, we observed that visitors to the PayPal website were frequently dropping-off.
After running a heuristic analysis on the flows, we hypothesized that majority of the drop-off was due to a lack of clear context established between the “personal” version and “business” version of PayPal across the homepage, navigation, and signup page.
Without a clear path to understand the brand’s offerings and to sign up, users are left to their own devices, randomly browsing the site.
Users have clear intents, but are not finding their way to the right content.
On the homepage, and on the sign up page, the website defaulted to “personal”, website had no “context” of whether user was personal or business
Problem 2: Desktop-first design
At the time of this redesign project, PayPal was also gearing up for a wider launch in the India market, to target consumers who shop internationally, as well as small business owners transacting with clients overseas.
Additionally, PayPal was seeing a greater traffic flow to their website from mobile devices in mature markets such as Australia.
Unfortunately, while the website’s layout was designed to be responsive, they were composed in a way that was desktop-first. The website contained many content-heavy pages that weren’t suited to mobile browsing, and navigating between them was tricky.
During the project kickoff, we ran a workshop which helped us understand what the business was trying to achieve. We also tapped into the collective wisdom of the business unit to identify known problems that were surfaced in usability tests, competitive analysis studies, and user feedback.
After, it became clear that the website didn’t suit the user needs nor the changing business landscape.
Sections and pages of the site were prioritized based on issues identified, and we set to work.
Tooling & Team
As the lead User Experience Designer, I worked with the internal PayPal team (Product Managers, Copywriters, and Visual Designers) to first firm up the structure of the new site.
We reworked the information architecture first, then moved on to designing new UI components, following Atomic Design principles.
As the project inched closer to production, our design’s “Source of Truth” migrated from Sketch, to Principle, to the React codebase, which was possible as we established a clear and consistent design system in Sketch, using symbols.
Owing to the quirks and intricacies of the markets PayPal were servicing, we had to redesign the website with several constraints in mind.
These constraints guided our thinking in terms of what we wanted to achieve with the design, and framed each decision regarding the information architecture, interactions, and layout.
Collaborating with the internal team at PayPal, we also agreed on several guiding principles which acted as the north star of our redesign:
- Mobile First. 50% of website visitors came from mobile. We wanted to extend the PayPal web design language to include more mobile-specific UI patterns.
- Show, Not Tell. Users in Asia respond better to graphics and immediate utility rather than lengthy explanations.
- Services Rather Than Products. PayPal’s competitors view themselves as offering payment services online, rather than “products” in the traditional Western sense.
The approaches were intentionally polarizing, so that we could make trade-off decisions while designing.
Competitor Case Studies
Next, we looked at competitors in both India and globally, and how they were utilizing mobile design patterns in their websites and apps.
Square uses an intent selector to help prospective customers cut through the noise and go right to the solution they need.
Capital One’s SparkPay shows, in plain English, how their services can be used and provides a clear path to the user.
PayTM has a unified design system across their native apps, mobile site, and desktop site. Users don’t need to context switch.
Mobile Design Patterns
Next, we looked at mobile design patterns across iOS and Android that would feel familiar to users.
We honed in on three UI elements that weren’t currently employed on PayPal websites:
Cards keep it simple. The use of cards makes the experience more app like and is a neat way to display content.
Sideways-scrolling content invite discovery. Used together with cards, content that is related can be grouped together sequentially.
Sliders, dropdowns, and switches let users customize options to their preference.
Usability evaluation, pre-redesign
We wanted to engage users in signing up for the service, or in discovering new ways of using the PayPal service.
To understand the gaps in our users’ comprehension and satisfaction from using the website, we ran a series of remote unmoderated usability studies, targeting both consumer and business segments, using a tool called Optimal Workshop.
For each segment, we ran two tests, which helped us:
- test the effectiveness of the site navigation in helping users find what they want.
- test the efficiency of the information architecture guiding users to locate the information they seek and subsequently to sign up
- understand how users perceive the experience and feel about the PayPal brand
- identify information architecture gaps and generate hypotheses for solving them
- identify recurring navigation challenges and recommend solutions
Test 1: Tree testing
Using Treejack, we tested the main and sub-level navigation structure of the site. The test scenarios revolved around high-level questions or tasks the user might come to the site with.
This test helped us test task effectiveness and user efficiency of the site’s existing top level navigation.
We then used a method pioneered by Jeff Sauro in order to analyze the data from our study:
In the study, we found out that users had difficulty locating the information they wanted with the site navigation alone. Users were more likely to end up in the wrong place than they are in the right place.
This difficulty was common throughout all scenarios that we tested, which we saw as a significant trend.
Analyzing each task, we identified several reasons for this:
- Lack of an escape hatch. An overwhelming number of participants reached directly for “HELP” for many of the tasks, which suggests that several key topics related to sign up concerns and security can be relocated to “HELP”.
- Setup information is buried within pages. A majority of participants hired a developer or built their own website, which suggests that setup and integration would be key information during and after activation. In addition, many of them reached for the “PARTNERS & DEVELOPERS” link, which suggests that grouping all setup, integration, and developer information would be more helpful to the user.
- Labels do not correspond to the way users think. While users think in terms of goals, such as setting up PayPal on their website (“Sell on your website”), or setting up the API (“Setup for developers”), our current navigation is worded around functions (“Partners and Developers”, “Online Payments”). Wording navigation items around the users’ goals would make finding information more obvious.
Test 2: First-click test
Using Chalkmark, we were able to test the flow of information on several key pages.
The test scenarios revolved around finding specific pieces of information or call-to-action buttons.
We were then able to analyze where users thought that piece of information, or action, existed on the page.
From this study, we learned that even though the content was useful and comprehensive, users felt confused and overwhelmed. This suggests that content could be more consise and better organized.
Opportunity: improve the navigation flow
What we discovered from testing the information architecture with users, was how impersonal the language felt to them.
In the old site, each page felt like a thing on its own. To navigate to another page, you had to keep reaching back into the menu, navigating through the different sections, then finding the other pages you wanted. Once you went to another page, you had no idea where you were in the site’s structure.
They did not feel connected in a narrative.
We wanted to approach the redesign as an ongoing conversation with the user rather than a collection of loosely-connected pages. What we needed to get right, was the tone and voice of the user journey.
Redesigning the navigation
Information architecture, before revision
The homepage defaults users to the “Individual” section. Business users are underserved.
Information architecture, revised
Clearer, more explicit sections are established. A new homepage segments users into these sections based on intent.
We also reworded the language to address the user, rather than using internal jargon: “for you” and “for your business” instead of “individual” and “business”.
Universal homepage, design mockups
Usability evaluation, post-redesign
Finally, the redesign was brought to bear. We ran a usability study to find out if users could understand how to use our new navigation paradigms.
We aimed to test both the revamped IA and navigation, as well as the new UI components.
Because the redesign was based upon several key assertions, we wanted to find out if they were true:
- Exposing the full navigation structure as a persistent control on mobile would guide users along more effectively toward sign up.
- Intent-based navigation will reduce navigation complexity and increase brand comprehension.
- Mobile app UI patterns will increase user’s comfort and desire to explore the website more.
These were tested using UserTesting.com.
So that users wouldn’t be biased to the PayPal brand, all mentioned of “PayPal” was replaced with a made up brand, “Moolaa”.
Users were recruited from the UserTesting panel, based on the requirement that they were using a smartphone to view the prototype.
The 19 video sessions were then analyzed for task success and usability issues.
We learned that users were not just familiar with mobile UI patterns, but could use it effectively in getting around the site.
We also learned that guiding users down a path using conversational cues proved to be successful in helping users understand what the website offers them, and how it would fit into their life.
Ultimately, we learned that while mobile UI and conversational cues are effective design tools, not merely reserved for native mobile apps or chatbots.
Abandoned user interface concepts
During the design discovery phase, we toyed with many user interface elements that improved the usability, but unfortunately wasn’t feasible to implement by the PayPal engineering team, or didn’t test well in improving actual conversions.
Here’s some of the concepts we experimented with:
Redesigned menu UI
For years, the way the PayPal website navigation looked and worked remained unchanged. It would show up as a dropdown menu on larger screens...
... and as a side-drawer on smaller screens.
We experimented with a more “adventurous” navigation header, which utilized a sideways-scrolling, exposed secondary navigation.
Unfortunately, this would prove to be quite tricky to build.
Additionally, since we designed it with the assumption that smaller screens implied that the user was using a touchscreen device, there were unsolved usability challenges for users on smaller-screen devices who were using a pointer or screen-reader.
Multi-option intent selector
We experimented with a more complex “intent selector” form to help surface the most relevant content to the user, based on what they selected in the form.
While this tested well for usability, it wasn’t a significant improvement over the previous intent selector design, which was more straightforward.
Improvement 1: Universal navigation
Previously, if someone were to land on a business-related page, if they clicked/tapped on the “sign up” button, they’d be redirected to a page which let them choose between signing up for a personal account, or a business account:
In the redesigned flow, clicking/tapping on the “sign up” button from a business-related page now sends you directly to the business sign up flow:
If you came from a generic page (such as the universal homepage, that isn’t targeted at consumer or business use), and try to sign up, you'll be prompted to explicitly select one of the two options before proceeding:
Improvement 2: Set-up guides
Following feedback from users, we exposed set-up information directly in the site navigation, where previously it was buried within pages.
Improvement 3: Animated explainer showing how PayPal works
In keeping with our design principle of “Show, Not Tell”, the animated explainer helps illustrate to users how PayPal works, without being too wordy.