Solutions / 04
UX/UI design
We design how websites, apps and business systems are used and how they look: where a piece of information lives, how many steps a purchase takes, what each screen looks like. We do it before the code is written, while changing your mind still costs little.
The problem
A confusing interface costs more than it seems.
Baskets abandoned halfway, enquiries that never arrive, colleagues drifting back to the spreadsheet because the new system is awkward. It is hardly ever the technology's fault: it is a design problem.
We start from the people who will use the tool and what they need to get done. Then we draw, we have it tried, and we correct it, until the simplest path is also the right one.
Design examples
There is no LivenBit style. There is the one that suits you.
Thirty-two examples drawn by us, sorted into whole pages, sections, features and running text, each with a different character. They are not templates to fill in: they are there to work out together what your project should look like.
01
Whole pages, each with a character of its own.
The same basic structure, dressed in eight different ways: from the luxury estate agent to the barber with the neon lights.
Estate agency
The site that makes every house look like a cover
Full-screen photography, a serif typeface and a single metallic colour. The search stays on top of the photo: whoever comes to look is filtering at the same time.
- Search on the photo
- Editorial serif
- Transparent header
Digital product
The page that presents an app without showing a screenshot
A dark ground, a single colour gradient and the phone drawn beside the headline. The motion goes along with the reading instead of stealing the scene.
- Dark theme
- Drawn phone
- Gradient text
Barber
The site that plays the same music as the shop
Black, neon pink and a tall, narrow typeface that reads from across the room. The price list runs in numbered rows, and the booking button never goes away.
- Dark theme
- Vertical video
- Booking always in view
Salon
The headline is also the menu
No photo to open with: three enormous words, which are also the links to the three sections of the site. Further down, the chapters stack up like cards as you scroll.
- Type only
- Stacked chapters
- Warm palette
Business services
The site that has to earn trust in three seconds
A deep blue, one accent colour and the company's numbers in plain view. The phone number sits at the top of every page, because somebody looking for a supplier often wants to call.
- Numbers up front
- Contacts always in view
- Quote in one click
Food
The site that makes you hungry before you read a word
Solid colours, soft shapes and handwriting like on a label. It works when the product is cheerful and the customer decides with their eyes.
- Soft shapes
- Handwriting
- Solid colours
Architecture and interiors
The portfolio that lets the projects do the talking
Plenty of empty space, thin type and large images in an asymmetric grid. The site steps aside, and the work stays in front.
- Asymmetric grid
- Plenty of white space
- Thin type
Software and SaaS
The home page split into tiles, one per feature
Each tile shows a feature with a small drawing instead of describing it in a bullet point. It reads in any order, on a phone too.
- Tile grid
- Small illustrations
- Light and dark theme
02
The blocks a page is built from.
Price lists, reviews, figures, frequently asked questions: every section has a precise job, and a right way of doing it.
Pricing
The price list that compares itself
Three columns, the same lines in each and the recommended one picked out. The monthly or yearly switch changes the prices without changing the page.
- Recommended plan
- Monthly or yearly
- Comparison at a glance
Reviews
What customers say, where it counts
The average score in large type, the stars and three opinions taking turns. Somebody still undecided finds the reassurance they need next to the booking button.
- Average score
- Rotating opinions
- Linked to Google
Results
The figures that matter, in a single band
Four large figures that count themselves up as they come on screen. It works when the results are the best sales argument there is.
- Animated counters
- High-contrast band
- Easy to update
FAQ
The answers before the questions
The questions that always come in, gathered into an accordion that only opens the one that matters. It takes calls off the office and doubts off whoever is about to write.
- Accordion
- One open at a time
- Readable by Google
Process
The path, one stop at a time
Four numbered steps, joined by a line that fills as you scroll. The reader sees straight away how long it takes and what happens next.
- Numbered steps
- Progress line
- Dedicated icons
Gallery
The photos, laid out like a magazine
Different formats side by side, as on a printed page. One tap opens the photo full screen, and you browse with the arrows or a finger.
- Mixed formats
- Full-screen viewer
- Swipe to browse
Hours and contact
Opening hours that know what day it is
Today's row lights up on its own, with a warning when closing time is near. Beside it the map and the only two buttons that matter: call, and get directions.
- Today highlighted
- Map without tracking
- Call in one tap
Before and after
The difference, to drag with a finger
Two photos on top of each other and a handle in the middle: the viewer drags it and sees the change with their own hands. It convinces more than any description.
- Draggable handle
- Works with touch
- Light to load
Closing
The last section, the one that asks
A solid ground with soft lights, one question and a single button. Underneath, the footer with what people look for at the end: contacts, hours and company details.
- One call to action
- Soft lights
- Complete footer
03
The parts of a site that do something.
Booking, configuring, searching, paying, organising the work. Here design is measured in steps saved, not in special effects.
Booking
The booking that leaves no doubts
Service, stylist, day and time: one choice at a time, with the summary always at the bottom. Slots already taken cannot be picked, so nobody books the same place twice.
- Three steps
- Live availability
- Summary always visible
Configurator
The product that comes together before your eyes
Wood, size and engraving are chosen on the right and the drawing changes on the left, price included. At the end the configuration goes out attached to the enquiry.
- Live preview
- Price that updates
- Configuration attached
Search
Search with filters, look on the map
Filters turn into tags that come off with one tap, and the results show up as prices on the map. List and map stay in step as the view moves.
- Filter tags
- Prices on the map
- List and map together
E-commerce
The basket that does not take you off the page
It opens from the side, says how far you are from free delivery and takes you to payment in one tap. Whoever was browsing the products does not lose their place.
- Side basket
- Free delivery threshold
- Quick checkout
Business system
The dashboard you read in ten seconds
Four indicators with the change beside each, a chart and the latest rows to check. The grouped menu on the left goes anywhere in one click.
- Indicators with change
- Charts
- Grouped menu
Operations
The day's work, in columns
Every request is a card that travels from left to right, with a single button for the next step. Whoever is working does not have to wonder what to do: they read it.
- Status columns
- One button per step
- Live updates
Mobile
The interface designed for the thumb
A single column, big buttons at the bottom and categories that slide sideways. The summary follows you as you scroll, and the confirmation is shaped like a receipt.
- One column
- Bottom bar
- Big buttons
Forms
The long form, split into three short steps
One question at a time, answers to tap rather than type, and a bar that says how much is left. It is the same idea as our own configurator.
- Progress bar
- Tap to answer
- Go back any time
Diary
Everybody's day, on one screen
One column per person and one row for every half hour. Appointments move by dragging them, and every status can be told apart without relying on colour.
- A column per person
- Drag to move
- Recognisable statuses
04
Text is designed too.
Drop caps, quotations, lists, notes in the margin: the same content reads better, or worse, depending on how it is set.
Editorial
The story set like a newspaper page
A drop cap, two columns and a coloured kicker: long text becomes a page that invites reading, instead of a block to scroll past in a hurry.
- Drop cap
- Two columns
- Reading serif
Quotation
A single sentence, placed where it shows
Large quotation marks, italic text and the person saying it beside their photo. A well-set quotation stops the scroll better than a headline.
- Decorative quote marks
- Italics
- Author up front
List
The steps, numbered like a ritual
Roman numerals, a short title and one line of explanation for each step. A list like this reads as a sequence, not as a shopping list.
- Roman numerals
- Hairline rules
- Two columns
Message
The words that matter, underlined by hand
Large text, a few words highlighted as if with a marker and one in italics. Somebody reading in a hurry gets the point even while skipping the rest.
- Highlighter
- Hand-drawn stroke
- One word in italics
In depth
The headline stays put, the text runs beside it
The question on the left, the answers on the right in numbered blocks. It is the right layout for explaining something complex without losing the reader.
- Fixed headline
- Numbered blocks
- Comfortable reading
Guide
Notes, warnings and boxes for people who have to act
The main text stays clean, and the practical information lives in recognisable boxes: a tip, a warning, a note in the margin.
- Coloured boxes
- Margin notes
- Status icons
Seen a style that looks like your business? Tell us in the configurator: we will start from there.
Configure your projectThe miniatures are reconstructions drawn for illustration: the names, brands, prices and text inside them are made up.
What we build
UX research and analysis
Interviews, usage data and the paths people take today: we find out where people get stuck and why, before deciding what to redesign.
Structure and wireframes
The structure of the content, the paths and the screens in black and white. What goes where is decided without colour getting in the way.
Interfaces and visual identity
Type, colour, images and components consistent with your brand, on every screen: from the phone to the monitor in the office.
Clickable prototypes
The screens linked together as if the product already existed. You try it, you have the people who will use it try it, and it changes before it costs.
Design systems
Components, rules and variants documented in one library: whoever develops after us, or alongside us, builds with the same pieces.
Accessibility and usability testing
Contrast, keyboard, screen readers and tests with real people. An accessible interface is easier for everyone, not only for those who need it.
What we deliver
We deliver the complete design: the content map, wireframes of the main paths, final screens for phone, tablet and desktop, and a clickable prototype to put in front of the people who will actually use the tool.
Alongside the screens come the design system with its components and rules of use, the specifications for developers and the accessibility check. If we also do the development, the step from drawing to code stays within the same team, and nothing gets lost on the way.
What is included
What comes with the work, and is not billed separately.
Software does not end on the day it is handed over. These are the terms we work under on every project, written down before signing rather than treated as an extra to quote for six months later.
6 months of support included
On every project we deliver, at no extra cost.
6 months of support included
Every project we deliver comes with six months of support in the price: defect fixes, security updates and the small adjustments that only show up once people are using it. It is not a separate retainer to sign.
Privacy and GDPR, in writing
Roles, responsibilities and data processing, defined
When a project involves processing personal data, we define the roles and responsibilities of each party and put the necessary agreements in writing. If LivenBit processes data on the client's behalf, we draw up the agreements the GDPR provides for and identify the relevant security measures. Any impact assessment is carried out when the nature and the risks of the processing call for one.
Protected data, European infrastructure
Encryption in transit and at rest, where provided
We protect communications with encrypted connections and take appropriate measures to protect stored data. For projects hosted on our European infrastructure, we check where the services used are located and the terms of the suppliers involved. The measures applied are set according to the project and the risks it has to be protected from.
Least access, and it is logged
Roles, permissions and a second factor on anything that touches your systems. Every access is named and recorded, and when the project closes our credentials are revoked: it is a line on the handover checklist.
Backups that are tested, not just taken
Backup copies and periodic restore tests
For the systems covered by the service, we provide backups with a set frequency and retention period. Copies are protected according to the risk and, where the management plan provides for it, kept on a separate environment. We check periodically that they can be restored, to reduce the risk of a backup turning out to be unusable just when it is needed.
Your data stays yours
Your business's data stays yours. We provide ways to export and hand over the project's data in usable formats, in line with the characteristics of the software and the contractual agreements. The terms of access to the source code, the materials and the infrastructure are clearly set out, with no surprises when the time comes to move to another supplier.
Related services
Get started
Is there something in your processes worth automating?
Describe the situation in a few lines. We come back with an assessment of feasibility, timing and the order of magnitude of the cost.