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.
