INDUSTRY
Human resources
SERVICES
Design system
UX/UI design
2021
makipeople.com
Maki represents the next generation of talent assessment and recruitment tools. With Maki, you can tailor the candidate platform to match your company's branding, defining the specific roles you seek to fill. Recruiters have the autonomy to source and hire talent across multiple companies, managing the process from beginning to end

In 2020, I had the privilege of being part of the design team responsible for building the Maki platform for a few months. Our objective was to develop a tool that enables the creation of custom assessments in just a few minutes.

Maki People

👩🏻 My Role, team and workflow

In the Maki People project, I collaborated with the excellent design lead, Martyna KrĂłlikowska. We worked collaboratively with developers and stakeholders throughout the entire process. My role was to create four main features in the app: Onboarding, Test Builder, Settings, and the Candidate space, which I am presenting in this case study.

We used a flexible agile method for work approach. We broke our work into small parts and quickly tested ideas within our team. This helped us make sure our basic product was good enough before we released it.

🎨 Design Process

  • Competitor research
  • UX audit
  • Product UI
  • Design system

Wireframes and UI design

Since the branding was already prepared by another agency, we decided to work on the design system and high-fidelity wireframes and iterate with functional solutions and visual layers.
Look and feel
For this project, colors were determined by the branding. We also created a palette of neutral shades for the UI design. Additionally, we focused on flat elements, as they complemented the branding strategy well. We choose 'Inter' as one of the best font for web apps, readable even at very small sizes.
Onboarding
The first flow I've created was onboarding. I decided to keep it as simple as possible, as I didn't want to distract the user from the main goal: registration. Additionally, I planed to include some branding elements and designed clear error prevention messages.

Test Builder

Test Builder is a feature that enables recruiters to create fully customizable tests for future candidates. This option sets Maki apart in the Human Resources market.  

For Test Builder, I decided to utilize the wizrad pattern to allow users to concentrate on their goal. There are elements that help notice steps to complete the task, view the status of building, and freely add or remove questions. Furthermore, having a distinct layout for both the question editor and the list grants users greater control over the status and facilitates easier management during completion.

Candidate Space

After customizing the test, recruiters need to send it to the candidate. That's why we needed to create a platform where candidates can take the test. It's crucial that the layout reflects the branding of each company.

We aim to let companies assess candidates with their own branding, ensuring a proper fit. Another key aspect of this feature was developing a mobile version, making it easier for candidates to access and take the test on their phones

Settings

I've prepared all elements - plans and billing, user options, integrations, and company settings. It was important here to maintain understandable patterns
and easy-to-navigate actions.

Design System

What would Product Design be without a proper Design system? Let us delve into a sneak peek of the Maki documentation and the meticulously crafted components.

Goal for this part - build scalable and flexible components with clear documentation.
The approach of building a design system based on best practices of Figma tool.
Check out next project

Bright Data — key player in providing large-scale and diverse datasets for analysis and research

Magda Krejer
© 2024 All Rights Reserved
projectskrejermagda@gmail.com