Step by step to the optimal web design

The design process at valantic

At valantic, design means more than the pure visual creation of digital applications, products or campaigns. In the words of Steve Jobs, “Design is not just how something looks and feels. Design is how it works.” And, we would add – IF it works perfectly.

valantic employees in a meeting in Langenfeld
Image from a valantic CX workshop: A person is sticking Post-its on a poster.

The inside scoop: our user-centered approach

also takes courage to explore new creative paths and realize ideas off the beaten track. That’s why – in the conception, design and implementation of our design projects – we rely on the user-centered approach (UCA).

We have combined elements from user-centered design and “design thinking” with an agile way of working. The result is an innovative project methodology. It allows us to implement projects at the highest creative level in an effective and goal-oriented manner.

The user-centered approach consists of five consecutive phases

Envision

Development of project goals and KPIs

Discover

User research and the customer journey

Create

The foundation for success

Deliver

User experience and technology in perfect harmony

Grow

The journey continues

Compared to other methods, the strict separation and the sequential nature of the phases may seem unusual at first. However, the separation of problem space (Envision, Discover) and solution space (Create, Deliver) is essential for the development of innovative concepts.

Photo shot over the shoulder of a valantic CX employee: you can see that he is working on the design of the valantic CX website.

1. Envision – Development of project goals and KPIs

During the Envision phase, we work with you to identify a detailed vision of your project and derive specific project goals. These are condensed into a set of measurable success factors and target figures (KPIs) and arranged in the “KPI-doscope”. Similar to a kaleidoscope, the KPI-doscope visualizes the structural design of the performance indicators and illustrates core and secondary indicators in a diagram. This creates a blueprint with measurable targets for future success.

Photo of two colleagues, a man and a woman, having an after-work beer in the valantic CX office.

2. Discover – User research and the customer journey

The foundation for the conception and design of successful projects is always a comprehensive understanding of user needs. Only those who know their users, their specific tasks, wishes and pain points can develop customized solutions and create an excellent user experience. In the Discover phase, we thus focus heavily on the users’ characteristics, tasks and typical contexts of use.

Interviews with test subjects from all relevant user groups provide authentic insights into user behavior. We use the information gained in the interviews to prioritize user groups and derive personas from them. As representatives of the target groups, personas help establish a clear and tangible picture of the goals, needs, challenges and wishes of the users. Working with personas is a proven and helpful tool for keeping users at the center of all efforts throughout the development process.

Based on the personas, the future journeys of all user groups are outlined in the form of a customer journey map. We show how users navigate through the pages and make visible what users experience and how they evaluate this experience. This enables us to identify weaknesses and pain points in the process and derive concrete measures to resolve them.

Photo of three colleagues standing at a standing desk and working on a customer experience strategy.

3. Create – The foundation for success

Equipped with the findings from the Discover phase, we now enter the solution space: the Create phase. In a user story mapping workshop, requirements are identified together with the users and stakeholders and arranged in the form of a user story map. This gives the project team a comprehensive overview of all areas and aspects of the project. Organized chronologically and thematically, the story map is also used to establish the MVP (Minimum Viable Product) and further releases.

Wireframes for all page types

The next step is to develop an individual information architecture. In a comprehensive set of wireframes, we map page types and user flows in schematic representations of the user interface. Wireframes are the optimal foundation for discussion due to their fast editability. They also act as a conceptual foundation for the design templates. In addition, wireframes facilitate early testing and optimization of the respective solution approaches.

Everything comes together in the design concept

Taking into account all the findings gathered so far, we develop a design concept that is individually tailored to your customers’ needs. The scope ranges from the development of a user interface design for specific page types to the complete redesign of the site’s visual appearance.

The detailed development of the user interface design is based on design templates for all page types used. With the help of clickable prototypes, we test the solution approaches and thus ensure quick adaptation if necessary. The development of the design templates is strictly component-based. Granular UI elements are combined into functional units (components and modules) and organized in a modular design system.

Photo of a computer keyboard & mouse

4. Deliver – User experience and technology in perfect harmony

In addition to a first-class user experience, ensuring unrestricted usability is an implicit part of the design process. Our interdisciplinary design and development team collaborates closely to implement responsive applications and user interfaces based on state-of-the-art technologies.

The implementation takes place in a dual-track process: In the initial stage, we develop screen designs that are implemented in the following stage and tested in the third stage. This keeps the design effort required prior to the start of implementation to a minimum, which in turn ensures an earlier start of the agile implementation process. The interdisciplinary team is also able to immediately incorporate new input and concrete findings (e.g., from user tests).

Design and implementation thus take place in parallel and in the same team, which shortens communication paths and lead times for design activities.

5. Grow – The journey continues

With the final go-live, the foundation for a golden future has been laid. However, the project remains under continuous further development. User experience tests allow the project team to identify opportunities for improvement and uncover untapped potential. That’s how we ensure user acceptance in the long term.

Sounds good? It did to a lot of our customers as well. If you’re curious, you can read more about them in our success stories …

coop-city logo white
Image of a smartphone that has the Coop City home page open, SAP Commerce.
  • E-Commerce
  • SAP Services
  • SAP

Coop City relies on SAP Commerce for its online store

Coop City relies on SAP Commerce for its online store
steiermark Logo white
Photo of couple having a picnic in nature.
  • CMS
  • Pimcore

New website for Styria and its holiday regions

New website for Styria and its holiday regions
logo simplon white
Picture of an elderly gentleman in a bicycle repair shop shouldering a SIMPON bicycle.
  • E-Commerce
  • CMS
  • Social media marketing
  • Pimcore

All-round support for SIMPLON

All-round support for SIMPLON
walter bösch logo white
Photo of a modern house in the evening.
  • E-Commerce
  • CMS
  • Pimcore

A state-of-the-art online presence for bösch

A state-of-the-art online presence for bösch

Do you appreciate a web design that is perfectly tailored to your needs?

Just give us a call! Or tell us what you have in mind

Andreas Haas - Manager New Business at valantic CX

Andreas Haas

"Guten Tag" from Mannheim

+49 152 2265 0514

Portrait of Martin Schmutz, valantic CX, Customer Experience

Martin Schmutz

“Grüezi” from St. Gallen

+41 71 313 55 70

Portrait von Nemanja Vojinovic, valantic CX

Nemanja Vojinovic

"Servus" from Wien

+43 664 5355 237