As the sole designer, I turned a dense, desktop-era management tool into a clear, responsive web app, built on a design system the whole team could rely on.
This project is under NDA, so I changed the product name and all the data. The dashboard and mobile views are concepts that haven’t shipped.
The platform helps gyms and fitness studios run their entire business: members, packages, sales, bookings, staff, finance and progress tracking. Over almost three decades it had grown feature by feature, and the interface had grown with it.
The company decided to move from its desktop software to a modern web version. My job was to rethink the experience end to end: restructure the information architecture, design every module and create a design system for consistent, fast development.
The short version: I grouped a long list of modules into a clear navigation, turned complex tasks like sales into guided flows, replaced empty pages with searchable hubs and built an accessible design system with light and dark modes, used across all ten modules.
I was the only designer on the team, working directly with the product owner and the developers, and owned every step from audit to final specs.
Front-desk staff, trainers and managers use the software all day, often while a member is standing in front of them. New staff took long to learn it, and even experts lost time jumping between windows to answer simple questions.
The goal was not to add features. It was to make the existing ones easy to find, easy to understand and quick to finish.
I walked through the most common daily tasks, reviewed every module against usability heuristics and WCAG, and discussed the workflows with the product owner and support team. Six patterns kept coming back, and each became a design principle.
To answer "does this member owe us money?", staff opened several separate windows: personal details, packages, payments.
One member profile that goes from summary to detail, with the balance always visible.
The top bar held only the logo. There was no search, and account and notifications were not where users expected them.
A search field in the top bar that jumps to any category by keyword, with the avatar, name and notification bell in the top right corner.
Users read through ten to twelve menu items one by one, and the selected item was marked only with a pale gray that was easy to miss.
Items grouped under three to four headings, and a highlight bar with a filled background for the active item.
The settings page opened blank with no guidance, so it could look like it had not loaded. The only way in was a long dropdown of options, some of which overlapped.
A card-based settings panel with related options grouped together. For example, individual and studio bookings became one bookings area. The cards also give large tap targets on mobile.
Screens had large unused areas, yet a sale was one long form. If something went wrong at payment, users had to scroll back and check everything again.
Guided flows with a stepper, so users always see the previous and next step on the same page. The aim was shorter task times and less effort per task.
Spacing between elements had no rhythm, buttons and tables varied from module to module, and tab names used internal, technical terms.
An 8pt spacing grid that also simplifies responsive layouts, one design system with WCAG-compliant contrast, and short, plain labels anyone can scan.
The old menu listed every entry side by side with equal weight, so I regrouped them into ten top-level modules for the sidebar. Daily work sits one click away, and rarely used options live in searchable hubs instead of the main menu.
The dashboard is the first thing staff see in the morning. It answers that question in a few seconds: key numbers with a comparison, revenue for the last six months, today's classes and their capacity, and memberships that are about to expire, each with a one-click action.
A sidebar that steps aside. A lock icon lets users choose how the shared sidebar behaves: locked, it stays open with labels so new staff can learn the modules; unlocked, it shrinks to an icon rail and gives the width to tables, calendars and charts.
Every module follows the same structure: a page title with one primary action, filters and search in one row, and content organized from summary to detail. Click any screen to see it full size.
The member profile brings everything staff need about a person into one view.
Every list has one clear primary action, search and filters in the same row, visible active filters and consistent status badges.
Categories, products, services and packages share one page with tabs, so the whole catalog a gym sells lives in one place.
Private and studio bookings now live in one booking area, with a weekly calendar, color-coded sessions and a short summary of confirmed and pending bookings.
Settings and Reports are card-based hubs: options are grouped into clear categories with icons, the most-used items sit at the top, and a search field gets you anywhere in seconds.
Trainers can pick a member, review measurements and analyses and add new records in a focused dialog, without leaving the page.
A sale involves several decisions in a row: products, discounts, the cart and payment. I split it into four steps with a stepper and kept the member, date, point of sale and sales rep pinned at the top, so users always know where they are and what comes next.
Quick tasks like adding a member, an emergency contact or a call log happen in dialogs, so users never lose their place. They share one pattern: title and helper line, a two-column field grid, marked required fields and the primary action bottom right.
Adding a new service uses the same dialog with tabs: Basic Info, Customization, Branches and Additional Info.
Managers check numbers on a tablet and trainers look up members on their phones, so every layout adapts to the screen:
Tablet. The sidebar collapses into a top bar with a menu button, and the KPI row becomes a 2×2 grid while charts keep their full width.
Mobile. A bottom tab bar reaches the five most used areas, cards stack into one column and common actions like a sale or booking sit right under the member's name.
To keep a product this large consistent, I built the design system alongside the screens. It's set up in Figma with variables for light and dark mode, so developers get the same tokens the designs use.
8pt grid. All spacing and sizes are multiples of 4 and 8, which keeps layouts orderly and predictable across breakpoints.
60-30-10 color rule. Light neutrals carry most of the interface, soft grays separate the sidebar and surfaces, and a single accessible violet accent marks everything you can interact with.
Built for data. A clear type scale with strong contrast between headings, figures and labels keeps dense tables easy to scan.
Because every color is a token, the whole product supports a dark theme without designing every screen twice.
High-fidelity designs for the full product, including flows and dialogs, plus a documented design system that streamlined the handoff to development and kept new screens consistent.
People had used this software for years, so I changed the structure and made screens clearer, but kept the core workflows recognizable. Reviewing flows and layouts with the product owner and developers before any visual polish kept the feedback on how the product works, not on colors.
The first modules took the longest. Once the components existed, new screens came together much faster. And because I was the only designer, I wrote down why each decision was made, which made it easier to explain changes to developers and stakeholders later.