Let’s get the elephant out of the room: I’m no designer at all. I can code decently, that’s it.

For some reason or another, we always postpone updating Connhex’s website. I usuallly contribute a good deal to our websites’ copy - I enjoy writing and explaining things.

This time I’ll give my best shot at designing and coding the entire feature page for Connhex Exporter: we plan on doing a dedicated feature page for every Connhex Cloud service, so this will probably be refactored later on. At worst, you’ll have some additional information on what we do!

Step 1: wireframe

I’ve been a long time fan of my compatriot Peldi from Balsamiq¹. I’ve learned from him the concept of wireframing: I follow a simplified version of the process by simply sketching around using Excalidraw. This helps me to quickly understand what information I want to convey, and organise it spatially on the page.

Here’s what we’ll be creating:

• a jumbotron containing a GIF. This shows how a UI can use Connhex Export
• three highlighted features
• some descriptive paragraphs
• a final call to action

Step 2: straight into the code

Connhex’s website uses Docusaurus and Tailwind²: it’s basically a single page application built with React, that comes with a few goodies to manage docs.

When I need to update something, I usually start by quickly throwing down a few lines of code to create a first draft. Then it’s polishing time, with a second and third (and fourth, fifth, …) pass. Here’s what I came up with:

You can see a few parts already being more polished than the rest: that’s because I reused some existing components. The following improvements are usually along two directions:

• cleaning up the code: proper internationalization, extracting reusable components, …
• improving the design: finding suitable images, choosing suitable icons, …

This time, though, it’s gonna be different: there’s something obvious that emerges from the design³. Since this layout will serve as a basis for the feature page of every Connhex service, I’m worried about us needing lots of custom illustrations: we could buffer that by using amazing resources as Undraw, but we would lose any originality we currently have. We could also mitigate this need by using some product screenshots, but not every Connhex service has an UI.

So it’s back to the drawing board to rethink the intermediate section.

Step 3: re-thinking

We need a way to display a service’s features without being forced to create a custom illustration for each one of them. Here’s what I’ve been playing with:

• the layout is card-based, allowing for some spacing between sections
• each card can contain one or more features
• for each feature, one can identify a category, title and description
• the card footer allows for further reading

Moreover, we are future-proofing the layout: cards can have the same color as the section the service belongs to. This will be apparent in a moment.

Step 4: final version and polishing

Without any further ado, here’s the final result:

You can also see it live to get a feel for the animated screenshot.

A couple of random details:

• there are some purple accents around the page. This gives the page a Connhex Cloud feeling: the idea is to use orange and cyan for Connhex AI and Edge services, respectively
• the icons in the highlighted features section are now styled a bit more.

What are your thoughts about this page? Can we improve it in any way? We’re always happy to hear from you!

Conclusions

Don’t get me wrong: I do think that proper design adds a lot of value.

While building a company, though, there are many trade-offs: in an engineering-driven firm like ours, design and marketing are always scarce resources.

Even if “we’ll improve it later” turns out to be “it’s going to stay like this for ages”, we are still far better off than we would have been without telling the world about Connhex Exporter.

The real challenge lies in distinguishing the cases where perfectionism is an asset from those where it is hurting your company.