556 lines
27 KiB
HTML
556 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru" data-theme="dark" data-radius="medium">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<meta
|
|
name="description"
|
|
content="Product designer and vibe coder with over 10 years of experience. I design digital products, interfaces and design systems, combining UX, no-code and code for clean, working solutions."
|
|
/>
|
|
<title>Nikolay Mamadaev — Product Designer</title>
|
|
{{> head-links}}
|
|
|
|
</head>
|
|
<body class="home">
|
|
{{> header-home}}
|
|
{{> fab-stack}}
|
|
<main id="main">
|
|
<section class="hero" aria-labelledby="hero-title">
|
|
<div class="hero__grid">
|
|
<div class="hero__text">
|
|
<p class="hero__eyebrow">Nikolay Mamadaev</p>
|
|
<h1 id="hero-title" class="hero__title">
|
|
I bring order to where business loses
|
|
<span class="hero-rotator" data-hero-rotator aria-label="time, customers, money">
|
|
<span class="hero-rotator__word" data-hero-rotator-word>time</span>
|
|
</span>
|
|
</h1>
|
|
<div class="hero__actions">
|
|
<a class="btn btn--primary btn--flat" href="#contact"><span class="btn__icon" aria-hidden="true"></span><span>Get in touch</span></a>
|
|
<a class="btn btn--secondary btn--flat" href="#portfolio"><span class="btn__icon" aria-hidden="true"></span><span>View portfolio</span></a>
|
|
<a class="btn btn--secondary btn--flat btn--resume" href="resume/"><span class="btn__icon" aria-hidden="true"></span><span>Resume</span></a>
|
|
</div>
|
|
</div>
|
|
<div class="hero__visual" aria-hidden="true">
|
|
<div class="hero__portrait-shell">
|
|
<div class="hero__portrait">
|
|
<div class="hero__portrait-inner">
|
|
<div class="hero__portrait-layers">
|
|
<div class="hero__portrait-layer hero__portrait-layer--bg">
|
|
<img
|
|
class="hero__photo-bg"
|
|
src="{{assetPrefix}}assets/index/me_static.webp"
|
|
alt=""
|
|
width="320"
|
|
height="320"
|
|
loading="eager"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
<div class="hero__portrait-layer hero__portrait-layer--motion" data-hero-motion-layer>
|
|
<video
|
|
class="hero__photo-motion"
|
|
data-hero-motion-video
|
|
data-src="{{assetPrefix}}assets/index/me_motion.webm"
|
|
poster="{{assetPrefix}}assets/index/me_motion.webp"
|
|
muted
|
|
loop
|
|
playsinline
|
|
preload="none"
|
|
aria-hidden="true"
|
|
></video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section marquee marquee--grid" aria-hidden="true" data-reveal>
|
|
<div class="section__inner">
|
|
<ul class="marquee-grid">
|
|
<li class="marquee-grid__cell"><span class="hero__tag">UX/UI</span></li>
|
|
<li class="marquee-grid__cell"><span class="hero__tag">10+ years of experience</span></li>
|
|
<li class="marquee-grid__cell"><span class="hero__tag">Product thinking</span></li>
|
|
<li class="marquee-grid__cell"><span class="hero__tag">Design systems</span></li>
|
|
<li class="marquee-grid__cell"><span class="hero__tag">Mentoring & coaching</span></li>
|
|
<li class="marquee-grid__cell"><span class="hero__tag">AI tools & vibe coding</span></li>
|
|
<li class="marquee-grid__cell"><span class="hero__tag">User Research</span></li>
|
|
<li class="marquee-grid__cell"><span class="hero__tag">Prototyping</span></li>
|
|
<li class="marquee-grid__cell"><span class="hero__tag">Usability Testing</span></li>
|
|
<li class="marquee-grid__cell"><span class="hero__tag">Figma</span></li>
|
|
<li class="marquee-grid__cell"><span class="hero__tag">CJM / UJM</span></li>
|
|
<li class="marquee-grid__cell"><span class="hero__tag">JTBD</span></li>
|
|
<li class="marquee-grid__cell"><span class="hero__tag">Information Architecture</span></li>
|
|
<li class="marquee-grid__cell"><span class="hero__tag">Product-Market Fit</span></li>
|
|
<li class="marquee-grid__cell"><span class="hero__tag">ARPU / ARPPU</span></li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
{{> projects-section-mp}}{{> projects-section}}{{> mini-projects-section}}
|
|
|
|
<section id="experience" class="section section--surface" aria-labelledby="experience-title" data-reveal>
|
|
<div class="section__inner">
|
|
<h2 id="experience-title" class="section__title">Experience</h2>
|
|
<ol id="experience-list" class="experience-grid">
|
|
<li class="experience-grid__item">
|
|
<div class="exp-card" data-exp-order="1">
|
|
<div class="exp-card__time-row">
|
|
<span class="exp-card__period">January 2026 — Present</span>
|
|
</div>
|
|
<h3 class="exp-card__company">
|
|
Astratech
|
|
</h3>
|
|
<p class="exp-card__desc">
|
|
Development and support of digital systems and tools that boost team efficiency.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="experience-grid__item">
|
|
<a
|
|
class="exp-card exp-card--link"
|
|
href="https://primo-rpa.com/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-exp-order="2"
|
|
aria-label="Primo RPA — open company website"
|
|
>
|
|
<div class="exp-card__time-row">
|
|
<span class="exp-card__period">February 2023 — November 2025</span>
|
|
<span class="exp-card__sep" aria-hidden="true">·</span>
|
|
<span class="exp-card__duration">2 years 10 months</span>
|
|
</div>
|
|
<h3 class="exp-card__company">
|
|
Primo RPA
|
|
<span class="exp-card__ext" aria-hidden="true"></span>
|
|
</h3>
|
|
<p class="exp-card__desc">
|
|
A business process automation platform with a suite of products: a studio for building bots, an orchestrator to manage them, an Idea Hub for process selection, and AI servers for models and data recognition.
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li class="experience-grid__item">
|
|
<a
|
|
class="exp-card exp-card--link"
|
|
href="https://icons8.com/lunacy"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-exp-order="3"
|
|
aria-label="Icons8 (Lunacy) — open company website"
|
|
>
|
|
<div class="exp-card__time-row">
|
|
<span class="exp-card__period">July 2022 — January 2023</span>
|
|
<span class="exp-card__sep" aria-hidden="true">·</span>
|
|
<span class="exp-card__duration">7 months</span>
|
|
</div>
|
|
<h3 class="exp-card__company">
|
|
Icons8 (Lunacy)
|
|
<span class="exp-card__ext" aria-hidden="true"></span>
|
|
</h3>
|
|
<p class="exp-card__desc">
|
|
A vector editor for UI/UX and web design with Sketch support, a built-in library of icons/photos/illustrations, and a set of AI tools to speed up routine work.
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li class="experience-grid__item">
|
|
<a
|
|
class="exp-card exp-card--link"
|
|
href="https://manu.co/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-exp-order="4"
|
|
aria-label="MANU Video Game Maker — open company website"
|
|
>
|
|
<div class="exp-card__time-row">
|
|
<span class="exp-card__period">January 2019 — December 2021</span>
|
|
<span class="exp-card__sep" aria-hidden="true">·</span>
|
|
<span class="exp-card__duration">3 years</span>
|
|
</div>
|
|
<h3 class="exp-card__company">
|
|
MANU Video Game Maker
|
|
<span class="exp-card__ext" aria-hidden="true"></span>
|
|
</h3>
|
|
<p class="exp-card__desc">
|
|
No-code/low-code platform for building 2D and 3D games without writing code.
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li class="experience-grid__item" data-exp-extra hidden>
|
|
<a
|
|
class="exp-card exp-card--link"
|
|
href="https://www.orioninnovation.com/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-exp-order="6"
|
|
aria-label="Orion Innovation (ex MERA) — open company website"
|
|
>
|
|
<div class="exp-card__time-row">
|
|
<span class="exp-card__period">July 2016 — October 2017</span>
|
|
<span class="exp-card__sep" aria-hidden="true">·</span>
|
|
<span class="exp-card__duration">1 year 4 months</span>
|
|
</div>
|
|
<h3 class="exp-card__company">
|
|
Orion Innovation (ex MERA)
|
|
<span class="exp-card__ext" aria-hidden="true"></span>
|
|
</h3>
|
|
<p class="exp-card__desc">
|
|
An international technology company specializing in custom development and engineering solutions for large enterprise clients.
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li class="experience-grid__item" data-exp-extra hidden>
|
|
<a
|
|
class="exp-card exp-card--link"
|
|
href="https://aegees.com/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-exp-order="5"
|
|
aria-label="Aegees — open company website"
|
|
>
|
|
<div class="exp-card__time-row">
|
|
<span class="exp-card__period">October 2017 — December 2018</span>
|
|
<span class="exp-card__sep" aria-hidden="true">·</span>
|
|
<span class="exp-card__duration">1 year 3 months</span>
|
|
</div>
|
|
<h3 class="exp-card__company">
|
|
Aegees
|
|
<span class="exp-card__ext" aria-hidden="true"></span>
|
|
</h3>
|
|
<p class="exp-card__desc">
|
|
A secure messenger with end-to-end encryption and no message storage on servers, focused on maximum user privacy.
|
|
</p>
|
|
</a>
|
|
</li>
|
|
<li class="experience-grid__item" data-exp-extra hidden>
|
|
<a
|
|
class="exp-card exp-card--link"
|
|
href="https://spaceshipapps.ru/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
data-exp-order="7"
|
|
aria-label="SpaceshipApps — open company website"
|
|
>
|
|
<div class="exp-card__time-row">
|
|
<span class="exp-card__period">June 2015 — June 2016</span>
|
|
<span class="exp-card__sep" aria-hidden="true">·</span>
|
|
<span class="exp-card__duration">1 year 1 month</span>
|
|
</div>
|
|
<h3 class="exp-card__company">
|
|
SpaceshipApps
|
|
<span class="exp-card__ext" aria-hidden="true"></span>
|
|
</h3>
|
|
<p class="exp-card__desc">
|
|
A studio building mobile and web apps end-to-end for businesses and entrepreneurs.
|
|
</p>
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
<div class="experience__actions">
|
|
<button
|
|
type="button"
|
|
class="btn btn--secondary btn--flat experience__toggle"
|
|
data-exp-toggle
|
|
aria-expanded="false"
|
|
aria-controls="experience-list"
|
|
>
|
|
Show all
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="skills" class="section section--tight" aria-labelledby="skills-title" data-reveal>
|
|
<div class="section__inner">
|
|
<h2 id="skills-title" class="section__title">Skills</h2>
|
|
<div
|
|
class="skills-intro skills-intro--chat section__prose"
|
|
data-skills-intro
|
|
role="region"
|
|
aria-labelledby="skills-title"
|
|
>
|
|
<div class="skills-msg" data-skills-msg>
|
|
<div class="skills-msg__body">
|
|
<p class="skills-msg__author">Nikolay M:</p>
|
|
<p class="skills-msg__text">
|
|
My experience covers both launching a product's first versions from scratch and evolving mature solutions — where the goal is not to break familiar flows but to refine them carefully.
|
|
</p>
|
|
<time class="skills-msg__time" datetime="" data-skills-msg-time></time>
|
|
</div>
|
|
</div>
|
|
<div class="skills-msg" data-skills-msg>
|
|
<div class="skills-msg__body">
|
|
<p class="skills-msg__text">
|
|
Below are examples of real business tasks and how I approached them
|
|
</p>
|
|
<time class="skills-msg__time" datetime="" data-skills-msg-time></time>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="skills-categories">
|
|
<section class="skills-category" aria-labelledby="skills-cat-1-heading">
|
|
<div class="skills-category__layout">
|
|
<h3 id="skills-cat-1-heading" class="skills-category__title">
|
|
<button
|
|
class="skills-category__toggle"
|
|
type="button"
|
|
aria-expanded="false"
|
|
aria-controls="skills-cat-1"
|
|
data-skills-accordion-toggle
|
|
>
|
|
<span class="skills-category__title-text">Product thinking & interface logic</span>
|
|
<span class="skills-category__chevron" aria-hidden="true"></span>
|
|
</button>
|
|
</h3>
|
|
<div id="skills-cat-1" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
|
|
<article class="skill-task-card">
|
|
<p class="skill-task-card__task">
|
|
Make a complex product clearer so users reach key actions.
|
|
</p>
|
|
<div class="skill-task-card__solutions">
|
|
<p class="skill-task-card__solution">
|
|
I map the user journey and cut steps that don't move them toward the goal.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I design flows so every step makes clear what's happening and what to do next.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I make even complex features feel natural by using familiar patterns and standard UI elements.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<article class="skill-task-card">
|
|
<p class="skill-task-card__task">Improve the first steps in the product and guide users to their first "aha" moment.</p>
|
|
<div class="skill-task-card__solutions">
|
|
<p class="skill-task-card__solution">
|
|
I remove everything that distracts from the first result: extra steps, optional fields, secondary details.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I replace long explanations with small hints exactly when they're needed — no lengthy tours or complex manuals.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<article class="skill-task-card">
|
|
<p class="skill-task-card__task">Reduce support load through interface design.</p>
|
|
<div class="skill-task-card__solutions">
|
|
<p class="skill-task-card__solution">
|
|
I collect frequent requests and, based on them, simplify the flow and UI so users can solve issues on their own.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<article class="skill-task-card">
|
|
<p class="skill-task-card__task">Tie the interface to product goals, not just a feature list.</p>
|
|
<div class="skill-task-card__solutions">
|
|
<p class="skill-task-card__solution">
|
|
I start from the business and user problem we're solving, then build flows and UI around it.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I turn scenario problems into clear hypotheses and help the PM pick what actually moves the needle.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="skills-category" aria-labelledby="skills-cat-2-heading">
|
|
<div class="skills-category__layout">
|
|
<h3 id="skills-cat-2-heading" class="skills-category__title">
|
|
<button
|
|
class="skills-category__toggle"
|
|
type="button"
|
|
aria-expanded="false"
|
|
aria-controls="skills-cat-2"
|
|
data-skills-accordion-toggle
|
|
>
|
|
<span class="skills-category__title-text">Design systems & consistency</span>
|
|
<span class="skills-category__chevron" aria-hidden="true"></span>
|
|
</button>
|
|
</h3>
|
|
<div id="skills-cat-2" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
|
|
<article class="skill-task-card">
|
|
<p class="skill-task-card__task">
|
|
Bring several products or modules to a unified look and logic.
|
|
</p>
|
|
<div class="skill-task-card__solutions">
|
|
<p class="skill-task-card__solution">
|
|
I assemble a shared UI kit and core principles usable across all products.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I surface repeated patterns and consolidate them into one system instead of a dozen similar solutions.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I unify scattered solutions into a single design system that's comfortable for both designers and developers.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<article class="skill-task-card">
|
|
<p class="skill-task-card__task">Make the interface scalable without piling up hacks.</p>
|
|
<div class="skill-task-card__solutions">
|
|
<p class="skill-task-card__solution">
|
|
I define simple design principles and component usage rules.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I set up the design system structure so it's genuinely maintainable and extensible with new patterns.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<article class="skill-task-card">
|
|
<p class="skill-task-card__task">Tidy up interfaces that grew piece by piece over time.</p>
|
|
<div class="skill-task-card__solutions">
|
|
<p class="skill-task-card__solution">
|
|
I merge similar solutions into common components and patterns, removing duplicates and accidental differences.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I keep the interface clean and modern: readable typography, clear hierarchy, accents without visual noise.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<article class="skill-task-card">
|
|
<p class="skill-task-card__task">Refresh the product's look so it doesn't feel dated next to competitors.</p>
|
|
<div class="skill-task-card__solutions">
|
|
<p class="skill-task-card__solution">
|
|
I start with frequently used screens and elements so the impact shows for both users and business.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I align update stages with the current roadmap and dev workflow so familiar flows and releases aren't broken.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I set the base style — typography, color, spacing — so the interface looks clean and modern.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="skills-category" aria-labelledby="skills-cat-3-heading">
|
|
<div class="skills-category__layout">
|
|
<h3 id="skills-cat-3-heading" class="skills-category__title">
|
|
<button
|
|
class="skills-category__toggle"
|
|
type="button"
|
|
aria-expanded="false"
|
|
aria-controls="skills-cat-3"
|
|
data-skills-accordion-toggle
|
|
>
|
|
<span class="skills-category__title-text">Research, metrics & analytics</span>
|
|
<span class="skills-category__chevron" aria-hidden="true"></span>
|
|
</button>
|
|
</h3>
|
|
<div id="skills-cat-3" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
|
|
<article class="skill-task-card">
|
|
<p class="skill-task-card__task">
|
|
Get a real picture of user behavior instead of relying on the team's guesses.
|
|
</p>
|
|
<div class="skill-task-card__solutions">
|
|
<p class="skill-task-card__solution">
|
|
I talk to users: I watch how they solve their tasks in the product and what they do at each step.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I turn research findings into concrete changes in the interface and flows.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<article class="skill-task-card">
|
|
<p class="skill-task-card__task">Make sure key flows work before shipping them to production.</p>
|
|
<div class="skill-task-card__solutions">
|
|
<p class="skill-task-card__solution">
|
|
I prepare simple usability-test scenarios based on real user tasks.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<article class="skill-task-card">
|
|
<p class="skill-task-card__task">Understand how interface changes affect the product's key metrics.</p>
|
|
<div class="skill-task-card__solutions">
|
|
<p class="skill-task-card__solution">
|
|
I help describe the key events and funnels that reflect real user steps.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I look at metrics alongside real usage scenarios and suggest interface changes that make things easier for users and better for the product.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="skills-category" aria-labelledby="skills-cat-4-heading">
|
|
<div class="skills-category__layout">
|
|
<h3 id="skills-cat-4-heading" class="skills-category__title">
|
|
<button
|
|
class="skills-category__toggle"
|
|
type="button"
|
|
aria-expanded="false"
|
|
aria-controls="skills-cat-4"
|
|
data-skills-accordion-toggle
|
|
>
|
|
<span class="skills-category__title-text">Design team growth & mentoring</span>
|
|
<span class="skills-category__chevron" aria-hidden="true"></span>
|
|
</button>
|
|
</h3>
|
|
<div id="skills-cat-4" class="skills-category__grid skills-category__panel" data-skills-accordion-panel hidden>
|
|
<article class="skill-task-card">
|
|
<p class="skill-task-card__task">Build clear processes inside the design team.</p>
|
|
<div class="skill-task-card__solutions">
|
|
<p class="skill-task-card__solution">
|
|
I introduce regular design reviews of shipped work, where everyone gets useful, constructive feedback.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I agree on a task brief template and transparent acceptance criteria, so it's clear when a task is truly done.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I set up a workflow that handles both planned work and urgent "on-fire" tasks.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<article class="skill-task-card">
|
|
<p class="skill-task-card__task">
|
|
Make design, product, and engineering work as one team, not three separate camps.
|
|
</p>
|
|
<div class="skill-task-card__solutions">
|
|
<p class="skill-task-card__solution">
|
|
I act as the bridge: discuss flows with the PM, constraints with engineering, and capture decisions in the interface.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
<article class="skill-task-card">
|
|
<p class="skill-task-card__task">Hire and grow product designers for a complex product.</p>
|
|
<div class="skill-task-card__solutions">
|
|
<p class="skill-task-card__solution">
|
|
I help shape the candidate requirements.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I take part in hiring: I check how a candidate handles flows, constraints, and complex cases.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I structure interviews to assess thinking and tooling.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I set up onboarding through real tasks and regular reviews so the designer gets up to speed and adds value faster.
|
|
</p>
|
|
<p class="skill-task-card__solution">
|
|
I run regular 1:1s with designers: we review decisions, growth areas, and next steps.
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{> contact-section}}
|
|
{{> footer}}
|
|
{{> cookie-notice}}
|
|
{{> nav-more-floating}}
|
|
|
|
|
|
</body>
|
|
</html>
|