Project
Payment Solutions Landing pages
Company
Business Comparison
Role
Strategy, Direction, UX, UI
Taking card payments is easy, but trying to compare the latest devices on the market was a bit of a minefield. The BC team did some competitor research and found that being able to compare card machines would not only save users time but also money.
Compare payment solutions
The Brief
I was asked to design a series of landing pages for Business Comparisons' new channel, payment solutions. The first page to look at was card machines. The UI needed to include a component in the header or H1 where the user could pre-select how they take card payments. The main content needed to have 3 steps in how to choose a card machine and types of card machines which consisted of countertop portable and mobile.
Competitor research
Competitor analysis was conducted and it became clear that other brands were comparing various card machine devices. As cash payments decline and card payments continue to increase in popularity, every business is starting to consider the benefits of using a card payment machine. This was creating a missed opportunity for BC in the market, the team was keen to get this channel up and running as soon as possible.
Road Map
The roadmap was split into 3 clear phases. Phase 1 was to develop the first channel, card machines, get this live for testing organically with some PPC spend behind it.
Phase 2 to build merchant services, payment gateway, and card readers and build a consistent UI look and feel to align with the other products.
Phase 3 was looking to design and develop a listings page for payments and I wanted to understand what the competition was doing and how they're doing it. Gather enough information that allows me to discuss with the team and how to move forward with this opportunity and improve the VTE on the channel.
Design library
A library is not a design system but a design system is nothing without a well-constructed library. Design libraries are the engine of a design system and are the one thing a UX/UI designer will have the most contact in their day-to-day, making it of critical importance for any design team to operate efficiently.
The Business Comparison library has been built with practicality, scalability and flexibility in mind. Correctly filed assets allow the designers and developers to quickly find what they are looking for and executions for each instance allows for unique symbols to be used for any occurring situation with minimal need to break down symbols or rework an asset to suit minor changes within new designs.
Nested symbols are used throughout to allow flexibility of change at a root level if and when the time is needed and the file structure allows for growth in the library as new assets and components are created.
Nested symbols are used throughout to allow flexibility of change at a root level if and when the time is needed and the file structure allows for growth in the library as new assets and components are created.
Wireframes and Components
We wanted to ask the user a question 'How do you want to take payments?' the user could select face to face, over the phone and, online. The user can also select 1 or all that apply depending on how they like to take payments from their customers. Adding this CTA component into the H1 above the fold helps speed up the process for the user and improves VTE.
The general design needed to be simple, using wireframes I designed several landing pages. This lead to discussions with stakeholders and the development team, testing some of the components and user flows making sure that they made sense.
H1 Visual design
After approving the wireframes for the landing page I narrowed our focus into 3 areas for potential improvement for the H1 component.
1. Ask the user the question within the header or subheader of the H1
2.Ask the user question within the component
The challenge I had here was that displaying the buttons underneath the header, this looked great on desktop but a bit clunky on mobile. After testing some of the options with the stakeholders and development team I pushed for the component to be on the right-hand side of the header copy and the question 'How do you want to take card payments?' within the component. This proved to be a better outcome for the team.
Final H1 visual design
I took out the image in the header as this was too much, and added a gradient to make the component pop, plus this would speed up and improve load times. I re-tweaked the icons to bring them in line with the consistency of other channels, I wanted to achieve a seamless user interface and experience so that the user could select the options they wanted and continue to the form for further details.
Card machines landing page
The card machines landing page needed to give the user the understanding of how to choose the right card machine for their business that being face to face, over the phone, or online but also educate the user on the different types of card machines.
I wanted something that will draw people’s attention. I knew that if I could design a unique experience for the payment solutions channel, it will have more visitors. The main challenge was to visually show that the landing page is only about card machines. This is why I decided to add in card machines and icons peaking out of the sides to visually imply that it's all about the device.
Landing page H1 with final component
Mobile H1 prototype
What did I learn?
Being even more collaborative
When working remotely you need to be even more collaborative than you could be when working in the same office space as your client or coworkers. This allowed me to better understand the creative process I needed to follow to create meaningful work.
Respect the design guidelines of the brand
As a freelancer/contractor, I’m usually hired to also come up with a new visual identity. Here I needed to respect the guidelines and the BC design system. But being able to help develop the design library (UI KIT) was really good fun and I was able to put my spin on particular components for the team to use going forwards.
Every details matter
When working for a client, every detail matters. The visual hierarchy between your elements, the smallest piece of copy, the order of things: everything needs to be thought through and clearly explained
