praca.money.pl

Job Finder Website

Redesign of the recruitment sub-site for the largest Polish business website dealing with finance, economy and economics. Over 1 million Polish people visit money.pl every day looking for business information from the country and the world.

Project Goals

1 New visual Identification

1 New visual Identification

New sub-brand design consistent with the money.pl’s home page brand. The project covered designing a new logotype, a new colour scheme promoting the sub-service and a new system of icons and illustrations.

2 Based by WP Design System

2 Based by WP Design System

Wirtualna Polska Group tries to make its news services more coherent by adding the Design System components. The project assumed designing several views consistent with DS components, such as article view, pagination, breadcrumbs, or site grid.

3 Search engine optimization

3 Search engine optimization

I consulted wireframes with the SEO Team at every stage of the design process. I wanted my design decisions such as breadcrumbs view, dynamic links, pagination, information architecture, list all hyperlinks to be not only useful for the user, but also to position the website high in search engines.

4 MoSCoW Design Prioritization

4 MoSCoW Design Prioritization

At the core of the design process is design management. As a designer, I wrote down the “functional requirements” and together with other team members (Product Owner, Project Manager, Technical Lead). I set the work priorities according to the MoSCoW method. Thanks to the MoSCow method, I knew which functionalities are a priority to design and which are insignificant.

5 New mobile version

5 New mobile version

The old version of the website had only a desktop version. The new project included the design of a responsive version of the site, scalable to a width of 360 px.

6 New information architecture

6 New information architecture

In the initial phase of the Design Process, I prepared a project of new information architecture on the website. I also designed a completely new linking system, so that the user’s journey through the website was not only useful and intuitive but also compliant with SEO requirements.

7 Deliver MVP. Design EVP

7 Deliver MVP. Design EVP

As a designer, I was obliged not only to design a product that meets several MVP (Minimal Viable Product) principles, but one of the main tasks was also to design subsequent iterations of the service – so that the IT team could optimally scale/develop the service to the final version of the software – EVP (Exceptional Viable Product).

8 New jobs category tree

8 New jobs category tree

praca.money.pl is the largest aggregator of job offers on the Polish internet. The service aggregates job offers from over 6 different services! The project design challenge was to design a new job offer category tree on the website so that the new categories would match all the categories of external providers. The new categories had to be not only compliant with SEO guidelines – optimal for possible future changes, but most importantly – useful for the user.

Teamwork

Design Thinking

Design Thinking

Several teams were involved in the website redesign project. The basis of the design process is not only consistent communication but also the ability to manage a project. My Product Design Team worked according to design thinking principles.

Through a series of workshops conducted with several other teams, we defined: user problems but also business, sales and technical requirements. Our teams worked in several methodologies, such as SCRUM or Kanban. Thanks to agile management, we delivered a complete and satisfactory product to the production (not only for the users but also bringing business benefits).

Design Process

Iterative process

Iterative process

User Experience affects every aspect of the product being built, which is why my team of UX designers participated in all cycles of building the system – from the idea to the evaluation of the service in the production version. In the work of designers, proper management of the entire design process means organising work in such a way as to skilfully define problems and finally provide solutions that meet not only users’ expectations but also business needs.

Design Workflow

Developing your own design workflow is almost as important as having your own style in designing. As a Product Designer, I believe that a selection of appropriate tools should always be adjusted to the challenges and problems that need to be solved. The most important thing is to skillfully define the problem and then choose the right tools! 

Design project management tools

Google Sheets – I used this tool to list all the functionalities and mockups that I was supposed to design. Thanks to GS, we defined application modules included in MVP (Minimal Viable Product) and modules included in EVP (Exceptional Viable Product). Thanks to Google Sheet, we also developed the information architecture, e.g. the “Jobs Category Tree” functionality.

