Hypercode Blog, Development, Page 2

The new hypercode.de grew out of a question: how can we better show who we are and what we do? A lot has changed. Hypercode has grown, our portfolio has evolved and we’ve raised our expectations of how we present ourselves¹. The new website reflects that. It speaks more directly, shows more of our work and makes it clearer what we do for our clients.

Show, don't tell

We’ve built on the approach of the previous site. Hypercode is a Digital Product Studio with high standards, and we want that to come across from the first moment. More contrast, stronger accents and a visual language drawn from our work help make that happen. Less explaining, more showing.

That’s why the new hypercode.de features much more video, taken directly from our projects rather than stock libraries. New case studies show how those projects took shape, from strategy and planning to development. From the homepage showreel to individual project screencasts, the website gives you a closer look at our work than ever.

Spotlight: Our Services

Our redesigned service pages are central to the new site structure. They explain how we work and what we build. We’ve grouped them into What We Do, covering our expertise, and What We Create, showing the products and outcomes we deliver with our clients:

What We Do

• Product Strategy & Architecture — We help shape digital strategies and product ideas, advise on technology and architecture, and examine related business processes to identify solutions early.
• UX/UI Design — We create engaging user experiences with a design language tailored to each client. Working closely with development lets us carry complex design requirements through to the finished product.
• Software & Web Development — We build fast, intuitive mobile apps, web-apps, configurators, websites and web services that people enjoy using.

What We Create

• Mobile Apps for iOS & Android — We build mobile apps that work well across platforms, combining reliable engineering, clear design and integration with the systems they need. Our work spans hybrid architectures and native device features.
• Corporate Websites — We design and build custom websites that make complex content easy to navigate, communicate technical expertise and engage visitors through fast performance and thoughtful interactions.
• Web-Apps & Product Configurators — Interactive tools that help people make decisions and speed up processes. Modular and scalable, they fit into existing systems and business models.
• Custom Software — When off-the-shelf tools fall short, we build software around your requirements, with modular architecture, room to scale and a clear focus on maintainability and efficiency.

You’ll also find the occasional Easter egg. We think a business website should be fun, too. 🐣 Enjoy exploring — and, as always, we’d love your feedback and suggestions!

As a Digital Product Studio working mainly on client projects, we rely on efficient resource planning, clear project communication and time tracking that fits into the flow of work.

After what felt like an endless search for the right project management tool, we discovered awork in summer 2023. The Hamburg team’s software brought together what we needed: communication, planning and time tracking in one platform. It’s well designed, actively developed and, thanks to open APIs and good documentation, gives us room to build our own extensions.

We’re also big fans of the app launcher Raycast, so the next step felt obvious: an extension to search awork, open projects and tasks, and log time using keyboard shortcuts. We recommend Hyperkey+A. It keeps awork within reach wherever we’re working: checking a task while designing in Figma, logging time after a successful pull request or finding a project’s email address to forward a message. For that last one, try ⌃E.

We’ve been using the extension internally for several months, and it’s become part of our daily routine. After a positive conversation with the awork team, we decided to release it for free in the Raycast Store, so other teams can simplify their workflows too. To get started, you just need to set up an API client in awork’s user interface. The steps are covered in this awork support guide.

👉 Learn more
Explore the features and setup instructions on our project page:
→ hypercode.de/en/projects/awork-raycast/

🚀 Tell us what you think
We’d love your feedback, feature requests or even a quick thumbs-up. Find us on LinkedIn or Instagram, or send us an email. ☺️

WALZWERK is home to businesses in digital technology, e-commerce and education, and a popular destination for culture and leisure in the Cologne area. The 35,000-square-meter site in western Pulheim welcomes business visitors and members of the public every day. Alongside companies and studios, it houses a theater, swimming pool, restaurants, a church and artists’ workshops. With so much spread across the site, finding your way can be a challenge.

Since December, the WALZWERK app at app.walzwerk.de has been helping visitors get around:

• Interactive site map and tenant search — Find tenants and studios quickly, see them marked on the map and follow a live route from your GPS location.
• Real-time GPS navigation — Directions update on the map as you move towards your destination. If GPS is unavailable, the route starts at the main entrance road or the sign whose QR code you scanned.
• No installation needed — The app runs directly in the browser. Signs with QR codes around the site help visitors find it.
• Mobile and desktop — It works on smartphones, tablets and desktop computers, so directions can be viewed and shared anywhere, including in an email signature.

Protecting visitors’ data was a priority. GPS location is used only for navigation and stays on the visitor’s device. It is neither stored nor processed for any other purpose.

The WALZWERK app connects directly to the site’s digital tenant directory, keeping information up to date and applying changes automatically.

From channels and chats to surveys and an employee directory, Quiply helps people connect and share information at work. The app can be adapted to the needs of different industries, including manufacturing, healthcare, retail, hospitality and municipal businesses.

Quiply’s breadth of features was also the biggest challenge for the website’s UX/UI design and development. Each feature needed to be explained in a way that made sense to its audience. The requirements for the relaunch soon became clear: use interaction, video and audio to show what the app can do, and give editors flexible page-building tools to present the different use cases with variety.

Quiply had already supplied a new corporate identity, visual design and website design. We developed these across screen sizes, content elements and subpages, documented the page types and components in a module guide, and turned the visual component library into an interactive pattern library. This formed the basis of a Craft CMS setup that brings together flexible page layouts, reusable frontend components and HubSpot content. You’ll find more examples of flexible websites that combine a strong brand identity with demanding technical requirements in our Corporate Websites section.

Discover our work for Quiply and learn more about the employee app on the Quiply website.