User navigation that misses a beat

[Teenage Engineering]

An audit of navigation challenges and user pain points across the product pages to create a more seamless and user-friendly experience for new customers.

  • Conceptual revamp of the Teenage Engineering website designed to better connect with new users. While the brand creates beautifully crafted, user-friendly instruments and tech, the website felt confusing and difficult to navigate. My redesign fine-tunes the user journey, creating an experience that feels as seamless and creative as the products themselves.

  • This website audit project focused on simplifying the digital experience through an updated UI design system, while preserving Teenage Engineering’s playful and experimental identity to create a more intuitive and accessible journey for both new and existing users.

  • By simplifying navigation and product discovery, the concept better aligns with Teenage Engineering’s innovative, user-friendly brand while encouraging easier exploration and engagement.

The current navigation relies heavily on large icons and minimal listings, which, while visually distinctive, make exploring the site difficult. There is also inconsistency in both functionality and visual design across different screen sizes.

The mobile experience, in particular, feels compromised by the navigation structure and would benefit from further refinement to improve usability and overall cohesion.

To support the UX improvements, the brand’s UI was refined with rounded call-to-actions, clear product coding, and subtle nut-and-bolt iconography inspired by the geometric design of the products. These updates improve hierarchy, visibility, and functionality across the website’s design system.

The website navigation was simplified through the introduction of a sticky navigation bar, a full-width dropdown menu, and new product iconography to better categorise items. These changes follow UX best practices, creating a more consistent and intuitive navigation experience across all screen sizes, including mobile devices.

The landing page was redesigned using a portfolio-style grid to better showcase product imagery, with hover overlays revealing item codes for added context. The existing UI design system was also refined to align with the new navigation and site structure, using Teenage Engineering’s distinctive brand colours to balance functionality with visual appeal.

The current site separates product details and purchasing into different pages, creating unnecessary and hidden navigation. For example, users must first view a product page and then navigate again to access pricing and purchase options.

This was simplified by combining both buttons into a single landing page, allowing users to view the product, pricing, and a clear call-to-action in one seamless experience.

With the addition of an ‘Explore’ button alongside ‘Buy’ on the same page, users can access detailed product information with a single click. An accordion-style interaction reveals the details directly beneath the product, while a close button allows users to collapse the section and continue browsing within the same category.

View more work

[what others say]

  • “I hired Derek on a freelance basis as part of a team handling a large amount of artwork, production and retouching. I was immediately impressed by Derek’s skill, speed and flexibility.

    He got on really well with everyone involved in the process and remained perfectly calm even when the pressure was intense. Derek brought a good eye and equally good ideas and techniques to the work. He was always prepared to take on new challenges and demonstrated an ability to pick things up very swiftly.”

    Robert Smith, Managing & Creative Director - Jog

  • “It was great working with Derek! He helped us in a time of need and would definitely use him again in the future.

    Overall, we were very happy with his professionalism and the quality of his work. Highly recommended!”

    Vasso Georgiou, Marketing Manager - Marketing Town

  • “Derek was a rock in a department that was constantly under pressure to deliver. The work rarely needed a second pass and if it did it was due to the quality of the brief, not the work.

    I would gladly work with Derek again. Not only was the work of consistent quality, but he was also a good team player. He was great to have around.”

    Phil Woolgrove, Web Content Manager - T M LEWIN

  • “Derek is an awesome designer! What more can I say? Always exceeding our expectations for the design team, a great collaborator, very technical and hard working to meet hard deadlines.”

    Nichole Johnson, Director - Rusty Rabbit

  • “Derek is a brilliant designer who created my company website.

    I knew very little about web designing, so he was in control of the whole process. From the initial concept design to the up-and-running of the site, everything went extremely smoothly. He is a good communicator and explained things in a simple and clear way, keeping me well-informed throughout the whole process.”

    Lina Zhang, Director - Sino Communications

  • “You will find Derek an extraordinarily pro-active and knowledgeable creative designer. He has the ability to understand the brief and deliver it with precision and accuracy in every case.

    He was also a valuable team member willing to go that extra mile whilst under pressure but at the same time very committed to the project and people he was working with.”

    Michelle Habgood, FL Senior Traffic Manager

  • “Derek was great to work with, delivered exactly what was asked of him and was adaptable and proactive.”

    Ashley Lawrence, Comms Lead – Intuit

  • “I really enjoyed working with Derek on redesigning our company website. In addition to our alignment on the creative, he was incredibly strong on project management, kept everything moving on schedule, and set up great tools that made collaborating remotely feel seamless. I'm looking forward to working together again soon!”

    Greg Seltzer, GMM, Music producer manager and jazz guitar nerd

  • “Derek has been so helpful since I started up independently. He set up my website, arranged domain hosting (talked me though it - I have no idea about this stuff) and assisted with Mailchimp plus other marketing material. I'm really pleased with the website design and navigation. I would 100% recommend him!”

    Morgan Allen FRICS - Managing Director @ Morgan Allen Property Surveyors | Valuation, Agency, Consultancy

[contact]

What are you building next?
Let’s get in touch.

Schedule a call
Linkedin