Since the rise of hybrid working post-pandemic, managing office spaces efficiently has become crucial for businesses worldwide. A platform enabling employees to book workspaces and meeting rooms, recognized the need for a modern redesign of its web application, complemented by a design system. The main focus was to enhance the user experience, streamline design-to-development workflows, and address customer concerns about functionality and usability.
Design challenge
How might we create a modern web application with an intuitive user experience and a design system that streamlines the design-development workflow?
My mission
As the in-house UX/UI Designer, I led the redesign of the Officebooking web app and built its design system.
Design goals
• Create a modern, user-friendly interface
• Establish a scalable design system
• Ensure a consistent and intuitive user experience across the web app.
Target audience
• End-users: Office employees booking workspaces and meeting rooms.
• Internal stakeholders: Office managers and administrators overseeing bookings and office logistics.
Outcome
Officebooking’s redesigned web application and design system that improved the user experience and design-to-development collaboration.
Design systems are essential for creating a consistent, scalable, and maintainable product. By having a shared language between design and development, a design system reduces work, accelerates product development, and gives a more seamless, consistent user experience. For Officebooking, introducing a design system was essential to modernizing its platform and improving team efficiency.
To address our design goals and discover insights, I selected specific methods:
• Stakeholder interviews: Collaborated with the Customer Success team, clients and users to identify areas for improvement. This helped to map key pain points directly from the users’ perspective.
• Usability testing: Conducted usability tests on the existing platform to understand user pain points. This method ensured we validated the user concerns.
• Competitor analysis: Analyzed industry competitors to benchmark design standards and spot innovation opportunities. This provided a broader view of best practices and market expectations.
For the redesign, it was essential to discover the current state to set priorities. To prioritize more efficiently, research was conducted. These were the most important insights.
Users found the platform visually outdated, which reduced trust and ease of use. They had to deal with a redundant amount of information and options in the screens where they had to find a workplace, which significantly reduced engagement. This insight highlighted the users' needs for a clean, modern, simplified view with essential information, especially in views where they needed to find their workplace.
Booking processes were inconvenient and not intuitive, which significantly slowed the process down. This being the key feature of the platform, making these flows more efficient became a top priority to improve task completion rates and reduce user frustration.
Inconsistent design patterns, especially around info messages, success and error states, led to confusion among users. This emphasized the importance of creating a design system with reusable components, to maintain a cohesive look and feel.
I focused on structuring the platform for usability and scalability, while also taking technical constraints and possibilities into account:
• Information architecture: To get a good understanding of the technical constraints and possibilities, we mapped the core functionalities with backend development. We simplified navigation where possible and restructured site content. This ensured key booking features were easy to find.
• Design system structure sessions: I consistently held feedback sessions with development about the information structure and documentation. This allowed for faster development and easier future updates of the design system.
I created wireframes that focused on simplifying key booking flows:
Wireframe design notes
• Prioritized improving core booking journeys, ensuring that high-impact tasks were streamlined.
• Streamlined navigation for easy access to frequently used features.
• Applied accessibility principles to create an inclusive and user-friendly experience.
To ensure the new design met both business and user needs, I divided testing in two phases:
• Internal stakeholder testing: I tested the prototype with the Customer Success team on interaction. Their expertise and customer insights made sure the design would tackle the most common platform issues from the business perspective.
• External end-user testing: For the next round, I tested the prototype on usability with external end-users. I targeted typical office employees who would book workspaces through the platform.
Follow-up actions
The following adjustments were made based on the feedback:
• Improved dashboard customization: Although full customization wasn't feasible within this project timeline, we expanded configuration options.
• Refined booking flow: The booking process was further streamlined by reducing steps and enhancing clarity where needed.
These adjustments were implemented during the final design iteration of these specific features before handoff to development.
A redesigned web application and design system improved user experience and design-to-development collaboration. We also integrated UX metrics tools, to track user behavior and identify additional improvement opportunities.
• User satisfaction: 85% of testers found the new interface easier to use.
• Booking efficiency: Task completion times of the booking flow improved by 40%.
• Development efficiency: Development time decreased due to reusable components, confirming the efficiency of the design system.
If we had additional time and resources, I would:
•Refine other features more functionality-wise, like visitor registration, for now this wasn't in scope due to technical constraints
• Expand users' individual options and settings, so they can customize/tailor the platform more to based on their role and needs.
Reflecting on this project, I gained valuable insights into design systems and cross-functional collaboration. These are the most important lessons learned:
1. Collaboration with development: Working closely with developers early on ensured technical feasibility and smooth implementation. Initially, I hesitated to seek continuous feedback from the Creative Developer, but this collaboration proved to be essential.
2. Design system workflow: Developing a design system alongside a redesign can be complex. Thinking in components, is almost like assembling Lego bricks, it helped to maintain a coherent and scalable design approach. This was difficult at first, as designers we often like to think in the bigger picture when solving problems, which could sometimes clash with the components needed for a design system. In this project I got more skilled at working in the design system workflow at the same time as solving the bigger picture, by doing it step-by-step and making sure you're redesigning in a structured way.
3. Iterative approach: I'm going to be frank: managing a large-scale redesign was challenging. In hindsight, rolling out changes incrementally would have improved the process. Documenting and structuring work thoroughly helped to maintain steady progress.
These lessons continue to influence my approach, and learned me to balance the often "bigger-picture" design thinking with the technicality on component-level that a design system needs.
Workspace management
A complete makeover and scalable design system for a workspace management tool.
I'm available for Senior/lead roles, collaborations and discussions with peers.
Let's have a chat to see if we're a great fit!