Figma Setup

Based on previous best practices, I created a Figma folder system, to house all parts needed for starting and categorizing all assets, components, ideas and designs (both work in progress and finalized for development).

UI Library / Design System

Then I started on laying down the foundation of (yet empty) pages for the design system including design tokens (colour, typography ect.), individual components (buttons, input fields etc.) and patterns (carousels, forms etc.).

Using brand guideline I would start creating tokens, components and patterned based on it’s visual properties.

After that, with the help of my project manager and business, we ideated on the site’s informational architecture, navigation, site map and possible user flows we needed.

When it was done, I could start assembling the missing pages and their UI’s.

With the development team, we would work in 2-week sprints using JIRA and Agile methodologies. In daily stand-ups we would discuss on what tokens, components or patterns were needed, I would explain them our Figma folder system, the placement of all UI elements, components and how to find anything they might need. For really hard to explain user-flows I would create prototypes, videos or we would go through it in a call.

Prototypes were also used for testing and comparing out various user-flows.

At the meantime, as I was gaining an understanding for the modules and components needed, I helped refine what style (based on brand) and what formats (based on UI) we need the 3D assets from our external 3D artist.

By giving him some examples and creating some basic drawings in FigJam, we would have touch-points every other day to keep an asset inventory in check and up to date. I would also help out (with some basic art direction) the composition, colouring, textures and lighting ideas for the 3D assets, to match and give out the same feeling as our brand guideline.

I would transfer the finished assets to our Asset Library, along with Icons, Logos and other assets.

Then in the end, assemble the final designs for the pages by using said assets and come up with appropriate copy for the modules (sometimes suggesting approprite ones matching the UI, or via meetings with copywriters). I also made sure, that all modules would be fluid based on the differences of copy after translation.

After development, the pages would be available in a test site, where our tester and I could make sure the visuals and user flows were in order. We would collect bugs or improve user flows based on feedback from various people.

At this stage we also fine tuned micro animations and behaviour for all UI (to help user discovery, affordances, to draw attention to different parts of the site, or to help users understand the behaviour of certain layouts)

Outcome / Results

After testing we introduced the site to our country admins (also to test it, have a feel for it, if it satisfies their needs) and would roll it out slowly in a country-by-country manner.

I was very satisfied with the team, tools used, the UX and look of the finished project.

From side of busines and users, right at the first roll-out in Germany and Austria, some indicators (like job alarm creation and CV maker usage) were immediately at high levels, meaning that the users found no issues adjusting to the new interface and a visible growth in job applications could be measured.

While the roll out is still ongoing as of the creation of this page, all admins have seen and spent time on the new site, and probably the biggest compliment from them is an "unusual quietness", meaning that it seems like, they all find the changes and the new simpler modular system easy to adjust too as well.

I would like to thank again Trenkwalder for their trust placed into me, to create an entirely new webstie and design system from scratch for them.