[{"data":1,"prerenderedAt":138},["ShallowReactive",2],{"case-study-en-eplano":3},{"id":4,"title":5,"body":6,"client":122,"cover":123,"desc":124,"description":111,"extension":125,"figma":122,"link":122,"meta":126,"navigation":127,"order":128,"path":129,"product":130,"role":131,"scope":132,"screens":122,"seo":133,"stem":134,"tag":135,"tools":136,"video":122,"__hash__":137},"caseStudies_en\u002Fen\u002Fcase-studies\u002Feplano.md","SaaS platform redesign — Eplano",{"type":7,"value":8,"toc":110},"minimark",[9,14,18,22,25,29,36,40,43,47,51,62,66,69,73,76,81,84,89,93,96,99,103,106],[10,11,13],"h2",{"id":12},"context","Context",[15,16,17],"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.",[10,19,21],{"id":20},"discovery-how-i-defined-the-problems","Discovery — how I defined the problems",[15,23,24],{},"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.",[26,27],"case-tiles",{":items":28},"[{\"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.\"}]",[30,31],"case-split",{":leftItems":32,":rightItems":33,"leftTitle":34,"rightTitle":35},"[\"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",[10,37,39],{"id":38},"process-the-choose-option-dialog","Process — the \"Choose option\" dialog",[15,41,42],{},"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.",[44,45],"case-steps",{":items":46},"[{\"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\"}]",[10,48,50],{"id":49},"before-and-after-the-planogram-sides-panel","Before and after — the \"Planogram sides\" panel",[52,53],"compare-slider",{"after":54,"afterAlt":55,"aspect":56,"before":57,"beforeAlt":58,"caption":59,"hint":60,"maxWidth":61},"\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",[10,63,65],{"id":64},"key-uiux-decisions-the-planogram-sides-panel","Key UI\u002FUX decisions — the \"Planogram sides\" panel",[44,67],{":items":68},"[{\"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.\"}]",[10,70,72],{"id":71},"icon-set","Icon set",[15,74,75],{},"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.",[77,78],"case-figure",{"alt":79,"src":80},"Eplano custom icon set: markers, merchandising, perforation, planograms, PDM model, measure 3D, collision, and more","\u002Fassets\u002Feplano-icons.png",[15,82,83],{},"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.",[77,85],{"alt":86,"src":87,"caption":88},"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.",[10,90,92],{"id":91},"my-role-and-contribution","My role and contribution",[15,94,95],{},"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.",[26,97],{":items":98},"[{\"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.\"}]",[10,100,102],{"id":101},"outcome","Outcome",[15,104,105],{},"The changes were rolled out to production after internal testing — the team reviewed the final versions, and developers made adjustments as needed.",[26,107],{":items":108,"variant":109},"[{\"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":111,"searchDepth":112,"depth":112,"links":113},"",2,[114,115,116,117,118,119,120,121],{"id":12,"depth":112,"text":13},{"id":20,"depth":112,"text":21},{"id":38,"depth":112,"text":39},{"id":49,"depth":112,"text":50},{"id":64,"depth":112,"text":65},{"id":71,"depth":112,"text":72},{"id":91,"depth":112,"text":92},{"id":101,"depth":112,"text":102},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":5,"description":111},"en\u002Fcase-studies\u002Feplano","saas · ui\u002Fux · icon system","Figma","qZKV85qFTI04KB0CijPitrKtv5q1e-FCkmtpMjU-5I8",1785355749139]