ENOR Technologies

UI/UX DESIGN

Clear experiences.Interfaces that make the next step obvious.

At ENOR, we design how visitors understand and use your website. We connect structure, navigation and visual design to create flows built around what users need.

Discuss your UI/UX projectSee the process
Scenario: Find the service → Understand the offer → Send the requestIllustrative concept
  1. 01 · Find the service

    Home → Services

    Menu with three services

  2. 02 · Understand the offer

    Service page

    What’s included and how it works

  3. 03 · Send the request

    Form

    Three fields and a confirmation

Exception: invalid email → message explaining the fix

  1. 1Flow
  2. 2Wireframe
  3. 3Final screen
  • Structure and navigation
  • Wireframes and prototypes
  • User-centred interfaces

INTRODUCTION

A website should be understood, not learned with effort.

Visitors arrive with a purpose: to find information, compare an offer or complete an action. If the structure and interface make that path harder, even a polished look may not do its job.

At ENOR, we design the user flow before finishing the visual details. We organise content, clarify navigation and define how the interface responds at every step.

This service delivers the design project: structure, flows, screens and prototype. Coding and publishing are development work.

UI AND UX

How the experience works and how it looks.

Two parts of the same experience, designed together.

UX

User experience

Deals with how information is organised and how users reach their goal.

  • Structure
  • Navigation
  • Flows
  • Content
  • Forms
  • Usability
UI

User interface

Defines how these elements are presented and communicate visually.

  • Typography
  • Colours
  • Buttons
  • Fields
  • Icons
  • Spacing
  • Interaction states

We design them together, so that look and use support the same goal.

PROBLEMS WE ADDRESS

When users stop, we need to understand why.

Common situations and the design approach for each. The actual cause is identified during the project analysis.

  1. Situation: Navigation with unclear categories

    Approach: Organisation by content and tasks

  2. Situation: Pages without hierarchy

    Approach: Ordering of messages and actions

  3. Situation: Long or confusing forms

    Approach: Review of fields and guidance

  4. Situation: Buttons with unclear meaning

    Approach: Clear labels and states

  5. Situation: Processes without confirmation

    Approach: Feedback on the result and the next step

  6. Situation: Errors that don’t explain the fix

    Approach: Messages and recovery paths

WHAT THE SERVICE INCLUDES

From understanding the problem to a prototype you can evaluate.

The scope is set per project. Not every proposal includes every research method.

  1. 01

    Requirements and user analysis

    Goals, audiences, tasks and constraints.

    Result: Summary of needs and open questions

  2. 02

    Information architecture

    Content grouping, labels and hierarchy.

    Result: Sitemap and navigation structure

  3. 03

    Flows and wireframes

    Steps, choices, exceptions and section order.

    Result: Flow diagrams and annotated wireframes

  4. 04

    Interface design

    Typography, colours, components and states.

    Result: Detailed screens and components

  5. 05

    Interactive prototype

    Linking the main screens and selected interactions.

    Result: Clickable prototype for discussion and evaluation

  6. 06

    Evaluation and handoff

    The agreed review and preparation of materials.

    Result: List of changes and files for implementation

UNDERSTANDING USERS

Decisions that start from needs, not just preferences.

Depending on the project, we gather information from the business, existing data and — when included — from users themselves.

Methods by project

  • Business workshop
  • Audience definition
  • Requirements analysis
  • Review of existing data
  • Interviews
  • Task observation
  • Analysis of support requests
Illustrative concept

Information gathered from a known source.

Most email questions ask about the design timeline.

Source: support requests from the last 3 months (example)

The “Services” page doesn’t link to the form.

Source: review of the existing website

Switch tabs: every statement keeps its source or how it will be verified.

Illustrative personas are not presented as results of real research.

An internal discussion without user participation is not called “user research”.

INFORMATION ARCHITECTURE

Information should be where users expect to find it.

We group content and choose labels that match how visitors search, then turn the structure into navigation.

  • Content grouping
  • Categories
  • Labels
  • Sitemap
  • Main navigation
  • Secondary navigation
  • Breadcrumb
  • Search when needed
  • Links between pages

We don’t propose huge menus just to expose every page; the menu shows the main paths.

Illustrative concept

Ungrouped content

  • Interior design
  • Apartments
  • Custom furniture
  • Offices
  • Lighting
  • About the studio
  • FAQ
  • Contact
  • Materials

How do visitors look for these pages? With what words?

Switch the view: the same content before and after grouping into navigation.

USER FLOWS

Every action has a path and a few exceptions.

We design the selected flows from the starting point to confirmation, including errors and going back — not only the ideal scenario.

Consultation request
Illustrative concept
  1. 01

    Start

    Service page

  2. 02

    Choice

    Project type

  3. 03

    Details

    Name, email, description

  4. 04

    Check

    Required fields

  5. 05

    Confirmation

    What happens next

Main path: five steps to confirmation, with the information needed at every step.

Pick a path: main, with an invalid email, or going back.

  • Finding a service
  • Requesting a quote
  • Booking
  • Product search
  • Sign-up
  • Contact

For each flow we design

  • The starting point
  • The steps
  • The choices
  • The information needed
  • The errors
  • Going back
  • The confirmation

WIREFRAMES

We clarify structure before visual detail.

Wireframes help us discuss content, hierarchy and the role of each part without being distracted by colour and decoration.

  • Section order
  • Navigation
  • Headings
  • Space for media
  • Forms
  • CTAs
  • Supporting content

We use representative text of realistic length. Final approval does not rely on placeholders that don’t represent the real content.

Illustrative concept
  1. 1Headline and offerWhat the studio does and for whom.
  2. 2Main actionOne clear CTA above the fold.
  3. 3ServicesThree main paths with clear names.
  4. 4ProjectsProof of work, linked to details.

