[{"data":1,"prerenderedAt":1379},["ShallowReactive",2],{"menu-project-count":3,"work-en":4},11,[5,278,352,654,733,806,1059,1134,1186,1258,1307],{"id":6,"title":7,"caseStudy":8,"category":248,"client":249,"cover":250,"coverTall":254,"demo":255,"disciplines":256,"extension":261,"filters":262,"intro":266,"live":254,"meta":267,"order":268,"published":121,"role":269,"scope":270,"shortPage":254,"slug":271,"stem":272,"summary":273,"timeline":274,"type":275,"year":276,"__hash__":277},"work\u002Fwork\u002Faporia-pro.yml","Aporia Pro",{"phase":9,"lead":10,"whatIDid":14,"problem":19,"problemDetail":20,"constraints":21,"decisions":27,"gallery":103,"scale":153,"system":170,"result":239},"UX · UI · Design system · Build",[11,12,13],"Aporia Pro is an internal work tool for a small team. Tasks, client projects and the plan for the week live in one place, so nobody has to keep them in sync by hand.","I did all of it: the concept, the UX and UI, and the code. It was also my engineering thesis, and I built many things in it in order to learn. The clearest example is colour, described below.","The project is private and nobody outside the team can log in. That is why the people, clients and numbers on the screens are invented, and why many of its features are not shown here at all.",[15,16,17,18],"Concept and UX: tasks, client projects, work sessions","UI: every screen, on desktop and on a phone","Design system: variables, components, colour generator","Build: Nuxt, Tailwind and Supabase","One task shows up in a table, on a board and in the week's calendar. It has to stay one task, and be changeable wherever you meet it.","A task carries a status, a priority, people, a deadline, tags, steps, a checklist and a discussion. It can belong to a client project or stand alone, be shared or private, and be pinned to a block of time. Each view shows a different cut of the same record, in a different amount of space.",[22,23,24,25,26],"Three views of the same tasks: table, board, calendar","Tasks inside client projects and outside them","Team work and private work side by side","The same screens on a phone","One brand colour per workspace, without losing what other colours mean",[28,41,57,72,87],{"title":29,"context":30,"decision":31,"tradeoff":32,"figures":33},"One colour repaints the whole tool","Every workspace has one brand colour. I wanted to understand how colour scales work, so I did not take a ready palette. This part was built on purpose, as an experiment.","I wrote the generator by hand. One hex goes in and ten shades come out: the hue stays, lightness follows a fixed curve from 97% down to 15%, and saturation is turned down at both ends. Five characters, from vivid to almost grey, tune the same colour. The sidebar tint, the active item, buttons, tabs, counters and the glow in the background all read those ten values, so nothing is redrawn.","The brand colour cannot mean anything. Status, priority, late dates, errors and focus keep their own fixed colours, so a burgundy workspace cannot make a late task look fine.",{"ratio":34,"items":35},"4 \u002F 3",[36],{"src":37,"alt":38,"caption":39,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd1-workspaces.webp","The same task board in four workspaces, indigo, emerald, burgundy and orange","The same screen in four workspaces. Only the brand colour was changed.","contain",{"title":42,"context":43,"decision":44,"tradeoff":45,"figures":46},"A task starts as one line and is changed where it stands","A task has ten or so fields, but it begins as a few words.","Adding takes one line: in the footer of a table group, at the top of a board column, or in the full form. The field stays open, so a list can be typed in a row. Everything else is set where it is shown. The title changes on a double click, status, people, date and priority through small pickers in the row or on the card, and fields in the task view save themselves.","There is no Save button, so there is nothing to cancel either. Project settings are the one place that keeps a Save bar.",{"ratio":47,"items":48},"6 \u002F 5",[49,53],{"src":50,"alt":51,"caption":52,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd2-add.webp","A one-line field for a new task above a task card","A new task is one line. Enter saves it, Escape cancels.",{"src":54,"alt":55,"caption":56,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd2-edit.webp","A task card with its menu open, showing three statuses and three actions","Status is changed from the card's own menu.",{"title":58,"context":59,"decision":60,"tradeoff":61,"figures":62},"Closing asks once and can be undone","A task is closed with one click on the circle next to its title. One click is also easy to make by mistake.","The click opens a short question right where it happened, in the green of the action. After closing, a bar with Undo stays for eight seconds. Later the task can still be reopened with one click, this time without a question.","One more click on every close. Deleting, which cannot be undone, gets a confirmation of its own.",{"ratio":47,"items":63},[64,68],{"src":65,"alt":66,"caption":67,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd3-close.webp","A task card with a small green question asking whether to close the task","The question appears at the circle that was clicked.",{"src":69,"alt":70,"caption":71,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd3-undo.webp","An undo bar above a closed, greyed task card","Undo stays for eight seconds.",{"title":73,"context":74,"decision":75,"tradeoff":76,"figures":77},"Only one task can be urgent","Priority has four levels. The top one, urgent, is meant for a single task at a time.","Urgent is fuchsia with a crown, never red: red stays with high priority and late dates. Crowning a task asks first, taking the crown off asks too, and a second urgent task is refused until the first one is closed.","When two things feel urgent, someone has to pick one. The tool does not let that choice wait.",{"ratio":47,"items":78},[79,83],{"src":80,"alt":81,"caption":82,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd4-urgent.webp","An urgent task card with a crown and a fuchsia question asking whether to crown the task","Crowning a task asks first.",{"src":84,"alt":85,"caption":86,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd4-fixed.webp","Status chips, priority marks, a late date, a toggle and a focused field","Colours that carry meaning stay the same in every workspace.",{"title":88,"context":89,"decision":90,"tradeoff":91,"figures":92},"Sessions: when the work happens, not only when it is due","A deadline says when something is due. It does not say when anyone will sit down to do it.","A session is a block of time in the calendar, usually repeating every week. Dragging over free time draws one, snapped to 15 minutes. Tasks and single steps are pinned into it with a time estimate, and a meter shows how much of the block is used. In the calendar the block lists what is pinned and marks the time still free with a dashed strip.","Overlapping sessions are allowed. The form names the conflict and the button changes its label, but nothing is blocked.",{"ratio":93,"items":94},"16 \u002F 21",[95,99],{"src":96,"alt":97,"caption":98,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd5-plan.webp","A calendar day with a block being drawn, and a session block listing two pinned tasks and 45 free minutes","Dragging draws a session. Pinned work sits inside the block, the dashed strip is the time still free.",{"src":100,"alt":101,"caption":102,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fd5-session.webp","A session window with pinned steps, a usage meter, length, colour and the days it repeats on","A session: what is pinned, how much of it is used, when it repeats.",[104,112,120,127,133,143],{"type":105,"ratio":106,"items":107},"figures","11 \u002F 8",[108],{"src":109,"alt":110,"caption":111,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fkanban.webp","The task board with three columns, to do, in progress and done","Tasks as a board. A card shows only what the task has.",{"type":113,"title":114,"body":115,"ratio":116,"media":117},"detail","Table","The same tasks grouped by status. Steps sit under their task, and every cell is edited in place: a double click on the title, a small picker for the rest.","10 \u002F 9",{"src":118,"alt":119,"fit":40},"\u002Fwork\u002Faporia-pro\u002Ftable.webp","The task table with groups for in progress and to do, and steps under the first task",{"type":113,"reverse":121,"title":122,"body":123,"ratio":116,"media":124},true,"Task","Description, steps, a checklist and the discussion on the left, the fields on the right. It opens over the list, so closing it puts you back where you were.",{"src":125,"alt":126,"fit":40},"\u002Fwork\u002Faporia-pro\u002Ftask.webp","A task opened over the list, with a description, steps, a checklist, comments and a column of fields",{"type":105,"ratio":106,"items":128},[129],{"src":130,"alt":131,"caption":132,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fcalendar.webp","A week in the calendar with repeating sessions, tasks pinned into them and meetings","The week. Sessions repeat, and each one shows the tasks pinned into it and the time still free.",{"type":105,"ratio":34,"items":134},[135,139],{"src":136,"alt":137,"caption":138,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fprojects.webp","The list of client projects grouped into active, paused and finished","Client projects, grouped by status.",{"src":140,"alt":141,"caption":142,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fmobile.webp","Two phone screens, the task board with one column and the menu opened as a sheet","On a phone: one column at a time, the menu as a sheet.",{"type":105,"ratio":106,"items":144},[145,149],{"src":146,"alt":147,"caption":148,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fproject-discussion.webp","The discussion page of a client project with four comments","Inside a project: the discussion.",{"src":150,"alt":151,"caption":152,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fproject-files.webp","The files page of a client project with six files and a storage meter","Inside a project: files.",{"label":154,"stats":155,"media":165,"ratio":169},"The whole file",[156,159,162],{"value":157,"label":158},"21","screens",{"value":160,"label":161},"80","components",{"value":163,"label":164},"139","icons",{"src":166,"alt":167,"caption":168},"\u002Fwork\u002Faporia-pro\u002Fscale.webp","Twelve desktop screens from the Figma file in four even columns: tasks, sessions, a client project and the empty, loading and error states","Twelve of the 21 screens in the Figma file, all with invented data. The private parts of the tool are not documented.","3758 \u002F 1879",{"typeface":171,"weights":172,"statement":173,"collections":174,"modes":196,"facts":221,"components":226,"figures":232},"Geist","Regular \u002F Medium \u002F SemiBold \u002F Bold","274 variables in six collections. Thirty of them are the brand colour: change one hex and the whole tool follows.",[175,179,183,187,190,193],{"name":176,"count":177,"modes":178},"Primitives",149,"One value",{"name":180,"count":181,"modes":182},"Brand",30,"Five characters, three example colours",{"name":184,"count":185,"modes":186},"Color",57,"Light \u002F Dark",{"name":188,"count":189,"modes":178},"Spacing",14,{"name":191,"count":192,"modes":178},"Radius",5,{"name":194,"count":195,"modes":178},"Typography",19,{"from":197,"to":198,"rows":199},"Indigo","Emerald",[200,204,208,212,216,219],{"label":201,"from":202,"to":203},"Shade 50","#F5F5FA","#F3FBF9",{"label":205,"from":206,"to":207},"Shade 500","#4136C9","#08F7AD",{"label":209,"from":210,"to":211},"Shade 700","#2D2682","#099F71",{"label":213,"from":214,"to":215},"Shade 900","#191736","#0D3F30",{"label":217,"from":218,"to":218},"Status and priority","Fixed",{"label":220,"from":218,"to":218},"Focus ring",[222,223,224,225],"80 components","139 icons","45 text styles","18 effect styles",[227,228,229,230,231],"Buttons, badges and form fields","Tabs, menus and overlays","Search and notifications","App shell","Task and project patterns",{"ratio":233,"items":234},"25 \u002F 13",[235],{"src":236,"alt":237,"caption":238,"fit":40},"\u002Fwork\u002Faporia-pro\u002Fsys-colour.webp","A colour field, the ten shades made from it with their lightness and saturation, and the same scale in five characters next to sample controls","One colour in, ten shades out, in five characters. Lightness and saturation of every step come from a curve.",{"statement":240,"delivered":241},"One tool, designed and built by one person: tasks in three views, client projects, a planned week, and an interface that takes its colour from a single field.",[242,243,244,245,246,247],"Tasks as a table, a board and a calendar, with steps, checklists and discussion","Client projects with their own discussion, tasks, files and settings","Work sessions: the week planned in blocks of time","A colour generator: one hex, ten shades, five characters","Design system in Figma: 274 variables, 45 text styles, 80 components","Documentation in Figma: 21 screens and 3 flows","Internal tool","Internal product",{"src":251,"alt":252,"tone":253},"\u002Fwork\u002Faporia-pro\u002Fcover.webp","The Aporia Pro task board in a browser window and on a phone, on an indigo background","deep",null,false,[257,258,259,260],"Product design","UI design","Design system","Front-end","yml",[263,264,265],"product","ui","development","A work tool for a small team: tasks, client projects and the plan for the week in one place. I designed it and built it myself, and it was also my engineering thesis. The project is private, so the data on the screens is invented.",{},2,"UX\u002FUI design, concept and build","Tasks in three views \u002F Client projects \u002F Work sessions \u002F Design system \u002F Workspace colour","aporia-pro","work\u002Faporia-pro","Internal tool: tasks, client projects and the week's plan, in an interface that takes its colour from one field.","March to August 2026","case-study","2026","wzU2c2532HV8JqxsIc62hAM83edB7RkNzJ6mXCeYFkw",{"id":279,"title":280,"caseStudy":254,"category":281,"client":280,"cover":282,"coverTall":254,"demo":255,"disciplines":286,"extension":261,"filters":287,"intro":289,"live":290,"meta":291,"order":292,"published":121,"role":258,"scope":293,"shortPage":294,"slug":347,"stem":348,"summary":349,"timeline":254,"type":350,"year":276,"__hash__":351},"work\u002Fwork\u002Fbeczka.yml","Beczka","Website",{"src":283,"alt":284,"caption":285,"tone":253},"\u002Fwork\u002Fbeczka\u002Fcover.webp","The Beczka home page in a browser window, with a concert poster of musicians in coloured stage light and a button for tickets, and the menu on a phone, on a dark grey background","The home page, and the menu on a phone.",[281,258],[288,264],"web","Beczka is a restaurant and pub in Elbląg that doubles as a concert venue. I designed its website: a home page that leads with the next shows, concert pages that sell tickets on the spot, a menu you can browse and search, and a page for ordering food to take away.","https:\u002F\u002Fbeczkaelblag.pl",{},6,"Concerts and tickets \u002F Menu \u002F Online orders",{"notes":295,"pair":296,"details":305,"full":343},"Beczka is two places in one: a kitchen people come back to and a stage they come to for one night. The site gives each its own pace. A concert gets a big photograph, a date and one button, because it sells for a few weeks and then it is gone. The restaurant gets a menu set like a printed card, because that is what people open the site for on every other day.",{"a":297,"b":300,"caption":304},{"src":298,"alt":299,"fit":40},"\u002Fwork\u002Fbeczka\u002Fconcerts.webp","The list of upcoming concerts in a browser window, three cards with a poster, a date, a short description and a link to tickets",{"src":301,"alt":302,"content":303,"fit":40},"\u002Fwork\u002Fbeczka\u002Fphone.webp","The navigation on a phone, with six links, the phone number for reservations, a link to sign in and three social links","phone","Left: the upcoming concerts. Right: the navigation on a phone.",[306,324,333],{"title":307,"body":308,"figures":309},"Three screens from poster to ticket","Buying a ticket takes three screens. The home page opens on the next concerts, each with a button for tickets. On a concert's page the price and that button stay at the bottom of the phone while you read about the band. The order is a single page: the ticket, how many, the total and one button to pay.",{"ratio":310,"items":311},"2 \u002F 3",[312,316,320],{"src":313,"alt":314,"caption":315,"content":303,"fit":40},"\u002Fwork\u002Fbeczka\u002Fpath-1.webp","The home page on a phone, a concert poster with the name of the band and a button that says buy tickets","The home page opens on the next concert.",{"src":317,"alt":318,"caption":319,"content":303,"fit":40},"\u002Fwork\u002Fbeczka\u002Fpath-2.webp","A concert page on a phone, with the date, the name of the band and a description, and a bar at the bottom with the price and a button to buy a ticket","The price and the button stay on screen.",{"src":321,"alt":322,"caption":323,"content":303,"fit":40},"\u002Fwork\u002Fbeczka\u002Fpath-3.webp","The order on a phone, with the concert, the number of tickets, the total, two consents and a button to pay","The order: how many, the total, pay.",{"title":325,"body":326,"figures":327},"A menu that reads like a card","The kitchen and the bar list over two hundred items, so the menu is a page of its own. It is split into four parts with their counts, each with a list of sections and a search field. Every line gives the dish, its weight and its price, joined by a thin rule, the way a printed card does.",{"items":328},[329],{"src":330,"alt":331,"caption":332,"fit":40},"\u002Fwork\u002Fbeczka\u002Fmenu.webp","The menu in a browser window, with four parts and their counts, a list of sections on the left and dishes with prices in two columns, next to the list of the four parts on a phone","The menu on a desktop, and its four parts on a phone.",{"label":334,"title":335,"body":336,"figures":337},"Components","One filled button, one job","Every page is built from the same few parts. The filled button is kept for one job, the step that moves you forward: a ticket, the menu, an order, the payment. A text link in the same colour does the lighter work. Cards, list rows and the concert rules with their drawn icons repeat from page to page.",{"items":338},[339],{"src":340,"alt":341,"caption":342,"fit":40},"\u002Fwork\u002Fbeczka\u002Fcomponents.webp","A board of parts from the site, with a concert card, the order summary with a ticket counter and a pay button, navigation rows, four buttons, two menu rows and three concert rules with icons","A concert card, the order summary, buttons, menu rows and concert rules.",{"src":344,"alt":345,"caption":346,"fit":40},"\u002Fwork\u002Fbeczka\u002Forder.webp","The page for ordering online in a browser window, with a photograph of a dish and a card with a button to order and a phone number, next to the same page on a phone","Ordering to take away: one photograph, one button, one phone number.","beczka","work\u002Fbeczka","A restaurant, pub and concert venue in Elbląg: a website that sells tickets and sets a menu of over two hundred items.","short","HcKNjDkH3Pjx67up9Daoi86OBFF_pMHBkvFhztNzRN4",{"id":353,"title":354,"caseStudy":355,"category":635,"client":636,"cover":637,"coverTall":254,"demo":255,"disciplines":640,"extension":261,"filters":642,"intro":643,"live":644,"meta":645,"order":646,"published":121,"role":647,"scope":648,"shortPage":254,"slug":649,"stem":650,"summary":651,"timeline":652,"type":275,"year":276,"__hash__":653},"work\u002Fwork\u002Fdrukksiazek24.yml","DrukKsiążek24",{"phase":356,"lead":357,"whatIDid":361,"workedWith":366,"problem":368,"problemDetail":369,"constraints":370,"approach":376,"approachFigures":389,"decisions":408,"gallery":490,"scale":542,"system":556,"result":626},"UX · UI · Design system",[358,359,360],"Mazowieckie Centrum Poligrafii is a digital print house in Marki, near Warsaw. DrukKsiążek24 is where it sells book printing online: from 10 copies, in six bindings, with the price on screen before anyone talks to a salesperson.","The old store ran on a ready-made template. The client wanted one that could stand next to the largest print shops in Poland and carry the business into other countries.","So the job was not a new look for a shop. It was the whole path of an order: choosing a book, paying, sending files, production and delivery, and the panel where the print house handles all of it. In numbers: 31 store screens, 48 panel screens, 12 e-mails and three languages.",[362,363,364,365],"UX: sitemap, sales process and order statuses","UI: store, configurator, checkout and customer account","Admin panel: orders, quotes, price list and content","Design system: variables, styles and components in two modes",[367],"Developers who built the store. I did not code this one.","A book has dozens of print parameters. The customer meets them once, the print house works with them all day.","Paper, print, binding and lamination limit each other, and each of them moves the price. Files arrive after the order and can be sent back. The deadline depends on the day the files are accepted. The old calculator put all of this into one long form and left the customer to work it out.",[371,372,373,374,375],"Six bindings, each with its own page range and options","Price depends on every parameter, the print run and the shipping date","Files come after payment and may need a correction","Three markets with their own language, currency and tax rules","The same components have to serve the customer and the staff",[377,380,383,386],{"title":378,"text":379},"Structure","Sitemap of the store, the customer account, the admin panel and the content pages.",{"title":381,"text":382},"Flow","The sales process end to end, and every status an order can have.",{"title":384,"text":385},"System","Colours, type, spacing and components as Figma variables and styles.",{"title":387,"text":388},"Screens","Store, configurator, checkout, account and admin panel.",[390,397],{"ratio":391,"items":392},"253 \u002F 163",[393],{"src":394,"alt":395,"caption":396},"\u002Fwork\u002Fdrukksiazek24\u002Fsales.webp","Diagram of the sales process in four lanes, from finding the shop to receiving the book","Sales process: what the customer does, which screen they are on, what the system and the print house do.",{"ratio":398,"items":399},"2550 \u002F 1180",[400,404],{"src":401,"alt":402,"caption":403},"\u002Fwork\u002Fdrukksiazek24\u002Fsitemap.webp","Sitemap of the store with six groups of pages","Sitemap and routes.",{"src":405,"alt":406,"caption":407},"\u002Fwork\u002Fdrukksiazek24\u002Flifecycle.webp","Diagram of order statuses and the timeline the customer sees","Order statuses, from payment to delivery.",[409,425,440,455,470],{"title":410,"context":411,"decision":412,"tradeoff":413,"figures":414},"The price never leaves the screen","In print the price per copy falls sharply with the print run, and almost every choice moves it. The old calculator showed the total in a third column, at the end of a long form.","Print run and shipping date became step one, in a panel that stays next to the form. It lists seven print runs with the net, gross and per-copy price, and three shipping dates as real dates. A bar at the bottom keeps the total and the cart button in view. When a book cannot be priced, the reason stands where the price would be, with a way to ask for a quote.","On a phone the bar has room for the totals and one button. The cost breakdown moves into a details sheet.",{"ratio":415,"items":416},"5 \u002F 4",[417,421],{"src":418,"alt":419,"caption":420,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd1-before.webp","The old calculator with three columns, parameters, print run and order summary","Before: parameters, print run and summary in three columns.",{"src":422,"alt":423,"caption":424,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd1-after.webp","The new configurator with the form on the left, the price table on the right and a price bar at the bottom","After: the form on the left, prices on the right, the total in a bar.",{"title":426,"context":427,"decision":428,"tradeoff":429,"figures":430},"Print terms explained where the choice is made","A first-time author does not know what 4+0, PUR or a bleed is. The old form offered them as bare dropdowns.","Options you can see are shown as photos. Fields and options have a hint: a short text, sometimes a drawing, and a link to the right chapter of a guide. An option that does not fit the current book stays visible but switched off, with the reason under it. A wrong page count comes with a one-click fix. What follows from other choices, like spine width, is calculated and not asked.","105 hints per language have to be written and kept current, so the print house edits them in the panel.",{"ratio":415,"items":431},[432,436],{"src":433,"alt":434,"caption":435,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd2-before.webp","A column of dropdowns from the old form, labelled with print terms","Before: dropdowns with print terms.",{"src":437,"alt":438,"caption":439,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd2-after.webp","Step two of the new configurator, with print options shown as photo tiles","After: step 2 of 4, print options as photos with a plain explanation.",{"title":441,"context":442,"decision":443,"tradeoff":444,"figures":445},"Order first, files later, and say when the clock starts","A print order is not finished at payment. The files have to arrive and pass a check, and the deadline runs from that day.","Checkout works without an account. After payment the customer uploads files into named slots: interior, cover, other. Each slot shows its state: missing, uploading, being checked, accepted, rejected. A rejected file comes back with the reason written by the person who checked it. One sentence, that the deadline counts from file acceptance, appears at every step, from the configurator to tracking. Any order can be tracked with its number and e-mail.","Paying before the files are checked asks for trust. So until the files are accepted the customer can cancel and get the money back, and the checkout says so.",{"ratio":415,"items":446},[447,451],{"src":448,"alt":449,"caption":450,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd3-files.webp","Three states of a file slot, empty, uploading and being checked","File slot: missing, uploading, being checked.",{"src":452,"alt":453,"caption":454,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd3-timeline.webp","Order timeline with six steps, from order placed to delivered","Order timeline as the customer sees it.",{"title":456,"context":457,"decision":458,"tradeoff":459,"figures":460},"One system, two skins: shop and panel","The customer sees one field at a time and comes once. The staff look at rows of orders, a search box and three buttons, all day.","The panel uses the same components as the shop in a second mode: smaller controls, square corners, outlines instead of shadows, neutral greys, no hover animation. In tables a status is a dot and a word, because a column of filled badges turned into a wall of colour. Orders move by themselves when a payment or a file arrives. The staff have two manual steps, and the manual override and the cancel button are quiet on purpose.","Every component has to hold up in both modes, so each one is checked in both before it reaches a screen.",{"ratio":415,"items":461},[462,466],{"src":463,"alt":464,"caption":465,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd4-badges.webp","Order status badges in three forms, filled with an icon, quiet, and a dot with a word","One status, three forms: with an icon, quiet, and a dot with a word for tables.",{"src":467,"alt":468,"caption":469,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fpanel-orders.webp","Orders list in the admin panel with a dot and a word for every status","Orders in the panel: square corners, outlines, a dot and a word for the status.",{"title":471,"context":472,"decision":473,"tradeoff":474,"figures":475},"Three markets, one store","The client wanted to sell in Germany and France. Each market has its own language, currency, tax rates and rules for showing prices.","One store, recognised by its address. Polish text is the default and each shop replaces only what differs. In the German and French shops the gross price leads, the tax number field is named as it is in the buyer's country, and page addresses are translated. The price list is converted from the Polish one by an exchange rate, and the panel shows which shop is up to date.","A missing translation shows as a Polish sentence. That is deliberate: a gap you can see gets fixed, a silent fallback does not.",{"ratio":476,"items":477},"5 \u002F 6",[478,482,486],{"src":479,"alt":480,"caption":481,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd5-pl.webp","Print run table in the Polish shop with net prices in złoty","Poland: net price leads, in złoty.",{"src":483,"alt":484,"caption":485,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd5-de.webp","The same table in the German shop with gross prices in euro","Germany: gross price leads, in euro.",{"src":487,"alt":488,"caption":489,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fd5-fr.webp","The same table in the French shop","France: the same panel in French.",[491,505,511,517,527],{"type":105,"ratio":34,"items":492},[493,497,501],{"src":494,"alt":495,"caption":496},"\u002Fwork\u002Fdrukksiazek24\u002Fhome.webp","Home page of the store with a hero slider and the start of the bindings section","Home page.",{"src":498,"alt":499,"caption":500},"\u002Fwork\u002Fdrukksiazek24\u002Fbindings.webp","Six binding cards, each with a photo, a page range and a starting price","Six bindings, each with a page range and a starting price.",{"src":502,"alt":503,"caption":504},"\u002Fwork\u002Fdrukksiazek24\u002Fpresets.webp","A carousel of book presets, with the novel card in front","A second way in: start from the kind of book.",{"type":113,"title":506,"body":507,"media":508},"Print run table","Seven print runs with the net and gross price and the price per copy, so the customer sees how the unit price drops. Three shipping dates sit above it, with the fastest, the recommended and the cheapest marked.",{"src":509,"alt":510,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fvolume.webp","The shipping and print run panel with three shipping dates and a table of seven print runs",{"type":113,"reverse":121,"title":512,"body":513,"media":514},"Hint","A question mark next to a field opens a short explanation, a drawing and a link to the guide. On a phone it opens as a sheet from the bottom, because a bubble with a link does not hold under a finger.",{"src":515,"alt":516,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fhint.webp","A hint bubble explaining the format of a finished book with a drawing and a list of sizes",{"type":105,"ratio":34,"items":518},[519,523],{"src":520,"alt":521,"caption":522},"\u002Fwork\u002Fdrukksiazek24\u002Fphone.webp","A phone on a wooden table showing the store's home page","The store on a phone.",{"src":524,"alt":525,"caption":526,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fmobile.webp","Two phone screens of the configurator, the product page and step one with the price bar","Configurator at 390 px: the price bar stays at the bottom.",{"type":105,"ratio":528,"items":529},"13 \u002F 15",[530,534,538],{"src":531,"alt":532,"caption":533,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fpanel-order.webp","An order in the admin panel with files to check, the production deadline, the status and notes","An order: files to accept or send back, the deadline and the next step.",{"src":535,"alt":536,"caption":537,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fpanel-quote.webp","A new quote in the admin panel with the configuration, prices by print run, production cost and margin","A quote: production cost, margin and the price for the client.",{"src":539,"alt":540,"caption":541,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fpanel-pricelist.webp","The price list in the admin panel with rounding, limits, what the customer can choose and what cannot be combined","The price list: what the customer can choose and what cannot be combined.",{"label":154,"stats":543,"media":551,"ratio":555},[544,546,548],{"value":545,"label":158},"79",{"value":547,"label":161},"159",{"value":549,"label":550},"12","e-mails",{"src":552,"alt":553,"caption":554},"\u002Fwork\u002Fdrukksiazek24\u002Fscale.webp","Sixteen desktop screens from the Figma file in five even columns, store screens on the left and admin panel screens on the right","Sixteen of the screens in Figma: the store on the left, the print house panel on the right.","3600 \u002F 2276",{"typeface":557,"weights":558,"statement":559,"collections":560,"modes":579,"facts":604,"components":609,"figures":615},"DM Sans","Regular \u002F Medium \u002F SemiBold","243 variables in seven collections. Changing 21 of them turns the shop into the panel: the same components, a different tool.",[561,563,566,569,571,574,576],{"name":176,"count":562,"modes":178},58,{"name":184,"count":564,"modes":565},66,"Shop \u002F Panel",{"name":188,"count":567,"modes":568},37,"Desktop \u002F Mobile",{"name":191,"count":570,"modes":565},9,{"name":572,"count":573,"modes":565},"Size",24,{"name":194,"count":575,"modes":568},32,{"name":577,"count":578,"modes":178},"Motion",17,{"from":580,"to":581,"rows":582},"Shop","Panel",[583,587,590,593,597,600],{"label":584,"from":585,"to":586},"Button radius","Pill","2 px",{"label":588,"from":589,"to":586},"Card radius","20 px",{"label":591,"from":592,"to":586},"Field radius","12 px",{"label":594,"from":595,"to":596},"Field height","44 px","40 px",{"label":598,"from":599,"to":596},"Button height","42 px",{"label":601,"from":602,"to":603},"Greys","Slate, a little blue","Neutral",[605,606,607,608],"159 components","84 icons","30 text styles","16 effect styles",[610,611,612,613,614],"Buttons and badges","Forms","Navigation","Overlays and content","Shop: cart, orders, account",{"ratio":616,"items":617},"3 \u002F 2",[618,622],{"src":619,"alt":620,"caption":621,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fbuttons.webp","Component board with buttons, icon buttons and badges in all variants","Buttons and badges: variants, sizes and states.",{"src":623,"alt":624,"caption":625,"fit":40},"\u002Fwork\u002Fdrukksiazek24\u002Fforms.webp","Component board with form controls and their states","Form controls and their states.",{"statement":627,"delivered":628},"One system that takes a book from a price to a parcel: store, configurator, checkout, file check, tracking and the panel behind it, in three languages.",[629,630,631,632,633,634],"Store and configurator for six bindings and six book presets","Checkout, file upload, tracking without an account, customer account","Panel: orders, files, payments, quotes and a versioned price list","Content tools: blog editor, media library, SEO, city pages, editable hints","Design system in Figma: 243 variables, 30 text styles, two modes","Three live shops: Polish, German and French","E-commerce","Mazowieckie Centrum Poligrafii",{"src":638,"alt":639,"tone":253},"\u002Fwork\u002Fdrukksiazek24\u002Fcover.webp","The DrukKsiążek24 book configurator in a browser window and on a phone, on a dark background",[635,641,258],"UX design",[288,263,264],"An online print shop for books, designed as one system: a configurator a first-time author can get through, an order flow that explains itself, and a panel the print house works in all day. I designed it in Figma, from the store to the admin panel.","https:\u002F\u002Fdrukksiazek24.pl",{},1,"UX\u002FUI design","Store and configurator \u002F Checkout, files and tracking \u002F Admin panel \u002F Design system \u002F Polish, German, French","drukksiazek24","work\u002Fdrukksiazek24","Print house: an online store with a book configurator, and the panel the staff work in.","2 to 3 months, 2026","fkGFymEBU0vmwSmiZCZ69wN03d9M35i0eRWeoWHGjVE",{"id":655,"title":656,"caseStudy":254,"category":281,"client":656,"cover":657,"coverTall":254,"demo":255,"disciplines":661,"extension":261,"filters":662,"intro":663,"live":664,"meta":665,"order":666,"published":121,"role":667,"scope":668,"shortPage":669,"slug":729,"stem":730,"summary":731,"timeline":254,"type":350,"year":276,"__hash__":732},"work\u002Fwork\u002Ffinansowanie-firm.yml","Finansowanie Firm",{"src":658,"alt":659,"caption":660,"tone":253},"\u002Fwork\u002Ffinansowanie-firm\u002Fcover.webp","The Finansowanie Firm home page in a browser window and the client stories on a phone, on a blue background","The home page, and the client stories on a phone.",[281,258],[288,264],"Finansowanie Firm helps companies get a loan, a lease or money to grow, also after a bank has already said no. I designed its website: a landing page that leads from the problem to a first call, a page that explains the process, and the stories of clients told with their amounts.","https:\u002F\u002Ffinansowaniefirm.pl",{},4,"Digital design","Landing page \u002F Lead form \u002F Client stories",{"notes":670,"pair":671,"details":679,"full":725},"An owner who needs money for the company is not looking for a brochure. The site answers what gets asked first: can you help in my situation, how long will it take, and who has been through it before me. So the home page opens with the cases the advisers take on, the process page opens with a single number, fifteen minutes, and every client story starts from its amount.",{"a":672,"b":675,"caption":678},{"src":673,"alt":674,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fprocess.webp","The process page in a browser window, opening with a large number 15 and a line saying that the first call takes fifteen minutes",{"src":676,"alt":677,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fphone.webp","The menu on a phone, with six links, the hours when the adviser answers and a button to book a call","Left: the process page opens with one number. Right: the menu on a phone.",[680,698,716],{"title":681,"body":682,"figures":683},"Three questions instead of a form","The site promises a conversation, not paperwork, and the form keeps that promise. It asks three things, one at a time: what the money is for, how much, and where to call back. A bar shows how far along you are, and the contact details come last, once the hard part is already answered.",{"ratio":684,"items":685},"4 \u002F 5",[686,690,694],{"src":687,"alt":688,"caption":689,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fform-1.webp","The first step of the form, asking what the financing is for, with three answers and the second one chosen","First: what the money is for.",{"src":691,"alt":692,"caption":693,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fform-2.webp","The second step of the form, asking how much is needed, with four ranges and the second one chosen","Then: how much.",{"src":695,"alt":696,"caption":697,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fform-3.webp","The last step of the form, asking for a name, a phone number, the company's tax number and an e-mail","Last: where to call back.",{"label":699,"title":700,"body":701,"figures":702},"Process","Three openings before one number","The process page went through three openings before it got its number. One led with the fifteen minutes, one drew the path from a call to a transfer, and one set remote work against a visit to a bank branch. The counter went live, and the path became the next section of the page.",{"ratio":34,"items":703},[704,708,712],{"src":705,"alt":706,"caption":707,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fopening-a.webp","The first version of the opening, a large number 15 with the word minutes under it and two buttons","A: the counter. This one went live.",{"src":709,"alt":710,"caption":711,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fopening-b.webp","The second version of the opening, a headline above a line of four numbered steps with the time each one takes","B: the path from a call to a transfer.",{"src":713,"alt":714,"caption":715,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fopening-c.webp","The third version of the opening, a headline above two lists side by side, the usual way and the remote way","C: remote against a bank branch.",{"label":334,"title":717,"body":718,"figures":719},"One button, named by what it does","Every page is built from one small set of parts. There is one button, in one size, and its versions are named after the weight of the action, not after a colour: the main action is blue on a light page and white on navy. Fields, labels and the story card are drawn once and reused.",{"items":720},[721],{"src":722,"alt":723,"caption":724,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fcomponents.webp","A board of parts from the site, with buttons on white and on navy, the steps and fields of the form, labels, numbered steps and a client story card","Buttons, fields, labels and a story card from the site.",{"src":726,"alt":727,"caption":728,"fit":40},"\u002Fwork\u002Ffinansowanie-firm\u002Fsteps.webp","The four steps of the process in a browser window, each with the time it takes, next to the process page on a phone with the number 15","The process, step by step, with the time each one takes.","finansowanie-firm","work\u002Ffinansowanie-firm","Financial advisers for companies: a landing page built around a fifteen-minute call and a form of three questions.","L0naKdcris2AaemJwOhXlnTC43b18KMY8thQzcYqLYM",{"id":734,"title":735,"caseStudy":254,"category":281,"client":735,"cover":736,"coverTall":254,"demo":255,"disciplines":740,"extension":261,"filters":741,"intro":742,"live":743,"meta":744,"order":745,"published":121,"role":746,"scope":747,"shortPage":748,"slug":802,"stem":803,"summary":804,"timeline":254,"type":350,"year":276,"__hash__":805},"work\u002Fwork\u002Fjantarhome.yml","JantarHome",{"src":737,"alt":738,"caption":739,"tone":253},"\u002Fwork\u002Fjantarhome\u002Fcover.webp","The JantarHome home page in a browser window, a row of wooden cottages along a paved path under a heading about family comfort near the beach, and the page of the small cottages on a phone, on a dark navy background","The home page, and the small cottages on a phone.",[281,258],[288,264],"JantarHome rents seven holiday cottages in Jantar on the Vistula Spit, 700 metres from the beach. I designed its website: a page for each kind of cottage, a gallery, a guide to day trips nearby and a contact page that holds the price list.","https:\u002F\u002Fjantarhome.com",{},7,"Web design","Cottage pages \u002F Gallery \u002F Price list",{"notes":749,"pair":750,"details":758,"full":798},"A holiday cottage is chosen with the eyes, so photographs lead on every page and the text stays short. After the pictures a guest checks three things: what is inside, how far the beach is and what a night costs. The site answers in that order and writes the price down, season by season. The look stays quiet, warm paper and sea navy with one drawn flourish, so the wood and the green in the photographs carry the colour.",{"a":751,"b":754,"caption":757},{"src":752,"alt":753,"fit":40},"\u002Fwork\u002Fjantarhome\u002Fgallery.webp","The gallery in a browser window, with three tabs for the grounds, the small cottages and the large ones, and two rows of photographs of wooden cottages, a playground and a garden",{"src":755,"alt":756,"content":303,"fit":40},"\u002Fwork\u002Fjantarhome\u002Fphone.webp","The navigation on a phone, six links on a dark sea texture, with the phone number and a link to Instagram below them","Left: the gallery, sorted into three tabs. Right: the navigation on a phone.",[759,776,789],{"title":760,"body":761,"figures":762},"Every button leads to one page","The owner takes bookings by phone, so every Book a stay button, in the header, on the home page and under each cottage, opens the same page. It holds the phone number, the address, the hours of arrival and departure and the full price list. By the time a guest calls, only the date is left to settle.",{"ratio":310,"items":763},[764,768,772],{"src":765,"alt":766,"caption":767,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fjantarhome\u002Fpath-1.webp","The end of a cottage page on a phone, a dark block that says plan your stay today, with a button to book and a photograph of the cottages","A cottage page ends with one button.",{"src":769,"alt":770,"caption":771,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fjantarhome\u002Fpath-2.webp","The contact block on a phone, with the address, the hours of arrival and departure, the phone number, a link to Instagram and two buttons","It opens the phone number, the address and the hours.",{"src":773,"alt":774,"caption":775,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fjantarhome\u002Fpath-3.webp","The price list on a phone, a table with two kinds of cottage in two seasons, the extra fees and what the price includes","The price list sits on the same page.",{"title":777,"body":778,"figures":779},"Two kinds of cottage, two pages alike","JantarHome has two kinds of cottage, and a family compares them before it calls. Each kind has its own page, built in the same order: the cottage from outside, the rooms inside, a strip of photographs, six things that matter on holiday and the booking. Read one, and you know where to look on the other.",{"ratio":47,"items":780},[781,785],{"src":782,"alt":783,"caption":784,"fit":40},"\u002Fwork\u002Fjantarhome\u002Fsmall.webp","The page of the small cottages in a browser window, with the heading, a short description and a photograph of two wooden cottages with pointed roofs","Small cottages: a living room, a kitchen and bedrooms upstairs.",{"src":786,"alt":787,"caption":788,"fit":40},"\u002Fwork\u002Fjantarhome\u002Flarge.webp","The page of the large cottages in a browser window, with the heading, a short description and a photograph of a row of larger wooden houses across a lawn","Large cottages: more bedrooms and a bigger living area.",{"label":334,"title":790,"body":791,"figures":792},"One flourish and a handful of parts","The site is built from a handful of parts. A drawn flourish closes every opening heading. Six line icons name what guests ask about first, from the walk to the beach to the parking. Two buttons do the work, a filled one for the main step and an outlined one for the rest. Reviews sit on cards in sea navy.",{"ratio":34,"items":793},[794],{"src":795,"alt":796,"caption":797,"fit":40},"\u002Fwork\u002Fjantarhome\u002Fcomponents.webp","A board of parts from the site, with the navigation bar, six amenity icons, a heading with a drawn flourish above the price table, three buttons, the booking block on dark navy and a guest review card","The navigation, six icons, a heading with its flourish above the price table, buttons and a review.",{"src":799,"alt":800,"caption":801,"fit":40},"\u002Fwork\u002Fjantarhome\u002Fsurroundings.webp","The page about the surroundings in a browser window, with a heading about day trips and a photograph of a beach, next to the section on the castle in Malbork on a phone","The surroundings page: day trips to Gdańsk, Malbork, Frombork and the Vistula Lagoon.","jantarhome","work\u002Fjantarhome","Seven holiday cottages by the Baltic in Jantar: a website that shows each one, states the price and leads to a single phone number.","micWvirC54_Fj8wg_UVYfcuIVjRrYoG7JOQ5CIERcG8",{"id":807,"title":808,"caseStudy":809,"category":248,"client":1040,"cover":1041,"coverTall":1044,"demo":255,"disciplines":1047,"extension":261,"filters":1048,"intro":1049,"live":254,"meta":1050,"order":1051,"published":121,"role":1052,"scope":1053,"shortPage":254,"slug":1054,"stem":1055,"summary":1056,"timeline":1057,"type":275,"year":276,"__hash__":1058},"work\u002Fwork\u002Fmarketplace-panel.yml","Marketplace Panel",{"phase":356,"lead":810,"whatIDid":814,"problem":819,"problemDetail":820,"constraints":821,"decisions":826,"gallery":905,"scale":988,"system":1003,"result":1033},[811,812,813],"The seller lists furniture on many marketplaces at once, from several seller accounts. Each marketplace has its own panel, its own fees and its own words for the same order status, and each one reaches the panel through its own API. With that many integrations behind it, the simplest question, how did we do this month, had no single place to be answered.","I designed the panel that answers it in one place: sales, fees and the result after fees for every account and every offer, orders from every marketplace in one list and buyer messages in one inbox. My part was the UX and the UI: how each screen reads, what it asks of the person using it and what it says when a number is missing. I also helped decide how the panel is put together: which sections it has, and what the owner, the managers and the staff each get to see.","The project is private and nobody outside the company can log in. That is why the shop, the buyers and the figures here are invented, and why many parts of the panel are not shown.",[815,816,817,818],"UX and UI for 14 screens, on desktop and on a phone","User flows for every screen, with their error paths","Design system Precyzja: 169 components, 654 variants","Product structure, shaped with the developer: sections and roles","One question, is this offer still earning after fees and ads, had its answer scattered across every marketplace's own panel.","A commission is charged when an order is paid, revenue only counts once the parcel ships, ads are billed days later and the sales they bring sit in yet another panel. Every marketplace reports all of this through its own API, in its own format and at its own pace. Put together carelessly, those numbers lie: a fee shows up before its revenue, an estimate looks like a fact, a missing figure reads as zero. Before the panel could be useful, it had to be honest about every number on it.",[822,823,824,825],"Many marketplaces and many API integrations, one set of words","Every number has a source, and no estimate passes for a fact","Three roles: the owner, managers, and staff who see no finances","Every screen works on a phone too",[827,846,861,873,888],{"title":828,"context":829,"decision":830,"tradeoff":831,"figures":832},"Read is not the same as answered","Buyers write about deliveries, missing parts and invoices, and a slow answer costs a rating. The old inbox opened the newest thread by itself and marked it read, so a message could turn read without anyone reading it, and a read message looked dealt with even when nobody had replied.","Nothing opens on its own any more. A thread turns read only when someone opens it, a thread marked unread stays unread, and the open thread lives in the address, so a link from the first screen lands right on it. Next to unread, the inbox now counts what is waiting for a reply: every thread where the buyer had the last word, whether or not someone has glanced at it.","One more click before the first message. Choosing which buyer to answer first is always someone's decision now, never the inbox's.",{"ratio":833,"mat":834,"items":835},"10 \u002F 7","tight",[836,841],{"src":837,"alt":838,"caption":839,"state":840,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd1-before.webp","The old inbox, three filter buttons with a red count on unread, and a list of threads where the newest one is already open and marked","The newest thread opened itself and turned read. The only filter was unread.","before",{"src":842,"alt":843,"caption":844,"state":845,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd1-after.webp","The new inbox, tabs for all threads, waiting for a reply, unread and read, each with a count, a list where threads waiting for a reply are marked, and an empty reading pane that asks to choose a thread","Nothing opens until it is chosen, and waiting for a reply has its own tab.","after",{"title":847,"context":848,"decision":849,"tradeoff":850,"figures":851},"Every colour has one job","The old first screen coloured almost everything: fees in red, changes in red and green badges, a blue tile behind every icon. The commission, a cost nobody can avoid, was the reddest thing on the screen, so the eye learned to skip red.","Each colour now means one thing. Green and red belong to a single number, the result after fees, and only when it comes from the marketplaces' own billing. Amber marks what is waiting for someone. The brand blue says where you are and what is selected: the current section, the active tab, the chosen thread, the trend line. Fees carry a minus sign instead of a colour, and changes in the period are grey.","An estimated result stays grey even when it looks good. The panel would rather say less than say something it cannot back.",{"ratio":833,"mat":834,"items":852},[853,857],{"src":854,"alt":855,"caption":856,"state":840,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd2-before.webp","A large card from the old first screen, the result after fees with a blue icon tile, a green change badge, fees in red and rebates in green","Red for fees, a green badge and a blue tile on one card.",{"src":858,"alt":859,"caption":860,"state":845,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd2-after.webp","The four figures of the new first screen as a block of two by two, the result after fees in green with a small blue trend line, revenue with its trend line, fees as a negative number and rebates","One coloured number, and blue only for the trend. Shown two by two, the way the strip folds on a narrow screen.",{"title":862,"context":863,"decision":864,"tradeoff":865,"figures":866},"A missing number is never a zero","Sales brought by ads are not in any API the panel can read. They live in the marketplaces' ad panels and have to be typed in. Without them ROAS cannot be counted, and a zero in its place would read as a campaign that failed.","Where a number has no source, the panel says No data and names what it needs. ROAS is counted only from the days and accounts with sales entered, and the empty spot itself opens the form for the missing entry, already set to ad sales and to the right account, instead of sending the owner to look for it further down the page.","Some cells say No data for days, until someone types the sales in. That is still more useful than a figure nobody can trust.",{"ratio":867,"mat":834,"items":868},"1000 \u002F 551",[869],{"src":870,"alt":871,"caption":872,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd3-missing.webp","The ad results block with ROAS and ad sales marked No data and a note that says what to enter, and the entry form opened over it on the ad sales tab, with the account, gross sales and the period","No data names what it needs, and the form opens on the right kind of entry.",{"title":874,"context":875,"decision":876,"tradeoff":877,"figures":878},"A setting that rewrites every number asks first","The profit multiplier turns the result after fees into an estimated net profit for the whole company. Changing it rewrites every profit figure in the panel and in the PDF reports, months already closed included, and a slip of one digit goes unnoticed.","Saving a new value opens a confirmation that shows the setting now and after the change, says in plain words what will happen, every net profit figure drops by 75 per cent, and puts the value on the button: Set 10%. Cancel is the first choice, and the old value can be restored afterwards.","One more step for a change made a few times a year. That is the point of it.",{"ratio":833,"mat":834,"items":879},[880,884],{"src":881,"alt":882,"caption":883,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd4-setting.webp","The profit multiplier setting, a field with a new value of 10 per cent and a save button","The setting: one field that changes every profit figure in the panel.",{"src":885,"alt":886,"caption":887,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd4-confirm.webp","The confirmation, 40 per cent now and 10 per cent after saving, a warning that every net profit figure will drop by 75 per cent, a cancel button and a button that reads Set 10%","What saving it asks: now and after, the effect in words, the value on the button.",{"title":889,"context":890,"decision":891,"tradeoff":892,"figures":893},"A list says what is in it before anyone clicks","The order list had nine status tabs and no numbers on them, so finding out whether anything was waiting for payment meant opening the tabs one by one. The offer catalogue opened sorted by price, with the most expensive offer on top whether or not it had ever sold.","Every status tab now carries its count, zero included, so an empty tab is never opened just to check, and the row of tabs doubles as a summary of the day. The catalogue opens sorted by revenue from the last 30 days, so the first screen shows what sells, and offers that sold nothing sit in a tab of their own, with their number on it.","Nine counters make the row of tabs busier, and a zero is shown as plainly as a hundred. Hiding the empty tabs would be calmer, but tabs that come and go are harder to learn.",{"stack":121,"mat":834,"items":894},[895,900],{"src":896,"alt":897,"caption":898,"state":840,"ratio":899,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd5-before.webp","The old order list, nine status tabs without numbers, a date button, a filter button and a search field on a second line, and three tall rows with the date, the offer, the amount and two status badges","Nine status tabs and not one number on them.","1000 \u002F 464",{"src":901,"alt":902,"caption":903,"state":845,"ratio":904,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fd5-orders.webp","The new order list, nine status tabs each with its count, a search field, filters and sorting, and the first three orders with date, account, status and amount","Every status with its count, zero included.","1000 \u002F 423",[906,917,927,937,944,951,962,973],{"type":105,"ratio":907,"mat":834,"items":908},"1000 \u002F 687",[909,913],{"src":910,"alt":911,"caption":912,"state":840,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fw-finance-before.webp","The old finance screen, the result as a long card of stacked lines with fees in red, an ad results card beside it and a wide table below","Finance read like a receipt: one long card of lines, with the fees in red.",{"src":914,"alt":915,"caption":916,"state":845,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fw-finance-after.webp","The new finance screen, five figures in one strip and the accounts table with fee columns, where missing ad sales say No data","Five figures, then one table for every account. A missing number says No data.",{"type":105,"ratio":907,"mat":834,"items":918},[919,923],{"src":920,"alt":921,"caption":922,"state":840,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fw-catalogue-before.webp","The old offer catalogue, a row of actions above the list, a search field, and tall rows sorted by price with coloured status badges","The catalogue: a row of actions above the list, and offers sorted by price.",{"src":924,"alt":925,"caption":926,"state":845,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fw-catalogue-after.webp","The new offer catalogue, tabs with counts, one toolbar with search, filters and a sort set to revenue, and more rows in view","One toolbar, actions folded into a menu, and offers sorted by what they earn.",{"type":105,"ratio":907,"mat":834,"items":928},[929,933],{"src":930,"alt":931,"caption":932,"state":840,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fw-orders-before.webp","The old order screen, two large revenue cards above the list and three tall rows in view","Two revenue cards pushed the list down: three orders in view.",{"src":934,"alt":935,"caption":936,"state":845,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fw-orders-after.webp","The new order screen, one strip of four figures, status tabs with counts and seven orders in view","One strip of figures, counted tabs and seven orders in view.",{"type":113,"title":938,"body":939,"ratio":940,"media":941},"Fees without alarm","What the marketplaces charge is a cost of selling, not a failure, so its breakdown is a neutral bar with a table under it: commissions, ads and delivery as shares of the paid orders. A footnote says how each share is counted.","1000 \u002F 801",{"src":942,"alt":943,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fg-fees.webp","The fee structure, a grey bar split by kind of fee and a table with the amount and the share of each kind, a total and rebates",{"type":113,"reverse":121,"title":945,"body":946,"ratio":947,"media":948},"Ctrl K","Every section and every offer is a few keys away. The palette lists the sections with their shortcuts, G and a letter, and starts finding offers from the second character typed.","1000 \u002F 740",{"src":949,"alt":950,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fg-palette.webp","The command palette with a search field and the list of sections, each with its G and letter shortcut",{"type":105,"ratio":952,"mat":834,"items":953},"1000 \u002F 823",[954,958],{"src":955,"alt":956,"caption":957,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fc-offers.webp","The best offers card, a switch between top and losing offers and five offers with a thumbnail, the account, units sold and the result after fees","Best and worst offers by result, one switch apart.",{"src":959,"alt":960,"caption":961,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fc-messages.webp","The latest messages card, five buyer threads with the login, a one-line preview and the time, and a link to the inbox","The latest buyer messages, straight on the first screen.",{"type":105,"ratio":963,"mat":834,"items":964},"1000 \u002F 692",[965,969],{"src":966,"alt":967,"caption":968,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fc-orders.webp","The latest orders card, a search field and five orders with a status dot, the product, the buyer and the amount","The five newest orders, with a search that goes to any order.",{"src":970,"alt":971,"caption":972,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fc-appearance.webp","The appearance setting, fifteen accent colours as radio buttons with one selected, and a segmented control for intensity","Each person picks the accent colour and its intensity, for their own browser only.",{"type":105,"ratio":974,"items":975},"7 \u002F 12",[976,980,984],{"src":977,"alt":978,"caption":979,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fphone-dashboard.webp","The first screen on a phone with four figures in two rows and revenue day by day below them","The first screen on a phone.",{"src":981,"alt":982,"caption":983,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fphone-catalogue.webp","The offer catalogue on a phone, each offer as a card with status, price, units sold and the result after fees","Tables turn into cards.",{"src":985,"alt":986,"caption":987,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fphone-messages.webp","A conversation with a buyer on a phone, the buyer's question about a missing part and the shop's answer","One conversation at a time.",{"label":154,"stats":989,"media":998,"ratio":1002},[990,993,995],{"value":991,"label":992},"14","screens, desktop and phone",{"value":994,"label":161},"169",{"value":996,"label":997},"17","areas with user flows",{"src":999,"alt":1000,"caption":1001},"\u002Fwork\u002Fmarketplace-panel\u002Fscale.webp","Ten desktop screens of the panel in two rows of five, all with invented data","Ten of the screens, all with invented data. The private parts of the panel are not documented here.","4 \u002F 1",{"typeface":171,"weights":558,"statement":1004,"collections":1005,"facts":1015,"components":1020,"figures":1026},"Zinc carries the structure. Red, amber and emerald carry state, and the brand blue marks where you are and what is selected. Nothing else colours the interface, so a colour on the screen always means something.",[1006,1008,1011,1012,1013],{"name":176,"count":1007,"modes":178},39,{"name":184,"count":1009,"modes":1010},51,"Light",{"name":188,"count":3,"modes":178},{"name":191,"count":666,"modes":178},{"name":572,"count":1014,"modes":178},22,[1016,1017,1018,1019],"169 components","654 variants","91 icons","8 text styles",[1021,1022,1023,1024,1025],"Search field, period picker and segmented control","Status tabs with counts","Buttons, primary and secondary","Note with an action","Data table with group and total rows",{"ratio":1027,"items":1028},"1000 \u002F 693",[1029],{"src":1030,"alt":1031,"caption":1032,"fit":40},"\u002Fwork\u002Fmarketplace-panel\u002Fsystem.webp","Parts of the system on one sheet, the search field and period controls, status tabs with counts, buttons, a note with an action and the accounts table with group rows and a total","The parts of the system at work, with invented data.",{"statement":1034,"delivered":1035},"One panel for many marketplaces that answers how sales are going, and never shows a number it cannot back.",[1036,1037,1038,1039],"Seven sections for many marketplaces and several seller accounts, on desktop and on a phone","One job for every colour and one rule for missing data, kept on every screen","14 screens in Figma, with user flows for 17 areas and their error paths","Design system Precyzja: 127 variables, 169 components, 654 variants","Furniture retailer",{"src":1042,"alt":1043,"tone":253},"\u002Fwork\u002Fmarketplace-panel\u002Fcover.webp","The panel's first screen in a browser window, with the result after fees, revenue day by day against the previous period and the accounts table, and the same screen on a phone, on a dark navy background",{"src":1045,"alt":1046,"tone":253},"\u002Fwork\u002Fmarketplace-panel\u002Fcover-tall.webp","The panel's first screen in a browser window and the same screen on a phone, set in the middle of a tall dark navy background",[641,258,259,257],[263,264],"An internal panel for a furniture seller who sells on many marketplaces at once: about 800 offers, several seller accounts and one question asked every morning, is this still earning money after fees and ads? I designed the panel's UX and UI and helped shape its structure. The project is private, so the shop, the people and every number on the screens are invented.",{},3,"UX\u002FUI design, product structure","Seven sections on desktop and phone \u002F Design system \u002F User flows","marketplace-panel","work\u002Fmarketplace-panel","An internal panel for a furniture seller on many marketplaces: what every offer earns after fees and ads.","April to October 2026","hE52Ld2i7VouIphIRMWcuHZzPMcrUNbql4ph32hrZMA",{"id":1060,"title":1061,"caseStudy":254,"category":281,"client":1061,"cover":1062,"coverTall":254,"demo":255,"disciplines":1067,"extension":261,"filters":1068,"intro":1069,"live":1070,"meta":1071,"order":646,"published":121,"role":1072,"scope":1073,"shortPage":1074,"slug":1129,"stem":1130,"summary":1131,"timeline":1132,"type":350,"year":276,"__hash__":1133},"work\u002Fwork\u002Fmeble-mibu.yml","Meble MiBu",{"src":1063,"alt":1064,"caption":1065,"tone":1066},"\u002Fwork\u002Fmeble-mibu\u002Fcover.webp","The Meble MiBu home page in a browser window and the projects page on a phone, on a warm grey background","The home page, and the projects page on a phone.","mid",[281,258,259,577],[288,264],"Meble MiBu builds made-to-measure furniture in Gdańsk, and builds it well. Its website ranked high in search but said little of that: a strong portfolio sat out of sight, and few visitors got in touch. I designed a new site that shows the work first and keeps the next step in reach.","https:\u002F\u002Fmeblemibu.pl",{},"UI design, motion design","12 page types \u002F Design system \u002F Motion",{"notes":1075,"pair":1076,"details":1084,"full":1125},"For a workshop like this the website is the showroom. I was responsible for the design: the layouts of twelve page types, the visual system behind them and the motion that holds it all together. The site was moving from WordPress to a custom build at the same time, so every page had to work as a template. Every existing word stayed, because it is what brings visitors in from search, and the work now carries them through it.",{"a":1077,"b":1080,"caption":1083},{"src":1078,"alt":1079,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Foffer.webp","The offer page with a headline and a grid of furniture photos, one photograph for every kind of furniture",{"src":1081,"alt":1082,"content":303,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Fphone-home.webp","The home page on a phone with a headline over a photograph of a kitchen","Left: the offer, where every category is a photograph. Right: the home page on a phone.",[1085,1099,1112],{"title":1086,"body":1087,"figures":1088},"Let the furniture do the talking","The old home page kept the portfolio, the workshop's best argument, below a headline and a long introduction. The new one opens with a single photograph across the whole window and keeps that promise all the way down. The long texts that earn the search position are still there, lower on the page, broken into sections.",{"ratio":1089,"items":1090},"11 \u002F 10",[1091,1095],{"src":1092,"alt":1093,"caption":1094,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Fd1-before.webp","The old home page with a centred headline over a kitchen photo and a block of text under it","Before: the old home page, archived at 914 px wide.",{"src":1096,"alt":1097,"caption":1098,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Fd1-after.webp","The new home page with one kitchen photo across the whole window and a large headline on the left","After: one photograph across the window.",{"title":1100,"body":1101,"figures":1102},"A gallery worth browsing","The project list was a plain feed in upload order, and more than half of its entries had a number for a name. Projects became a gallery of 50, filtered by kind of furniture, with cards in three heights that turn the page into a wall of photographs. Switching a filter fades the grid out and back in.",{"ratio":1089,"items":1103},[1104,1108],{"src":1105,"alt":1106,"caption":1107,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Fd2-before.webp","The old list of projects in two columns with long titles under each photo","Before: two columns, in upload order.",{"src":1109,"alt":1110,"caption":1111,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Fd2-after.webp","The new projects page with category tabs and three columns of photos","After: filters by furniture and three columns of photographs.",{"label":334,"title":1113,"body":1114,"figures":1115},"Two templates, not 23 copies","Every service and every city had its own hand-assembled page, so any improvement had to be made twenty-three times. Service and city pages are now two templates built from one set of sections: photos, the projects of that kind, the long text, the process, reviews and questions. Adding a city is now a matter of content, not design.",{"ratio":1089,"items":1116},[1117,1121],{"src":1118,"alt":1119,"caption":1120,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Fd3-service.webp","The kitchens page with a headline on the left, a photo on the right and a dark strip of four facts","A service page: kitchens.",{"src":1122,"alt":1123,"caption":1124,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Fd3-city.webp","The Gdynia page with the same layout as the kitchens page and other text","A city page: Gdynia. Same sections, different story.",{"src":1126,"alt":1127,"caption":1128,"fit":40},"\u002Fwork\u002Fmeble-mibu\u002Fpanel.webp","The content panel with a sidebar of seven sections and a list of projects with their status","The site runs on a custom content panel in the same palette, where the client adds projects, services, cities and posts. The account shown here is invented.","meble-mibu","work\u002Fmeble-mibu","Great furniture, great rankings, few enquiries: a redesign that puts the work up front and the next step in reach.","June to September 2026","_zaPO_Tlu3AJO3SUct0C1RWJsQHhXGW53cIJP1EX_64",{"id":1135,"title":1136,"caseStudy":254,"category":281,"client":1137,"cover":1138,"coverTall":254,"demo":255,"disciplines":1142,"extension":261,"filters":1143,"intro":1144,"live":1145,"meta":1146,"order":268,"published":121,"role":746,"scope":1147,"shortPage":1148,"slug":1182,"stem":1183,"summary":1184,"timeline":254,"type":350,"year":276,"__hash__":1185},"work\u002Fwork\u002Forchowscy.yml","Orchowscy","Biuro Podróży Orchowscy",{"src":1139,"alt":1140,"caption":1141,"tone":253},"\u002Fwork\u002Forchowscy\u002Fcover.webp","The Orchowscy home page in a browser window and the tour catalogue on a phone, on a brick red background","The home page, and the tour catalogue on a phone.",[281,258],[288,264],"Biuro Podróży Orchowscy has been taking school and company groups around Poland and Europe since 1996. Its website had fallen behind the agency, so I redesigned it from the ground up, to the client's direction: a new layout and a calmer look for the catalogue, the tour page and the path to an enquiry.","https:\u002F\u002Forchowscy.pl",{},"Tour catalogue \u002F Tour page \u002F Design system",{"notes":1149,"pair":1150,"details":1158,"full":1178},"The redesign started from what the agency already had. Every one of its eighty-odd programmes, with its text and the client's own photographs, was carried over from the old WordPress site, so the new look had to fit content that already existed. The job was to design templates that make this material look its best: a tile, a tour page and a programme laid out day by day.",{"a":1151,"b":1154,"caption":1157},{"src":1152,"alt":1153,"fit":40},"\u002Fwork\u002Forchowscy\u002Fcatalogue.webp","The tour catalogue in a browser window, with filters on the left, search and sorting above and three tour tiles in a row",{"src":1155,"alt":1156,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Forchowscy\u002Fphone.webp","The menu on a phone, with seven links, an enquiry button and the phone number and e-mail at the bottom","Left: the catalogue with its filters. Right: the menu on a phone.",[1159,1172],{"title":1160,"body":1161,"figures":1162},"Same logo, calmer voice","Schools have booked with Orchowscy since 1996, and they should still know the agency at a glance. So the logo stayed, and the red and the navy stayed with it. What changed is the tone around them: the old home page shouted in capitals, the new one speaks in sentences and lets the photograph do the selling.",{"items":1163},[1164,1168],{"src":1165,"alt":1166,"caption":1167,"fit":40},"\u002Fwork\u002Forchowscy\u002Fbefore.webp","The old Orchowscy home page in a browser window, with a navy bar, a menu set in capitals, orange buttons and the tour's name in a dark box over a photograph of a Norwegian fjord","Before: the old home page.",{"src":1169,"alt":1170,"caption":1171,"fit":40},"\u002Fwork\u002Forchowscy\u002Fafter.webp","The new Orchowscy home page in a browser window, with a light bar, a menu in sentence case, one brick red button and the tour's name set large over the same photograph of the fjord","After: the same tour and the same photograph.",{"title":1173,"body":1174,"media":1175},"One tile for every tour","Most programmes are quoted for a group; a few have a date and a price per person. One tile takes every case: the kind of trip and the availability sit on the photograph, the transport under the title, and the last line is either a price or a note that the trip is quoted for the group.",{"src":1176,"alt":1177,"fit":40},"\u002Fwork\u002Forchowscy\u002Ftiles.webp","Three tour tiles side by side, two quoted for a group and one with a date, a low availability badge and a price per person",{"src":1179,"alt":1180,"caption":1181,"fit":40},"\u002Fwork\u002Forchowscy\u002Fprogramme.webp","A tour's programme in a browser window and on a phone, as a three day timeline with the first day open on a card","A tour's programme, one day at a time, on a laptop and on a phone.","orchowscy","work\u002Forchowscy","Travel agency: a redesigned website with a tour catalogue, made around the content the client already had.","zHKhSKs1GDUgCc9auo4UQk-Bn4KiTQBXrwagQZSZlsk",{"id":1187,"title":1188,"caseStudy":254,"category":281,"client":1188,"cover":1189,"coverTall":254,"demo":255,"disciplines":1193,"extension":261,"filters":1194,"intro":1195,"live":1196,"meta":1197,"order":1198,"published":121,"role":667,"scope":1199,"shortPage":1200,"slug":1254,"stem":1255,"summary":1256,"timeline":254,"type":350,"year":276,"__hash__":1257},"work\u002Fwork\u002Fpolskie-innowatorium.yml","Polskie Innowatorium",{"src":1190,"alt":1191,"caption":1192,"tone":253},"\u002Fwork\u002Fpolskie-innowatorium\u002Fcover.webp","The Polskie Innowatorium home page in a browser window, with the Innovations card over a photograph of a vehicle at a trade fair, and the Institutions page on a phone, on a dark maroon background","The home page, and the page for institutions on a phone.",[281,258],[288,264],"Polskie Innowatorium is a Warsaw team that films, photographs and promotes the work of innovators, Polish brands and public institutions. I designed its website: a page for each of the three, with projects on film, short reels, photo coverage and a contact form, in six languages from Polish to Arabic.","https:\u002F\u002Fpolskie-innowatorium.pl",{},8,"Audience pages \u002F Project films \u002F Six languages",{"notes":1201,"pair":1202,"details":1210,"full":1250},"The team works for three very different clients, so the site greets each of them at its own door. The home page opens with three large cards, Innovations, Polish Brands and Institutions, each with its own photograph and promise, and each leads to a page with its own projects. The work itself is film, so the projects play as video, the reels stand in phone frames and the photo coverage follows them. The interface stays quiet and lets the footage carry the colour.",{"a":1203,"b":1206,"caption":1209},{"src":1204,"alt":1205,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Fprojects.webp","The innovation projects in a browser window, dark cards with topic tags, a red date badge and a video poster, the first one from a technology fair in Dubai",{"src":1207,"alt":1208,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Fphone.webp","The menu on a phone, with four links, a row of six languages with English chosen, and the phone numbers and the e-mail address below","Left: every project plays as a film, each card dated. Right: the menu on a phone, with all six languages in reach.",[1211,1228,1241],{"title":1212,"body":1213,"figures":1214},"Twice the work on a phone screen","Across its three pages the team shows twenty-four projects, and in a single column a phone would turn them into a long scroll. On a narrow screen the project cards, the services and the client reviews run two to a row instead, so every screen holds twice as much.",{"ratio":310,"items":1215},[1216,1220,1224],{"src":1217,"alt":1218,"caption":1219,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Fcolumns-1.webp","Work for institutions on a phone, six dark project cards in two columns, each with tags, a date and a video poster","Projects for institutions, two to a row.",{"src":1221,"alt":1222,"caption":1223,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Fcolumns-2.webp","Our specialization on a phone, the services under Strategy and Reach in two columns, each with a red icon and a short description","The services side by side, Strategy next to Reach.",{"src":1225,"alt":1226,"caption":1227,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Fcolumns-3.webp","What our clients say about us on a phone, four review cards in two columns, each with five stars, a client logo and a name","Client reviews, four to a screen.",{"title":1229,"body":1230,"figures":1231},"The same page, read from the right","The team covers fairs and summits from the Emirates to Korea and Vietnam, so the site speaks six languages. In Arabic the whole layout turns around: the logo and the text move to the right, the form takes the left and the numbers switch to Arabic digits, while e-mail addresses still read left to right.",{"items":1232},[1233,1237],{"src":1234,"alt":1235,"caption":1236,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Fenglish.webp","The contact section of the English site in a browser window, the text on the left and the form on the right, with the e-mail and phone fields side by side","English: the text on the left, the form on the right.",{"src":1238,"alt":1239,"caption":1240,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Farabic.webp","The same contact section in Arabic, mirrored, with the text on the right, the form on the left and the phone numbers in Arabic digits","Arabic: the same section, mirrored.",{"label":334,"title":1242,"body":1243,"figures":1244},"Parts made for showing film","The site is built from a handful of parts. A dark project card holds its tags, a red date badge and the video. Reels stand in phone frames, reviews sit on white cards with the client's logo in grey, red geometric icons name the services and the language menu lists all six with their flags.",{"ratio":34,"items":1245},[1246],{"src":1247,"alt":1248,"caption":1249,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Fcomponents.webp","A board of parts from the site, with the navigation bar, a dark project card, two review cards, two reels in phone frames, eight red service icons, the language menu and the contact fields in English and in Arabic","The navigation, a project card, reviews, reels, the service icons, the language menu and the form in both directions.",{"src":1251,"alt":1252,"caption":1253,"fit":40},"\u002Fwork\u002Fpolskie-innowatorium\u002Freels.webp","The short-form section in a browser window, four vertical reels in phone frames under a heading about content that grabs attention, next to the photo coverage on a phone","Short reels in phone frames, and the photo coverage on a phone.","polskie-innowatorium","work\u002Fpolskie-innowatorium","A Warsaw team that films and promotes innovators, Polish brands and public institutions: a website with a door for each, in six languages.","54EdX86Lks1wqz0t5d9Xkz0vjtltOjCFuACx5mcqtGg",{"id":1259,"title":1260,"caseStudy":254,"category":281,"client":1260,"cover":1261,"coverTall":254,"demo":255,"disciplines":1265,"extension":261,"filters":1266,"intro":1267,"live":1268,"meta":1269,"order":1051,"published":121,"role":746,"scope":1270,"shortPage":1271,"slug":1303,"stem":1304,"summary":1305,"timeline":254,"type":350,"year":276,"__hash__":1306},"work\u002Fwork\u002Fpomorskie-horyzonty.yml","Pomorskie Horyzonty",{"src":1262,"alt":1263,"caption":1264,"tone":253},"\u002Fwork\u002Fpomorskie-horyzonty\u002Fcover.webp","The Pomorskie Horyzonty home page in a browser window, with a pier and a beach seen from the air, and the listings on a phone, on a navy background","The home page, and the listings on a phone.",[281,258],[288,264],"Pomorskie Horyzonty is a family real estate agency that sells and lets homes in Gdańsk, Sopot and Gdynia. I designed its website: a home page that opens on the coast seen from the air, a catalogue of listings with filters and a property page built around the photographs.","https:\u002F\u002Fpomorskiehoryzonty.pl",{},"Home page \u002F Listings \u002F Property page",{"notes":1272,"pair":1273,"details":1281,"full":1299},"The site leads with the place. Drone footage of the coast runs behind the headline, every listing opens with large photographs, and the interface stays quiet around them. Each listing ends in a single enquiry form.",{"a":1274,"b":1277,"caption":1280},{"src":1275,"alt":1276,"fit":40},"\u002Fwork\u002Fpomorskie-horyzonty\u002Flistings.webp","The listings page in a browser window, with tabs for the type of property, a panel of eight filters and the first row of three listings",{"src":1278,"alt":1279,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fpomorskie-horyzonty\u002Fphone.webp","The menu on a phone, navy, with seven links, a contact button and tiles for the phone number and the e-mail address","Left: the listings with their filters. Right: the menu on a phone.",[1282],{"title":1283,"body":1284,"figures":1285},"An enquiry is always one tap away","Nobody buys a flat on a website; they write to an agent. So a listing keeps that step within reach. Once the photographs scroll away, the name of the flat and a single button stay at the bottom of the screen, and the form they lead to opens with the message already begun.",{"ratio":310,"items":1286},[1287,1291,1295],{"src":1288,"alt":1289,"caption":1290,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fpomorskie-horyzonty\u002Fenquiry-1.webp","A listing on a phone, opening with the name of the apartment, its price line and the first photographs of the gallery","A listing opens on its photographs.",{"src":1292,"alt":1293,"caption":1294,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fpomorskie-horyzonty\u002Fenquiry-2.webp","The same listing further down on a phone, with cards of details and a bar at the bottom holding the name of the flat and an enquiry button","Further down, the flat's name and one button stay on screen.",{"src":1296,"alt":1297,"caption":1298,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fpomorskie-horyzonty\u002Fenquiry-3.webp","The enquiry form on a phone, with fields for a name, a phone number and an e-mail, and a message that already names the apartment","The form starts the message with the flat's name.",{"src":1300,"alt":1301,"caption":1302,"fit":40},"\u002Fwork\u002Fpomorskie-horyzonty\u002Fproperty.webp","A property page in a browser window and on a phone, with the name of the apartment, its price line and a gallery of three photographs","A property page, on a laptop and on a phone.","pomorskie-horyzonty","work\u002Fpomorskie-horyzonty","Real estate agency: a website with a catalogue of listings and a calm, coastal look for a family business in the Tricity.","q5XIWR3oTdYk8PQy7DSL1qS6P-jy6-fJbYSlenT8Ivs",{"id":1308,"title":1309,"caseStudy":254,"category":635,"client":1310,"cover":1311,"coverTall":254,"demo":255,"disciplines":1315,"extension":261,"filters":1316,"intro":1317,"live":1318,"meta":1319,"order":192,"published":121,"role":258,"scope":1320,"shortPage":1321,"slug":1375,"stem":1376,"summary":1377,"timeline":254,"type":350,"year":276,"__hash__":1378},"work\u002Fwork\u002Fposypkowo.yml","Posypkowo","Posypkowo Kolorowo",{"src":1312,"alt":1313,"caption":1314,"tone":253},"\u002Fwork\u002Fposypkowo\u002Fcover.webp","The Posypkowo Kolorowo home page in a browser window, with bowls of ice cream, and the product catalogue on a phone, on a dark brown background","The home page, and the catalogue on a phone.",[635,258],[288,264],"Posypkowo Kolorowo has supplied ice cream parlours with toppings, sauces and decorations since 2006. I designed its online shop: a catalogue of the whole range, product pages that sell by the pack, a basket that stays one tap away, and a checkout that fits on a single page.","https:\u002F\u002Fposypkowokolorowo.pl",{},"Online shop \u002F Product pages \u002F Checkout",{"notes":1322,"pair":1323,"details":1331,"full":1371},"People who order here run a parlour, and they know what they came for. So the shop skips the persuasion and gets to the shelf: the catalogue opens on products with their prices, the categories on the side say how many items each one holds, and a topping can go into the basket straight from the list. The company's own story has its page, for those who want it.",{"a":1324,"b":1327,"caption":1330},{"src":1325,"alt":1326,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fcatalogue.webp","The catalogue in a browser window, with a search field and the categories with their product counts on the left, and the first row of products with prices",{"src":1328,"alt":1329,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fphone.webp","The menu on a phone, with buttons to sign in and to register, five links and the first product categories","Left: the catalogue with its categories. Right: the menu on a phone.",[1332,1349,1362],{"title":1333,"body":1334,"figures":1335},"Every price sits on its pack","A parlour does not buy a topping, it buys a kilo of it, or a ten-kilo box. So the pack is the first choice on a product page, and each size shows what it costs before anything is added. The catalogue says where the price starts, and the basket adds up the weight of the order next to the total.",{"ratio":310,"items":1336},[1337,1341,1345],{"src":1338,"alt":1339,"caption":1340,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fpath-1.webp","The catalogue on a phone, with a filter button, the number of products and two product tiles, one of them priced from 48,33 zł","The catalogue shows where each price starts.",{"src":1342,"alt":1343,"caption":1344,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fpath-2.webp","A product page on a phone, with the price, two pack sizes each with its own price, a quantity field and a button to add to the basket","A product page: pick a pack, see its price.",{"src":1346,"alt":1347,"caption":1348,"content":303,"tone":253,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fpath-3.webp","The basket on a phone, with one product, its pack size and quantity, the weight of the basket, the total and a button to the checkout","The basket sums up the weight and the total.",{"label":699,"title":1350,"body":1351,"figures":1352},"It started as a catalogue","The first version of the site was a catalogue: a product page had a photograph, a name and one button, ask for the price. The shop turned that question into an answer. A product now opens with what it costs in each pack, and the order goes to a basket instead of an inbox.",{"items":1353},[1354,1358],{"src":1355,"alt":1356,"caption":1357,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fbefore.webp","The first version of a product page, with a photograph, the name Ruby Crunch, one line of description and a button that says ask for the price","Before: one button, ask for the price.",{"src":1359,"alt":1360,"caption":1361,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fafter.webp","The product page that is live, with a photograph, the price, two pack sizes, a quantity field and a button to add to the basket","After: the price, the pack and the basket.",{"label":334,"title":1363,"body":1364,"figures":1365},"One tile wherever a product appears","The shop is built from a small set of parts. A product looks the same on the home page, in the catalogue and under another product: its category, its name, its price and a small basket button. Buttons work in pairs: a filled one for the step that moves the order forward, and a quiet one for the way back.",{"items":1366},[1367],{"src":1368,"alt":1369,"caption":1370,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fcomponents.webp","A board of parts from the shop, with a product tile, a price with pack sizes and a quantity field, the category filters, buttons on white and on dark brown, and checkout fields with two delivery options","A product tile, the pack picker, filters, buttons and checkout fields.",{"src":1372,"alt":1373,"caption":1374,"fit":40},"\u002Fwork\u002Fposypkowo\u002Fcheckout.webp","The checkout in a browser window, with the delivery details and the delivery options on the left and the order summary on the right, next to the same checkout on a phone","The checkout: one page, with the order summed up beside the form.","posypkowo","work\u002Fposypkowo","A wholesale shop for ice cream parlours: toppings priced by the pack, from the catalogue to a one-page checkout.","OeXXztxXTOsrxqXXSftwB2FrspdEouodbDt_e7i1eeU",1791201906050]