Datagpt
DataGPT lets business teams ask questions about their data in plain English and get answers with charts, drawn from their own data warehouse.
Hi, I'm Nazar
Product Designer — System thinker, AI builder, Web designer and App designer.
Launched B2B products from 0 → 1, improved their adoption and helped grow ARR. Love solving complex problems.
AccessibilityDesign systemsWireframingProduct thinkingUX research & synthesisInteraction & motionAI prototypingUser testing
01 / Selected work
Projects worth a closer look
I worked on each one from research to launch.
Hooko
I designed, built and launched App.
Upload a Short, Reel or TikTok. Hooko scores the hook against the creator's niche, breaks down audio and visuals, and writes three reshootable alternatives backed by real videos from the same niche.
Voximplant Kit
Designed and launched a no-code contact center from scratch. Scaled from MVP to a core SaaS product.
Voximplant Kit is a cloud contact center with a drag-and-drop scenario editor and AI call automation.
Gutsul Made
An online gift shop for Hutsul souvenirs from the Carpathians: embroidered shirts, painted wooden boxes and boards, amulet dolls, ceramics and Carpathian tea.
Peak Hotel
Website for Peak Hotel, one of the highest hotels in Dragobrat, a ski resort in the Ukrainian Carpathians.
Yellow Leaf
Yellow Leaf is a software agency from Ivano-Frankivsk, Ukraine. They build web and mobile products for businesses in Europe and the US.
Index Law Firm
A website for Index, a law firm in Ivano-Frankivsk, Ukraine. The firm gives legal advice, drafts documents and represents people and companies in court.
Blaustrom
A website for Blaustrom, a Bavarian company that sells solar power systems for homes: solar panels, batteries and EV charging stations.
PromShyna
An online store for PromShyna, a shop in Ivano-Frankivsk that sells tires and wheels for special machinery, such as loaders, excavators, forklifts, tractors and trucks, and delivers across Ukraine.
Cravus
A web app for Cravus, a food delivery startup for busy professionals and students.
Team Sternfit
A recruiting site for Team Sternfit, the team behind three fitness projects: Motiny, Trainy and Sternfit. Sternfit is a platform where athletes view and share each other’s workout programs.
Pet Care
Winner of a design competition. App concept for pet care.
Picker Concept
Winner of the Telegram design competition.
SQUARE
Two fashion concepts for SQUARE, an open interface challenge by Slava Kornilov of Geex Arts.
Kitchen Chatbot
Chatbot concept for a smart kitchen. I made it in one day, as a challenge during my internship at a design agency.
Design Cup
Landing page for Design Cup, a concept competition for beginner and experienced interface designers, run by Mail and Skillbox.
Voximplant IVR
Landing page for Voximplant’s IVR order tracking. Customers call, say a waybill number or their name, and hear where their order is.
OFFF Conference
Landing page for the OFFF conference, made for Skillbox. OFFF brings together digital artists, illustrators and designers. It started in Barcelona and travels to other cities.
Professions
Landing page for Professions in Digital, an online marathon by Skillbox. Over three weeks, 33 speakers gave 39 master classes on design, code and marketing.
Quit University
Landing page for a Skillbox contest. Students sent in project ideas, and ten finalists went to a public vote.
Datagpt
Datagpt
DataGPT lets business teams ask questions about their data in plain English and get answers with charts, drawn from their own data warehouse.
My role
Solo product designer
- Discovery and stakeholder interviews
- Personas and competitor mapping
- Prototypes and usability testing
- UI, design system, developer hand-off
- Pilot and post-release testing
- Website, promo videos and marketing materials
Team
- Product owner
- Product manager
- Engineering team
Problem
Dashboards showed what happened.Nobody could simply ask why
Business context
Companies spend heavily on BI tools, but getting from data to a decision still went through a data team. Dashboards were static, and business users couldn't ask follow-up questions.
User pains
Executives waited for the next meeting to learn why revenue moved. Analysts were "drowning in ad hoc requests". Marketers pieced a story together from dozens of reports.
Goal
Let anyone ask a complex question in plain English and get an answer they can trust.
Executive
Why did revenue drop? I don't want to wait for the next meeting for answers. Revenue opportunities are going missed.
Data team
We spend so much time on dashboard building and maintenance, and next week the questions change.
Analyst
We are drowning in ad hoc requests.
Discovery & Research
Traditional BI was too slow and too complex for everyday decisions
I started with stakeholder interviews and a review of the conversational-analytics market. Executives, data analysts, marketers and product managers described the same problem. They wanted answers when the question came up.
- 30+stakeholder interviews
- 4user types synthesised
- 4competitor groups mapped
Outcome
Lag time
Insights arrived days late. By the time a dashboard was built, the question had changed.
Accessibility
Only BI experts could drill deeper. Business users felt locked out and sent ad hoc requests instead.
Context switching
People pieced a story together from dozens of reports instead of simply asking "Why did X happen?"
Two groups: the people who ask questions and the people who make answers possible
Most users only ask questions. A smaller group connects the data and defines what the metrics mean. DataGPT had to serve both.
Executive
Asks questions every dayVP or C-level. Owns revenue and growth targets. Lives in meetings and Slack.
Why did revenue drop last week?
Need
The cause, not a chart, and before the next meeting.
Frustration
Dashboards show what happened. The why goes into the data team's queue.
Growth or marketing manager
Asks questions every dayRuns campaigns and channels. Compares periods and segments several times a week.
Which channel drove signups this month?
Need
Quick comparisons by period, channel and segment, without learning a BI tool.
Frustration
Dozens of reports to piece together and a queue for anything custom.
Data analyst
Asks questions every dayMid-size SaaS company. SQL, BigQuery, Tableau, Python. Spends 40–50% of their time on repetitive reporting.
Show retention by segment for last quarter.
Need
Fewer repetitive pulls and consistent metrics across teams.
Frustration
Constant Slack requests. Rigid BI tools. Every team defines KPIs differently.
Data engineer
Makes the answers possibleOwns the warehouse: BigQuery, Snowflake or Databricks. Maintains pipelines and data models.
What does "conversion" mean to the AI?
Need
Connect sources and define tables, metrics and dimensions without custom code, and control refresh schedules.
Frustration
Every new business question means a new model or dashboard to build and maintain.
Competitor mapping
Many "AI analytics" tools, few that explain why
We compared conversational analytics tools, from large BI suites to new AI startups:
ThoughtSpot
An early pioneer in natural language search for data. Great at connecting to various data sources, but NL Q&A yields only single charts and requires pseudo-code-like queries. Users often have to iterate question by question, without deeper “why” analysis.
Power BI + Copilot
A powerful BI suite with new AI features, yet its natural language Q&A felt limited. It often misunderstood nuances (synonyms, time phrases) and struggled with multi-step questions. The heavy interface (PowerQuery, DAX formulas) meant a steep learning curve for non-analysts.
ChatGPT Plug-ins & SQL Bots
Dozens of text-to-SQL startups promised to translate questions to SQL. In reality, none could handle enterprise-scale data or complexity – they’d break on big data volumes, or return only basic facts. Hallucinations (made-up answers) were a serious risk.
Outcome
Comprehension without depth
Most tools could parse a question but returned "what happened" charts. Nobody went on to "why" and "what next" in the same conversation.
Depth without accessibility
The powerful options needed modelled datasets, DAX or SQL. They were built for analysts, not the people waiting on them.
Trust was the open gap
Black-box answers and hallucinations were the main objection. Showing the source of every answer became a design requirement, not a nice-to-have.
Chat or dashboard?
I prototyped two interaction models and we shipped a hybrid
Before committing to a direction, I tested two ways for people to work with their data through AI.
Pure chat
Model AAsk in natural language and get a written summary with charts. Fast and approachable, for non-technical users.
“Where is this data coming from?” “How do I verify this?”
Simple but not trustworthy.
Data Navigator
Model BA structured environment: pick metrics, filters and dimensions to build a query. Full control and full transparency.
“Safe but rigid.”
Good for precise queries, too slow for ad hoc exploration.
Chat + Data Navigator
ShippedOne screen, two ways. Type "Why did revenue drop on Friday?", or click Revenue and then Friday in the navigator, whichever feels easier.
Easy to start, and still able to answer open-ended questions.
What shipped?
AI analyst to talk to
A conversation with a data analyst who knows business
User asks a question and DataGPT replies with a short written answer, a table and charts. Every answer states its date range and comparison period. Suggested follow-ups keep the analysis going.
- Daily "Today’s summary" of what changed
- Dataset guide listing key metrics and dimensions
- Type @ to search for metrics and segments
For people who prefer to explore on their own
A metric dashboard that's always one click from the chat. Each metric card shows the change between the comparison period and the observation period, and any card can be sent back to the chat as a question.
- Chat Mode and Data Navigator side by side
- Daily, weekly, monthly, quarterly, yearly or custom periods
- Filters saved as defaults per databoard
Data teams set up DataGPT without code
Admins connect a data source, set the ETL schedule and history length, and describe the company and its data. Each metric and dimension is a row they can edit, with a description, a format and synonyms. "Conversion rate" can also be "CR" or "conv rate".
- Connections to BigQuery, Snowflake, Databricks
- Version history, SQL import, upload and download
- The schema is what makes answers use the company's own terms
Three layers, documented in Figma
Every component shipped with interaction states, usage guidelines and behaviour rules. Engineers could build new features, from conversation flows to charts.
- Base tokens
- Core components
- Analytical components
Pilot launch
After launch we surfaced two problems
We rolled DataGPT out to a small group of pilot customers, including Papa John's, to test usability, accuracy and fit with their workflows before full release. I ran testing during the pilot and again after release.
1 Problem
Ambiguous questions got confident but wrong answers
Signal
Pilot users often phrased questions in ways that could be read more than one way.
What's my best-selling product?
Coffee is your best-selling product.
Cause
"Best-selling" could mean most units, most revenue or highest margin. The model picked units, while the user meant revenue. The answer was technically correct but wrong for the question, so people had to rephrase or ask follow-ups, and insights took longer.
The fix was LLM instructions (skills)
I designed a way for admins to add business logic and definitions in the Schema Editor. For example, "conversion" means the conversion-rate metric, and "best-performing product" means highest revenue.
Results
- −64%Ambiguous queries (requiring clarification or rephrasing)
- +58%First try query Success Rate
- +41%Average session depth (queries per session) grew by
- 2m to 30sAverage Time to Insight
2 Problem
Users couldn't see which dates and filters an answer used
Cause
The date picker and filters lived only in the Data Navigator. When it was collapsed, they disappeared. "Show me revenue" might use "last 30 days", and nothing in the chat said so. The numbers were right, but the missing context made people doubt them.
Fix
A persistent global header above both Chat and Data Navigator:
- Moved the date picker and filter chips into a top bar.
- Kept them in sync between Chat and Navigator.
- Added subtle motion when dates or filters change.
Results
- +27%Conversation satisfaction (thumbs-up ratio in chat)
- 58%Engagement Retention
- 89%Context Visibility Confidence (post-chat data clarity check)
Impact first year
$0 → $1.5M ARR
DataGPT's first year: 20% month-over-month revenue growth and zero customer churn in the last six months.
Director of Growth, Plex
Other BI tools show you what happened. DataGPT helps you understand why and what to do about it. It's like having a personal data analyst at my fingertips.
Customers reported a 60% average reduction in pending data requests. Teams that used to wait days for an answer got insights daily, even hourly. Adoption spread on its own: departments outside the original use case started using DataGPT, because it needed no training. You just ask a question.
International Analyst, Papa John's
With DataGPT, we finally have a more complete view of our retail data across web and app, giving us a clear view of customer journeys, purchase behaviours, and product performance, all in one place.
In the UK division, DataGPT became a standard part of weekly executive meetings. Automating daily and weekly performance summaries freed analysts from more than 20 hours of manual reporting a week and got insights to marketing and operations faster.
Marketing
Website
I designed the website, the promo videos and the marketing materials. The site shows a demo conversation with DataGPT.
Conclusion
DataGPT started as a chat concept. It shipped as one screen where technical and non-technical users ask a question, see which data and dates the answer used, and check it in the Data Navigator.
Three changes came out of testing
Hybrid insight view
Allowed users to explore metrics and follow up through conversation within the same screen.
Schema level LLM instructions
aligned AI responses with business terminology, cutting ambiguous interpretations by 64%.
Date range presets
Saved date ranges for recurring analyses, shown above Chat and Data Navigator.
I designed, built and launched App.
Upload a Short, Reel or TikTok. Hooko scores the hook against the creator's niche, breaks down audio and visuals, and writes three reshootable alternatives backed by real videos from the same niche.
My role
Solo builder
- Product idea, scope and competitor review
- UX, UI and the analysis result format
- Flutter app, built with Claude Code
- Backend, AI pipeline and payments
- Website, App Store page, ASO
- Apple Ads setup and launch
Why I built it
I wanted to build and ship a whole app on my own. I also noticed that most apps for creators just give a score and stop there. I wanted to make one that tells what to actually change in the creator's video.
Problem
Virality scores don't tell creators what to change
Creators
On TikTok, Reels and Shorts, people decide in the first 3 seconds whether to keep watching. When a video gets few views, creators usually don't know why. Was it the first line, the first shot, the pacing or the caption?
Existing tools
Most virality apps I looked at give you a score or a percentage, like "62% viral". That doesn't tell you what to fix, so you're still guessing before the next video.
With Hooko, I wanted every score to come with a clear tip you can use when you film again.
Product
How it works
01Analyse
Upload any short video. A live checklist shows each stage while the analysis runs for 30 to 60 seconds.
02Score
The hook is scored against the benchmark for the detected niche, with separate audio and visual scores for 0–3 seconds.
03Rewrite
Three alternative hooks, each with a script to say, a shot to film, technique tags and an estimated score.
04Prove
A ready caption and hashtags, plus a real Short from the same niche that uses the same hook structure.
05Track
Every analysis is kept in a history, so creators can see whether their hooks are getting better.
Design
Key design decisions
Each decision answers the same question a creator has after a flop: what exactly do I change?
Context
Niche benchmark
A score of 55 means nothing alone. Hooko first detects the niche, then compares the hook with that niche's benchmark: "Below benchmark, Fitness & Health 70/100". A "How it's calculated?" control opens the method.
Clarity
Audio and visual feedback
A creator controls two things in the first 3 seconds: the words and the picture. The result is split the same way: an audio score and a visual score, and every rewrite gives a script to say and a shot to film.
Trust
Explanations and real examples
Each rewrite ends with "Why this will work?". Under it sits a real YouTube Short from the same niche that uses the same structure, tagged by technique, with a link to watch it and an attribution note.
Waiting
Analysis progress
Video analysis takes 30 to 60 seconds. A spinner over that long looks broken, so the screen lists the real stages and checks them off: Uploading, Niche detection, Analyzing engagement, Calculating hook score, Generating recommendations.
Privacy
No account, no stored videos
There is no registration screen. An anonymous identity is created on first launch, and uploaded videos are deleted from the server once the analysis finishes. Subscriptions go through RevenueCat and are tied to the user's Apple ID, so they survive a reinstall without an account.
Open appTry the demo analysisUpload a videoGet the plan
Build
Tech stack
How I worked
I designed all the screens and decided how the app works, what it checks in a video and what the results look like. I wrote the code with Claude Code. That includes the Flutter app, the Supabase backend, the Gemini prompts and the RevenueCat and YouTube connections.
Why Flutter
I started with iOS, but I want to release Hooko on Android too. Flutter lets me use the same code for both, so I don't have to build the app twice.
Tools
Build
Claude Code
Wrote the app, backend and integrations with me, from first screen to release builds.
App
Flutter
The iOS app, with one codebase ready for Android.
AI
Gemini API
Watches the video: niche, hook, audio, visuals, pacing, rewrites, caption and hashtags.
Examples
YouTube Data API
Finds real Shorts from the creator's niche that use the suggested hook structure.
Backend
Supabase
Anonymous users, video upload, the analysis pipeline, daily limits and stored results.
Payments
RevenueCat
Paywall, subscriptions and in-app purchases.
Website
v0
Generated and iterated the hooko.app landing, terms and privacy pages.
Hosting
Vercel
Hosts and deploys hooko.app.
Distribution
App Store + Apple Ads
Release, store listing, ASO and search ads.
Architecture
- Hooko iOS app · Flutter
- Upload · progress
Score · rewrites
Examples · history
Paywall - Supabase
- Anonymous user on first launch
Video upload, deleted after analysis
Analysis pipeline · daily limits
Results and history - Gemini API
- Niche, hook score, audio + visual, rewrites
- YouTube Data API
- Real Shorts in the same niche
- RevenueCat → App Store
- Paywall · subscriptions · purchases
Subscriptions · Apple ID - v0 → Vercel
- Site design and code
Landing, terms, privacy
Download link → App Store
- 1SupabaseUpload video
The app uploads the video to Supabase storage under the anonymous user.
- 2GeminiDetect niche
Gemini watches the video and picks its niche. The niche sets the benchmark the hook is scored against.
- 3GeminiAnalyze engagement
Gemini scores the first 3 seconds and the rest of the video: audio, visuals, pacing and on-screen text.
- 4YouTube APIFind viral examples
The app searches YouTube Shorts in the same niche for real videos that use the suggested hook technique.
- 5GeminiWrite rewrites and captions
Gemini writes 3 alternative hooks with what to say and show, plus a caption and hashtags.
- 6SupabaseDelete the video
The video is deleted from the database once the result is ready. User videos are never kept.
Launch
ASO and Apple Ads
App Store optimization
On the App Store, the name, subtitle and hidden keyword field are what search indexes. I treated them as one 160-character budget and never repeated a word across them, because Apple counts each word once.
- Name leads with an intent phrase creators actually search, "Blow Up", with the brand after it.
- Subtitle covers the second intent, "go viral" and "short video", using all 30 characters.
- Keyword field holds the long tail: the feature words (hook, score, caption, hashtag, script) and creator vocabulary. Singular forms, commas, no spaces, no competitor brand names.
- Categories: Utilities as primary, a less crowded chart than Photo & Video, which is the secondary.
- Screenshots show the real app. Each one shows a core feature, like the hook score or the rewrites, so people see what the app does before they download it.
Apple Ads campaign structure
I split my Apple Ads into four campaigns. Each one targets a different kind of search, so I could give each its own budget and see which searches actually bring installs.
Brand
Exact match
Shows the ad when someone searches for Hooko by name. It's cheap and stops other apps from taking those searches.
hookohooko app
Category
Exact match
Searches for what Hooko does, like "hook analyzer". This campaign got most of the budget.
hook analyzergo viralvideo score
Competitor
Exact match
Shows the ad when someone searches for a similar app by name. It has its own campaign so I could check if it was worth the cost.
names of similar apps
Discovery
Broad match
Finds new search terms I hadn't thought of. Keywords I already target in other campaigns are blocked here, so I don't pay for them twice.
search terms report
Discovery finds a new search termIt brings installsAdd it to CategoryBlock it in Discovery
Reflection
What it taught me
Start with the result format
The most important thing I designed was the list of what every analysis gives back: a score, the niche benchmark, what to say, what to show, why it works and a real example. Once that list was clear, the AI prompt, the database and the screens were much easier to build.
Building with AI
With AI I could take Hooko from an idea to a paid app in the App Store without an engineering team. My design decisions ended up in the product exactly as I made them.
Getting users takes as much work as building
Building the app was faster than getting people to find it. ASO, store screenshots, Apple Ads and onboarding needed as much design attention as the analysis screens.
Designed and launched a no-code contact center from scratch. Scaled from MVP to a core SaaS product.
Voximplant Kit is a cloud contact center with a drag-and-drop scenario editor and AI call automation.
My role
Only designer for the first 1.5 year, then lead when a second designer joined.
I owned the product end to end:
- Discovery and interviews
- UX Research
- Competitive Analysis
- Prototypes and usability testing
- UI, design system, developer hand-off
- Post-release testing
- Led the promo/marketing materials
Team
- Product designer
- Product manager
- Product analyst
- Voximplant engineering
Problem
Setting up a contact center on Voximplant needed developers
Business context
Voximplant is a cloud communications platform with voice, video and messaging embedded through APIs and SDKs. But its customers' contact-center teams are not developers.
“Setting up a contact center required complex code and dedicated developers, lengthy delays, and high development costs.”
User pains
Kit existed as a rudimentary MVP. Interviews with current and potential users gathered every pain point and barrier, and were paired with a hypothesis and a priority.
Two audiences had different needs: the business that buys and configures the product, and the agents and supervisors who live in it every day.
Process
Discovery
Research
With the product manager, I built user portraits from the interviews, then buyer personas. Later I ran usability tests on the MVP and interviewed call-center managers to validate the flows and the terminology.
I put every finding into a table, one per product area, and compared Kit with competitors.
What I did
- Interviews with current and potential users, by product area
- User portraits, then buyer personas
- Usability tests on the MVP
- Interviews with call-center managers on flows and terminology
- Competitive analysis with PM
Who is user
The interviews split the audience in two:
- People who buy and set up
- People who work in it every day
Each group had different tasks and different problems, and the product had to serve both without a developer in between.
Buy and sets up
Operations or customer-service lead
Small and mid-size company, 10 - 200 people. IT services, finance, education, delivery, retail, car dealers.
Need
A working contact center in days, not months, without hiring developers. Predictable pricing.
Current approach
Custom code on the platform, a dedicated engineer, months of delay and a large bill.
Buy and sets up
Marketing specialist
Marketing or operations specialist who designs IVR menus and outbound campaigns. Not a programmer.
Need
To build call logic, check it and change it without waiting for engineering.
Current approach
Logic lived in code. Every change was a ticket, and the only way to test is to publish and call the number.
Works in it every day
Supervisor
Runs the team: queues, shifts, quality and reporting.
Need
A live view of every call and chat, a way to step into a conversation, and reports by agent and queue.
Current approach
Calls and chats in separate tools, so no single view of the team and no way to coach in real time.
Works in it every day
Agent
Handles calls and messages all day across phone, SMS, Whatsapp, Telegram, Messenger, Viber and web chat.
Need
One call and message interface for every channel, the customer's details, and a fast transfer.
Current approach
A different tool per channel and no shared customer profile.
Competitive analysis
We benchmarked Kit against the products a small or mid-size company would choose across the workflow for a non-technical team: setup and learning curve, the visual scenario editor, outbound campaigns, channels, entry price, and best fit.
Six products covered: developer platforms (Twilio Flex, Amazon Connect), enterprise suites (Talkdesk, Genesys Cloud CX), an outbound specialist (Five9), and a cloud phone system (Aircall).
| Product | Setup and learning curve | Visual scenario editor | Campaigns | Channels | Entry price | Best fit |
|---|---|---|---|---|---|---|
| Twilio Flex | A programmable platform: developers build the contact center on it. Implementation projects start around $10k. | Twilio Studio: strong no-code/low-code flow builder for IVR and SMS. | No native campaign tool. Outbound is built with APIs or partners. | Voice, SMS, WhatsApp, chat and more through Conversations. | $1 per active user-hour or $150 per user/month, plus usage. | Teams with developers who want full control. |
| Amazon Connect | AWS account and console. Fast if you know AWS. | Contact flow editor: drag-and-drop, capable. | Outbound campaigns added in 2021, priced for high volume. | Voice and chat; SMS and other channels came later. | Pay as you go, about $0.018–0.038 per minute, no seat fee. | Teams already on AWS with cloud engineers. |
| Talkdesk | Sales-led. Contracts, historically with multi-year minimums. | Talkdesk Studio: low-code flow designer for admins. | Dialer sold as an add-on. | Voice in the base plan; digital channels as an add-on. | From $75 per user/month in 2021, $85+ later. | Mid-market teams that need deep CRM integrations. |
| Genesys Cloud CX | Enterprise rollout. Powerful and long to learn. | Architect: full flow builder for voice and digital. | Built in: predictive, progressive and preview dialing. | All channels, but only from the CX 2 tier. | $75 (voice) to $115 (omnichannel) per user/month. | Large contact centers. |
| Five9 | Sales-led onboarding. | IVR designer, voice-centric. | The strongest dialers: predictive, power, preview. | Voice first; digital channels on higher tiers. | From about $149 per user/month. | Outbound-heavy sales and collections teams. |
| Aircall | Self-serve, set up in minutes. | Drag-and-drop IVR menus only. No scenario logic. | Power dialer for call lists, no campaign automation. | Voice and SMS. | $30–50 per user/month. | Small teams that mostly take calls. |
Outcome
The gap is in the middle
- Platforms had strong flow builders but assumed engineers and an implementation project.
- Phone systems were self-serve but stopped at IVR menus.
- Nobody offered a full scenario builder that a non-technical person could use on day one.
Price
- Enterprise suites started at $75–150 per seat with contracts and sales calls.
- Pay-as-you-go platforms looked cheap but needed engineers.
- A self-serve product at around $45 a seat would sit below the enterprise floor without hiding a services bill.
Call campaigns
- Campaigns were an add-on at Talkdesk, a build-your-own at Twilio, and a higher tier at Genesys.
- Digital channels were tiered the same way.
- Only the outbound specialists had dialers built in, and they were voice-first.
What it meant for Kit
- Onboarding had to include a number buying and templates, so a first campaign was possible in one session.
- The editor had to match the developer platforms on power and beat them on learnability.
- Campaigns had to be a core flow, not an add-on.
- Every channel had to land in one agent workspace in the base product, not in a higher tier.
Process
Ideation
Hypotheses that shaped release 1
Every interview finding went into one table per product area.
- 01Call logic should be in a visual editor rather than written in code, so a non-technical user can build branching call scenarios.
Create visual scenario editor.
- 02If a scenario can be run inside the editor, users will find errors before they publish.
Add test mode.
- 03When new scenarios start from templates, the first campaign launches faster.
Add template gallery: meeting confirmation, order confirmation, NPS, CSI surveys etc...
- 04If campaign setup as guided sequence, users will not need help with contact lists and variables.
Create four-step campaign creator: strategy, contacts, variable mapping, summary.
- 05If buying a number add to onboarding, users will not hit a dead end later.
Add numbers, to onboarding flow.
IA and structure
I structured and validated the information architecture, confirmed the core functionality with the team, and mapped primary and secondary flows for every key interaction. A user-story map set the priorities for the first release.
Prototyping and usability testing
Clickable prototypes covered full journeys, from the start page to password recovery: 10+ core pages with 30+ screens each. Testing ran in two formats. Corridor tests inside Voximplant gave fast answers on single screens. Moderated sessions with current MVP users, potential customers and call-center managers covered whole tasks: build a scenario, launch a campaign, handle a call.
What changed after testing
- Terminology. Labels for queues, skills, scenarios and campaigns were validated before they went into the UI.
- Test mode inside the editor was validated in sessions, replacing the old routine of publishing a scenario and calling the number to check it.
- The canvas was confirmed over a step-by-step form.
- Every flow was validated before visual design started, so UI work did not reopen structure.
- 10+core pages prototyped
- 30+ screens each
- 2test formats
- corridor tests and moderated sessions
- 15+participants
- current MVP users, prospects and call-center managers
- ≈87%task completion
- unassisted, on the redesigned flows in the final round
Key decisions
A canvas, not a form builder
- Real call flows branch: verification, IVR menus, hand-offs, voicemail detection, retries.
- A canvas keeps large scenarios readable. A step-by-step form hides the logic.
Impact
A non-technical team launches a contact center in ≤ 30 minutes (Voximplant).
Five enterprise clients: Rappi, KFC, Burger King, Hyundai, Jaguar run production call flows built on the canvas
Test mode inside the editor
Simulation highlights the active block in real time. Users test a scenario in the same place they build it, without publishing it first.
Impact
Validated in usability sessions with call-center managers before visual design. After launch, users reported better task completion and faster onboarding on the redesigned flows.
Templates before a blank scenario
Ready-made scenarios for common business goals — meeting confirmation, order confirmation, NPS and CSI surveys — so a first campaign starts from a working flow.
Impact
Skyeng runs 20,000 automated outbound calls a month on templated campaigns, with a 17% average lift in call volume.
Automated outbound engagement is up to 50% higher and 30% more cost-effective than human calls (BusinessWire).
Solution
10+product sections fully designed and validated
∞user flows created, tested and documented
Solution
Onboarding
- The first screen after sign-up asks one question: what did you come here to do?
- Three guided tours — AI-powered outbound calls, interactive voice recognition, and the contact center — take four steps each, and the tour a user picks becomes their first task.
Visual scenario editor
- Users build a scenario, the call flow, on a canvas from blocks: speech-to-text, text-to-speech, interactive menu, data verification, call forwarding, HTTP request and more.
- Blocks connect with lines, so a large inbound or outbound scenario stays readable. An onboarding tour shows how to make the first connection.
Editing blocks
- Each block has its own settings: variables and stop words for speech-to-text, skills and priorities for call properties.
- A context menu with shortcuts, colour coding and lock/duplicate keeps large scenarios manageable. Version history and autosave protect every change.
Scenarios and templates
- Scenarios are stored in folders and can be copied and shared.
- New scenarios start from a template gallery — meeting confirmation, order confirmation, NPS and CSI surveys etc... instead of a blank canvas.
Automated call campaigns
- Campaigns run outbound calls at scale without an agent on each call: surveys, reminders, confirmations and announcements, from a scenario, on a schedule or a trigger.
- Setup takes four steps: call strategy, contacts, variable mapping, summary.
- Each campaign reports its results in real time.
Numbers
- Buying a virtual number is the first onboarding step: it enables outbound campaigns and inbound calls.
- Country, region, category, capabilities and price are in one dialog.
Solution
Contact center
One cloud contact center for every channel. Calls and chats from WhatsApp, Telegram, Messenger, Viber, SMS and web chat come into one workspace, and routine work is automated.
Live dashboard
- Real-time statistics on calls and agents: missed and handled calls, answer, hold and handle times, service level, and agents in the queue by status.
- Supervisors use it to track team performance and automation results.
Live Conversations
- Supervisors monitor agents in real time.
- Every active call and chat is listed by queue with the agent's status and service time.
- A supervisor can listen to a call, whisper to the agent, join the call or take it over, and follow chats on every channel.
Workspace
- Agents handle calls and messages from every channel — Telegram, WhatsApp, Viber, Messenger, SMS, web chat — in one interface.
- The active call and transfer are in the centre, the client card and conversation tags on the right.
- Outgoing calls use the built-in softphone.
Agent profile
- Each agent has a profile with personal and account details, role, queue and skills, and a full conversation history with response and handle times per contact.
- Supervisors can open any conversation from the history.
Chat widget
- Admins add channels without a developer.
- The web-chat widget is configured with a live preview — header text, position, colours, opening message — and added to a site with a generated code snippet.
- Roles and permissions control access.
Queue Settings
- Each queue has an assignment strategy: longest waiting, most qualified or least qualified agent.
- Admins set limits for waiting time, queue size and reaction time, and auto-replies for each stage.
- The softphone and contacts list handle calls between agents.
Messaging history
A searchable log of every chat. Filter by date, queue, channel or tag, see the lead contact and first response time, and export to XLS or CSV.
Reports
- Reports by agent, queue, channel and tag, plus a busiest-time heat map for planning shifts.
- Conversation tags are included, so topics like billing questions can be tracked over time. All reports export to XLS and CSV.
Design system
- Every component was built as an interactive block with all its states — focus, hover, press, error, disabled — and connected to the others.
- Over time this became the Kit Design Library with usage guidelines.
Impact
Kit in numbers
Results from Voximplant Kit, a product I designed from scratch and took to launch.
- 4.8/5rating on G2
- Voximplant Kit, verified user reviews
- 20Kcalls automated per month
- Skyeng's outbound campaigns, with a 17% increase in call volume
- ≤ 30 minto launch a contact center
- self-serve, without engineers
- 80%of routine calls can be automated
- with AI and IVR scenarios
- 5enterprise clients in production
- Rappi, KFC, Burger King, Hyundai, Jaguar
- 10+designers led
- across product, brand and web, plus a research function
For the business
- Kit became one of Voximplant's two product lines.
- Companies that needed months and a development team to set up a contact center now do it themselves in 30 minutes or less.
For the team
- As Kit grew, the design team grew with it.
- I led a team of 10+ across product, brand and web, and started a research function.
Gutsul Made
Gutsul Made
An online gift shop for Hutsul souvenirs from the Carpathians: embroidered shirts, painted wooden boxes and boards, amulet dolls, ceramics and Carpathian tea.
My role
Designer
- Branding and logo
- Web design
- Responsive design
- Icon set
Branding
Logo
Gutsul Made sells traditional Ukrainian goods, so its logo comes from a traditional ornament, the rhombus with hooks. It is one of the oldest motifs in Ukrainian embroidery. Stitched on shirts and rushnyky, it stands for a sown field and a wish for a good harvest.
Shirt
A traditional Ukrainian vyshyvanka, a linen shirt embroidered by hand, with rows of red rhombuses on the sleeves and hem.
Rhombus
One rhombus picked from the sleeve. It has a small dotted rhombus on top, a dotted centre and hooks curling out on both sides.
Sketch
The first idea, drawn by hand on paper. The rhombus, its dots and the hooks were sketched as simple outlines to see which parts carry the motif and which can go.
On the grid
The motif redrawn stroke by stroke on a square grid turned 45°, in one colour.
Frame
One line closes around the motif and becomes its frame.
Final logo
The final version, approved by the client. Two of these motifs, one turned upside down, joined into one mark.
Home
Main page
The page opens on a dark photo of a beaded necklace with the store's headline, which asks visitors to make a gift for themselves and their loved ones, and a button to start shopping. Products come right after it, then the reasons to buy here, the latest news and the footer.
- Header. Phone and social links, the logo in the middle, sign in, search, wish list and cart with item counts.
- Recommended products. Eight cards with New and Sale ribbons and the old price crossed out.
- Counters. Handmade goods, delivery to every region of Ukraine, and offers and goods to order. Each number fills its diamond frame.
Catalog
Categories and filter
Categories run down a sidebar on the left. The open category turns red and shows its filter. Products sit three to a row, with sorting by price and page numbers above and below the grid, and a short text about the category at the end.
- Categories. Souvenirs, frames, ceramics, Ukrainian symbols, amulets, religious items, magnets, Carpathian tea, wool and leather goods.
- Filter. A price range with a slider and checkboxes for size and shape.
- Recently viewed. The last products the buyer opened, under the sidebar.
Product
Product card
The same card is used on the main page, in the catalog and under the product page. It has the photo, a New or Sale ribbon, the name and price, a round cart button for buying in one click, and icons for the wish list and quick view.
Product page
The page keeps the catalog sidebar, so the buyer can move to another category without going back. Next to the photo and its thumbnails are the price, stock status, quantity, and the cart and wish list buttons. Tabs below hold the description, specifications and reviews, with a form for a new review. Products that other buyers also bought close the page.
Inner pages
Cart, news and contacts
Cart
Each item is a row with its photo, name and size, a quantity stepper, the price, the sum and a delete icon. The total and the order button are at the bottom, next to a link back to shopping.
News
New arrivals and store news in three columns. Each post has a photo, a date, a title and a few lines of text.
Contacts
A map with a pin on the store, then a form with name, email, phone and message.
Responsive
Phone layouts
On phones the menu opens from the left as a white panel with the logo, the page links and sign in. The counters drop their frames and stack in one column, and each cart item becomes a block with its size, quantity, price and sum.
Style guide
Icons, type and colours
The store uses one icon set, one typeface and three colours.
Icons
Account, cart, quick view, wish list, orders, menu and search, plus the four dots from the shopping button. Each icon comes in red and in dark grey.
Open Sans
Regular & Bold
Type
Open Sans in two weights: Regular for text, Bold for product names, prices and buttons.
- Red
#EB3148 - Dark grey
#333333 - Grey
#A6A6A6
Colours
Red for the logo, the active menu item, New ribbons and order buttons. Dark grey for text, Sale ribbons and the cart button. Grey for secondary text and old prices.
Website for Peak Hotel, one of the highest hotels in Dragobrat, a ski resort in the Ukrainian Carpathians.
My role
Freelance designer.
- Site structure and page layouts
- UI design and the style guide
- Interactions: preloader, sliders, menu and hover states
- Tablet and phone layouts
Team
I worked directly with the hotel. The hotel's engineering team built the site.
Idea
The views come first
The hotel
Peak Hotel stands in the highest part of Dragobrat, and the Carpathian peaks are right outside the windows. That's why the look of the site mattered so much on this project.
The approach
Every page opens with a full-screen photo. Text sits on dark panels over the photos, and copper is kept for buttons, icons and other UI elements.
Pages
Main page
The main page works like a short tour of the hotel. Every block leads to its own page.
Photo slider
The hotel name over a full-screen photo slider, with the booking bar on top.
About
A short line about the individually furnished rooms.
European service
A photo with a dark text panel and a link to guest reviews.
Rooms
A slider that shows one room type at a time, with a counter and a button to view the room.
Restaurant
The café-bar on the ground floor, with views of the mountains.
More services
A newsletter sign-up and the latest guest review.
Footer
Social links, contacts and the current weather at the resort.
Pages
Inner pages
Rooms
Each room type with photos and a list of what's in the room.
Reviews
Guests can leave a review right on the page. All reviews are listed under the form.
Contact
A map showing where the hotel is, with a contact form next to it.
Services
Interaction
Navigation
The menu opens on top of the page. Each section shows a photo and its sub-pages. The language switch for English, Ukrainian and Russian is right next to it.
Responsive
Tablet and phone
On smaller screens the menu turns into a full-screen list. The booking bar is still at the top, right under the logo.
Components
UI elements
In the booking bar, arrival date opens a calendar and nights opens a short list. A booking card shows the room, the number of guests and the price.
Style guide
Warm dark tones and an italic serif
Colour
- UI elements
#C66F21 - Text
#3B3736 - Background, dark
#302C2B - Background, light
#FFFFFF
Typography
Playfair Display · headings
Italic
In the highest part of Dragobrat
Bold
European service
Lato · body and buttons
Regular
The spacious rooms are equipped with comfortable furnishings.
Black
Book your stay
Icons
One icon above each section title. The last one is the mountain from the logo.
Grid
Yellow Leaf is a software agency from Ivano-Frankivsk, Ukraine. They build web and mobile products for businesses in Europe and the US.
My role
Designer
- Logo and brand elements
- Site structure and page layouts
- UI design and the style guide
- Motion: preloader, page transitions and the menu
- The project estimate form
- Tablet and phone layouts
Tools
Adobe XD, Photoshop and After Effects.
Idea
Keep the site simple
The agency
The team builds web and mobile apps, CRM and CAD systems, online stores and data tools.
The approach
The agency builds complex systems, so the site had to feel simple and friendly. Pages are light, headings are bold condensed capitals, and yellow is kept for buttons and accents. Scrolling is smooth, and blocks fade in as you reach them.
Pages
Main page
The header stays the same on every page: the logo, an Estimate project button and the menu.
Preloader
A counter runs from 0 to 100 while the page loads.
Hero
“Ideas for your business success” over a background video, with a button to the agency's work.
About
“We develop complex interface systems for web, mobile and VR”, next to an illustration of a yellow tree.
Our works
Recent projects as cards with the project name, services and a cover image.
Testimonials
A quote from a client.
Footer
An Estimate project button, social links, the address and contacts.
Feature
Project estimate
The team decided to add an estimate form. A client picks the kind of project and its scope, leaves their contacts and gets an approximate budget. The form opens from the Estimate project button in the header and the footer.
Project type
Commercial platform, information portal, corporate website, landing page or mobile app. A short note explains each option.
Scope
Front-end, back-end or design, shown as cards with icons.
Contacts
Name, email, phone, company and a short description of the idea. Errors show right under the field.
Done
A thank-you screen with a link to the agency's work.
Interaction
Navigation
The menu opens over the page. The five sections are in the middle, social links on the left, and the language switch, address and contacts on the right. On hover, a yellow line crosses out the item.
Responsive
Tablet and phone
Every page was also designed for small screens. On a phone the hero keeps its background video, and the menu becomes a single column with the language switch under it.
Pages
Inner pages
Our works
All projects in two columns. Each card shows the project name, the services and a cover.
Careers
Open roles with short descriptions, and a photo of the office.
Services
Five services, from commercial platforms to mobile apps, each with an icon and links to related projects.
About us
The agency's story, three values and the team. Each person in the team row is shown with their role. The page ends with a photo of the office and a Let's talk link.
Branding
A leaf with a y in it
The brand was made together with the agency's first website. The logo is a leaf for Leaf, cut by the letter y for Yellow. It was made in colour first, and the site's colours came from it.
Leaf
Yellow
Yellow Leaf
Style guide
Yellow, black and bold capitals
Colour
- Buttons and accents
#F7BC11 - Text and footer
#191919 - Section background
#F5F5F5 - Cards and pages
#FFFFFF
Typography
Oswald · headings and menu
Bold, capitals
Developing complex solutions
Medium
What type of your project?
Raleway · body and buttons
Regular
Yellow leaf is a full-service digital agency, busy designing and building digital products.
Bold, capitals
Estimate project
Index Law Firm
Index Law Firm
A website for Index, a law firm in Ivano-Frankivsk, Ukraine. The firm gives legal advice, drafts documents and represents people and companies in court.
My role
Freelance designer
- Several design options for the client
- Site structure and the main page layout
- UI design and the style guide
- Intro animation
- Phone layouts
Team
I worked directly with the law firm. Yellow Leaf, a web studio from Ivano-Frankivsk, built the site from my designs.
A simple site for a law firm
The brief
The firm asked for a simple, lively website. The client didn't know exactly what they needed, so I designed a few options from scratch. They picked one, and it became the site.
The approach
The site is one page built from square tiles. Services, photos, quotes and numbers each take a tile, so a long list of legal services is easy to scan. The palette is dark grey and white, and orange marks the numbers, quotes, links and hover states.
Main page
The menu scrolls to each section. The site has English and Ukrainian versions.
Header
Menu, phone number, social links and the EN / UA switch, with the logo in the middle. When you scroll, the header sticks to the top and the logo becomes the name in a dark block.
Slider
Photos of the city at sunset with short lines about the firm, such as “Skilled assistance” and “Individual approach”.
Services
Eight service tiles mixed with photos, quotes and two numbers: 2600 clients and 97 staff members.
Partners
A slider with the logos of companies that work with the firm.
Project support
The firm's free legal help for people on low incomes, with the bank details for donations.
Contact
A map, the office address, phone numbers and email.
Footer
The logo, social links and the studio credit.
Interaction
Service tiles
Each tile shows a service and a short line about it. On hover the line under the title turns orange and a plus appears. A popover shows what the firm does in that area. Hover a tile below to see its details.
Consulting
Advice on legal issues and written notes on current law
Trusted by2600clients
Drafting applications
Complaints and other legal documents
Representation in court
Civil, commercial and administrative cases
Staff members97in our journey
Legal aid
A lawyer in criminal proceedings
The strength of arguments is not in their number but in their importance.
Representation in state bodies
Tax office, prosecutors and police
Legal service for businesses
Companies and individual entrepreneurs
Falseness oppresses and depresses, but the desire to fight it grows.Hryhorii Skovoroda
Financial and economic issues
Debt collection from people and companies
Copyright protection
Confidential information and trade secrets
When justice disappears, nothing is left that could give value to human life.Immanuel Kant
Consulting
Advice on legal issues and written notes based on current law.
Drafting applications
Complaints and other legal documents.
- Letters and appeals to public authorities
- Letters and applications to local governments
- Letters and applications to law enforcement
- Letters and applications to other authorities and institutions
- Complaints about the actions or inaction of officials, to restore violated rights
Representation in court
For people, companies and organisations in civil, commercial and administrative courts.
- Drafting claims
- Family, land and labour cases
- Civil, commercial and administrative cases
- Debt cases: bank loans, mortgages, contracts and leasing
Legal aid
A lawyer for victims, witnesses, suspects and defendants in criminal proceedings.
Representation in state bodies
For people, companies and organisations at the State Executive Service, the tax office, the Prosecutor's Office and the National Police.
Legal service for businesses
For companies and individual entrepreneurs.
- Registering a business and legal support for its work
- Advice on legal issues for managers and staff
- Legal service on a subscription
- Legal documents, job descriptions and standard contracts
Financial and economic issues
Collecting money from other people and companies.
- Negotiating with debtors or creditors before going to court
- Working with banks on debt restructuring
- Representation in courts and other bodies
- Support while court decisions are enforced
Copyright protection
Confidential information and trade secrets.
- Advice on protecting copyright, confidential information and trade secrets
- Regulations, instructions, contracts and orders that protect them
- Representation in court to restore violated rights
- Support while court decisions are enforced, with the State Executive Service
- Working with law enforcement to bring offenders to justice
Laptop and phone
320px +
The layout works from 320px wide. On phones the tiles stack in one column, the header turns dark and the menu folds into a button next to the logo.
Style guide
Colour, type and grid
Colour
- Main colour
#222222 - UI elements and hover
#FF9600 - Background
#F5F5F5
Typography
Lato Regular · display
26px
Representation in court
Lato Regular · UI and copy
14px
Consultation and clarification of legal issues, with written notes on the current law.
Section titles
Uppercase, wide spacing
Law
firm
Index
Logo
Grid
- Container
- 1170px
- Columns
- 12
- Framework
- Bootstrap
Blaustrom
Blaustrom
A website for Blaustrom, a Bavarian company that sells solar power systems for homes: solar panels, batteries and EV charging stations.
My role
Designer
- Site structure and page layouts
- The four-step configurator
- Logo and logo animation
- Desktop, tablet and phone layouts
- Icons, sliders and the style guide
Team
I was the only designer and worked with Blaustrom’s founder. Their developers built the site.
01 / 05
Main page
The site is one long page with five sections, one for each menu item. The first section opens on a dark screen with the logo, followed by a slider with three slides on the blue gradient.
First screen
The logo, the line “It’s all about energy” and a “Design System now!” button.
We make electricity blue
A solar system with a battery can cover up to 80% of a home’s electricity. Blaustrom supplies the rest from regional renewable sources.
Your energy future from a single source
A line drawing of a farm, solar panels, a wind turbine, a house and an electric car. Each plus button opens a short note about that part of the system.
From Registration to Z
The five steps Blaustrom takes care of: inquiry, planning, installation, registration and operation.
02 / 05
About us
The text explains how Blaustrom differs from a usual energy supplier. Customers produce most of their electricity with their own solar system, and Blaustrom delivers only small amounts of Bavarian electricity from the grid. Next to the text is the founder, Fabian Eckl, with a short bio and links to his profiles.
03 / 05
Product partners
A slider with the four brands Blaustrom installs: BYD batteries, SolaX inverters, LG solar modules and ABL charging stations. Each slide has three key points with icons, a short text, the brand logo, a link to the brand’s website, a datasheet download and a video.
04 / 05
Configurator
The configurator plans a system in four steps. Each step is its own screen, and the bar at the top shows which steps are done. The first screen asks for the address and whether the customer already has a solar system.
Step 1
Solar system
A satellite map of the house. Each roof area gets a letter and its own row with the size in kWp, the orientation and a slider for the roof angle from 0° to 50°. A roof area that should not be used can be switched off.
Step 2
Consumer group
Home, farm or business. For a home, a yellow slider with household sizes from one to six people sets the yearly electricity use. The number in kWh below it can also be typed in.
Step 3
Electricity supplier
The customer picks their current supplier from a list and sets what they pay per kWh on a slider from 15 to 35 cents.
Step 4
Your blaustrom system
Three systems to choose from. Each card shows the share of electricity the home would produce itself, the size of the solar system and the battery, the yearly production, and how much electricity would come from and go to the grid.
After step 4
Personal proposal
“Take it” opens a form with the chosen system on a blue panel. The customer leaves their name, email and phone and can subscribe to the newsletter.
After step 4
Thank you
The last screen has all four steps checked and says that a detailed proposal was sent by email.
05 / 05
Contact
A form with name, email, phone and message, and a Google map where the office is marked with the b from the logo. The dark footer has the address, social links and the line from the first screen, so the page ends the way it starts.
Responsive
Tablet and phone layouts
320px +
On smaller screens the menu folds into a round button in the top-left corner and opens over the page. Slides and text stack in one column. The configurator needs a screen at least 720px wide, so phones show a short message about that in its place.
Style guide
Colour, type and controls
Colour
- Button background
#0497C3 - Gradient background
#0497C3 → #04C1C1 - Slider color
#FFBE0D - Dark background
#282828 - Slider background
#C0CED5
Typography
Headings · Open Sans Light 50px
It’s all about energy
Subheadings · Open Sans Bold 16px
BYD – Market leader in rechargeable batteries
Body text · Open Sans Regular
What does your energy supplier do today? It delivers your electricity from large power plants over long distances to your house.
Sliders and icons
Roof angle
Step 1, from 0° to 50°
Household size
Step 2, from 1 to 6 people
Icons
Drawn for the site
PromShyna
PromShyna
An online store for PromShyna, a shop in Ivano-Frankivsk that sells tires and wheels for special machinery, such as loaders, excavators, forklifts, tractors and trucks, and delivers across Ukraine.
My role
Designer
- Logo redesign
- Home, category and product pages
- Cart, checkout and delivery pages
- Blog, contacts and 404 pages
- Phone layouts
Team
I was the only designer and worked directly with the store’s owner. Their developers built the site.
Store pages
From search to delivery
The six pages a buyer goes through to order a tire, in the order they see them.
Home page
The home page is called Special Tire Hypermarket and starts with a filter, so a buyer can search by size or category before anything else. Below it are a slider with the catalog categories, best sellers with a cart button on each card, manufacturer logos and a short text about the store.
- Filter
- Inner diameter, category, size, manufacturer, price from and to
- Header
- Delivery phone, logo, menu, search and cart with a counter
Category page
A category opens with a breadcrumb and four filters for the tire size. Products sit four to a row, each with a name, a short description, the price and a cart button. The last card loads more products, and page numbers sit under the grid. A text about the store closes the page.
- Filters
- Tire size, seat diameter, profile width, profile height
- Product card
- Photo, name, description, price in hryvnias, cart button
Product page
A large photo sits next to the name and the specs. Under them are a short description, the price and the cart button. Once the item is added, the button reads In cart and has a cross to take it out again. Similar products follow under the card.
- Specs
- Size, model, ply rating, country, tire type, inner diameter
Cart
Each item is a row with its photo and specs, the price, a quantity menu, the sum and a delete icon. The last row has the total, a checkout button and a link back to the store.
Checkout
The store sells to companies as well as private buyers, so the order form has two tabs, Private person and Company. The company tab adds fields for the legal address, tax number, bank and account number. The order list and the total stay next to the form.
- Company tab
- Company name, contact name, delivery address, legal address, email, tax number, bank, account, phone, message
Delivery
Payment and delivery are explained in two columns. Below them is a map of Ukraine with pins on the cities, and the four steps from order to receipt, drawn next to a forklift carrying a stack of tires.
- Steps
- Order, processing, delivery, receipt
Responsive
Phone layouts
On phones the menu turns into a button next to the logo, and search and the cart share one line under it. The filter fields stack in one column, the category cards scroll sideways, and product cards show one at a time.
Inner pages
Other pages
Blog
Store news and advice on choosing tires. Each post has a photo, a topic, a date and a short excerpt.
Contacts
Two sales managers with photos and their phone, email and Skype, then the office address, opening hours and a contact form.
Page not found
The 0 in 404 is a tire, inside a striped frame with a traffic cone at the corner.
Branding
Logo and colours
Along with the new site, the store got a new logo. Its orange, its dark grey and its tire carried over into the store pages.
Old logo
PromShyna in a rounded typeface, with Shyna in orange and a tire behind the last letters.
New logo
Simpler and more geometric: PROM and SHYNA in wide capitals with a tire between the two words. It sits in the middle of the header and in the footer.
The tire on the site
A tire like the one in the logo stands in for the 0 on the 404 page.
Colours
- Orange
#FF973BPrices, buttons and the active menu item
- Dark grey
#222222Footer and cart buttons
- Light grey
#F5F5F5Page background
- White
#FFFFFFHeader and product cards
Cravus
Cravus
A web app for Cravus, a food delivery startup for busy professionals and students.
My role
Designer
- App structure and user flows
- Layouts for nine pages
- Cart, payment and order history
- Phone layouts
- Icons, UI elements and the style guide
Team
I was the only designer on the project and worked directly with the Cravus team. Their developers built the app.
Concept
How Cravus works
Chefs
Cravus finds cooks from different countries who live in the area. They cook dishes from their home cuisine every day in a licensed central kitchen.
Weekly menu
The menu of cuisines changes every week. Customers order meals for any day and time in the coming week. Ordering ahead is cheaper, and same-day orders cost more to deliver.
Offices
Companies can sign up as enterprise customers and order lunch for their staff. Each employee picks their own meal, and the company pays only for what was ordered.
01 / 09
Main page
Header
Login and sign up, the menu (Home, Dishes, How it works, Contact, Be a Chef), search and the cart.
First screen
The logo and “What Are You Craving?” over a food photo, with an Explore button.
About
“A Taste of Global Cuisine” with three points: affordable food, a menu that changes weekly and delivery to the curb.
Today’s dishes
Six dish cards from the day’s menu.
Chef story
“Do You Know Your Chef?” with a quote from one of the chefs about their home town.
Offices
“Looking to feed your office?” with three reasons and a Sign up button.
Footer
Phone and email, links to join the kitchen or the delivery fleet, and social links.
02–09
Inner pages
Besides the main page, the app has eight pages. Every page uses the same header, cards and footer.
02 / 09
Sign up and profile
Customers sign up with Facebook or email. A checkbox marks enterprise customers, who add the company name and the number of employees. The profile has the same fields, plus promo emails and a password change. The menu under the user’s name links to Refer a friend, History, Profile and Logout.
03 / 09
Dishes
The menu for today, tomorrow or a date picked in the calendar, with the cuisine of that day. Dishes can be sorted by newest, top rated or trending. Each card shows the photo, price, rating, cuisine, a short description, the chef and an Add to cart button.
04 / 09
Chefs
Chef cards list the rating, type of cooking, cuisine, payment methods, email, and whether the chef delivers or offers pick-up.
05 / 09
Chef page
A photo header with the chef’s name and rating, then their details, a Talk to chef button and a short bio. Below are the chef’s dishes and comments from customers.
06 / 09
Cart and payment
Items are grouped by delivery date. Each item has its own date, time and quantity, so one order can cover several days. Secure payment opens a panel with card details, phone, address and the order summary.
07 / 09
Order history
Past orders grouped by day, each with a status: placed, in progress, delivery, complete or declined. After a delivery the customer can rate the dish.
08 / 09
How it works
Three ways to order: on demand for the same day, a day ahead to save 20% on delivery, or for the whole next week before 8:00pm on Saturday to save 60%. The service area map has three zones around the kitchen: under 10 meals, 10–25 meals, and 25 meals and more.
09 / 09
Contact
A short description of Cravus and a form with name, email and message.
Mobile
Phone layouts
320px +
Every page has a phone layout. The menu folds into a button in the top-left corner, and cards and tables stack in one column.
Style guide
Colour, type and UI elements
Colour
- Buttons, links and icons
#F3981E - Text
#36210D - Background
#F9E8BF
Typography
Titillium Web · 40px
What Are You Craving?
Titillium Web · 26px
Today’s Cultural Adventure
Titillium Web · 18px
Delicious pork chops in secret Chinese sauce
Titillium Web · 14px
Cravus is your way of experiencing home-style cuisines from all over the world without the plane ticket.
Icons
Grid
- Container
- 1170px
- Columns
- 12
- Framework
- Bootstrap
UI elements
Team Sternfit
Team Sternfit
A recruiting site for Team Sternfit, the team behind three fitness projects: Motiny, Trainy and Sternfit. Sternfit is a platform where athletes view and share each other’s workout programs.
My role
Designer
- User flow and wireframes
- Loader animation and first screen
- Main page and brand pages
- Photo selection and treatment
- Phone layout
Team
I worked with Roy Huang, Co-Founder of Team Sternfit.
First screen
Three brands on one screen
The site opens with a short loader: the line “Team up, we train.” between two thin rules on black. Then the three brands appear as tall panels side by side. Pointing at a panel makes it wider, and the menu under the panels leads to each brand’s page.
Motiny
What motivates you
An old black and white photo of a small child in boxing gloves sparring with a man. The mark is an M inside a circle, ending in an exclamation mark.
Trainy
Team up, we train
A trainer stretching a woman’s leg, as a silhouette on white. Trainy is the only white panel of the three. The mark is a T inside a diamond, drawn with double lines.
Sternfit
Be stern, be fit
A fighter kneeing a heavy bag, the same photo as on the site’s cover. The S mark is cut through by a diagonal line and also signs the cover and the footer.
Other photos
Two more photos were picked for the content pages: a boxer at a bag with red hand wraps and an athlete resting on a bench in the gym.
Main page
The story under the first screen
Below the panels, the main page tells how the team started, in five blocks. Each block is a dark photo with a few lines of text in capitals. Two Get in touch buttons lead to the join form.
“It all started with a simple idea, can we build something extraordinary, besides getting a job at Wall St?”
Two columns of text on either side of a hanging light bulb, then “Seeking epic humans” and the first Get in touch button.
“Turning an idea into reality can seem like magic.”
The same line as on the cover, over an athlete gripping a barbell plate. The left half of the photo is blurred to keep the text readable.
“But the people who make it happen are not magicians, they are humans.”
Half of an older man’s face in hard light, with the text in the dark half.
“Ideas don’t change the world. Humans that turn ideas into reality do.”
Centred lines over sparks, with some of the words in copper. Fainter copies of the lines sit above and below.
“Seeking the crazy ones.”
The footer has the second Get in touch button, a line about the team, follower counts for Twitter and Facebook, and links to About and the three brand pages.
User flow
From the first screen to the join form
The wireframes follow one visit: the first screen, About, the Motiny, Trainy and Sternfit pages, then the join form. Each brand page has its mark, its line and social links next to a photo. The form asks for a name, an email and two short answers.
Responsive
Phone layout
The layout works from 320px wide. On a phone the three panels stack, each as wide as the screen, and the menu moves behind a button at the top right.
Style guide
Type and colours
The site uses two typefaces and three colours. Everything else comes from the black and white photos.
Georgia
Titles and copy, including the TEAMSTERNFIT wordmark on the cover.
Museo Sans 500
Interface elements and copy: the brand names on the panels, the menu, the buttons and the lines in the blocks.
Colours
Text
#333333Text on white
Hover
#888888Links and buttons on hover
Background
#FFFFFFPage background
Pet Care
Pet Care
Winner of a design competition. App concept for pet care.
My role
Designer
- Research
- Wireframes
- Interface design
- Animations
Competition
The brief
Design a concept app for pet owners. Scientists have made a chip that sits in a pet’s body and reads hundreds of health parameters, and the app has to show them to the owner. The pet was up to us, and I chose a dog.
Entries
300
Designers took part
Competition
1 week
Several tasks, with this app as the last one
Deadline for last task
2 days
To research, design and animate the app
Prize I won
3 months
Paid internship at AIC, a leading design agency, with accommodation included.
Competition prizes
1st place
I won3-month internship
2nd place
MacBook Pro
3rd place
iPhone Pro
Research
What a dog needs
The two days started with research: what a dog needs to live well, and which signs show the state of its body best.
Needs
- Healthy, balanced food
- A home, even for dogs that live outside
- Training
Main health signs
- Body temperature
- Heart rate
- Digestion
- Emotional state
Process
Wireframes
After the research, I started with wireframes of the four main screens: the pet’s main screen, physical data, emotional state and the pet’s needs. The final design keeps this layout.
Pets tab
Main screen
Pet card
Photo, name, breed, age, height and weight. Swiping the card opens the next pet, and the screen changes to that pet’s colour: orange for Barsik, pink for Uncle Fedor.
Signs
Heart rate, temperature, digestion and emotional state, each with a status such as Normal, Good or Angry Dog. The Signs Analysis button checks all parameters at once.
Tab bar
Physical and Emotional are the two main sections. The button in the centre opens the pet’s needs and collects alerts. More is for secondary features.
Physical tab
Physical data
The data is split into categories, such as haematological, chemical and renal function, each with an overall score. Swiping the arc at the top switches the category.
Below the arc are the processes in the body at the moment: leukocytes, hemoglobin, erythrocytes, monocytes and more, each with a chart by day.
Emotional tab
Emotional state
At the top is the dog’s overall mood, here Positive at 81%, with Negative and Neutral on either side. Below it, three bars show pleasure, delight and joy, and further down is the love of master score.
Centre button
The pet’s needs
Food satiety shows how full the dog is and the split between fats, proteins and carbohydrates. The owner can set a reminder to buy food.
Under Toilet time, the system works out when the dog needs to go out. Each time has a reminder 10 minutes before and a switch to turn it off.
Style guide
Colours and type
Four colours make the two gradients in the app. The text is set in SF Pro Display, the iPhone system typeface, in two weights.
Colours
Orange
#FAAC6BStart of the orange gradient
Coral
#F27477End of the orange gradient and buttons
Pink
#F15093Start of the pink gradient
Magenta
#DF42C4End of the pink gradient
Pet Care
Logo and app icon
The dog from the pet card in the app’s pink gradient, with the name to match.
SF Pro Display Bold
Pet names, values and buttons.
SF Pro Display Regular
Labels, units and statuses.
Picker Concept
Picker Concept
Winner of the Telegram design competition.
Brief
The competition
Telegram held a competition for UI designers, with $15,000 in prizes. The task was to redesign the chat screen and the attachment menu of the Android app, with the focus on sharing photos and videos. My entry made the top 15 and won $1,000.
Entries were judged on simplicity, usability and consistency. Telegram later posted my video on its Telegram Designers channel.
Prize pool
$15,000
Shared among the winners
Result
Top 15
Picked by Telegram from all the entries
My prize
$1,000
Sent by Telegram after the results
Reach
525K
Views on Telegram’s post announcing the competition
Entry
The video
The video I sent to Telegram: the chat list, a group chat with voice messages, and the new attachment menu for photos, videos, files, music and location.
Result
Message from Telegram
After the results came out, Telegram support wrote to me and asked for my bank details to send the prize.
SQUARE
SQUARE
Two fashion concepts for SQUARE, an open interface challenge by Slava Kornilov of Geex Arts.
My role
Designer
- Interface design
- Animation
The challenge
One square grid
Slava Kornilov shared a square grid and asked designers to make a screen on it and send it to him. He added selected screens to one presentation on Behance, with each author credited.
See SQUARE on BehanceEntry 41
Lookbook
A lookbook page with one model per issue. Her name is set large next to the photo, the next issues are listed at the top, and two cards lead to runway looks and video. Each issue has its own colour.
Entry 36
Libido
Main screen for a latex clothing shop. The brand name runs down the left side beside the photo, and the products slide in as a row of cards with their prices.
Kitchen Chatbot
Kitchen Chatbot
Chatbot concept for a smart kitchen. I made it in one day, as a challenge during my internship at a design agency.
The robot mascot is from Vic Bell’s Blink Bot.
Flow
The conversation
You tell the bot what you want to eat by typing, by voice, or with the quick buttons for vegetables, pasta and wine. The bot offers one dish with its cook time and a side to go with it. If you turn it down, it shows three more.
After you open a recipe and tap Cook it, the bot asks when to serve the dish, and you pick the time.
The conversation from the GIF
Hello Nazar!Hungry, need help?
Hi cook for me something spicy
Oh Yes:) I have something special for you
Egg Noodles with Rich Chicken45 min
Don’t like it :) Check this out
Chicken Broccoli Bake
Turkey Artichoke Cheese Dip
Meatloaf with Prune Glaze1½ hours
Cook it
Cool :) When I have to serve it?
Serve time picked
Design Cup
Design Cup
Landing page for Design Cup, a concept competition for beginner and experienced interface designers, run by Mail and Skillbox.
My role
Designer
- Concept
- Visual identity
- Branding
- Landing page
Landing page
Page structure
Under the first screen, the page has six blocks: what the competition is, its stages, the prizes, the jury, a second sign-up and the organizers with the footer.
Jury
Jury portraits
The block title, “And who are the judges?”, is a line from Griboyedov’s play Woe from Wit. Five art directors and designers judged the entries, each shown as a portrait in the page’s colours. The arrows move the carousel.
Second sign-up
Near the end, the title comes back with participants’ photos around it and a second Participate button. The line under it plays on the Russian pangram from font previews, “Eat some more of these soft French rolls”, and adds “and take the damn prizes!”
Organizers and footer
The last block, “Who’s paying for this banquet?”, names the organizers, Mail and Skillbox, next to four numbers: 10 weeks, 2 stages with tasks from big companies, x10 growth and 100% out of the comfort zone. The footer links to the rules, news, past editions and the community pages.
Style guide
Visual identity
The look comes from 80s arcade games and synthwave covers: a wireframe landscape under a setting sun, chrome lettering, and neon colours on black.
Lettering
The title and dates from the first screen.
Colours
Measured from the page.
Black
Page background
#000105Pink
Title and numbers
#FB06B5Violet
Buttons and arrows
#4C1AD3Cyan
Numbers and dates
#02E5FBYellow
Chrome lettering
#FDE406Orange
The @ mark
#FF9400
Voximplant IVR
Voximplant IVR
Landing page for Voximplant’s IVR order tracking. Customers call, say a waybill number or their name, and hear where their order is.
My role
Designer
- Landing page
- Test call window
- Animation
Team
I worked directly with Voximplant’s engineering team. Their developers built the page.
Flow
From the first screen to a test call
The first screen says that tracking works by voice, with no digits to type. Below it, a demo window plays a call over a map of Moscow, and the bot answers where the parcel is and when it will arrive.
Four cards list what the service does: several orders in one call, 98% recognition accuracy, a report on order status and delivery dates, and CRM integration. The bot speaks in the voice people know from Yandex.Navigator.
The test call window shows a number to dial and a code to enter once the call connects, with a 30-second timer. After that, you say the answers the page suggests.
OFFF Conference
OFFF Conference
Landing page for the OFFF conference, made for Skillbox. OFFF brings together digital artists, illustrators and designers. It started in Barcelona and travels to other cities.
Page
Full scroll
The landing page from top to bottom: the OFFF letters, the festival texts, the speakers and the ticket call.
Professions
Professions
Landing page for Professions in Digital, an online marathon by Skillbox. Over three weeks, 33 speakers gave 39 master classes on design, code and marketing.
Page
Full scroll
The landing page from top to bottom: the cube intro, the prize draw, the speakers, the schedule and the certificate.
Quit University
Quit University
Landing page for a Skillbox contest. Students sent in project ideas, and ten finalists went to a public vote.
Page
Full scroll
The landing page from top to bottom: the first screen, the three contest steps, the timeline and the entry form.
02 / Impact
The numbers behind the latest work
Results from DataGPT and Voximplant Kit — products I helped take from zero to launch.
Datagpt
- $1.5Mrevenue
- DataGPT, first year after launch, team of 10
- ~85%customer adoption
- vs ~18% for traditional analytics tools
- +26%daily active users
- over 90 days, with +18% revenue in the same period
Voximplant Kit
- 20Kcalls automated per month
- Voximplant Kit outbound campaigns
- 4.8/5rating on G2
- Voximplant Kit
- 10+designers led
- three departments and a research function, built from one seat
A decade of experience
Every role taught me something different. All of it shows up in my work.
2023 — now
Lead Product Designer
DataGPT · San Francisco, remote
Designed the conversational analytics product from 0 to launch; brand, website and design system.
3 yrs 4 mos
2021 — 2023
Lead Product Designer
Voximplant · Palo Alto
Scaled the team from 1 to 10+ designers, structured three design departments.
1 yr 10 mos
2018 — 2021
Product Designer
Voximplant · Palo Alto
Designed Voximplant Kit from discovery to a core product line.
3 yrs
2017 — 2018
Senior UX/UI Designer
24eastyard · Ivano-Frankivsk
Brand, website and client design systems; +30% engagement on managed projects.
1 yr 2 mos
2016 — 2017
UX/UI Designer
Yellow Leaf · Ivano-Frankivsk
Brand and web; dashboards and landing pages for clients.
1 yr 5 mos
2015 — 2017
Freelance Designer
Upwork · part-time
Landing pages, marketing sites and dashboards for SaaS and e-commerce clients.
2 yrs 4 mos
2013 — 2015
Web Designer
NetLS · Ivano-Frankivsk
Responsive sites and web apps; wireframes to export-ready assets.
1 yr 8 mos
03 / I use
- Claude Code
- Codex
- Replit
- Paper
- Figma
04 / Contact