Redesign of the Complex User Interface of Gideon’s Tool for Infectious Diseases and Microbiology Share: Toughlex Score Awaiting client review n/a Date Published 2 February 2023 Reading Time 4-Minute Read Despite huge amounts of data and complex data structures, Toughlex managed to deliver the best-looking, fastest and most secure app on time. Gideon Informatics, founded in 1992, is the developer of the GIDEON app and the Gideon ebook series, designed for health professionals and educators. Hundreds of organizations around the world, including educational institutions, hospitals, public health departments and military organizations, have chosen Gideon as their diagnosis and reference tool for infectious diseases and microbiology. In 2020, Gideon had to revamp its user interface to meet the latest industry standards. Challenges The biggest challenge to overcome was developing a complex UI solution assembled from large data sets that were not compatible with the old UI. To achieve the best results, we had to choose technologies that were capable of supporting massive amounts of traffic. All of the solutions we developed were thoroughly assessed, tested, and implemented. Challenging outbreak maps with a large number of countries, regions, and diseases An interactive microbe identification tree that could be exported as a picture Disease identification by symptoms chosen through an interactive body part map Goals Our main goal was to create the best possible software that would bring value to students, companies, and physicians all over the world. Moreover, our ultimate goal was to provide a flawless browsing experience for app users. Create a lightning-fast app Develop an attractive, self-selling interface Develop software accessible to all types of users Write clean code that would be easy to maintain in the future Develop easy-to-use software that requires no additional learning Use well-known UX practices to ensure the best possible user experience Created Value Even though the app relied on huge amounts of data and complex data structures, our team was able to deliver a fast, attractive, and secure app within a short timeframe. With the help of agile, we managed to stay in close touch with Gideon, which enabled us to work at maximum efficiency throughout the entire development process. Finished product: gideononline.com and Mobile App Responsive Design Thanks to responsive web design, the app’s content is clearly displayable on all devices, regardless of resolution. This guarantees that app users have the best possible experience when using the website or mobile app on any device. Speed Gideon’s platform has a lot of functionality, and users expect the system to work as fast as possible. Our team was able to accomplish this by relying on the best development practices and the latest technologies. The new system can handle high amounts of data traffic without any performance issues. Security In view of the fact that Gideon has tons of valuable data that needs to be secured, our team made sure that the system is accessible only by properly authorized users. Security is also essential for SEO, which helps to avoid spoofing and prevents the exploitation of customer data. Usability Every organization strives to meet the needs and expectations of its customers as quickly and reliably as possible. With this in mind, we made sure that Gideon users’ expectations were either fully met or exceeded. Technologies Given the speed, reliability, and intuitive user interface requirements, we decided to perform the redesign using React.js – a component-based library that makes the development of interactive UIs relatively hassle-free. Its components can be reviewed at any time by consulting the Storybook tool, which helps when handling systems that have large numbers of components. The interactive, information dense colored maps with outbreak points were developed using Mapbox, which gave us all the functionality we needed for this purpose. The design process once again confirmed that Mapbox is a mature, well-maintained, and widely supported technology. To ensure the best user experience we also used a host of other libraries: react-virtualized (for quickly making long, yet good-looking, lists), react-toastify and react-popper (for displaying explanatory messages to users), react-modal (for displaying beautiful modals with lots of content), and react-select (for speedy, attractive input controls with lots of functionality).