Milan (Preceden’s designer) and I recently wrapped up a project to redesign Preceden’s pricing page.

Here’s the previous above-the-fold content:

And here’s how the new design turned out:

Few things to highlight:

• Switched from radio buttons to this new UI (the previous design was inspired by Help Scout’s pricing page which uses radio buttons)
• Revamped many of the colors including the font colors, check marks, and buttons.
• Increased the font size a bit, which forced me to rework the feature descriptions to ensure they all fit on a single line. For example, “Create timelines with up to 10 events” became “Create unlimited timelines” and “Add 10 events per timeline”; “Export to PDF, PowerPoint, and more” became “Export to PDF, PPTX, and more” (hah).

Very happy with how it turned out.

Kudus to Milan for suggesting we work on it and for the fantastic design work.

The process

In the past, implementing a redesign like this would have gone something like this:

• Milan designs it in Figma
• We discuss over Slack and he iterates
• When it’s in good shape, either he implements it in Preceden or I do depending on what else we have on our plate

This time, at his suggestion, we tried a different approach since he prefers mostly doing mockup work in Figma (and not implementing his designs in the Rails app) and it’s not a great use of my time converting his Figma mockups to HTML/Tailwind either.

Here’s what we did instead:

After Milan designed the new pricing page in Figma and we iterated on that mockup in Slack, we hired Design2Tailwind, a small team that specializes in Figma to Tailwind conversion.

This initially required me filling out a form detailing the work we wanted done:

Vivian, the founder, sent me a few questions over email to understand the scope: would it require interactivity? Responsiveness? Can we provide the Tailwind config file?

In the end, she quoted me $150 for the project.

I invited her to our Slack group, where we discussed a few small things along the way, and they she shared their v1 implementation:

A few small tweaks later and we had the delivery for their piece of the project:

Integrating this into the Rails app took a few more days of work on my end since the pricing page (and in-app upgrade dialog which shares the same design) is dynamically generated based on the user’s current plan, the plans they can upgrade to, the features on those plans, etc:

Outsourcing the initial HTML/Tailwind implementation was a great decision though, and one we’ll surely do again for any non-trivial design projects. It let Milan focus on the mockup work which he really enjoys, and me focus on other projects that were better use of my time.