Making career portal and web design and development for STUDIO IN-EX Zrt. - Case study part 1

2018 I had the opportunity to work on web design and development of career portal and new business website of STUDIO IN-EX Zrt. IN-EX is an architecture and engineering company specializing in effective design of large commercial and industrial buildings, leveraging BIM (Building Information Modeling). I've a long history with IN-EX – pre-university I worked there as an intern, and 2015-2016 I took part in company's re-branding, and interior design of the new office. 2018 I worked on refreshing all brand collaterals from logo to print materials. In-between the company grew from a small studio to a market leading, and industry-shaping international company, with more than 160 colleagues. The project was an inspiring challenge, both in terms of web design and development, paired with an ideal and smooth workflow, I'll share in two parts, starting with design below, and then following with development.

Growing need for a bespoke career portal and new business website

2017 IN-EX started an intensive recruitment strategy, to support the growing number of projects. Since advertising on SaaS recruitment platforms was costly, and limited, investing in a bespoke career portal solution made sense. Having one central platform only to advertise open positions and receive applications was also needed. The portal also had to enforce employer branding by communicating the very professional, yet friendly atmosphere IN-EX has. 2018 a full business website re-design was also actual, so that designing and developing both the career portal and the business website at a time was practical.

We defined the career portal's and business website's target audiences, and the different use cases how the sites may be used. After considering integration of career portal to business website, we decided to separate the two, because of their different target audiences and uses, while keeping a central content management interface for the maintenance advantages.

Scoping features for the career portal

Intensive consultations and collaboration with internal and external experts started with finding and filtering the features the career portal needed from the inside and out. The personal meetings accompanied the five-month process, with at least weekly frequency. Based on Mariann Margl’s external HR professional’s and Vera Molnár’s STUDIO IN-EX’s dedicated specialist's guidance we defined a feature set, that was unique to IN-EX’s specific needs. Designing the web platform was tricky, because it had to fulfil triple aspects:

• The career portal had to clearly communicate the values of the company, both to regular visitors and job applicants.
• The portal had to be perfectly manageable by HR, with the justifiable level of flexibility, and most minimal prone to error, even when being edited by more colleagues.
• All applicants had to be able to easily apply for a job, along perfect error handling, and maximum protection of personal data.

Planning content for the business website

A key selling point of STUDIO IN-EX's services is the 'closed-BIM' based workflow, the company has built over the years. It leverages the potential of having professionals from many fields of the whole building design process, and cutting-edge technology under one roof, resulting in a much more optimized building execution phase. Given that the company, and the technology itself is pioneering, we focused on educating visitors, and showing the benefits of working with IN-EX. We also wanted to give insight into company's atmosphere, which still has the homelike characteristics of studio's early days, empowering colleagues to talk, and share ideas.

Starting the visual design process with wireframing

We assumed most visitors might look and apply for career opportunities, or browse the company's services primarily from their desktop or laptop, the sites also had to perfectly work on devices with all kinds of other devices, with 100 percent feature parity on each. We created a sitemap, defining all necessary screens, creating a natural flow of browsing the sites, and applying for a job. Then, after defining all necessary pages, I made wireframes of all screens, to explore most efficient layout of elements, for good UX both on desktop and mobile. Starting design with wireframing helped us experience the large amount of data we had to work with, especially the more than a hundred input fields of the main application form. The UX design process was also supported by Manuéla Szabó's supervision, from Vidu Media Kft.

Making the visual design

After everything found its place on the screen, and the website had an organized structure, I developed a visual look, building on the solid brand elements, that were re-designed earlier, the same year. I worked towards a UI, that works well for both the career portal and business website, and aligns with IN-EX’s efficient and straightforward mindset. Since the office space was just finished recently, I used extensive imagery showing it in use, giving insight into studio’s everydays. Building on the studio interior’s communicative value, I defined a simple, minimalistic UI, through that images shine. Some of the photos were exclusively shot for use on the website, by Vidu Media. I applied a component-based visual design approach, which I can consistently and easily extend or scale as the website grows.

I designed all screens for desktop and mobile screen sizes, to ensure a good base for custom development. The component-based visual approach secured flexibility in advance, so that development shouldn’t be pulled back as new needs arose. Designing and logically arranging the content editing interface was also ensured by defining content relationship between pages in advance. Choosing the professional Perch CMS as our content management system – a tool that enables bespoke creation of websites’ admin – supported me to develop an editing experience, that enables contents editors to fully manage the website, even with minimal or no training involved, and non-existent prone to error.

Visit the website’s ‘My work’ page for more screenshots of both the career portal’s and the business website’s visual design.

Introducing the development part with Perch CMS

In part two of this case study I’m going to introduce development part in more detail, very soon. I’ll give insight into building the front-end, and then focusing on creative use of Perch CMS, pushing it to handle the bespoke needs of the career portal, and job application.