Design & UX

UX Design Agency in Stockholm - Frontend Development and Digital Design That Converts

We integrate design throughout product development - from early-stage research to finished code in production.

UX design and frontend development for digital products

UX Research and Prototypes

Assumptions about user behaviour are expensive to get wrong. Early research and prototyping are the cheapest way to validate that you are building the right thing, before investing months in implementation.

Our UX research and prototyping process includes:

User interviews and observation studies - structured conversations with your actual or prospective users to identify genuine needs, pain points, and mental models.
Competitive analysis - we map how competitors and category leaders handle similar use cases and identify opportunities for differentiation.
Wireframes and interactive prototypes - we build clickable prototypes in Figma that can be tested with real users before a single line of code is written. Rapid iteration based on feedback keeps the cost of design changes low.
Usability testing - moderated and unmoderated tests with representative users. We document insights and translate them into concrete design recommendations with clear prioritisation.
Development handover - we deliver design specifications, annotated Figma files, and asset descriptions that make it straightforward for frontend developers to implement correctly without having to guess the designer's intent.

UI Kits and Component Libraries

A scalable digital product needs a design system, not a document. Without a structured component library, inconsistency emerges quickly - buttons look slightly different across pages, spacing is inconsistent, and every new feature requires reinventing the wheel.

Shapp builds UI kits and component libraries that:

Are designed in Figma with auto layout, component variants, and a clear token system for colours, typography, and spacing. This makes it straightforward to maintain consistency and roll out global design updates quickly.
Are implemented as code components in React, Vue, or Svelte depending on your technical stack. The design system does not only exist in the design tool - it lives in the code and serves as the single source of truth for all visual expression.
Include accessibility (WCAG 2.1 AA) as standard. Contrast ratios, focus management, ARIA labels, and keyboard navigation are not afterthoughts - they are baked into the components from the start.
Are documented in Storybook or a similar tool, giving all teams - design, frontend, and content - a shared reference library.

A well-built component library pays for itself quickly in the form of faster frontend development, fewer bugs, and lower maintenance costs. It is an investment in your product's scalability, not a luxury.

Frontend Development

Design only creates value when it is in production. Our frontend development aims to take design from Figma to a responsive, fast, and accessible implementation that connects seamlessly to your backend and APIs.

We work with modern frameworks and methods:

React and Next.js - for component-based applications where performance, SEO, and server-side rendering are priorities.
Vue and Nuxt - a well-proven alternative with high developer productivity and a strong community, suited to teams that prefer Vue's API style.
WordPress and Divi - for clients who need a CMS that non-technical editors can manage. We implement custom themes and blocks with performance and SEO in focus.
Performance and Core Web Vitals - we optimise for Google Lighthouse scores, Core Web Vitals, and page load times. These directly affect your organic rankings and conversion rates.

Frontend development always happens in close coordination with backend teams and API integrations. Learn more about how we handle API integrations and system integration in close collaboration with design work.

Our Process

Our design process is iterative and adapted to the project phase - not a fixed sequence of steps to be followed regardless of context:

Brief and discovery - we understand the business objectives, target audience, and technical constraints. We ask the uncomfortable questions early.
Research and analysis - user interviews, competitive analysis, and review of existing data and analytics where available.
Concept development and wireframes - we explore several directions before committing to a solution. Early wireframes are cheap to challenge.
High-fidelity design and prototype - complete visual design with interactive prototypes ready for user testing and client sign-off.
Implementation - frontend development closely tied to the design specification, with continuous design QA throughout the implementation phase.
Launch and follow-up - we follow up with analytics reviews and iterations based on real user behaviour. See our pricing page for ongoing engagement options.

Frequently asked questions about design & UX

Can you take over design and frontend for an existing project?

Yes, that is common. We start with a review of existing code, design files, and analytics to understand the current state. We then recommend a prioritised improvement plan. We can progressively bring design into a component library without needing to rewrite everything at once.

Do you only work on new products or also on existing websites?

Both. We are equally comfortable with redesigns and optimisation of existing digital products as with building from scratch. A CRO (conversion rate optimisation) review of an existing site often delivers rapid ROI with a limited investment.

What does a design handover to an external developer include?

We deliver annotated Figma files with spacing, typography, and colour specifications, exported assets in the correct format and resolution, a component catalogue, and documentation of interaction patterns. The goal is that an external frontend developer can implement without having to guess.

How do you handle accessibility in design projects?

We design to WCAG 2.1 AA as a baseline. That means a contrast ratio of at least 4.5:1 for body text, clear focus indicators, semantic HTML in the implementation, and ARIA labels on interactive elements. Accessibility is not a checklist we tick off - it is a way of designing better products for all users.