Ahura

UI Design for a Human Development Career Platform | A Clear, Trust-Centered Desktop Interface.

Computer screen displaying a website in Arabic, placed on a wooden desk alongside a paper coffee cup, notebooks, and colored pens, in a minimalistic setting.

01
My role:

Ui designer

02
Timeline:

May 2023 - Jan 2024

03
Tool Used

Figma, Adobby Illustrator

Project Overview

• Create a consistent and trustworthy platform for personal and career development.
• Make personality-test flows clear and engaging.
• Encourage return visits and user loyalty.
• Build a visual identity based on illustrations instead of photography.

Business Goals

• People searching for a suitable career path.
• Users who want to understand and improve their personal and professional capabilities.

Target Users

• Home page with all key services visible.
• Full UI for personality test flows.
• A unified, minimal, illustration-based look.
• Scalability for future features.

Client Priorities

• Lack of clear UX research → required additional clarifications during UI design.
• Very large number of screens (88) with shifting requirements.
• Maintaining visual & component consistency across expanding pages.
• Close collaboration with developers to ensure accurate implementation.

Challenges

My Approach

Visual Exploration

I evaluated two visual directions, a clean corporate look vs. an illustration-driven friendly interface.
Considering the product’s need for trust, safety, and approachability, I selected a minimal layout with consistent illustrations to create a warm yet professional tone.

Screenshot of a project management or design process with six steps: Requirement clarification, Wireflow mapping, UI system exploration, Component creation, Scaling across 80+ screens, and Developer handoff. Each step has a description and a checkmark icon indicating completion.

Workflow & Process

Wireframes | Low-Fi

The wireframes helped define the core structure and flow before moving into the high-fidelity UI stage. Since the project included more than 80 screens, this step ensured consistency, logical hierarchy, and a clear foundation for the visual system.

Key screens

Four grayscale webpage wireframes showing different main flow screens with wireframe elements such as placeholders for images, text, buttons, and navigation menus.
Multiple wireframe website design mockups in grayscale with various layout elements such as headers, images, text blocks, and navigation menus.
Two wireframes of a website design, each with a top navigation bar, various placeholder sections for content, buttons, and image placeholders, illustrating simplified webpage layouts.
Person using a laptop at a round wooden table, with a glass of water and a black notebook nearby in a room with patterned curtains and a yellow wall.

Design System & UI Library

Color-coded cards labeled 'Primary' in green, 'Error' in red, and 'Success' in teal, indicating different status notifications.

Color pallet

A grayscale color palette with various shades of black, gray, and white, labeled with their respective names and descriptions.
A screenshot of an Arabic and English font selection menu, showing font styles such as Bold, Medium, Regular, Light, and Thin, with sample text in both languages and corresponding numbers for font weights.

Typography

Grid

A screenshot of a Persian-language website featuring icons of a person with headphones and a speech bubble, a person with glasses and a laptop, and a hand holding a smartphone. The website contains navigation tabs and various sections related to employment, training, resources, and assessments.
A screenshot of a website in Persian language with a header and a sidebar, including icons for profile, chat, and shopping cart, a main section with illustrations of people and form fields, and footer icons for email, Instagram, and phone.

Icon

A digital toolbar with icons for actions such as editing, gifting, sending, viewing, email, liking, protecting, adjusting settings, clock, Instagram, speech bubble, phone, shopping cart, lightbulb, and notifications.

Component

Screenshots of a website with navigation options in Persian language, including sections for registration, login, home, abilities, competence, projects, research, and educational tests, with some illustrations of people.

+ 80 Screen 9 Months

Collection of multiple preview screens of a website or app with a green and white color theme, showing various interfaces and content layouts.
Multiple website screens displayed around a laptop in a digital workspace, showing interface designs with green and white color schemes.

The minimal visual style and step-by-step flow;

Reduced cognitive load.
Sped up test completion.
Increased user engagement by up to 30%.

Watch the key user flows in a quick walkthrough!

A black checkmark icon on a white background.

Output of soft skills & knowledge

This project was my first professional experience in the UI design field, marking my transition from structured learning into real-world product design. It allowed me to face real challenges, strengthen my UI skill set, and apply design principles in a true production environment.

Throughout the process, I collaborated closely with cross-functional teams to align design decisions with business goals while maintaining a strong user-centered approach through continuous feedback and iteration.

The project moved through both design and development phases and was later paused due to changes in the company’s roadmap. Despite this, it became a valuable hands-on experience that deepened my understanding of production-level UI design and professional collab

Clike to learn more about this project