Ui/UX Design

Idee & Design is a German design agency specializing in illustration, graphic design, and product design for various consumer products. Being confronted with a website that had lost its visual appeal with the course of time and suffering from user experience issues, a redesign of the website was initiated.


The Idee & Design website redesign was an internal project I was given full responsibility in managing, creative directing, and executing during my time at the agency.


This project aimed to create a modern web appearance that assured simple and straightforward usability while communicating the agency's personality and trustworthiness. I also had the personal goal of developing my knowledge in UI and UX.

Visual Design
UX/UI Design
Adobe Photoshop
Adobe Illustrator
Maik Lachmann

Competitor Research

To get a better understanding of common agency website patterns, modern visual trends, how they communicate with their audience, and what users might expect to find when they visit our page, we kicked off the project by analyzing the websites of a few German design agencies.

Key Findings and Differences
  • Each agency displayed a unique personality and professional branding through their visual identity as well as in the way they communicated with their audience.
  • They repeatedly utilize a call to action throughout their site to remind and motivate their visitors to get in touch with them as well as simplifying the process for them.
  • Their home site is a comprehensive summary of who they are, what they offer, how they do it, and why they are reliable.

Proto Personas

To steer the website into a direction that would not only be visually delightful to watch but also make sure our user's goals would be accomplished, I initiated a stakeholder meeting with the team to discuss key user personas and their wants and needs. As a result, I created two basic proto personas to refer to when making design decisions.

Content Audit

Next, I undertook a content audit of our current website to review what served our users’ goals and could be reused on the redesign, while I also started adding new content. This step helped to outline the extent of the new website and to build a sitemap.

Home Page

Changing the home page into a comprehensive summary of our agency, giving users a quick overview without the need of digging deeper into the site.

Project & Service Section

Moving from a breakdown of our services and projects into several subpages to a holistic project and service section.


Adding a call to action to each site to encourage contacting us.

Remove Blog

Removal of the blog/news page which was fairly outdated and unused.

About Us

Extension of the about us page to add more personality and transparency of who clients and potential coworkers would work with.


Based on the prior steps I created a sitemap inside Illustrator, showcasing how users could navigate through the website and additionally noted down the location of key content segments. This helped to communicate the website’s structure to the team stakeholders, getting their approval, and served as a foundation to design the wireframes.


With the content audit and sitemap in hand, I planned the visual layout of each page and its content by creating wireframes for desktop and mobile. I first collected a bunch of ideas by sketching different low-fidelity layouts on paper, from which I turned my favorite ones into mid-fidelity wireframes in Photoshop.

Why mobile is important

Idee & Design is very active in visiting national and international trade shows throughout the year, where it acquires a lot of new clients. Taking into account that everyone is on the go and would likely visit our website on a mobile device, the design was required to be mobile-friendly.

Visual and UI Design

Next, I design the key UI components and then create high-fidelity mockups, which I based on the visual identity of the agency.

Challenge / Missing Visual Identity

At this stage, I encountered the problem that the agency didn’t have a visual identity or branding defined. Its identity was more an assembly of different visual styles and ideas that have been created over time. Therefore it lacked consistency and didn’t reflect the agency's personality and values at its best.

Solution / Initiated Branding

Tackling this issue I decided to initiate a small-scale visual branding to ensure that the redesign would communicate the unique personality and values of Idee & Design and furthermore create a consistent foundation that could be applied to other identity applications in the future.

Mood board

I began defining the visual direction by collecting reference and inspirational images into a mood board, building a visual world by illustrating the brand attributes Modern, Creative, Fun and Familiar.


Next, I chose two stylistically representative typefaces and defined a type scale system for desktop and mobile. I picked Fredoka One for its friendly and fun, yet modern characteristic and Open Sans displaying similar qualities while bringing a lot of functionality.


To keep some connection to the visual past of Idee & Design I picked the dominant purple color from the logo and built the new color palette around it. It had a modern and creative vibe and in combination with the slightly orange-yellow, it felt warm enough to come across as familiar and quite fun.


Lastly, the team was discussing a lot about whether to change the logo but ultimately we decided to stick with it. However, I made a bit of adjustment by simplifying it for smaller size legibility, the sake of consistency, and to give it a contemporary touch.


I also created this set of illustrations to visually communicate our content throughout the website. I went for a clean icon-like outline style, which complemented the Fredoka One font very well. In retrospect, I feel a more handmade and illustrative style might have given the identity a less corporate and more fun character and would’ve also created a nice contrast.


Based on the new visual identity I then designed a mockup for every page, showcasing the final look of the website and serving as a reference for the developers.


Lastly, the design went through some iterations for the product section and page.

Initially, I planned to showcase a selection of projects on the home page and dedicate each a case study subpage. On account of the team’s feedback that direction wasn’t ideal to showcase the broad range of work the agency is doing.

We then decided to display product categories and their associated designs instead and also added a search filter tied to the 4 main services the agency provides.

Final Website

Click to visit the live website


My intention was to create a website that would capture the fun and creative vibe of Idee & Design, be easy to browse, and increase the credibility among its audience. My biggest challenge was to juggle the redesign between other client projects while also learning and integrating new tools and processes to make sure the website would meet its goals.

As a result, the redesign turned out as a huge improvement compared to the previous design, most noticeable in its usability and visual design. I also like how the arrangement of the content tells a story when the user explores the personality and capabilities of the agency on the home page.

When I started working on the project I just got to know Adobe XD and from the agency’s team, nobody was familiar with any prototyping software, which is why I decided to use Photoshop. Besides the choice of software, I made a few learnings I would apply moving forward.

  • Involve developers early on to consider their insights and see what is technically feasible.
  • Don’t try to solve everything by yourself and shy back from asking other designers for their opinion, feedback, and help whenever a problem comes up.
  • Schedule regular feedback sessions to assure the project progress stays on track.
  • Dedicate more time to discovering the problem, defining project goals, and conducting user research as they are crucial to the outcome and success of the project.

Let's work together

Did you like this project?
I'd love to hear from you! Hit the button below and contact me.

get in touch
Back to case studies