Hypercode Blog, Projects, Page 2

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.

• Link to a studio: app.walzwerk.de/#/?atelier=27
• Link to a specific tenant in a shared studio: app.walzwerk.de/#/?atelier=42&mieter=Förderverein+Rittergut+Orr+e.V.

These links are generated as you use the app and can be copied or shared directly from the browser. Tenants will also be able to embed the site map on their own websites at a later date.

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.

KMS TEAM’s concept and design called for a highly modular CMS, a dynamic frontend and strong performance. Their company pages needed the same freedom of expression as the case studies showcasing their clients and work. Markus Sauer, Digital Design Director at KMS TEAM, explains:

The site’s performance with such extensive content and its dynamic overall feel were particularly important to us. Precise implementation is essential to achieving that.

Working closely with KMS TEAM, we chose to build the editorial system on Craft CMS. It lets editors combine a wide range of configurable content elements, giving them the flexibility they need to create individual pages.

The frontend is a server-side rendered single-page application built with Vue.js and Nuxt.js, connected to the CMS via GraphQL. It also integrates video and recruitment services. Varied content, animations and interactions across different media invite visitors to explore KMS TEAM’s portfolio — something we enjoyed doing throughout development and afterwards. Markus Sauer:

We’re delighted to have a partner in Hypercode who immediately understood our conceptual, technical and design requirements and met them so well. We really enjoyed working together and exchanging ideas throughout the project.

Thank you, Markus — the feeling is mutual!

Take a closer look at the project in our new KMS TEAM case study, or explore kms-team.com for yourself.