SafeDB
Created in 1989, SafeDB served up millions of technical engineering diagrams but was in need of a major redesign.
Role
Low-fidelity wireframing, prototyping, and interaction design. Data analysis. Information architecture diagraming.
Results
Designed and delivered a mobile-first, high-fidelity prototype. Contributed to successful contract recompete.
Project Overview
Established in 1989, SafeDB is a Department of Defense program that manages and maintains engineering drawings in a standardized, secure repository, providing access to millions of mission-critical documents from desktop computers worldwide. However, as technology advanced, the system became outdated and cumbersome. The application could not meet the needs of their modern users, looking to access the system from their mobile devices. With the contract coming up for recompete, the SafeDB program manager had been impressed with my work on Travel.mil’s mobile transformation and asked for my help designing a mobile proof of concept. With limited funding for research, I jumped right in by accessing their test environment and the SafeDB user manual to create a streamlined solution.
Initial Challenges
The issues with the system were immediately evident. Developed in the early 1990s, the application lacked many fundamental web design principles that are standard today, or implemented them incorrectly. Most notably:
Poor information architecture
Excessive use of disruptive modal dialogs
No clear "call to action" button
Nested data tables
Confusing navigation and controls
Legacy Application
Legacy Search Page
Legacy Product Page
Porting the Legacy Site to Mobile
After a few days of reviewing the site, I called the program manager to discuss a strategy. I explained that resizing the existing application for mobile use was not feasible; a complete redesign with a focus on mobile compatibility was necessary. I outlined the benefits of this approach and assured him that it could be completed within the alloted timeframe. He agreed and directed me to prioritize the primary repository search function, as it was where most users spent their time and would have the greatest impact on the proposal.
Accelerated Research Phase
With no time or budget for user interviews, I had to rely entirely on the user manual to understand the system. I focused on key questions: What problem was SafeDB trying to solve? What did their users need? How did they navigate the system? And how would they measure their success? It was clear that SafeDB functioned primarily as a search engine, granting users access to a vast catalog of technical data. Given the specific nature of the search inputs and the types of records retrieved, users likely had a clear idea of what they were seeking. The goal was to streamline the process of finding it, allowing users to view and download their documents as quickly as possible.
Data Analysis
To better understand the SafeDB search engine, I quickly mapped out each search parameter across the different queries to identify commonalities. There were over forty unique search parameters, several of which were shared across the different query types. This was obviously too many input parameters for a modern search engine. Users expect a streamlined experience with a single search bar, and presenting too many options was likely overwhelming to them.
While exploring potential solutions on how to streamline the search input form, I discovered a "keyword" parameter hidden within the advanced search options. Curious, I contacted the program manager. He explained that it was a recent addition designed to search across all database columns. I was surprised that it wasn’t the primary search input. He agreed, and we decided to leverage the "keyword" field as the main search input field and relegate the other parameters to an advanced options menu. Following the call, I began drafting low and medium-fidelity wireframes to outline the updated design. This would allow me to quickly present the concept to stakeholders and gather feedback.
Low-fidelity Search Page
Mobile Search Page
Mobile Advanced Filters
After presenting these initial concepts to the program manager and development team, they unanimously agreed that this modernized approach would effectively accommodate the majority of user searches with an "Advanced Options" menu provided more granularity when necessary. This new design was also designed with responsiveness in mind so it would work across many different form factors. I translated my sketches into Axure RP and proceeded to analyze the search results.
Medium-fidelity Search Page
Mobile Search Page
Mobile Advanced Filters
Search Results Page
SafeDB housed a vast amount of data for each record. The legacy designs simply placed all this data in a table. While this worked on desktop screens, it posed significant challenges for mobile devices—tables with numerous columns made horizontal scrolling cumbersome, often limiting users to just one or two visible columns at a time. The tables would have to be replaced with list cards, offering a more streamlined and mobile-friendly experience.
Low-fidelity Results Page
Mobile Results Page
Mobile Details Page
Mobile Expanded Details
Medium-fidelity Results Page
Mobile Results Page
Tablet Results Page
Initial Approval
With the initial wireframe prototypes of the search and search results page built, I returned to the program manager and engineering team, who responded with enthusiastic support. They felt the streamlined design perfectly aligned with their vision for the future of SafeDB and immediately wanted to feature it in their proposal. The interface was fully responsive, adaptable to any device, and presented information in a clean, intuitive manner. Together, we collaborated on further iteration to the design which I incorporated into the next iteration. With the mobile design as the foundation, adapting the interface for tablet and desktop views was seamless, allowing for a consistent user experience across all platforms.
High-fidelity Wireframes
Mobile Search Page
Tablet Search Page
Desktop Search Page
Advanced Search Options
Mobile Advanced Search
Tablet Advanced Search
More Search Options
Search Results Page
Mobile Search Results
Tablet Search Results
Desktop Search Results
Search Results Details
Mobile Result Details
Tablet Result Details
Result View
Tablet Result Multi-select
Tablet View Result Selection
Data Sets Page
Desktop Data Set Result
Results
After a month of focused effort, I finalized the initial designs for the search page, results page, and data set visualization. During my final presentation, the engineering team showed genuine enthusiasm for the fresh, modern approach and were eager to begin development. I delivered a fully interactive prototype to the program manager which was demoed to their customer. My redesign for SafeDB became a key component of their recompete proposal and directly contributed to them being awarded the contract. The customer was so excited by the new direction, they created a dedicated task order in the contract for additional $1.5MM in funding for UX research and design efforts.