Skip to content

UX/UI + information architecture

Printly

Role
UX/UI and information architecture
Period
Apr 2024 · 7–8 weeks
Outdoor advertising mockups carrying the Printly identity: orange posters reading “follow your prints.” with the “p” mark, the printly.pl address, and a shot of a print-shop worker.

The problem

A B2B print checkout means dozens of variables: formats, paper weights, finishes, volumes and quotes. Customers were getting lost before they finished an order.

Context & constraints

  • Printly is a modern online printing house from Suwałki, rapidly becoming a leader in its industry.
  • Scope: a visual identity, UI/UX design and a responsive site built around a simple order-placement process.

Architecture

I redesigned the information architecture from the ground up, so the catalogue and the order flow map to how a buyer actually specifies a print job.

Process

The work is documented across 17 Adobe XD artboards: two explored directions for the desktop homepage (v1 and v2), category and product views for desktop and mobile, a dedicated “I have a project” ordering variant, a megamenu, listing, cart and order screens, and a five-screen account area whose order detail carries a delivery-status stepper. An earlier backup file holds the previous generation, so the before-and-after is real.

The Printly homepage mockup, first direction: a hero with the tagline Drukuj z nami, the orange product navigation and a category grid with business-card, poster and flyer mockups.
Homepage, direction one: a classic hero and a category catalogue.
The Printly homepage mockup, second direction: the same brief with a different opening and a different arrangement of the product sections.
Direction two. Both were drawn out in full before the decision was made.
The standard business cards product page: a mockup gallery, four starting paths (generate with AI, upload a design, order design work, use a saved design), a variant table with volume and price, and a manual configuration button.
The product page: dozens of variants held inside a guided choice rather than one form.
The product page in its I-have-a-project variant: a buyer arriving with a ready file gets a dedicated, shorter route to ordering the cards.
The dedicated I-have-a-project path: whoever has a file skips product selection.
The mobile version of the business cards product page: the same content and ordering paths arranged in a single phone column.
The same flow on a phone, designed alongside desktop.
The order screen: recipient details with a client/company toggle, an order summary with the delivery estimate and promo code, and a parcel-locker picker with a list of points.
The order guided section by section: recipient, shipping, and a summary always in view.
Order details in the account area: a delivery status stepper from accepted to delivered, line items with their print parameters, and a cost summary.
The account area: delivery status read off one stepper instead of an email trail.

Design decisions

The information architecture rebuilt from the ground up.
The catalogue's complexity was the problem; reorganising it was the fix, not decoration.
A complex B2B checkout broken into an elegant, guided multi-step flow.
Dozens of interacting variables overwhelm a single form; step by step leads the buyer without them getting lost.
A dedicated “I have a project” path alongside browsing the catalogue.
A buyer arriving with a ready file needs a different route than one still choosing a product.
Desktop and mobile designed together, not one after the other.
B2B print orders come from both; the flow had to hold up on a phone as well.

The solution

A brand-consistent, responsive site built around a simple, intuitive ordering process, delivered with a brandbook, source files, documentation and CMS access.

See the case study on ultrastud.io

Reflection

The whole job came down to reducing complexity: not adding more options, but arranging the existing ones so the order almost places itself.