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.
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.
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.
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.
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.
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.
Removal of the blog/news page which was fairly outdated and unused.
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.
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.
Next, I design the key UI components and then create high-fidelity mockups, which I based on the visual identity of the agency.
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.
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.
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.
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.
Did you like this project?
I'd love to hear from you! Hit the button below and contact me.
