How to (Actually) Build a No-Code Career Website with Figma, Webflow, Integromat

December 8, 2020

Written by:

Samuel Cho

Tech

General

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.

Figma shows us what real-time collaboration is all about. Great for remote working, especially during COVID-19!

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.

Webflow's Editor is as simple as it gets — select, and start typing.

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.

Create a class/style for everything quickly

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.

[
    {
        "statusCode": 200,
        "headers": [
            {
                "name": "date",
                "value": "Sun, 01 Nov 2020 12:34:56 GMT"
            },
            {
                "name": "content-type",
                "value": "application/json"
            },
            .
            .
            .
        ],
        "data": [
            {
                "job_id": "5e25173712347",
                "job_code": "JANIO999",
                "group_company": "Janio Singapore",
                "department": "Human Resources",
                "business_unit": "Human Resources",
                "division": "",
                "parent_department": "Human Resources",
                "location": "Singapore, Singapore",
                "location_city": "Singapore",
                "location_country": "Singapore",
                "title": "Junior HR Generalist",
                "post_on_careers_page": 1,
                "post_on_refer_page": 1,
                "post_on_ijp_page": 0,
                "employee_type": "Full Time",
                "job_created_timestamp": "00:00:00 01-11-2020",
                "job_updated_timestamp": "23:59:23 01-11-2020"
            },
            .
            .
            .
        ],
        "fileSize": 77777
    }
]

‍

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.

        "data": {
            .
            .
            .
            "description": "<h4>ABOUT JANIO</h4><div>Janio is a cross-border logistics platform that provides an integrated end-to-end logistics solution to merchants across Southeast Asia (SEA). At our core we operate as a smart logistics solutions provider, serving merchants and logistics partners and connecting industry players across the globe.</div><div><br></div><div>Through Janio, we strive to create a truly integrated network that brings together every key player to become the backbone supporting SEA’s growing e-commerce ecosystem. Looking ahead, our platform would look to incorporate elements of AI and machine learning to provide a suite of smart solutions for real-time tracking, route optimization, warehouse management and dynamic forecasting to truly become a data-intelligent platform.</div><h4>THE CHALLENGE</h4><div>We are looking for a Software Engineer (Frontend) to work in our engineering team to build and deliver products that aim to solve key business goals. The ideal candidate is a hands-on and passionate builder with strong experience in developing high-quality, innovative and high performing enterprise grade applications.</div><h4>THE OPPORTUNITY</h4><div>The successful candidate will:&nbsp;</div><ul><li>Be part of tech team in Janio which solves highly complex technical problems</li><li>Work with Product team to define key specifications and deliver features and improvements to Janio products while leveraging ReactJS framework</li><li>Craft code that meets our internal standard for scalability, best practices and maintainability for backend services</li><li>Independently ship minor features/improvements with minimal guidance</li><li>Design, develop and deploy highly complex web applications</li></ul><h4>THE TEAM</h4><div>You will be joining a team that is consistently striving for constant innovation and improvement while being supported by an incredibly driven and supportive peripheral team. We are passionate about what we are doing and are obsessed with high performance. We have a strong commitment to make Janio a great place to work at and grow with.</div><h4>THE REQUIREMENTS</h4><ul><li>Deep understanding of ReactJS (+Redux) with extensive hands-on experience of building complex applications</li><li>Experience writing test cases (unit, behavioural, and e2e)</li><li>Excellent knowledge of CSS &amp; HTML</li><li>Very good understanding of OOPS</li><li>Good understanding of SQL</li><li>Experience working on complex and scalable applications</li><li>Real passion for software engineering and best practices</li><li>Strong communication and interpersonal skills</li><li>Required familiarity and willingness to learn and work with the mentioned stack – architecting, development and devops automation.</li><li>Great Object Oriented coding practices, including strong design patterns knowledge, Refactoring, Clean Code, Domain Driven Design, Encapsulation etc and enterprise integration.</li><li>Experience working with Agile, Lean and/or Continuous Delivery approaches such as Continuous Integration, TDD, BDD, Infrastructure as Code etc</li><li>Demonstrated track record of understanding business requirements while working with various stakeholders.</li><li>Strong ability in managing project with tight deadlines</li><li>Experience in working in fact paced and dynamic environment, and prior experience in startup a plus</li></ul><h4>THE PLUS POINTS</h4><ul><li>Experience working on/designing distributed systems</li><li>Good design sense</li><li>Experience with NodeJS</li><li>Experience with AWS services</li><li>Strong knowledge of design patterns</li></ul>",
            .
            .
            .
            }

‍

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!

How to (Actually) Build a No-Code Career Website with Figma, Webflow, Integromat

Design

Build

Integrate

Final Thoughts

Discover more stories

When You Join A Company With Less Than 10 People

“Not everyone has taken this test before.” — What Do Our Employees Say?

Tips for Incoming Engineers