WEB DESIGN & WEBFLOW DEVELOPMENT

Redesigning Nextpay's landing pages for product, demo booking, and press

OVERVIEW
Helping Nextpay's marketing team redesign their landing page on Webflow
TIMELINE
Jan-Feb 2023
TOOLS
Figma, Webflow
THE PROBLEM

Nextpay's grown. It's time for the website to follow!

NextPay (Y-Combinator W21) offers all-in-one finance solutions for MSMEs. I was brought onto the team to design and develop the website, namely more effective product pages, a book-a-demo page, and a press page. I also set out to build a modular landing page template for marketing campaigns and partnerships.
PRODUCT PAGES

How can we show customers how Nextpay can help them send, collect, and manage money?

Nextpay has three product pages: send money, collect money, and manage money.  My goal in redesigning them was to streamline their hierarchy and make it easier for potential customers to understand and choose Nextpay in the CTA.
I relied heavily on the existing brand colors, themes, and styles, and I collaborated closely with the Nextpay team on illustrations that would clearly communicate the concepts and copywriting that would rank well for SEO.
I also focused on designing simply and legibly. The designs had to be scalable and mobile-responsive (crucial since Nextpay's landing page users are 80% mobile) as well as reusable and flexible enough to support future changes in content.
REDESIGNING THE CTA
Nextpay is free, we swear!
In particular, we worked on redesigning the call to action. In the past, users mentioned not being sure if the product was actually free, so they were also hesitant to book a demo.
To remedy that, we did the following:
1. Chose a simpler secondary action (checking the pricing page)
2. Placed the message on free pricing in the header rather than in the button
3. Added more context to the action (charging per transaction)
Since trying a new financial service can be scary and ambiguous, we erred on the side of more context and transparency to help customers feel more secure.
MODULAR LANDING PAGE + PRESS 
Designing fresh new pages for press & campaigns
I was also tasked with designing a modular landing page (below) for Nextpay's partnerships and campaigns. This was a template with multiple subsections that could easily be duplicated, reordered, and modified with each new marketing campaign.
I based my designs off previous landing pages, as well as the characteristics of that content. Again, I focused on cohesive sections that could effectively scale for mobile.
I also worked on designing the press page. Originally, this was a Notion page full of links. The new design focused on curated, scalable sections for different categories: articles, podcasts, videos, partnerships, and awards. It also had its own CTA given the distinct new set of users: press people looking to feature Nextpay.
BOOK-A-DEMO
Adding crucial context to a call
The last page to redesign was the book-a-demo call, which was fairly straightforward: we added some context to the call (more of a demo than a sales pitch, we promise!) and  a CTA for anyone ready to sign up or review pricing.
DESIGNER 2 DEVELOPER
Bringing things to Webflow
We worked in two sprints: first for the product pages, and second for the book a demo, modular landing page, and press page. Each time, after two weeks of design, I would start developing on Webflow.
There were a fair share of challenges here: responsiveness, micro-interactions for hovers and pressed actions, linking pages together, the content management system (CMS) for press page content, loading content without pagination, font anti-aliasing, HTML embeds for videos, podcasts, and the book-a-demo scheduler, and more.
Thankfully, it paid off. It was thrilling to finally see the pages below go live, and clicks on demo booking, press page, and products started rolling in! 
THE TAKEAWAYS
Design is hard!
Just kidding... (or am I?) There was a lot to learn:

01

Communication is key

A constant stream of feedback, bug testing, and design reviews were crucial to keeping things going. Deadlines and weekly check-ins also kept things on track.

02

Build for scalability / reusability

The more scalable and reusable your work is, the better! Stick to the basics – hierarchy, proximity, contrast – and seek feedback from the people closest to the project and likely to be updating it in the future.

03

Balance aesthetics and usability

Just because Nextpay had an established brand didn't mean it had to be boring. Maddy's awesome visuals, icons, and  color variations helped keep otherwise information-dense pages fresh and navigable.
I definitely found myself growing a lot through this experience: the two hats of designer-developer are definitely no joke. Thank you so much to Jason, Maddy, Herbie, Juancho, Eira, Don, and the rest of Nextpay for entrusting me with Optimus! 🤖 💙
TESTIMONIAL 💙
"I worked with Pauline when NextPay’s in-house marketing team brought her onboard to revamp our website.
Throughout the project, Pauline designed Figma prototypes, developed Webflow pages, and kept everything on-brand while managing feedback beautifully. She also gave us some excellent suggestions in evolving our brand guidelines through color and illustrations, which we still use today.
What I appreciate the most about Pauline was how purposefully she approached the project while aligning with the team’s existing practices. I highly recommend Pauline for businesses looking for thoughtful and seamless design solutions."
Madeleine (Maddy) Teh
Designer @ NextPay (YC W21)
made with <3 by pauline wee