Repair product's design system and improve user experience of job searching platform

UX/UI design, Prototyping, Design Ops
Project Overview
  • Company:
    ‍    Dryg.pl (now part of pracuj.pl)
  • Product Description:
    Job Board & ATS platform
  • Role:
    UX/UI Designer, collaborating with Design Team, QA and Devs
  • ‍Platform:
    Web application, Mobile App (iOS, Android)
Context
Dryg was a child product of a larger job board brand which goal at that time was to explore the field of blue collar employees. As a constantly and rapidly evolving platform Dryg started to struggle with inconsistency in the design and user flows. It was impacting user experience and the development process.

Set the foundation

UX Audit
  • Design System Review
  • Heuristic evaluation
  • Usability & Accessibility review
To create any solutions I had to start with gathering all of the necessary information. We had to approach it in two ways:
‍
Review the existing user experience - which included assessing the ease of navigation throughout the service (information architecture, user flows), reviewing accessibility and UI ease of use (WCAG compliance check, UI elements review) and general User understanding of the communication and product (copywritting).

Review of the design files - I wanted to understand how the product and development teams were operating so I could spot issues and find areas of improvement.

What I’ve found at this stage:

  • Not clearly distinguished flows for two types of users (employee and employer). Resulting in dead ends or large bounce rates on specific pages. The platform struggled to provide clear paths to Job Board user and Employer ATS.
  • Many hard to read (low contrast) texts and several too small UI action elements (e.g. buttons) that were causing strain to the users.
  • Not covered edge cases for some of the user flows, making the system behave unexpectedly and often add redundant steps in user flows.

Design deliverables review

I reviewed the design files (Figma) as well as other present artifacts (personas, product presentations, etc.) to seek inconsistencies and workflow improvements.

Most problems could be found in the Figma files, which contained styleguide and wireframes. The platform designs were using UI components from different libraries, scattered between different files. Grid appliance was inconsistent as well as the spacing system. It was hard to get the knowledge of “what is where” in the files without assistance of the designer.

The construction of the UI component library was incoherent and hard to comprehend by the developers during hand-off.

The prototype features of Figma were not used at all, making it much harder to test the proposed flows with the users as well as show them to the developers.

With the incomming redesign of the mobile app, I have recommended to create proper UI component library that could be shared between web and mobile apps. This would make further design creation more consistent, easier and faster. The advantages would also apply to the development, additionally decreasing it’s cost.

Solution space

Ideation & Delivery

Scalable and optimized design system

I worked closely with the developers to achieve a mutual understanding of our goals in terms of the hand-off and general UI construction.

Before we would enter any UX improvements, we needed to have a solid fundament to build proposals for the new views.

I introduced 4px spacing system under which we aligned typography, icons and UI elements. This allowed us to work faster with placing and pairing different elements in the UI as well as achieve better harmony in the layout.

To avoid any misinterpretations, we replaced naming system (colors, typography styles, UI elements and their states) to one that is more predictable and can be shared between design files and the code repositories.

We moved the styleguide, UI components, wireframes and prototype to one, collaborative file which allowed the team to reduce the need to communicate and seek the information. Making the further development time much faster and coherent with the design files.

Our design team significantly reduced the number of used UI elements, using what’s left to the fullest. It streamlined  the UX improvement ideation part as well as the development. The whole library was easier to navigate and understand.

The final change was to unify the UI elements between web application and mobile applications. Our client did not have a robust design team on it’s own and we knew it would be hard to manage several libraries with available resources. The management became easy when we hit the golden spot that allowed us to use the majority of the same components for all platforms (web, iOS app, Android app).

UX improvements

  • Clearing up user flow and better distinction between using the Job Board as a user actively seeking a new job and Employer ATS - that tracks applicants and job offers. We’ve created improved main navigation with clear login page showing the user to which part of the platform he is logging in.
  • System’s behavior improvements when using Job listing - We got rid of pagination allowing users to use infinite scroll. Getting into an offer page and returning to the listing would now return to the place where the user was before, with all of the filters selected. It was infuriating existing users before the change because there was no fast and efficient way to go back.
  • Improving event trigger areas - larger buttons, larger input spaces and other controls allowed users to be less precise about clicking/tapping and by that decreased the cognitive load with using the interface. The whole platform has become more accessible and easier to use.
  • Speeding up task completion time - we’ve tried to remove as many as possible of redundant steps in user flows, rethinking their purpose while still keeping an eye for current code’s architecture limitations. The need to jump around/scroll through the interface to e.g. reach critical buttons was significantly reduced in major tasks (like applying for a job).
  • Edge case coverage - we’ve worked closely with the development team to remove dead end’s and unlogical redirects in various situations which were not covered in the initial designs. For example we’ve changed the link building approach for job offers, which contained job category, when a user would enter an expired link to a job, the system would inform him about it and show similar offers from the same category.

Effects

What we achieved
  • We’ve set up improved workflow between the design and development teams that was faster and required less assistance which also improved the delivery quality.
  • With my help Dryg mobile apps stopped receiving bad ratings that pointed out usability issues and weak user experience. App rating improved significantly in short period of time. (From 3.6 to 4,5 in 3 months)
  • I have cooperated strongly with the client to remove inconsistencies in the design system and improved general aesthetics of the product.
  • Creation of a one design file that contained all of the necessary design information which improved the information flow between team members.
  • Our UX improvements also helped to increase the level of job applications per user as well as other KPI’s.

There's more when we meet.
Drop me a hint what your needs are.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Copyright@MAKEUX 2023

Home

About me

LinkedIn