Oleksandra Marchenko - CEO & Art Director | ContraWork by Oleksandra Marchenko
Oleksandra Marchenko
pro

Oleksandra Marchenko

Product Designer ๐Ÿฅท SaaS Mobile App Fintech UI UX

    $5k+
    Earned
    2x
    Hired
    426
    Followers
Cover image for ๐Ÿ›ก๏ธ Product design for cybersecurity platform | Hyperactive
๐Ÿ›ก๏ธ Product design for cybersecurity platform | Hyperactive
5
20
Cover image for ๐Ÿธ Product design for cocktail mobile app | Hyperactive
๐Ÿธ Product design for cocktail mobile app | Hyperactive
6
25
Cover image for โ›ณ๏ธ ๐—ฆ๐—ธ๐—ถ๐—น๐—น ๐—”๐˜€๐˜€๐—ฒ๐˜€๐˜€๐—บ๐—ฒ๐—ป๐˜ ๐— ๐—ฎ๐˜๐—ฟ๐—ถ๐˜… &
โ›ณ๏ธ ๐—ฆ๐—ธ๐—ถ๐—น๐—น ๐—”๐˜€๐˜€๐—ฒ๐˜€๐˜€๐—บ๐—ฒ๐—ป๐˜ ๐— ๐—ฎ๐˜๐—ฟ๐—ถ๐˜… & ๐—ฅ๐—ผ๐—ฎ๐—ฑ๐—บ๐—ฎ๐—ฝ ๐—•๐˜‚๐—ถ๐—น๐—ฑ๐—ฒ๐—ฟ ๐—ณ๐—ผ๐—ฟ ๐——๐—ฒ๐˜€๐—ถ๐—ด๐—ป๐—ฒ๐—ฟ๐˜€ Skill Assessment Matrix is a SaaS designed to help Product Designers and UI/UX Designers better understand their current level, identify their strongest skills, and build a personalized growth roadmap The idea came from a problem I experienced early in my career: "๐™ƒ๐™ค๐™ฌ ๐™™๐™ค ๐™„ ๐™ ๐™ฃ๐™ค๐™ฌ ๐™ž๐™› ๐™„'๐™ข ๐™– ๐™…๐™ช๐™ฃ๐™ž๐™ค๐™ง, ๐™ˆ๐™ž๐™™-๐™ก๐™š๐™ซ๐™š๐™ก, ๐™ค๐™ง ๐™Ž๐™š๐™ฃ๐™ž๐™ค๐™ง ๐™™๐™š๐™จ๐™ž๐™œ๐™ฃ๐™š๐™ง?" This first version is focused on the desktop experience and was designed as the foundation for a larger SaaS product ๐—ฃ๐—ฅ๐—ข๐—•๐—Ÿ๐—˜๐—  Designers often struggle with: โœฆ Understanding their current level โœฆ Identifying their strongest skills โœฆ Knowing what to improve next โœฆ Creating a clear career growth plan ๐—ฆ๐—ข๐—Ÿ๐—จ๐—ง๐—œ๐—ข๐—ก Skill Assessment Matrix helps designers answer three simple questions: โœฆ Where am I today? โœฆ What are my strongest skills? โœฆ What should I focus on next? The product guides users through a complete career planning flow: ๐—ฆ๐˜๐—ฒ๐—ฝ ๐Ÿญ [Career Goals Setup] Users define their career goals and desired direction ๐—ฆ๐˜๐—ฒ๐—ฝ ๐Ÿฎ [Self Assessment] Users evaluate their current skills across multiple competency areas ๐—ฆ๐˜๐—ฒ๐—ฝ ๐Ÿฏ [Summary] The system generates a personalized overview highlighting strengths and growth opportunities. ๐—ฆ๐˜๐—ฒ๐—ฝ ๐Ÿฐ [Roadmap Builder] Users receive a personalized roadmap and can further customize it by adding their own skills ๐—ฆ๐˜๐—ฒ๐—ฝ ๐Ÿฑ [PDF Export] The final roadmap can be exported as a PDF and used as a practical career development plan. โšก๏ธThis roadmap generation and export flow became one of the most valuable features of the projectโšก๏ธ ๐—ฅ๐—˜๐—ฆ๐—˜๐—”๐—ฅ๐—–๐—› ๐—™๐—ข๐—จ๐—ก๐——๐—”๐—ง๐—œ๐—ข๐—ก This project is based on more than 5 years of research intoย Skill assessment frameworks. The primary foundation for this work was the Figma Community Skills Matrix documentation, supported by dozens of additional public frameworks ๐Ÿ”— ๐—ฅ๐—ฒ๐˜€๐—ฒ๐—ฎ๐—ฟ๐—ฐ๐—ต ๐—ฅ๐—ฒ๐˜€๐—ผ๐˜‚๐—ฟ๐—ฐ๐—ฒ๐˜€: https://docs.google.com/document/d/1FKjUpq0b4CnN_yrVx3NBB_xVMWZZBH6Ts9Gg9NU182A/edit?usp=sharing ๐—ช๐—›๐—”๐—ง ๐—ช๐—”๐—ฆ ๐—ง๐—˜๐—ฆ๐—ง๐—˜๐—— โœฆ Figma AI Agent for generating new interfaces โœฆ Figma Make for transforming designs into interactive product flows โœฆ Combining a custom design system with generated product experiences โœฆ Building complex multi-step user journeys inside Figma Make โœฆ Creating SaaS-style product logic without traditional development workflows ๐—ง๐—ข๐—ข๐—Ÿ๐—ฆ ๐—จ๐—ฆ๐—˜๐—— Figma โœฆ Figma AI Agent โœฆ Figma Make โœฆ MCP Servers ๐Ÿ”— ๐—ฃ๐—ฅ๐—ข๐—๐—˜๐—–๐—ง ๐—Ÿ๐—œ๐—ก๐—ž: https://meta-poet-59855448.figma.site ๐Ÿ”— ๐—ช๐—ข๐—ฅ๐—ž ๐—™๐—œ๐—Ÿ๐—˜: https://www.figma.com/make/T68isMdbSqZHrBrhLxpoXP/Designer-Career-Levels?t=MhG5fOhpNgHEIEEx-1 ๐Ÿ”— ๐—™๐—œ๐—š๐— ๐—” ๐—–๐—ข๐— ๐— ๐—จ๐—ก๐—œ๐—ง๐—ฌ: https://www.figma.com/community/file/1649639588397334446/skill-assessment-matrix-roadmap-builder-makeathon-submission ๐ŸŽฅ Watch the video to see the full design process and how the project was built ๐Ÿ”— ๐—ฉ๐—œ๐——๐—˜๐—ข: https://youtu.be/S3q38_kpTXo ๐—–๐—ข๐—Ÿ๐—Ÿ๐—”๐—•๐—ข๐—ฅ๐—”๐—ง๐—ข๐—ฅ๐—ฆ: Special thanks to @Illia Skliarov for contributing to the creative process, design discussions, design, brainstorming sessions, and product thinking throughout the project. ๐—ฆ๐—จ๐—ฃ๐—ฃ๐—ข๐—ฅ๐—ง (ใฃโ—”โ—กโ—”)ใฃ Please like, comment, share, or save this project to help more designers discover it โค๏ธ ๐Ÿ”— ๐—ฆ๐—ข๐—–๐—œ๐—”๐—Ÿ ๐— ๐—˜๐——๐—œ๐—” ๐—ฃ๐—ข๐—ฆ๐—ง: https://www.instagram.com/reel/DZwXAvhoMHA/?igsh=MWpmZGRwYmx0Y2lwdA== ๐Ÿ”— ๐—ฆ๐—ข๐—–๐—œ๐—”๐—Ÿ ๐— ๐—˜๐——๐—œ๐—” ๐—ฃ๐—ข๐—ฆ๐—ง: https://www.linkedin.com/posts/oleksandra-marchenko-1a3845183_uiux-product-designer-career-levels-from-share-7473607549641154560-EnNK/?utm_source=share&utm_medium=member_desktop&rcm=ACoAACtfdssBweyK9h-szJtXgRq5qAWGe9C9ktk
101
129
5.1K
Cover image for HYPERACTIVE DESIGN STUDIO
HYPERACTIVE DESIGN STUDIO
22
107
Cover image for For the #CapCutDesignStudio Challenge, I
For the #CapCutDesignStudio Challenge, I created ๐—–๐—ฎ๐—ฝ๐—–๐˜‚๐˜ ๐—ฉ๐—ถ๐˜€๐—ถ๐—ผ๐—ป โ€” a concept that reimagines CapCut as a wearable technology companyย ๐Ÿ’Ž [๐——๐—ถ๐—ฟ๐—ฒ๐—ฐ๐˜๐—ถ๐—ผ๐—ป ๐—”] ๐—–๐—ฎ๐—ฝ๐—–๐˜‚๐˜ ๐—ฎ๐˜€ ๐—ฎ ๐——๐—ถ๐—ณ๐—ณ๐—ฒ๐—ฟ๐—ฒ๐—ป๐˜ ๐—œ๐—ป๐—ฑ๐˜‚๐˜€๐˜๐—ฟ๐˜† CapCut Vision transforms CapCut from a video editing platform into an AI-powered smart eyewear ecosystem designed for the next generation of creators. CupCut Vision allows creators to capture moments, transform them through AI, and instantly share them with the world. I was inspired by CapCut's mission to make creativity accessible to everyone, and I imagined a future where capturing, editing, and sharing content happen as one seamless experience. [๐—ฃ๐—ฟ๐—ผ๐—ท๐—ฒ๐—ฐ๐˜ ๐—ข๐˜ƒ๐—ฒ๐—ฟ๐˜ƒ๐—ถ๐—ฒ๐˜„] For this submission, I developed: โ€ข Brand Concept โ€ข Visual Identity System โ€ข Product Design Language โ€ข Smart Glasses Design โ€ข Packaging Experience โ€ข Creator Ecosystem โ€ข Presentation Deck [๐—ช๐—ผ๐—ฟ๐—ธ๐—ณ๐—น๐—ผ๐˜„] To demonstrate my workflow, I also included: โ€ข Recording of the entire creation process โ€ข Brand Concept Presentation โ€ข Complete Design Studio chat history [๐— ๐˜† ๐—˜๐˜…๐—ฝ๐—ฒ๐—ฟ๐—ถ๐—ฒ๐—ป๐—ฐ๐—ฒ] โค๏ธ One thing I genuinely enjoyed while working on this project was how intuitive CapCut Design Studio feltย โค๏ธ I realized that great results don't necessarily come from writing perfect prompts. Most of my process involved combining references, exploring visual directions, refining ideas, and iterating creatively. Design Studio made it easy to move from inspiration to concept development and final presentation within a single workspaceย ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ [๐——๐—ฒ๐˜€๐—ถ๐—ด๐—ป ๐—ฆ๐˜๐˜‚๐—ฑ๐—ถ๐—ผ ๐—™๐—ฒ๐—ฎ๐˜๐˜‚๐—ฟ๐—ฒ๐˜€ ๐—จ๐˜€๐—ฒ๐—ฑ] Throughout the project, I used Design Studio for inspiration gathering, visual exploration, product ideation, branding, packaging concepts, and ecosystem development. Thank you to the CapCut team for creating a platform that encourages experimentation, creativity, and explorationย ๐Ÿซถ [๐—Ÿ๐—ถ๐—ป๐—ธ๐˜€] CupCut Design Studio Chat History: https://www.capcut.com/ai-design?shareId=7647947968217202695 Brand Concept Presentation: https://www.figma.com/proto/reTVCLZxw73WBxxaJOePS0/CAPCUT-VISION?node-id=1-285&viewport=701%2C169%2C0.02&t=Z6lxfa2Fi8czJOxo-1&scaling=contain&content-scaling=fixed&page-id=0%3A1 Video explainer (the same as attached): https://docs.google.com/videos/d/1SSDBHyguM5hNoItyjONVOOouXbL54xgNCdo3w-8jDv8/edit?usp=sharing If you like this concept and the work behind it, Iโ€™d be incredibly grateful for your support. Every like, comment, share, or vote means a lot. Thank you! ๐Ÿ™Œ
34
51
4.1K
Cover image for Iโ€™m happy to take part
Iโ€™m happy to take part in this challenge and share my project created with Google Stitch โค๏ธโ€๐Ÿ”ฅ For this challenge, I designed a marketing landing page for a sleep improvement app that helps users build better sleep habits ๐Ÿ˜ด [๐—ช๐—ผ๐—ฟ๐—ธ๐—ณ๐—น๐—ผ๐˜„]I used Google Stitch throughout the whole design process: - Imported my design system from Figma - Added visual references - Generated the first version of the interface with prompts - Improved the content and layouts using AI edits - Added animations and interactions to complete the experience [๐—ž๐—ฒ๐˜† ๐—ฆ๐˜๐—ถ๐˜๐—ฐ๐—ต ๐—™๐—ฒ๐—ฎ๐˜๐˜‚๐—ฟ๐—ฒ๐˜€ ๐—จ๐˜€๐—ฒ๐—ฑ] In this project, I explored several Stitch features: - Design imports - AI editing - Prompt-based UI generation - Animations and motion ๐—˜๐˜…๐—ฝ๐—ฒ๐—ฟ๐—ถ๐—ฒ๐—ป๐—ฐ๐—ฒ ๐Ÿคฉ I really enjoyed working with Stitch. The workflow felt intuitive and easy to understand, making it simple to move from ideas to polished screens. Creating and updating layouts was fast, and the AI-powered editing significantly accelerated the design process. I also appreciated how seamlessly Stitch worked with my existing design assets, allowing me to combine my design system with AI-generated concepts and iterate efficiently ๐—Ÿ๐—ถ๐—ป๐—ธ๐˜€ Prototype: https://stitch.withgoogle.com/preview/14073781857777698748?node-id=10b283821f014ccab41648d62b15bf7e&raw=1 Project File: https://stitch.withgoogle.com/projects/14073781857777698748 Workflow Video (the same video as the one attached) : https://drive.google.com/file/d/1y1NIdNjLn1JM2S_s2wYpn0jR1nB-nyoj/view?usp=sharing ๐Ÿ˜‡ ๐—ฆ๐˜‚๐—ฝ๐—ฝ๐—ผ๐—ฟ๐˜ ๐— ๐˜† ๐—ฆ๐˜‚๐—ฏ๐—บ๐—ถ๐˜€๐˜€๐—ถ๐—ผ๐—ป ๐Ÿ˜‡ If you enjoyed this project and found the workflow demonstration valuable, I would greatly appreciate your support. Thank you for taking the time to review my submission โค๏ธ
111
158
9.5K
Cover image for ๐Ÿ’™ Mobile design for medical app | Hyperactive
๐Ÿ’™ Mobile design for medical app | Hyperactive
14
29
Cover image for ๐Ÿฅ Web Design for Asian restaurant website | Hyperactive
๐Ÿฅ Web Design for Asian restaurant website | Hyperactive
13
45
Cover image for Mobile design for the finance management app | Hyperactive
Mobile design for the finance management app | Hyperactive
12
25
Cover image for ๐Ÿก Web Design for Real Estate Agency | Hyperactive
๐Ÿก Web Design for Real Estate Agency | Hyperactive
14
32
Cover image for ๐Ÿ“š Mobile design for the language learning app | Hyperactive
๐Ÿ“š Mobile design for the language learning app | Hyperactive
14
23
Cover image for ๐Ÿต Web Design for Matcha store e-comm website | Hyperactive
๐Ÿต Web Design for Matcha store e-comm website | Hyperactive
12
41
Cover image for ๐Ÿš™ Mobile app design for car rental service | Hyperactive
๐Ÿš™ Mobile app design for car rental service | Hyperactive
12
20
Cover image for HYPERACTIVE | SLEEPING APP WEBSITE | LANDING PAGE
HYPERACTIVE | SLEEPING APP WEBSITE | LANDING PAGE
14
40
Designers, 5๏ธโƒฃ0๏ธโƒฃ+ Behance covers for you ๐Ÿ”ฅโœจ ๐ˆ ๐œ๐จ๐ฅ๐ฅ๐ž๐œ๐ญ๐ž๐ ๐Ÿ“๐ŸŽ+ ๐ก๐ข๐ ๐ก-๐ช๐ฎ๐š๐ฅ๐ข๐ญ๐ฒ ๐๐ž๐ก๐š๐ง๐œ๐ž ๐œ๐จ๐ฏ๐ž๐ซ๐ฌ that look aesthetic and actually work. This is a curated pack of strong visual references for anyone who wants their profile to look more polished and professional. ๐Ÿ“ ๐ˆ๐ง๐ฌ๐ข๐๐ž: โ€” examples of covers that grab attention โ€” 6 editable Figma templates, so you donโ€™t have to start from scratch ๐Ÿ“ ๐“๐ก๐ข๐ฌ ๐Ÿ๐ข๐ฅ๐ž ๐ข๐ฌ ๐Ÿ๐จ๐ซ ๐๐ž๐ฌ๐ข๐ ๐ง๐ž๐ซ๐ฌ ๐ฐ๐ก๐จ: โ€” want their portfolio to look more professional โ€” need quality references instead of scrolling for hours โ€” want to refresh their profile and stand out from other designers ๐Ÿ”ฅ ๐“๐Ž ๐†๐„๐“ ๐€๐‚๐‚๐„๐’๐’: ๐Ÿ + โค๏ธ React to this post โ™ป๏ธ Repost it and Iโ€™ll send it even faster โž• Follow me ๐Ÿ’ฌ Add any Comment below + add where should I send the link (IG, mail, or any other ways) Letโ€™s make your profile stand out ๐Ÿซถโœจ
3
15
1.8K
Cover image for Friends, I havenโ€™t announced this
Friends, I havenโ€™t announced this properly yet, but I canโ€™t keep quiet anymore ๐Œ๐ฒ ๐š๐ ๐ž๐ง๐œ๐ฒ ๐ฆ๐š๐๐ž ๐ข๐ญ ๐ญ๐จ ๐ƒ๐ซ๐ข๐›๐›๐›๐ฅ๐žโ€™๐ฌ ๐“๐จ๐ฉ ๐๐ซ๐จ๐๐ฎ๐œ๐ญ ๐ƒ๐ž๐ฌ๐ข๐ ๐ง ๐€๐ ๐ž๐ง๐œ๐ข๐ž๐ฌ ๐จ๐Ÿ ๐ญ๐ก๐ž ๐˜๐ž๐š๐ซ๐Ÿ˜ญโค๏ธ Accepting congratulations ๐Ÿ’ƒ And sharing a bit of our experience in this post. ๐‡๐จ๐ฐ ๐๐ข๐ ๐ฐ๐ž ๐ ๐ž๐ญ ๐ก๐ž๐ซ๐ž? โœ”๏ธ We posted 2โ€“4 works per week. So behind this result are 5 years of consistency. โœ”๏ธ Thanks to regular posting, we grew to around 100,000 followers across all our accounts. ๐Ÿคฃ ๐“๐ก๐ž ๐Ÿ๐ฅ๐ข๐ฉ ๐ฌ๐ข๐๐ž: So far, Dribbble hasnโ€™t brought us a single client. We do get inquiries from there, but so far, none of them have been from clients with the budgets we usually work with. Letโ€™s see what happens next. Also, Iโ€™ll be happy to answer your questions about growing on Dribbble, if you have any. By the way, this case shows me that the phrase โ€œwhere there is focus, there is resultโ€ is not entirely true. Because Dribbble wasnโ€™t our daily focus throughout these 5 years. Iโ€™ll unpack this in the next post. Check it out (https://contra.com/p/UlNgWbRB-mobile-app-design-for-the-travel-manager-app-or-hyperactive)
15
29
1.9K
Cover image for ๐ŸŽ‰ Winning Submission Wispr Flow
๐ŸŽ‰ Winning Submission Wispr Flow Challenge & Contra [ UI/UX Design , Platform Saas ]
2
14
1.9K
Cover image for SaaS Platform Redesign, Mobile App redesign, Figma Design System
SaaS Platform Redesign, Mobile App redesign, Figma Design System
15
69
Cover image for HYPERACTIVE | PHOTO GALLERY APP | MOBILE
HYPERACTIVE | PHOTO GALLERY APP | MOBILE
11
19
Cover image for HYPERACTIVE | SMART HOME | MOBILE APP
HYPERACTIVE | SMART HOME | MOBILE APP
12
13
Cover image for HYPERACTIVE | E-COMMERCE | INSTYTUTUM
HYPERACTIVE | E-COMMERCE | INSTYTUTUM
10
22
Cover image for HYPERACTIVE | CAMERA | WEBSITE
HYPERACTIVE | CAMERA | WEBSITE
8
22
Cover image for HYPERACTIVE | SUN PROTECTION | MOBILE APP
HYPERACTIVE | SUN PROTECTION | MOBILE APP
8
20
Cover image for HYPERACTIVE | MONEY TRACKER | SAAS
HYPERACTIVE | MONEY TRACKER | SAAS
7
19
Cover image for HYPERACTIVE | E-COMMERCE | PINSTRIPE | MOBILE APP
HYPERACTIVE | E-COMMERCE | PINSTRIPE | MOBILE APP
11
39
Cover image for HYPERACTIVE | HEARING AID APP | MOBILE
HYPERACTIVE | HEARING AID APP | MOBILE
7
4
Cover image for HYPERACTIVE | TRAVEL SAAS | WEB APP
HYPERACTIVE | TRAVEL SAAS | WEB APP
8
6
Cover image for NICKLPASS | HYPERACTIVE | SAAS
NICKLPASS | HYPERACTIVE | SAAS
6
10
Cover image for HYPERACTIVE | MOBILE APP | TRAVEL MAPS
HYPERACTIVE | MOBILE APP | TRAVEL MAPS
6
12
Cover image for DRIP | HYPERACTIVE | MOBILE APP | E-COMMERCE
DRIP | HYPERACTIVE | MOBILE APP | E-COMMERCE
6
18
Cover image for ๐Ÿ–ผ๏ธ Web design for the art gallery | Hyperactive
๐Ÿ–ผ๏ธ Web design for the art gallery | Hyperactive
7
44
Cover image for ๐Ÿ›๏ธ Web design for the art exhibition | Hyperactive
๐Ÿ›๏ธ Web design for the art exhibition | Hyperactive
5
17
Cover image for ๐Ÿฅ Product design for the food ordering mobile app | Hyperactive
๐Ÿฅ Product design for the food ordering mobile app | Hyperactive
5
13
Cover image for ๐ŸŽŠ Mobile design for event platform | Hyperactive
๐ŸŽŠ Mobile design for event platform | Hyperactive
3
8
Cover image for ๐Ÿšš Product design for the delivery mobile app | Hyperactive
๐Ÿšš Product design for the delivery mobile app | Hyperactive
4
9
Cover image for ๐Ÿ“ˆ Product design for e-learning platform | Hyperactive
๐Ÿ“ˆ Product design for e-learning platform | Hyperactive
3
15
Cover image for ๐Ÿ•ถ๏ธ Product design for the VR mobile application | Hyperactive
๐Ÿ•ถ๏ธ Product design for the VR mobile application | Hyperactive
3
8
Cover image for ๐Ÿฃ Product design for the creative Easter platform | Hyperactive
๐Ÿฃ Product design for the creative Easter platform | Hyperactive
5
38
Cover image for ๐Ÿ“ˆ Product design for the task manager | Hyperactive
๐Ÿ“ˆ Product design for the task manager | Hyperactive
15
87
Cover image for โœˆ๏ธ Mobile app design for the travel manager app | Hyperactive
โœˆ๏ธ Mobile app design for the travel manager app | Hyperactive
6
18
Cover image for Product design for the NFT Marketplace Crista | Hyperactive
Product design for the NFT Marketplace Crista | Hyperactive
4
16
Cover image for โ„๏ธ Product design for the travel app | Hyperactive
โ„๏ธ Product design for the travel app | Hyperactive
6
19
Cover image for ๐Ÿšฒ Mobile design for the smart e-bike application | Hyperactive
๐Ÿšฒ Mobile design for the smart e-bike application | Hyperactive
5
33