In the first part of my article series, I briefly demonstrated how a career site could be built in a span of less than 3 months, with no coding, and under a $500 budget. If you missed it, you can read all about it here!
In this article, I’ll be explaining in greater detail how I designed and launched the website as someone with no official web design experience.

As discussed in my previous article, all three tools used to build the website are available for free, with varying levels of limitations. As a new team with many grounds to cover in a short span of time, it’s important to have the option to quickly test or prototype an idea to check if it can be developed.

Design
Figma is available to 2 real-time collaborators (think: Google Slides or Jamboard), which allowed me to turn the scope into a sitemap and page mockups.

By doing some quick wireframing, and then moving on to building more complex, reusable base elements, I was able to build up the sections of a page efficiently, and duplicate that very same page to be customised.
With the Creative team’s help, I could build high-fidelity mockups with real photos, graphics, and dummy ‘lorem ipsum’ texts. Very quickly, the pages started taking shape. With Figma, I was able to create an interactive prototype rapidly by linking the pages and buttons together.
Through a couple of adhoc focus group sessions, I gathered several co-workers to test the interactive prototype as if it were a real website. In doing so, I could surface any existing bugs or page behaviours that the end-user expected when clicking a button.
Before I could turn the mockup into a live website, I had to do some optimisations — fonts had to be cut down, and styles defined. This would quicken the speed of the overall time I would take to build the website, since I would have nailed down most of the specifications by then.
All that was left to do? Signing up for a free Webflow account.
Build
Personally, I find getting started with Webflow to be fairly simple. I mean, for those of us who've dabbled into web development, we’ve all learnt Dreamweaver back in the day, right? The only difference here is that Webflow is a modern and powerful tool, as compared to the Dreamweaver of yore.
That said, having prior knowledge in CSS is immensely beneficial, even if you don’t code. I started with a template and fiddled around with some of the settings. Then, I attempted to build some of the elements from the mockup, and utilised Webflow University (Webflow's self-learning portal) when I got stuck.

Some might say that there is no foolproof way to perfectly translate a static mockup into a live website. When moving designs from Figma to Webflow, expect some minor deviations from section to section, and element to element. I believe the key is not to strive for pixel-perfection (blasphemy!), but to create a seamless and functional website.
The free version allows you to build two functional pages in Webflow – and so I did. Starting on a clean slate, I slowly, but surely, translated the design from Figma into Webflow in about a week. With the Home and Jobs page up and running, it was time to create a free Integromat account.
Integrate
My objective was clear: to bring in jobs from our recruitment portal into this new site. This was the most time-consuming and difficult part of the process, as our Applicant Tracking System (ATS) partner did not have many native integrations with popular apps.
The first step was to obtain the API documentation and credentials to start extracting data from their systems. This was quite technical, as I’ve never actually integrated data in a production setting. Basically, I needed to interpret the code shown below into something that Webflow understands, through drop-downs and drag-and-drop.
When comparing the documentation – which I had to test a few dozen times – I eventually ran out of test transactions! So I needed to temporarily upgrade the quota that month for testing.
In general, the iterations I made were in this order:
- Transfer all jobs found.
- Transfer all jobs that are marked as visible.
- Transfer all jobs that are marked as visible, and delete all jobs that don’t exist anymore.
- Transfer all jobs that are marked as visible, update all jobs that have changed since the last update, and delete all jobs that don’t exist anymore.
- Transfer all jobs that are marked as visible, update all jobs that have been changed since the last update, delete all jobs that don’t exist anymore, and copy the full job description of the job to decrease load times from an external server.
This was an interesting and eye-opening exercise, because I learnt more about our recruitment process and some general coding logic, without actually having to code! Depending on your ATS, your mileage may vary in terms of the success of the integration.
Here’s an example of Integromat’s coding logic/data structure (seen below) that you may have to understand before successfully finishing the integration.

After wrapping this up, there were a few more loose ends to tie up before getting the site live. These included purchasing a yearly subscription for all the tools, picking up a few javascript plugins, and setting up the site on our current web domain.
Final Thoughts

To summarise the process in a chart above, I can say that it was a decent learning curve for designing and building the website, though it became exponentially more difficult when it came to integrating the data across two platforms. Creating and maintaining the content on this website is still difficult, but manageable.
I would highly encourage anyone who hasn’t created a website before to try and embark on a similar project. Who knows — you might even surprise yourself!
-----
If you’ve enjoyed this article, be sure to give it a like on our LinkedIn post, and follow us for more content using the button below!