01. Overview
3 years.
Four Projects.
One Manager.
This case study shares my 3 years of experience as the founding / lead UX designer at a B2B hotel automation & distribution startup named Hotel Trader, based in NYC, USA. It details how I lead design and discovery practices in a new industry, developed tools and processes, and applied technical UI skills to tackle real-world challenges.
02. My Role
Uncharted Territory
After spending years in the B2B sector, I felt it was time to shake things up. So, I took on a six-month contract with a promising AI media-gen company—my first venture into this industry. This role wasn't just about bringing my existing skills to the table; it was about diving headfirst into a new domain and making a meaningful impact in a short period.
Outcomes
Leasing Data Project: Developed a business case that laid the groundwork for a potentially game-changing feature in the AI image and video gen department.
Charts and Tables Enhancement: Designed improvements to data visualisation, making complex workflow data more accessible with added capabilities customers were asking for.
Retail Experience: Proposed strategies to maintain momentum and ensure our retail experience remained a core offering.
Process and Ways of Working: Delivered recommendations aimed at streamlining the design process, setting the stage for scalable growth.
03. Key Challenges
Chaos Meets Simplicity
Client
As the only UX manager for the entire product, I found myself leading a team of 12, simultaneously working on four projects:
Admin portal Project for use by in-house team members
Managing UX for the Hotel Trader Supplier Portal platform
Managing UX for the Hotel Trader Client Portal platform
Process and Ways of Working Recommendation
Each project had its own challenges, stakeholders, and tight deadlines. The pressure was on to deliver top-notch work across the board while getting up to speed with the ins and outs of the commercial real estate industry.
Services
Realising I needed a game plan to stay sane and productive, I turned to the 70-20-10 Rule to prioritise my efforts:
70% on the highest priority (The supplier Portal)
20% on the second priority (Admin app)
10% split between the remaining two (The Client Portal and Process Improvement)
This wasn't a rigid rule but gave me a solid framework to manage my time and energy effectively.
The 70-20-10 Rule
Weekly Breakdown
I organised my days around 90- to 120-minute 'deep work' sessions. While surprises did pop up, I made sure to reserve at least two blocks for high-priority tasks. The rest of the day was more flexible, adapting to what each project threw at me.
Monday-Thursday
4-6 hours: Deep work on high-priority tasks
2 hours: Work on second priority
1 hour: Tertiary tasks
Friday
Morning: Retail Experience and Process Improvement
Afternoon: Plan for the next week and tie up loose ends
Dealing with Reality
No week ever went exactly as planned. Here's how I handled the curveballs:
Urgent Requests: I built in a buffer during afternoon sessions for any urgent issues. If something couldn't wait, it got slotted in here.
Shifting Priorities: If a project needed more attention, I'd adjust my 70-20-10 split and keep stakeholders in the loop.
Energy Levels: I'd tackle high-energy tasks (like creative design work) when I was at my peak and saved less demanding tasks (like documentation) for when I needed a breather.
This system wasn't perfect, but it helped me keep all the plates spinning without losing focus. Flexibility within a structured framework was key.
04. UX DESIGN
No Scenic Route, Just Speed
Solving core problems goes beyond design—it starts with effective resource allocation. With a fresh perspective, I identified key process improvements to accelerate the work.
UX Strategy
70% Boring
Our UX strategy centres on Jakob's Law, which states: "Users spend most of their time on other websites, so they expect your site to work like all the others they already know."
By mirroring design elements from popular websites and apps, we're aiming to make our users feel right at home. This approach taps into their existing mental models and learned behaviours, reducing cognitive load, smoothing out the learning curve, and boosting overall user satisfaction and efficiency.
30% Magic
In data visualisation, it's often the small UI decisions that make all the difference. Elements like typography, spacing, and content play crucial roles in how users perceive and interpret data.
By honing in on these nuances, we can enhance the user experience and convey information more effectively.
Design Foundation
The Power of Boring
Solving core problems goes beyond design—it starts with effective resource allocation. With a fresh perspective, I identified key process improvements to accelerate the work, starting with the in house admin panel.
We needed a new admin application. So we went from this
To this
Font: We used the Inter font for its readability and flexibility. We also selected alternative character options to enhance legibility.
Icons: Google Material Icons were used due to their extensive library, seamless integration with Figma, and comprehensive documentation, which helped streamline the development process.
Colours: Colours were kept consistent with common perceptions—green for positive, orange for warnings, and red for alerts—to reinforce users' understanding.
Layout Grid: Designed at 1,440px with a 1,016px container to maintain flexibility for smaller devices. For mobile, we followed YouTube’s approach to accelerate development.
Tiny Details. Big Impact.
I zeroed in on the small yet impactful aspects of the UI to ensure effective data visualisation. These tweaks might seem minor, but they significantly enhance the user experience by making data clearer and easier to interpret.
Disambiguation: Used an alternate glyph set to clearly distinguish similar characters, such as 'l' and 'I' (capital 'i'), or a slashed '0' to differentiate it from 'O', enhancing legibility.
Open Digits: We used open digits (3, 4, 6, 9) for better legibility at smaller sizes, reducing confusion and enabling faster recognition.
Tabular Number Spacing: Used fixed-width numbers for better alignment in tables and financial reports, making comparisons easier.
Text Alignment: Numeric data is right-aligned for comparison, while text is left-aligned for readability.
Date Formatting: Ensured clarity by using consistent date formats, crucial for international users who may interpret dates differently.
Casing: All caps for metric card titles and CTAs. Sentence case for readability, creating a clear visual hierarchy.
Categorical Colours: Selected 10 main colours using Jakob's Law, ensuring intuitive associations. Pattern overlays can be added when there are more than 10 categories.
Sequential Colours: Can be used for relationship and trend charts. In light themes, the darkest colour represents the largest values; in dark themes, the lightest colour does.
Diverging Colours: Can be used for visualising positive and negative changes. They use contrasting colours to highlight differences, making it easy to see how data diverges from the midpoint.
The Magic 30%
With the UI fundamentals in place, let’s see the magic unfold as they transform property data into something far more usable.
Charts
The system handles all types of complex data. We offer three chart options: small, medium, and full. They’re clean and minimal to balance data-heavy content, designed to be easy to read and beautiful.
Tables
Property data’s often dense and complex. Instead of starting fresh, we’ve refined off-the-shelf tables with our UI tweaks. These small enhancements make data clearer and easier to scan, without the big development costs.
06. Closing
Journey Ends
This journey was a test of adaptability and focus, pushing me to grow in unexpected ways. Here are some standout moments.
Winning Moments
Delivered Solo: Covered all project requirements as the sole designer across four major projects. Sanity with 70-20-10: The 70-20-10 rule kept me organised. Dedicating 70% of my time to top priorities ensured deep focus without neglecting other responsibilities. Adapted Beyond Fintech: Quickly learned the nuances of commercial real estate and hotel chains to deliver effective designs in a new industry.
Lessons Learned
Strategy and Details Matter: Balancing overarching strategies with UI details is crucial. I applied Jakob’s Law for usability while fine-tuning typography to improve readability. Progress Within Constraints: Found ways to drive progress despite limited resources and a fixed scope, like leveraging existing design systems to cut development time. Stay Flexible: Adjusted the 70-20-10 rule as project priorities shifted—for instance, reallocated time when the Charts and Tables Enhancement became urgent.
Up Next
Runway ML
Spearheading research and design at a unicorn startup
Paytm Labs
Spearheading research and design at a unicorn startup
Let's Connect
copyright 2025 @ Vinayak Mukherjee