Timeline
Summer 2023
Team
Individual
Skills
UI/UX Design
Prototyping
Motion Graphic
Tools
Figma
Cinema 4D
After Effects
Reimagining the Global Payments website around their new brand positioning,
"Commerce made easy"
Global Payments
01. Overview
Global Payments Website Reimagination
Context
Why updating?
With the recent acquisitions of various payment brands, Global Payments has updated its brand positioning around the idea of "Commerce made easy." This strategic shift reflects their commitment to providing seamless and efficient solutions for businesses worldwide. As a result, I, as a design intern, decided to experiment with updating their website that support this new positioning and enhance the overall user experience.
Goals | Objectives
Improving Usability and Visuals
Their current website, which has been live for nearly three years, gives customers credibility in the global commerce industry. However, it's time to elevate our online presence further by infusing thoughtful design choices, enhancing usability, and embracing a refreshed design language across the entire platform. With this vision in mind, I have taken the initiative to update the Homepage, Payment, and Industry Software Landing pages with a contemporary aesthetic and seamless user experience.
02. Concept Development
Areas to be developed
Concept Development
By seamlessly integrating evolving design elements to ensure brand continuity while infusing a fresh, contemporary, and updated aesthetic.
1. Elevate the Overall Digital Design
2. Amplify Brand Identity
By strategically highlighting key branding elements to strengthen the brand identity, creating a more impactful online presence.
Typography
Design System
Header
GP Commerce
Bold
Body
GP Commerce
Regular
Fortune 500
Commerce
Color
# ffffff
# 000000
# 1C6BFF
# 00DE66
03. Design Solution: Homepage
Improvements and new features
Hero Concept I & Contents
Since they literally have "globe" in their name, I was thinking they should own the globe by creating a design language around it.
Owning the "Globe"
Hero Concept II
Using a bold, animated 3D logo of Global Payments to establish a more powerful and memorable online presence.
Strengthening Brand Identity
1. Hero Section / 4 Main Businesses
The updated versions of the heroes are designed to emphasize the brand's identity, integrating the concept of the globe and its logo seamlessly. Each hero effortlessly incorporates the brand's four main businesses, prominently displayed on the homepage without any cropping, ensuring users can interact with them immediately upon entering the website.
2. Trusted Partner Section
In my design approach, I chose to neatly organize important content by enclosing it within boxes for a cleaner appearance. In this section, I've adopted the idea of box design to keep things well-structured and easy to follow.
3. Key Message Section
In this section, I brought in the box design concept again, and overall, I experimented with the layout itself to infuse a fresh and innovative feel into the website.
4. Main Contents
In this primary section, I used boxes again to display important short gifs. These gifs are designed to clearly illustrate the main ideas described in the text.
5. News Section
In this news section, I've organized each article within a box, creating a card-like presentation for a visually appealing layout. Also, I've refined the pagination icons to give a more branding feel to them.
Current
Experiment Design
Improvements
03. Design Solution: Payment Page
Improvements and new features
UI Animation
Payment Page
Purposeful UI animations and clean interface harmonize seamlessly and enable users to effortlessly focus on the critical content.
1. Hero Section
The updated Hero includes an image that is directly correlated with the content, providing users with an instant understanding and connection to the page's purpose.
2. Key Message Section
In the updated section, the illustration is placed within a box to ensure consistency with the overall design language.
3. Main Contents
Similar to the section above, I placed short gifs within boxes. These newly crafted gifs aim to enhance user understanding of the content more effectively. Also, I slightly adjusted the text styles to emphasize important titles.
4. Closing Section
In this final section of the page, where users are encouraged to begin their business with Global Payments, I've incorporated an illustration featuring an expert figure who can assist potential clients or users. This addition is intended to heighten user engagement and attract an audience effectively.
Current
Experiment Design
Improvements
03. Design Solution: Industry Software Page
Improvements and new features
All information at a glance
Industry Software Page
Created a more streamlined appearance, which allows users to access all relevant information at a glance, eliminating the unnecessary clicks.
1. Hero Section
Following the approach taken on the payment page, I incorporated a real-life image in the hero section instead of an illustration. This decision maintains a clean, modern aesthetic throughout the design.
This section remains largely unchanged from the previous version, with the exception of the text placement, which has been adjusted to align more seamlessly with the new grid layout.
3. Key Message Section
In each key message section across the website, I've used illustrations that match the respective ideas, so I decided to implement the same strategy here. The updated version delivers a significantly cleaner and more concise message to our audience.
4. Discover Section
The updated section is a lot more concise, enabling users to effortlessly scan through various options in one glance. Also, to enhance user navigation, I designed a new set of icons tailored to each industry. This ensures an even smoother experience for users as they navigate to explore the specific pages they're interested in.
5. Info Section
In this section, I wanted to maintain consistency with the layout seen in the key message and main sections. By enclosing gifs or images within boxes and aligning text alongside, I've ensured a uniform design language that's both cohesive and clean.