UI Redesign of PayPal's Merchant Home

Guiding a client through the UX way to approach a UI project
Easier to use*
*Based on scores of Single Ease Questions (SEQ) from usability studies
Countries currently rolled out live 
Closeup of main visual on page
PayPal is an international payments solution, serving both individuals and businesses. This was a UI project, but this case study highlights how much UX thinking and considerations we still put into it.
Build a simpler, more intuitive web app
I worked with a UX lead and PayPal's Growth team to provide UI/UX support for this project. 
Build a simpler, more intuitive web app
2019, 3 months
A new approach to the Business site, starting with India
PayPal's Growth team wanted to try a new approach to increase merchants sign ups. They wanted to sharpen their value props, use shorter, snappier copy, and have new visuals to match. 
The resulting website would be A/B tested in India. If successful, it would then be rolled out to other regions.
Design a website that:
Increases merchant signs up on PayPal's business page
Communicates PayPal's USP quickly and effectively
Can be scaled globally 

The UI Process

Weaving each part of the UI process with functionality

Act 1: Alignment on Content

A design workshop to align teams on the site's content
To kickstart the project, our team conducted a half-day design workshop with the client's stakeholders to get all parties aligned on approach and content for the site. 
My team had done previous many user and usability studies for PayPal, so we built on that experience. We compiled a summary of the findings and shared them with participating stakeholders. 
At the end of the workshop, the client had a rough idea of what they would like the website to feature, and the order of information. That rough sketch was then presented to me. 
Design workshop with PayPal team and stakeholders. The half-day workshop enabled alignment across teams. 
Sharing past research with stakeholders through a recap.  Condensed in the deck are the findings from all the research our team had done for the client previously. 
The aligned approach. End of the workshop, start of my work.

Act 2: Page Structure 

Discussing functionality first
The start of the UI design was grounded in discussions of how each section on the page would function.  
Using the aligned approach as a starting point, I made iterations on some key sections. During client meetings, I would walk the client through the affordances of each variation, the pros and cons, and the limits of mobile responsiveness.
Framing the discussion about UI around functionality enabled the client to critically reflect on which solutions fit their needs rather than 'what looks good'. Not only did this empower the client to make the best choice for their needs, it saved the team the trouble of iterating endlessly.
Mid fi iterations
Same content, different expressions. All these 4 pages have the same content, but vary in the way each section presents that content. We wanted to show the client several options so that they could think through which variation best served the content they wanted to express. We were able to jump to mid-fi mockups immediately thanks to PayPal's existing design system which allowed me to plug and play.

Act 3: Key visuals

Visually communicate 'Connecting merchants to the world' + Scalable Globally
The goal of the key visuals were to communicate PayPal's services quickly and effectively. The challenge for me twofold: (1) to find a way to visually communicate that PayPal enabled both local and international transactions, and (2) to ensure the visual solution were scalable globally. I was also keen to allow visitors to envision themselves already using PayPal to be connected to the world. 
Different faces, one platform
How would you express being connected to the world? The client's original proposal was to show a globe, but that seemed... too uninspired for a brand of PayPal's standing. 
To generate ideas in a short timeframe, I used Crazy 8s to come up with ideas. The UX lead and I then picked out the best ideas and we presented them to the client. 
The solution we eventually decided on was to show people of different ethnicities being connected together through the most likely merchant use case of paying suppliers and receiving payments from customers.
Crazy 8s to generate ideas
Crazy 8s to generate ideas in a short time. 
Mid fi Iterations
Deciding on the hero image. From the ideas generated from Crazy 8s, we picked 3, then expanded on them again. We did this for other key sections. All of this options were designed to be able to scale globally. 
PayPal gif of globe and transactions
The final visual tells the story in an instant of how PayPal connects India's merchants with the world. I mocked the animation in Invision Studio, but the final animation was coded by PayPal's team of developers.
Animations. To communicate how PayPal would be used by end-customers on a merchant's online store, I made these animations. Sadly, in the interest of time, the client decided to hold them off until they were certain the design worked. 
The little touches. To carry on the storytelling of PayPal connecting merchants with the world, we made the transactions feature merchants and currencies from different countries.

Act 4: Branding and UI

Innovating but preserving PayPal's design system
PayPal has its own design system which dictates how common components should look like and behave. This helps the brand maintain a consistency across different products and platforms.
However, the client wanted me to break away from existing components. Yet doing so would risk deviating from PayPal's distinct look and feel.
How do you innovate while staying true to tradition?
Capturing and expressing brand essence
The trick, I realised, was to try and capture the essence of PayPal's brand. The client could not find their brand guide, so I had to figure out PayPal's brand essence.  
Though a visual research of PayPal's brand images and existing PayPal websites, I realised their brand essence could be expressed as 'transparency'. 
In application, this meant thinking of how we could render the surface to be glass-like. I played with transparent overlaps, subtle gradients, and a lot of blue to achieve the distinct PayPal feel of a cool, clear, glass-like visual experience. 
Transparency and Glass as central visual metaphors to PayPals brand. I later found out the foundry that was commissioned to do PayPal's typeface was given 'transparency' as part of the brief. It's crazy how design, when done well, can convey messages such precise ideas without words!
Playing with PayPal branding
Creating 'glass'. Using transparencies, subtle gradients, overlays and blue to create the signature, cool, glass-like feel of PayPal 
Controlling feedback with the 'Mild, Medium, Spicy' framework
We were now firmly in the dreaded territory of subjective 'I feels' To manage the client, I employed the 'Mild, Medium, and Spicy' technique that I learnt from the graphic designers at the Futur (Thanks guys!). 
Clients can struggle to judge subtleties in visual design, so giving this frame allows them to compare different tonalities, and easily select the one that resonates with their vision. 
An example of Mild, Medium and Spicy applied to the USP section. The client wanted 'more colours' to make things 'more exciting'. By showing them how that would look across the 3 visual intensities, the client was able to step back and think of the experience as a whole. In the end, they chose Mild. 
The Final Design
I worked around the brand identity of red and black to create a UI.

Act 5: Scaling globally

It starts with the design
A few weeks after the initial rollout to India, the client informed us they would roll out to 9 other countries, and asked us for the hero images tailored to each country. 
We were ready for them as we had planned ahead. This how the original hero image scaled across some of the countries: 
  • Version for India
  • Version for Korea
  • Version for Mexico and Brazil
From India to the world
The site went live in India in January 2020. It outperformed the old design, so it was subsequently rolled out to 9 other countries. 
Merchants in Southeast Asia using the redesign
Easier to use*
*Based on scores of Single Ease Questions (SEQ) from usability studies
Countries rolled out live
Being proactive about UX in client engagements
What I assumed was a UI project taught me a profound lesson about how to lead clients in a UX engagement.
Even without insisting on 'UX' per se, we can direct the client to towards UX by giving them frameworks that enable them to make decisions aligned with UX principles. In this way, we as UX professionals can proactively take control of the client engagement while having the client feel engaged and respected. 
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram