[{"data":1,"prerenderedAt":410},["ShallowReactive",2],{"case-studies-en":3},[4,139,287],{"id":5,"title":6,"body":7,"client":123,"cover":124,"desc":125,"description":112,"extension":126,"figma":123,"link":123,"meta":127,"navigation":128,"order":129,"path":130,"product":131,"role":132,"scope":133,"screens":123,"seo":134,"stem":135,"tag":136,"tools":137,"video":123,"__hash__":138},"caseStudies_en\u002Fen\u002Fcase-studies\u002Feplano.md","SaaS platform redesign — Eplano",{"type":8,"value":9,"toc":111},"minimark",[10,15,19,23,26,30,37,41,44,48,52,63,67,70,74,77,82,85,90,94,97,100,104,107],[11,12,14],"h2",{"id":13},"context","Context",[16,17,18],"p",{},"Eplano's interface had grown organically as new features were added. Over time this led to inconsistent patterns, cluttered panels, and repetitive actions that made an already advanced tool harder to use. The goal of the redesign was to restore order and consistency — without stripping the tool of its power.",[11,20,22],{"id":21},"discovery-how-i-defined-the-problems","Discovery — how I defined the problems",[16,24,25],{},"This wasn't a project driven by formal user research. The starting point was a brief from the client and the development team, along with needs that users had reported earlier from inside the live app. Building on that, I ran my own UX analysis of the existing interface and cross-checked my conclusions with the development team — to separate real design problems from technical constraints.",[27,28],"case-tiles",{":items":29},"[{\"title\":\"Client and developer brief\",\"desc\":\"business expectations, feature context, and known technical constraints.\"},{\"title\":\"User reports\",\"desc\":\"needs and problems raised earlier in the production app.\"},{\"title\":\"My own UX audit\",\"desc\":\"a review of existing screens for consistency, hierarchy, and repeated patterns.\"},{\"title\":\"Consultations with the dev team\",\"desc\":\"checking feasibility and how features work under the hood.\"}]",[31,32],"case-split",{":leftItems":33,":rightItems":34,"leftTitle":35,"rightTitle":36},"[\"Overloaded panels and weak information hierarchy.\",\"Inconsistent patterns across screens.\",\"Repetitive and duplicated actions.\",\"Distracting button colors competing for attention.\"]","[\"Tidy up the panels and strengthen the hierarchy.\",\"Unify patterns and the placement of key actions.\",\"Simplify the interface — remove duplicates and redundancy.\",\"Build a consistent, legible visual system and iconography.\"]","Problem","Goals",[11,38,40],{"id":39},"process-the-choose-option-dialog","Process — the \"Choose option\" dialog",[16,42,43],{},"A good example of how I work is the redesign of the dialog for adding and replacing a planogram on a fixture. The client provided an initial vision of how the feature should work, and I translated it into successive UI iterations — from a raw layout with large, competing buttons, through ordering the action hierarchy, to a coherent version aligned with the rest of the interface.",[45,46],"case-steps",{":items":47},"[{\"title\":\"Input from the client\",\"desc\":\"An initial idea for how the \\\"add \u002F replace planogram\\\" feature should work, plus use cases.\"},{\"title\":\"Early iteration\",\"desc\":\"A raw layout: large, heavily colored action buttons and an unclear hierarchy.\",\"image\":\"\u002Fassets\u002Feplano-modal-early.png\",\"imageAlt\":\"Early iteration of the 'Choose option' dialog — a raw layout with large, colorful add \u002F replace \u002F cancel buttons\"},{\"title\":\"Ordering\",\"desc\":\"Unifying the \\\"Add \u002F Replace \u002F Cancel\\\" cards, separating the destructive action, and applying consistent spacing.\",\"image\":\"\u002Fassets\u002Feplano-modal-variants.png\",\"imageAlt\":\"Hi-fi variants of the 'Choose option' dialog — comparing several layouts of the Add \u002F Replace \u002F Cancel cards\"},{\"title\":\"Final version\",\"desc\":\"A clean modal aligned with the system: a clear heading, predictable CTAs, and distinct replacement states.\",\"image\":\"\u002Fassets\u002Feplano-modal-final.png\",\"imageAlt\":\"Final version of the 'Choose option' dialog in the live app — a clean modal aligned with the system\"}]",[11,49,51],{"id":50},"before-and-after-the-planogram-sides-panel","Before and after — the \"Planogram sides\" panel",[53,54],"compare-slider",{"after":55,"afterAlt":56,"aspect":57,"before":58,"beforeAlt":59,"caption":60,"hint":61,"maxWidth":62},"\u002Fassets\u002Feplano-after.png","New version of the Planogram sides panel — a tidy, consistent list","1737 \u002F 1794","\u002Fassets\u002Feplano-before.png","Previous version of the Planogram sides panel — a cluttered layout with colorful buttons","The new version: a readable list of sectors, muted icon actions, a clear selected state, and an ordered hierarchy instead of colorful, competing buttons.","Drag the slider (or use the arrow keys) to compare the previous and new versions of the panel.","720px",[11,64,66],{"id":65},"key-uiux-decisions-the-planogram-sides-panel","Key UI\u002FUX decisions — the \"Planogram sides\" panel",[45,68],{":items":69},"[{\"title\":\"Sides\",\"desc\":\"The selected Side is visually highlighted, making it easy for the user to quickly understand which area they're currently working in.\"},{\"title\":\"Color\",\"desc\":\"Bright, heavily saturated buttons were replaced with neutral colors. Color is now used only as an accent, and reducing color cuts visual noise and makes it easier for the user to focus on the most important elements.\",\"substeps\":[\"to mark the selected Side or a completed action,\",\"to identify sectors.\"]},{\"title\":\"Buttons\",\"desc\":\"Large, colorful buttons were simplified and replaced with smaller icon links. Actions like \\\"+ Add new side\\\" or \\\"+ Add new sector\\\" were placed directly as a continuation of the list. This way the main actions no longer compete visually with the list content, and the interface is clearer and more consistent.\"},{\"title\":\"Auto-generate sectors\",\"desc\":\"The \\\"Auto-generate sectors\\\" button was moved next to the Sector heading. This keeps it from clashing with the similar \\\"Auto-generate sides\\\" button and preserves a consistent logic for where actions live in the interface.\"},{\"title\":\"Segment setting\",\"desc\":\"The \\\"Segment\\\" button was moved from the side panel to the top of the window, next to the heading. The new location clearly shows that Segment is an independent feature, not an action tied to a Side or Sector.\"}]",[11,71,73],{"id":72},"icon-set","Icon set",[16,75,76],{},"A custom icon set designed specifically for the Eplano domain — planograms, merchandising, 3D measurements, collisions, and PDM models. A uniform style, consistent line weight, and shared grid keep everything coherent across the interface.",[78,79],"case-figure",{"alt":80,"src":81},"Eplano custom icon set: markers, merchandising, perforation, planograms, PDM model, measure 3D, collision, and more","\u002Fassets\u002Feplano-icons.png",[16,83,84],{},"Before settling on the final direction, I prepared several style variants (including outline, solid, twotone, and duotone in standard, sharp, and rounded versions) and tested them directly in the live app. A style switcher let me compare icon legibility in a real interface context, not just on a grid in Figma.",[78,86],{"alt":87,"src":88,"caption":89},"Exploring and testing Eplano icon styles — an outline \u002F solid \u002F twotone \u002F duotone switcher in the live app, plus a matrix of variants (standard, sharp, rounded)","\u002Fassets\u002Feplano-icon-steps.png","Exploring and testing icon styles — variants prepared for comparison and an outline \u002F solid \u002F twotone \u002F duotone switcher in a real interface.",[11,91,93],{"id":92},"my-role-and-contribution","My role and contribution",[16,95,96],{},"I was responsible for shifting the app's visual layer toward a mature UI and for refining the functional dialogs from a UI\u002FUX angle — taking into account user needs reported earlier in the app. I worked closely with the development team, consulting on feasibility and the rollout of each change.",[27,98],{":items":99},"[{\"title\":\"Visual style (UI)\",\"desc\":\"Revising and unifying the interface's visual style.\"},{\"title\":\"Functional dialogs\",\"desc\":\"Redesigning the key functional dialogs.\"},{\"title\":\"Custom icon set\",\"desc\":\"Tailored to the domain — design, variants, and in-app testing.\"},{\"title\":\"Collaboration with development\",\"desc\":\"Feasibility consulting and rollout support.\"}]",[11,101,103],{"id":102},"outcome","Outcome",[16,105,106],{},"The changes were rolled out to production after internal testing — the team reviewed the final versions, and developers made adjustments as needed.",[27,108],{":items":109,"variant":110},"[{\"title\":\"Consistency\",\"desc\":\"unified patterns across screens\"},{\"title\":\"Simpler\",\"desc\":\"duplicates removed and actions merged\"},{\"title\":\"Clearer\",\"desc\":\"a clear hierarchy and muted actions\"}]","stats",{"title":112,"searchDepth":113,"depth":113,"links":114},"",2,[115,116,117,118,119,120,121,122],{"id":13,"depth":113,"text":14},{"id":21,"depth":113,"text":22},{"id":39,"depth":113,"text":40},{"id":50,"depth":113,"text":51},{"id":65,"depth":113,"text":66},{"id":72,"depth":113,"text":73},{"id":92,"depth":113,"text":93},{"id":102,"depth":113,"text":103},null,"\u002Fassets\u002Feplano-cover.png","Eplano is a SaaS tool for building planograms and visualizing product displays in 3D. The redesign focused on tidying up the interface, unifying patterns, and simplifying key actions — so that everyday work in the app is faster, more consistent, and easier to read.","md",{},true,1,"\u002Fen\u002Fcase-studies\u002Feplano","SaaS · 3D planograms","UI\u002FUX Designer","UX, UI, icon set",{"title":6,"description":112},"en\u002Fcase-studies\u002Feplano","saas · ui\u002Fux · icon system","Figma","qZKV85qFTI04KB0CijPitrKtv5q1e-FCkmtpMjU-5I8",{"id":140,"title":141,"body":142,"client":123,"cover":277,"desc":278,"description":112,"extension":126,"figma":123,"link":123,"meta":279,"navigation":128,"order":113,"path":280,"product":281,"role":132,"scope":282,"screens":123,"seo":283,"stem":284,"tag":285,"tools":137,"video":123,"__hash__":286},"caseStudies_en\u002Fen\u002Fcase-studies\u002Febr.md","Efektywne Biuro Rachunkowe",{"type":8,"value":143,"toc":266},[144,146,149,151,154,177,181,187,191,195,198,201,205,216,220,223,227,231,235,239,241,244,258,260,263],[11,145,14],{"id":13},[16,147,148],{},"The previous page was dense and chaotic: a lot of text, low contrast, and a weak hierarchy meant the key message and call-to-action buttons got lost. The goal was to simplify the messaging, highlight the benefits, and guide the user straight toward booking a demo.",[11,150,22],{"id":21},[16,152,153],{},"The starting point was a brief from the client and my own UX analysis of the existing page. I reviewed the previous version for hierarchy, readability, and the path to the CTA, then turned those findings into a list of problems to solve — without formal user research, but with a concrete read on where the key message was getting lost.",[155,156,157,165,171],"ul",{},[158,159,160,164],"li",{},[161,162,163],"strong",{},"Client brief"," — business goals, target audience, and the key sales message.",[158,166,167,170],{},[161,168,169],{},"Analysis of the existing page"," — an audit of hierarchy, contrast, and the amount of content in the hero.",[158,172,173,176],{},[161,174,175],{},"Conversion path"," — tracing the user's journey to booking a demo and where it broke down.",[11,178,180],{"id":179},"who-i-designed-for","Who I designed for",[182,183],"case-cards",{":items":184,"frustrationLabel":185,"goalLabel":186},"[{\"title\":\"Accounting office owner\",\"goal\":\"quickly judge whether the tool would improve the office's work and book a demo.\",\"frustration\":\"a wall of text with no clear message made the offer hard to evaluate.\"},{\"title\":\"Employee \u002F accountant\",\"goal\":\"understand how the tool would make day-to-day client and document handling easier.\",\"frustration\":\"an unclear hierarchy and scattered CTAs didn't lead to a next step.\"}]","Frustration:","Goal:",[31,188],{":leftItems":189,":rightItems":190,"leftTitle":35,"rightTitle":36},"[\"An overloaded hero — too much content at once.\",\"Weak hierarchy and low text contrast.\",\"An unclear, scattered path to the CTA.\",\"An inconsistent visual system and typography.\"]","[\"Simplify the hero and sharpen the main message.\",\"Build a clear hierarchy and readability.\",\"Guide the user along a single, clear path to the CTA.\",\"Unify the typography, color, and components.\"]",[11,192,194],{"id":193},"process-from-chaos-to-a-clear-path","Process — from chaos to a clear path",[16,196,197],{},"I ran the redesign step by step: first trimming the messaging, then building the hierarchy and a consistent visual system, and finally straightening out the conversion path.",[45,199],{":items":200},"[{\"title\":\"Simplifying the message\",\"desc\":\"One strong headline instead of a wall of text — it's immediately clear what the product offers.\"},{\"title\":\"Hierarchy and breathing room\",\"desc\":\"Clear content levels, contrast, and space — key elements stopped getting lost.\"},{\"title\":\"Visual system\",\"desc\":\"Consistent typography, color, and components as the foundation of the whole page.\"},{\"title\":\"Path to the CTA\",\"desc\":\"One clear route to booking a demo — repeatable, predictable actions.\"}]",[11,202,204],{"id":203},"before-and-after-the-homepage","Before and after — the homepage",[53,206],{":badges":207,"after":208,"afterAlt":209,"aspect":210,"before":211,"beforeAlt":212,"caption":213,"hint":214,"maxWidth":215},"true","\u002Fassets\u002Febr-after.png","New version of the EBR page — a clean hero, clear CTA, and a stats section","1408 \u002F 1774","\u002Fassets\u002Febr-before.png","Previous version of the EBR page — a dense layout with a lot of text","The new version: one strong headline, breathing room around the content, a clear CTA, and a stats section that builds trust — instead of a wall of text.","Drag the slider (or use the arrow keys) to compare the previous and new versions of the page.","600px",[11,217,219],{"id":218},"visual-system","Visual system",[16,221,222],{},"A consistent visual language built on legible typography and a bold palette: energetic magenta as the action color, navy for headings, and blue as an accent.",[78,224],{"alt":225,"src":226},"EBR project typography — Red Hat Display in Extra Bold, Semi Bold and Regular weights","\u002Fassets\u002Febr-typography.png",[228,229],"case-swatches",{":items":230},"[{\"color\":\"#E6007A\",\"label\":\"Magenta\"},{\"color\":\"#2E2A5D\",\"label\":\"Navy\"},{\"color\":\"#2F80ED\",\"label\":\"Blue\"},{\"color\":\"#F4F1EC\",\"label\":\"Background\"}]",[11,232,234],{"id":233},"selected-screens","Selected screens",[78,236],{"alt":237,"src":238},"A set of redesigned EBR screens: benefits, Start\u002FStandard\u002FPremium pricing, form, and onboarding options","\u002Fassets\u002Febr-screens.png",[11,240,93],{"id":92},[16,242,243],{},"I was responsible for the UX\u002FUI redesign of the page — from simplifying the messaging, through building the hierarchy, to a consistent visual system and a straightened conversion path.",[155,245,246,249,252,255],{},[158,247,248],{},"UX analysis of the existing page and defining the problems.",[158,250,251],{},"Redesigning the layout and hierarchy (hero, benefits sections, pricing, form).",[158,253,254],{},"Visual system: typography, palette, and components.",[158,256,257],{},"Designing a clear path to the CTA (booking a demo).",[11,259,103],{"id":102},[16,261,262],{},"The new version achieves the intended design goals: instead of a wall of text, it guides the user clearly through the offer all the way to contact.",[27,264],{":items":265,"variant":110},"[{\"title\":\"Clear message\",\"desc\":\"one strong headline instead of a wall of text\"},{\"title\":\"Hierarchy\",\"desc\":\"key content and CTAs stopped getting lost\"},{\"title\":\"Consistency\",\"desc\":\"unified typography, color, and components\"}]",{"title":112,"searchDepth":113,"depth":113,"links":267},[268,269,270,271,272,273,274,275,276],{"id":13,"depth":113,"text":14},{"id":21,"depth":113,"text":22},{"id":179,"depth":113,"text":180},{"id":193,"depth":113,"text":194},{"id":203,"depth":113,"text":204},{"id":218,"depth":113,"text":219},{"id":233,"depth":113,"text":234},{"id":92,"depth":113,"text":93},{"id":102,"depth":113,"text":103},"\u002Fassets\u002Febr-cover-1.png","EBR is an app and sales page for an accounting-office management tool. The redesign focused on tidying up the page, building a clear visual system, and strengthening the conversion path — so the product would look modern and inspire trust.",{},"\u002Fen\u002Fcase-studies\u002Febr","Landing & website","UX, UI, visual system",{"title":141,"description":112},"en\u002Fcase-studies\u002Febr","website · ui\u002Fux","uZ4mC58riFANJ2me8nHOO1Jx99maGQKFuQsKxPBNezw",{"id":288,"title":289,"body":290,"client":399,"cover":400,"desc":401,"description":112,"extension":126,"figma":123,"link":123,"meta":402,"navigation":128,"order":403,"path":404,"product":405,"role":132,"scope":282,"screens":123,"seo":406,"stem":407,"tag":408,"tools":137,"video":123,"__hash__":409},"caseStudies_en\u002Fen\u002Fcase-studies\u002Febr-warsztaty.md","\"AI Workshops\" Landing Page — EBR",{"type":8,"value":291,"toc":390},[292,294,297,300,304,307,327,331,334,340,342,345,349,352,356,359,363,365,368,382,384,387],[11,293,14],{"id":13},[16,295,296],{},"EBR was organizing the first edition of a two-day \"AI manager in accounting\" workshop — a hands-on training in AI tools for the accounting industry. They needed a single-page sales site that would explain who the workshop was for, build trust in the instructors, and drive sign-ups — with a limited number of seats.",[16,298,299],{},"The challenge wasn't a lack of content, but organizing it into a logical, persuasive path — from the promise, through the program and proof of credibility, to the booking form.",[11,301,303],{"id":302},"discovery-what-i-had-to-solve","Discovery — what I had to solve",[16,305,306],{},"The starting point was the client's brief and the nature of the offer itself: an expensive, niche AI training sold to a group that was only just getting comfortable with AI. Before I started designing, I listed the real objections that could stop someone right before signing up — and those became the map for the whole landing page.",[155,308,309,315,321],{},[158,310,311,314],{},[161,312,313],{},"Target audience"," — accounting-office owners and managers, often skeptical of the \"AI hype\".",[158,316,317,320],{},[161,318,319],{},"Sign-up barriers"," — fear of commitment, lack of trust in the instructor, and a high price without value context.",[158,322,323,326],{},[161,324,325],{},"Page goal"," — one clear action: booking a seat for the first edition (only 15 spots).",[11,328,330],{"id":329},"ux-solutions","UX solutions",[16,332,333],{},"I treated each sign-up barrier as a separate design task. Below are the three key tensions and the decisions I used to defuse them.",[335,336],"case-pairs",{":items":337,"challengeLabel":338,"solutionLabel":339},"[{\"challenge\":\"The sign-up form needs to collect data without triggering a sense of commitment.\",\"solution\":\"A \\\"Reserve a seat\\\" CTA instead of \\\"Buy a ticket\\\" — booking language lowers the decision threshold and sounds like a first step, not a transaction.\"},{\"challenge\":\"Lack of trust in the instructor — \\\"is this someone from IT, or from accounting?\\\".\",\"solution\":\"The speakers section highlights dual authority: a tax advisor plus an AI trainer. Not an influencer, but a practitioner from the client's own industry.\"},{\"challenge\":\"A high price can scare people off without value context.\",\"solution\":\"The price sits next to concrete numbers: \\\"only 15 people\\\", \\\"2 days\\\", \\\"access to materials\\\". The price becomes part of a package, not an isolated cost.\"}]","Challenge","Solution",[11,341,219],{"id":218},[16,343,344],{},"A dark, \"technological\" theme with a fluid AI background builds a modern mood, while energetic magenta draws the eye straight to the action buttons. Pink and purple break up the black and highlight key sections without losing readability.",[78,346],{"alt":347,"src":348},"EBR landing page color palette over the hero: black, purple, light pink and magenta with HEX and RGB values","\u002Fassets\u002Fcolors_landing.png",[228,350],{":items":351},"[{\"color\":\"#060606\",\"label\":\"Background black\"},{\"color\":\"#58224E\",\"label\":\"Purple\"},{\"color\":\"#E01264\",\"label\":\"Magenta (action)\"},{\"color\":\"#FFCCE1\",\"label\":\"Pink\"},{\"color\":\"#222222\",\"label\":\"Graphite\"}]",[11,353,355],{"id":354},"page-preview","Page preview",[16,357,358],{},"The whole path on one screen: a hero with the promise, benefit cards, a purple band with facts (date, location, price, seat limit), program modules, a speakers section, and a closing booking form.",[78,360],{"alt":361,"src":362},"Full EBR landing page in a browser window — from hero, through benefits, workshop program and speakers, to the booking form","\u002Fassets\u002Fbrowser-desktop.png",[11,364,93],{"id":92},[16,366,367],{},"I was responsible for the entire UX\u002FUI of the landing page — from organizing the content into a conversion path, through decisions that defused sign-up barriers, to a consistent visual system and the final interface.",[155,369,370,373,376,379],{},[158,371,372],{},"Analyzing the brief and defining the barriers to signing up.",[158,374,375],{},"Landing page architecture — the section order that builds conviction step by step.",[158,377,378],{},"UX decisions: CTA language, exposing speaker authority, how the price was presented.",[158,380,381],{},"Visual system and UI: typography, dark theme, palette, and components.",[11,383,103],{"id":102},[16,385,386],{},"The result is a consistent, single-purpose landing page that guides the visitor along a clear path from the promise to booking a seat — with every key objection addressed directly in the page's layout.",[27,388],{":items":389,"variant":110},"[{\"title\":\"One goal\",\"desc\":\"the whole page drives toward booking a seat\"},{\"title\":\"Trust\",\"desc\":\"the speakers' dual authority disarms skepticism\"},{\"title\":\"Value > price\",\"desc\":\"the price is embedded in a concrete package of benefits\"}]",{"title":112,"searchDepth":113,"depth":113,"links":391},[392,393,394,395,396,397,398],{"id":13,"depth":113,"text":14},{"id":302,"depth":113,"text":303},{"id":329,"depth":113,"text":330},{"id":218,"depth":113,"text":219},{"id":354,"depth":113,"text":355},{"id":92,"depth":113,"text":93},{"id":102,"depth":113,"text":103},"EBR — Efektywne Biuro Rachunkowe","\u002Fassets\u002Fcover_landing.png","A conversion-focused landing page for Efektywne Biuro Rachunkowe with a single job: collecting sign-ups for a two-day AI workshop for accounting-office owners and managers. A project focused on one thing: guiding the visitor from first impression to booking a seat.",{},3,"\u002Fen\u002Fcase-studies\u002Febr-warsztaty","Landing page (conversion)",{"title":289,"description":112},"en\u002Fcase-studies\u002Febr-warsztaty","landing page · ui\u002Fux","1sIyj0Xyn1vkLrqz_4hexgZM5OtWygNqa7fhSs-O9LQ",1785355748948]