BigPicture – I used the plug-in to manage UX and UI works. Thanks to the creation of the Gantt chart, each member of the project team knew what task they had to perform (WBS – Work Breakdown Structure (WBS). By planning tasks through the Big Picture plug-in, I created a comprehensive roadmap and timeline of the project.

Sketch – UX and UI designers used this tool to prepare wireframes, prototypes and Hi-Fi mockups.  

Draw.io – this tool helped me to lay out the structure of the website and the user flow (user navigation through the website – a series of steps that the user must go through to achieve a set goal.) 

Jira – was used to manage tasks for all team members. 

Confluence – this tool was used to prepare the project design specification (including technical documentation).

Abstract – this tool was used for versioning mockups and project handoff for several teams: SEO + Business and Development Team + IT Team. 

Information architecture

Website Modules and Structures

Website Modules and Structures

Website Modules and Structures

Preliminary draft of information architecture, structures and model of the praca.money.pl website.

Re-design

User Interface

User Interface

The last redesign of the website was done in late 2013 and since then the website has not been developed. The website was not responsive. Nowadays, more than half of users use the internet on mobile – the lack of responsiveness forced a decision to redesign! 

GUI

Based by WP Design System
Wirtualna Polska has been unifying its services for a few years now by adjusting them to the design system guidelines. The UI designer, with whom I had the opportunity to work in the Hi-Fi mockups, used a number of DS components such as article view, pagination or service grid.

Typography

Based by money.pl
While designing typographic styles on the website, the UI designer relied as much as possible on the design system guidelines. In the logotype design we used the Ample font, which is not only a font promoting the wp.pl brand but also a font used in the money.pl logotype.  

Colors

New sub-brand
We added one colour to the system design to distinguish the sub-service from the money.pl news service. Thanks to that, we gave the website an individual character creating a modern sub-brand.

From UX to UI

As a UX designer, I have designed dozens of Lo-Fi wireframes. Each subsequent mock-up was subject to change – incremental improvement. Working on Low-Fi mockups often meant changing and reworking many elements of the product at once (to have a holistic view of the product). I finally handed over the validated Lo-Fi mockups to the UI designer, who worked in an incremental system.

Final look

A jobs Ads Clipboard

Jobs Clipboard is one of the basic functionalities of the website. In the MVP version, the feature provided for such functionalities as a history of viewed job offers + a list of saved job offers. After researching the user’s needs, I also designed the EVP (Exceptional Viable Product) version with functionalities such as a list of favourite employers + encouraging users to create an account + ads placeholder.

Empty states

Designing well-thought-out and useful empty states help users navigate the site. It also reduces users’ frustration and the feeling of being lost. Thanks to well-designed empty states – the user knows why there is no data in a specific place on the website. 

Thanks to empty states, our application increases users’ involvement in exploring functionalities and limits the number of exits from the service (choosing competitors’ products).

Jobs list and a job offer

Documents

Conclusion

Finally, we implemented the service into production, which not only improved usability but also increased user satisfaction (better information architecture and implementation of the mobile version). The success of the project is also evidenced by the number of users (real users) increasing every year + higher time spent on the website.

Check out more.

Check out more.

Read more case studies of my designs and check the success stories of my clients:

Read more case studies of my designs and check the success stories of my clients:

Swipe and click …

Swipe and click …

Swipe and click …

let's work together.

Let’s create something that makes you stand out, together.Drop me a line to talk about your project dream.

let's work
together.

Let’s create something that makes you stand out, together. Drop me a line to talk about your project dream.

let's work together.

Let’s create something that makes you stand out, together.Drop me a line to talk about your project dream.

Make Digital Products since 2016. To create digital world simpler, smarter and more helpful for users people.

Make Digital Products since 2016. To create digital world simpler, smarter and more helpful for users people.

Make Digital Products since 2016. To create digital world simpler, smarter and more helpful for users people.

Industry insights, my projects updates & new articles from blog. Discover (or not) the best designed newsletter ever. Let’s be together.

In touch?

me.

services.

my projects.

Follow me:

Partnerships:

VERIFIED • FRAMER • EXPERT •
PROFESSIONAL WEBFLOW CERTIFIED PARTNER ––––
IREB CERTIFIED PROFESSIONAL •

© 2024 walencik.org. All rights reserved.

Industry insights, my projects updates & new articles from blog. Discover (or not) the best designed newsletter ever. Let’s be together.

In touch?

me.

services.

my projects.

Follow me:

Partnerships:

VERIFIED • FRAMER • EXPERT •
PROFESSIONAL WEBFLOW CERTIFIED PARTNER ––––
IREB CERTIFIED PROFESSIONAL •

© 2024 walencik.org. All rights reserved.