Designing clarity for Keeyu
Keeyu’s product brings together brands, channels and integrations, and it was not always clear how the pieces fit together. We worked with their product and engineering team to make it easier to navigate and easier to build on.
Keeyu helps retailers manage the work that happens after an order is placed.
Its product brings together brands, channels and integrations. That setup affects what customers can do across the platform, but it was not always clear how the pieces fit together.
I worked with Keeyu as part of Refract’s product design team. We worked with Keeyu’s product and engineering team to make the product easier to navigate and easier to build on. The focus was on clearer structure, better guidance and reusable patterns across the platform.
This case study covers how we worked.
1. Start with the real product
We began in the staging environment.
Figma showed the existing screens and components, but the staging product showed how the system behaved in practice. We could move through the customer journey, understand the underlying setup logic, and see how internal configuration affected what a customer eventually saw.
That work changed the way we approached the project.
The product had a clear internal structure, but the interface did not always make that structure easy to understand. Customers could have multiple brands, channels, integrations, and operational workflows running at the same time. The design needed to support that complexity while helping customers stay oriented.
Rather than treating each new screen as a separate task, we used the product’s underlying logic as a foundation for every design decision.
2. Work in close loops
The project moved through weekly working sessions with Keeyu’s team.
These sessions gave us a consistent way to share work early, test ideas against the product, gather feedback from the people closest to the technical constraints, and make decisions while the context was still fresh.
The rhythm was simple:
- Understand the current product behaviour and the problem to solve.
- Design and share a direction.
- Review it with product and engineering.
- Check the work in staging.
- Refine the design and move into the next problem.
This approach kept the work grounded. It also reduced the gap between a design that looked good in a file and an experience that worked inside the product.
3. Build a system before building more screens
The engagement covered several connected areas of Keeyu’s platform. We needed a design language that could hold together as the product grew.
We developed reusable patterns for cards, guided actions, side panels, progress states, chat interactions, document views, and workflow visualisation. These patterns gave the product a shared visual and interaction language, even when customers were completing very different tasks.
That consistency had a practical impact.
Customers did not need to learn a completely new interface when moving between parts of the product. The team also had clearer patterns to build from, review, and extend. Design decisions could carry forward instead of being recreated feature by feature.
5. Design guidance into the product
One of the more important principles in the project was making help specific to the moment a customer needed it.
Instead of treating guidance as separate documentation or a generic chat widget, we designed it to sit alongside the customer’s work. The product could direct someone towards the relevant area of the interface, helping connect a question with the task it related to.
This required careful visual work. Guidance needed to feel like a natural part of Keeyu rather than an extra layer added after the core product was designed.
We refined the surrounding interface patterns, buttons, highlights, tooltips, panel behaviour, and content states, so the experience felt consistent with the rest of the platform.
6. Use the design system as a working tool
The design system became more valuable as the project continued.
It helped us make decisions quickly, maintain consistency across new work, and give engineering a clearer foundation for implementation. We worked with Keeyu’s engineers to develop patterns that could be used as components, rather than delivering isolated static screens.
That made the system useful beyond the immediate engagement. It gave the team a stronger starting point for future product work and helped maintain quality as new requirements emerged.
7. Keep refining in context
The strongest decisions came from seeing designs in context.
Some ideas needed to change once we reviewed them in staging. Others became clearer through feedback from Keeyu’s team. Small interface details often carried meaningful consequences: whether a customer retained context while changing settings, whether an optional path looked mandatory, or whether a dense dashboard still felt readable.
The work improved through those iterations.
We did not rely on a long specification to predict every outcome upfront. We used regular reviews and product feedback to keep the design aligned with the real product as it developed.
8. The outcome
We helped Keeyu establish a clearer and more cohesive product experience across a growing platform.
The work created stronger structure across the product, reusable patterns for the team to build with, and a more direct connection between the product’s internal logic and the customer experience.
For Refract, the project reinforced how we like to work: closely embedded with a product team, designing from the real system, and building the foundations that make a product easier to grow.
Written on by