SaaS B2B/B2C Booking System Design

Design System for booking software

Year
2022
Tools
Figma, Webflow
Responsibilities
System Design/ Website Building
Design System for booking software

Project Background

Webooking is a booking software developed internally within Ansen Innovation. It is primarily designed for small businesses that are not yet familiar with online reservation systems and wish to reduce booking costs. The main reservation services include beauty and hair appointments, as well as nail services.

Webooking aims to create a simple booking experience. Based on our market research and analysis of commonly used booking software by local businesses, we aspire for the software to have a light, direct, and refreshing interface design language to attract the attention of users.

In the context of an existing old Design System, I have joined the team. The team leader has expressed the desire for me to independently create a new Design System that conveys a completely different visual experience from the previous design

Timeline

This research-focused project, with a team comprising two business analysts for on-site research and competitor analysis, a project manager, and myself as the designer, operates with a flexible timeline. After collaborative discussions and iterations among our four members, we finalised all design documents before coordinating with the development team.

I spent approximately one months redesigning the Design System, which involved modifying existing designs, introducing new design components, reviewing all design component details with the manager, and replacing all major pages with the new design components while organising the Figma documents.

Design System Showcase

As the project has not been formally released yet, I will only present selected content to show some design outcomes.

Website Design

To improve software promotion, we studied SaaS official websites, identified industry-standard methods for showcasing software features, and presented multiple design drafts. (While the old version I designed appears in current search results, the new version's design is not yet live). See below for some design mockups.

Thoughts After Project

  • This project involved not only making changes to the visual design but also discussing potential functional changes. Although I am only showcasing the design assets and web pages, our team spent a lot of time discussing modifications to the user flow and finding ways to simplify the interface's complex functionalities. This process provided me with many opportunities to consider how to arrange and place design elements to create a better user experience.
  • This is my first solo Design System project. I consulted various resources but faced notable inexperience, particularly in collaborating with engineers, resulting in frequent specification revisions. Maintaining design standard consistency was a key focus. Despite struggles and slow progress, this experience deepened my understanding of system design.
  • I realised that I needed to learn and practice more about System Design. Maintaining clean and clear documentation during the design process is also crucial; keeping track of past iterations can sometimes waste a lot of time. Good file organising habits can not only help yourself, but also help other collaborators in the team understand the design context.