The final solution: A dual-pane sidebar
Klever, Tokyo Techies’ in-house project management platform, hosts Wiki, Projects, and ToDo for collaboration, project management, and task tracking. It’s our central hub for sprints, assignments, notes, and technical guides.
In 2019, Tokyo Techies tried selling Klever to other companies, but it fell short in speed, features, and user experience.
With just four engineers and no designers, the team faced a tight four-month deadline to rebuild it for further investment. Hearing the challenge, I convinced the project lead to let me join. After all, we shared the same long-term vision and I brought my passion for designing productivity platforms.
After successfully persuading stakeholders and investors to allocate me time to conduct user research, I designed a complete navigation overhaul that improved user productivity, platform efficiency, and behavior standardization.
45% of users' daily frustrations pointed toward Klever's navigation structure.
Each app—Wiki, ToDo, and Project—had separate home pages and unique sidebar items, creating a disjointed experience and making platform familiarity harder to develop.
To confirm Klever’s major pain points, I conducted a speedy 2-week research project that included a screening survey, interviews, and usability tests with Project Managers in the company.
A centralized homepage, persistent universal sidebar, and an accessible “Bookmarks” section would improve user efficiency, reduce context-switching, and streamline project and document management.
Along with a new navigation structure, the sidebar had to contain a organization-switcher and support workspaces—groups within an organization that contains documents or tasks, depending on the app. Stakeholders also wanted to see less blue.
Inspired by Figma’s sidebar navigation, I designed a multi-level sidebar with a static primary navigation and a dynamic, app-specific section.
Each app having a spot in the sidebar reduced navigation time, and contributed toward a universally consistent sidebar.
A single sidebar limited future scalability, occupied the space intended for Bookmarks, and continued to confuse users since it was not an entirely consistent sidebar.
This second and final iteration features a dual-pane sidebar, inspired by Apple Notes and Apple Mail MacOS apps.
This separation allowed the primary sidebar to remain fully focused on core navigation while the secondary sidebar could adapt to specific needs for each app, such as document trees, settings, and notifications.
Here, users experienced less clutter and more intuitive navigation across different apps. It also ensured a consistent, scalable structure for the future.
The secondary sidebar provided space for new features while remaining a consistent, reliable, and familiar element.
For example, the notifications panel allowed users to stay updated without disrupting their workflow, keeping alerts accessible while maintaining a clean and organized main workspace.
User feedback confirmed the impact of the redesign—many found the new sidebar structure more intuitive, with clearer separation between navigation and workspace-specific tools.
They appreciated the improved organization and flexibility, noting that it made managing projects and documents more efficient. Overall, the redesign led to a more structured and user-friendly experience.
I've never learned so much more in a project, and I had a great time. For Kotae, I am the primary person-in-charge of our Figma environment, so I learned a lot about design system management, branch and iterative cycles, change-logs and documentation, and new UI design techniques.
Our team only consisted of six people, and I can't believe how much we were able to accomplish in such little time. To have demonstrated every bit of our work in this webpage would have lengthened it by at least 10-fold. This project wouldn't have been executed without my amazing project manager, Nicha, and our talented tech-lead, Duy.