Switch from wireframe to UI: the notes explain the role of each part.

INTERFACE DESIGN

Visual hierarchy that supports action.

We design the visual elements and their behaviour so that pages and components stay consistent.

  • Typography
  • Colour
  • Spacing
  • Grid
  • Icons
  • Buttons
  • Fields
  • Cards
  • Navigation
  • Notifications
  • Dialogs

States for the relevant components

  • Default
  • Hover
  • Focus
  • Active
  • Disabled
  • Loading
  • Empty
  • Error
  • Success

Status is never shown by colour alone: we add text or an icon.

Illustrative concept
Book a consultation

State

Visual specification · Default: The base look.

Choose a component and a state to see the specification.

FORMS AND INTERFACE TEXT

Small words play a big role.

Labels, help text and messages tell users what is needed, why it is needed and what happens next.

  • Labels
  • Help text
  • Button labels
  • Error messages
  • Empty states
  • Confirmations
  • Cancel or back actions

Questions we answer

  • What data is required
  • Why it is needed
  • What happens after sending
  • How to fix an error
Illustrative concept

Book a consultation

Leave your email and we’ll reply with the next steps.Help

We only use it to reply to this request.Reason

After sending you’ll see a confirmation on screen and the studio will email you the details.

Send without an email to see the error, then fill in the example. Nothing is sent.

A placeholder is never the only label of a field.

In the real implementation, success is shown only after the action is completed. In the prototype, states are for demonstration.

RESPONSIVE AND ACCESSIBILITY

The experience should keep its logic when the screen changes.

The same flow must be clear on phone, tablet and desktop, with touch, mouse or keyboard. During design we check order, focus, contrast and long text.

  • Mobile hierarchy
  • Navigation
  • Forms
  • Touch
  • Keyboard
  • Focus
  • Contrast
  • Readable text
  • Zoom
  • Long content
  • Different languages

Visual design alone does not guarantee full accessibility. The result also depends on implementation and testing.

See Responsive Design

INTERACTIVE PROTOTYPE

Try the flow before implementation.

We link the main screens into a prototype that demonstrates navigation and selected interactions. This helps discussion and surfaces unclear points before development.

Clickable prototype · sends no data

Atelier Linea

Spaces that feel like home.

Interior design for homes and offices.

  1. Home
  2. Menu
  3. Services
  4. Service
  5. Form
  6. Confirmation

The prototype is not a working website and does not process payments or real data. A demonstration does not replace testing a coded system.

USABILITY EVALUATION

We check whether the designed path is understood.

Depending on the project, the evaluation can be an expert review or a test with representative users. They are different methods and we report them separately.

  • Expert review
  • Tests with representative users
  • Defined tasks
  • Observation
  • Post-task interviews
  • Issue documentation
  • Prioritised improvements
Illustrative concept

The design team reviews the prototype against established usability criteria. No participants are involved.

ObservationWherePriorityProposal
“Send” doesn’t say what happens nextFormHighClear label and follow-up text
Two services with similar namesMenuMediumShort description in the menu
The confirmation offers no next stepConfirmationMediumLink to projects

Illustrative example of an expert review of the concept; not a test result.

Compare the expert review with the report structure of a user test.

We don’t invent heatmaps, success rates or participant quotes.

A/B testing in production is a different service: it needs traffic, implementation and a measurement plan.

COMPONENTS AND HANDOFF

An organised project for the implementation team.

Deliverables are set in the agreement and organised so that the development team can follow structure, behaviour and states.

  • Structure
  • Flows
  • Wireframes
  • Approved screens
  • Responsive variants
  • Components
  • States
  • Prototype
  • Assets
  • Interaction notes
  • Open issues

Two different things

  1. 01The project’s component libraryThe components and states this website uses.
  2. 02An organisation-wide design systemRules and governance for several products; a project of its own.

Source files, licences and usage rights are set in the agreement. Coding and publishing are not deliverables of this service.

Handoff · Atelier LineaIllustrative concept

Source file

  • 01 Structure and sitemap
  • 02 Main flows
  • 03 Wireframes
  • 04 UI screens
  • 05 Components and states
  • 06 Prototype

Export materials

  • SVG icons
  • Images by aspect ratio
  • Fonts per licence

Interaction notes

  • — The email error appears after leaving the field.
  • — The confirmation appears only after the request is saved.
  • — Open issue: on-site search, pending a business decision.

PROCESS

From the user’s problemto a designed solution.

The number of screens and review rounds is set in the proposal.

01

Brief and goals

We define the audience, tasks and constraints.

02

Analysis

We review the information and the research included.

03

Structure and flows

We organise the content and the steps.

04

Wireframes

We evaluate the hierarchy and role of each screen.

05

UI and prototype

We design the interface and interactions.

06

Review

We evaluate and improve within the agreed scope.

07

Handoff

We prepare the materials for implementation.

Which flow needs clarity the most?

Discuss your project
A check of the implementation against the design can be offered separately.

WHY ENOR

Clarity in structure. Care in the interface.

In our portfolio we explain ENOR’s actual role and which parts were delivered.

  1. 01Design around real tasks
  2. 02Content and navigation connected
  3. 03Consistent UI
  4. 04Attention to states and exceptions
  5. 05Feedback with approval points
  6. 06Organised handoff

FAQ

Frequently asked questions.

Other services

More solutions for your business needs.

Where are your users struggling?

Tell us about the website, the audience and the actions you want to improve. We’ll define a concrete scope for the UI/UX design.

E.g. which pages, flows or forms cause difficulty and for which audience.

What our clients say

5.0
A
Arben Hoxha, CEO

Sample Logistics Co.

“They translated complex technical concepts into clear decisions for our team.”