Redesigning a Dinosaur

My retrospective on being a part of the design and production phase of the redesign of Germany’s most known tech-savvy editorial brand.

Goal and Setup

Chip Online (CHIP) is the widest-reaching editorial technology portal on the German-speaking Internet. The website has grown over the last years and had no consistent design from one page to another. The interface felt cluttered and was confusing for the user.

I was working as User Experience Designer for CHIP when my manager Kamila Stanitzek asked me to analyze the current flaws and issues of the website. The goal: I should not only come up with recommendations how to improve the existing user flows but as well to execute as a Product Owner with my team on the recommendations. Obvious to say, that I agreed on the mission.

Design Briefing

After working on our research for the redesign of CHIP, we briefed an external design agency with our insights. We had great designers at our company, but certain requirements let us decided to outsource the design solution.

Agency Briefing Wireframes

We selected the agency Demodern GmbH. It was a tough decision because all of them seemed to have a great team that was highly committed to the job. We collected all our deliverables to onboard the agency more in detail. Together with the visual designer Stefan Krovinovic, I guided the agency through the design process. We both had a huge influence on the final design. As final deliverables, we agreed on three screens and a style guide with all the different components.

I created a prototype out of the designs and dived again into user tests based on the last test series. The results, especially the questionnaire performed better in usability and brand awareness, and we knew we were on the right path.

CHIP Redesign Layouts by Demodern GmbH
CHIP Redesign Styleguide by Demodern GmbH

Execution

Know it was time for my newly formed product development team to work on the redesign with real code. As a Product Owner, I was responsible for writing user stories, managing stakeholders and solving technical dependencies to other teams.

Provided with business requirements the team optimized existing templates of the website to fulfill better the monetarization goals as previous versions. I developed responsive representations, and the team tested them with Optimizely in AB-Tests.

Sadly our velocity came to a halt when we stuffed the API with data provided by the CMS the editorial team was using. We underestimated the effort to provide or consolidate the huge amount of exceptions created over the years. So we decided to enable other teams using the redesign components we created. We converted the style guide into brand and interaction documentation while continuing to work on our pages. If you want to read more about that, check out this great article about the redesign of chip product reviews from Moritz Neugebauer.

CHIP Interaction Pattern Library

What I have learned

Switching the focus of the team made a change and became a success for the hole redesign approach. While my team was still struggling with its main tasks and moving slowly forward our roadmap, it released feasible components of the new style guide. I documented the styles and promoted them internally. It made me happy and proud to see other teams — dealing with less technical constraints and dependencies — were moving faster. They released pages of CHIP with the new design that we work on so hard together with all involved people.