Web application design for Code Unity
CodeUnity is a platform for people starting a career in IT. It helps users find real projects to join, ask questions, and show their skills in one place.
People starting a career in IT often need practical experience before they can access paid work, but they have limited ways to get it. Most existing platforms focus on jobs or freelance work and are less suited to learning projects and peer support. This created a need for a platform where users could:
find contributors for a project or create their own project
ask technical or career-related questions
The product was designed for desktop and mobile web platform, with mobile as main priority
the project was delivered in hackathon format, where 3 teams competed to propose the strongest solution in a limited timeframe
the product had no existing brand foundation
Launch a usable MVP and start building an active audience. Early success depended on registration, contribution, and repeat use, with a longer-term aim to grow into a niche alternative to larger platforms and support future monetisation
Targets:
100 users within 2 months of launch
3,000 users by 2027
Design a clear and consistent user interface for a platform for people starting a career in IT, bringing together two key parts:
a project marketplace for gaining practical experience
a forum for learning, support, and peer interaction
I worked in a cross-functional team of 7 designers, 1 project manager, 3 product owners, and 4 developers
I contributed from discovery to implementation support, covering research, user flows, wireframes, prototypes, and visual design
My main ownership was in two core flows:
new user registration and profile setup
project search, filtering, and applying
Registration flow KPI
Registration completion rate
Registration flow KPI
Time to complete registration
Profile setup flow KPI
Profile setup completion rate
Profile setup flow KPI
Time to complete profile setup
Discovery inputs were mainly prepared by the product owners and included market research, competitor analysis, and interviews with 17 people changing careers into IT
The research showed a clear gap between learning IT skills and gaining real experience. Most users had theoretical knowledge from courses, but lacked practical work they could show to employers. They needed structured, trustworthy projects, visible outcomes, and flexible mobile-friendly participation
These insights shaped the design direction:
clear project structure
role and level selection during onboarding
filtering by role and level
mobile-first low-friction flows
visible progress and outcomes
The information architecture was defined by the client and built around core data tables such as processes, risks and controls
I worked on creating user flows around three main actions according to user permissions: managing data, approving changes, and viewing information
Create account & set up profile
Find & join a project
Problem
Users skip profile setup after registration, it reduces profile quality and project applications
Design goal
Collect profile info during registration, but keep the flow quick and easy to complete
Success metrics
registration completion rate >80%
profile setup completion rate >60%
time to complete registration equal to or shorter than reference flows
User registration
Collecting personal information
User registration flow
Collecting profile information
Validation:
tested the flow to identify drop-off points
measured the share of users who skipped profile fields
Improvements:
added explanation of why profile details were needed during registration and what happens after registration
nudged users who skipped profile details to complete setup before applying
Problem
Users can act as both project participants and project creators, but profile setup does not clearly explain the difference between these roles
Design goal
Support both roles in one profile setup flow without forcing users to create separate profiles
Success metrics
number of role related errors <10%
time to complete profile setup less than in reference flows
User profile
Filling in the profile
Projects
Applicant and creator roles in a single user profile
Validation:
tested whether users understood the difference between the two roles
observed hesitation during profile setup
Improvements:
removed role selection in profile setup flow
added contextual hints in the project creation flow to explain which profile details were required
added navigation bar linking users to the relevant role information
Problem
On mobile users need to scan projects, filter results and apply without loosing context or getting overwhelmed by too much information on a small screen
Design goal
Design a mobile project discovery flow that is clear, structured and easy to act on
Success metrics
number of search and filter errors <10%
no hesitation during project discovery and apply flow
>80% of users applied to a project without errors
Project search
Mobile
User flow for project search
User flow for filtering
Filters
Job type
Office
Remote
Hybrid
Industry
Education technology
Entertainment
Games
Information technology
Finance
Level
Any
Junior
Middle
Senior
Stack
Any
JavaScript
C#
Python
PostgreSQL
Figma
Clear
Apply
User flow for applying to project
Data scientist
Backend developer
Product designer
Python
Java
Entertainment
Game dev
Mobile
IOS
Desktop
Web
PostgreSQL
UI UX
Product design
Backend
We were not provided with any existing UI kit, so we developed components based on visual and functional references from the client
We collaboratively built the design system with components and guidance for both mobile and desktop platforms. I was responsible for maintaining and updating it, making sure all screens used shared components.
Selected components
Buttons and icon buttons
Apply
Apply
Clear
Clear
Start your search
Start your search
Add new
Add new
2
Links
Search projects
Search projects
Tags
Entertainment
Entertainment
New
Already applied
New
Already applied
Inputs
Project name
Project name
Game dev
Project name
Game dev
Project name
Game dev
Game dev1
Please use only alphabet letters
Title
Game dev1
Please use only alphabet letters
Game dev
Project name
Game dev
Selects
Product designer
Product designer
Games
Games
Office
Office
Any
Junior
Middle
Senior
I supported implementation by preparing handover materials that made the designs easier to build, review, and discuss with developers
Handover included
annotated screens and behaviour notes for core flows
interactive prototypes
reusable components
QA focus
layout accuracy, consistency of spacing and typography
component behaviour
responsive adaptation across breakpoints
During QA, I reviewed implemented screens, clarified edge cases, and flagged mismatches for correction
Delivered a build-ready MVP for desktop and mobile web app
Improved key flows through prototype testing and iteration
Reduced friction in registration and profile setup
Clarified dual-role profile setup within one profile
Structured mobile project discovery and applying
Supported implementation through handover and QA