Summary
Agilio, a SaaS company in the healthcare sector, was suffering from development delays and an inconsistent user experience after having acquired a number of new software products.
We designed reusable page templates and created a design system to align the UI across its many services and streamline the design and development process. This would improve their customer experience and allow it to bring new products and features to market quicker.
Impact
We developed a new UI style that improved and unified the user experience across Agilio’s mobile apps.
We created a flexible and extensive design system that helped Agilio streamline its design and development workflows.
We helped position Agilio for growth in the healthcare sector with a design system that enables it to bring new mobile apps and features to market quicker, and a consistent UI experience that creates opportunities for it to cross-sell existing users new products.
The challenge
Following numerous acquisitions, Agilio was managing multiple unique UI systems across its different products that were:
Complicating and slowing down developement
Delaying the introduction of new features
Creating an inconsistent user experience
Making it difficult for existing customers to switch between its products
Having tasked Fluent Interaction with redesigning its desktop experience earlier in the year, Agilio now wanted us to turn our attention to its mobile apps.
iLearn, an e-learning product with an existing web app, would be the first to go into development and the starting point for a new design system that would also be used in future mobile apps.
Creating & refining the brief
Together with Agilio's engineering and product teams, we collectively identified five pages from the iLearn web app to base the mobile app design system on. There were the:
Dashboard
Course library
Course content page
User profile
Booking calendar (which would be used in their HR app)
We then collaborated on a design brief for all five features, ensuring a common understanding of the requirements for each based on the existing web app.
Page template & design system design
I then researched competitor and analogous apps for visual and interaction design inspiration that informed numerous distinct design concepts for a look and feel that aligned with the revamped desktop UI.
Through collaboration with the project team, we refined these concepts into a single UI style that was used across all of the page templates.
For each template, I designed components that formed the foundations of the design system.
This was then expanded to include additional components Agilio anticipated needing, as well as text styles, a colour palette, and documentation that provided guidance on how to seamlessly integrate the system into future releases.
