Adaptive Design
This project focused on creating a full mobile experience for our web-based ITAM product. The goal was to bring the entire platform to mobile without sacrificing usability, functionality, or performance—ensuring users could manage complex asset data anytime, anywhere.
Translating a feature-rich, table-heavy web platform into a seamless mobile experience was a major challenge. With limited screen space and an interface built around dense data structures, it was difficult to preserve core functionality while keeping the design intuitive and user-friendly. Every component had to be reimagined for mobile without compromising the depth and flexibility ITAM users rely on.
Every feature from the web-based ITAM platform was successfully translated to mobile without any loss in functionality. To accommodate the smaller screen size, I restructured complex layouts by breaking information into focused, sequential screens rather than crowding everything onto one view. I also reworked challenging interactions—such as long dropdown menus—into mobile-friendly patterns that maintained usability while preserving depth.
To inform my design decisions, I conducted extensive research into mobile UX patterns. I collected screenshots, links, and video recordings of real-world mobile interactions to support my rationale. Since mobile users expect familiarity and clarity, I focused on implementing patterns users already recognize and trust. This ensured the experience felt intuitive and approachable, rather than forcing unfamiliar behavior in an already complex system.
One major challenge was adapting dropdown menus and filters for mobile. To guide my approach, I studied popular apps like Amazon, Google, and DoorDash to understand how they handle filtering in small spaces. I used buttons and toggles for quick selections and implemented a searchable slide-up panel for dropdowns. This panel supports both single and multi-select options, making it easy to navigate long lists without overwhelming the user.
To adapt dense tables for mobile, I converted them into simplified cards showing only the most important information. This reduced screen fatigue while allowing users to tap into each card for full details. I also hid top navigation on scroll to maximize screen space and keep the focus on content.
To simplify the check-in process on mobile, I broke it into clear, step-by-step screens, making setup easy to follow. Buttons were prioritized for better touch accessibility. Once in scan mode, users remain there until they finish, with success and error messages displayed for real-time feedback and a clear "Stop Scanning" button to exit when done.
On web, adding assets involves filling out multiple fields across a large form. To adapt this for mobile, I created a clean, collapsible form layout that breaks content into manageable sections. This made navigation easier and helped users focus on one part at a time. Required fields are clearly marked to ensure nothing is missed during entry.
In addition to viewing a list of assets, users can also browse by user or location. I built this view using the existing card design, adding clear labels to distinguish between user and location types. Tapping into a card reveals all assets assigned to that user or location, keeping the experience consistent and easy to navigate.
I successfully translated the full functionality of our web-based ITAM platform into a clean, user-friendly mobile experience. Despite the challenges of limited screen space and complex workflows, every feature was thoughtfully restructured to fit mobile without compromising usability. Through smart layout decisions, intuitive navigation patterns, and mobile-optimized interactions, I created a solution that feels native to the device while still supporting the depth our users expect. This mobile version empowers users to manage assets on the go—efficiently, confidently, and without frustration.
