Develop a flexible navigation that seamlessly adapts to different environments, such as
- the TeleClinic standalone web app,
- the TeleClinic web app within partner native apps,
- the TeleClinic web app modified as a native app (wrapper)
- and easy access to the last treatments is required.
Research, analysis, user testing, product design, design system
1 designer, 2 product manager, 1 head of, 5+ developers
Problems and Solutions
With the increasing number of integrations and their various environments, the need for flexible navigation has become more important, and at the same time, the requirements have become much more complex.
I kept focus on creating a navigation system that remains consistent in its structure and organization. The fundamental arrangement and number of components create the core structure of the pattern. By showing or hiding the components, the navigation can adapt to various tasks.
UX Challenges
The development of a navigation that works in all of our screens of the entire app and, at the same time, is flexible for use in all partner integrations and in different technical environments proved to be a delicate undertaking. Every idea that arose had to be thoroughly explored in all environments to ensure that no edge cases were overlooked. In addition to considering the different environments, it's necessary to differentiate between the top-level and sub-level of navigation, as well as the LoggedOut and LoggedIn statuses. Another concern was to make access to past treatments as easy as possible, as accessing documents from past treatments is the most important function of the app.
Question to ask
Does the navigation fit into the technical environment and form a cohesive unit?
Question to ask
What elements at each the navigation level help the user reach their goal in the flow?
Question to ask
Does the navigation look the same when logged In and logged out?
Research
User Testing
After the initial brainstorming, I conducted a user survey. The goal was to determine the usability of the current navigation, the importance of past treatments, and to identify any other potential challenges or areas for improvement in the navigation process.
It became clear that the documents from the last treatment are the most important to the patients, and that most of our testers didn’t realize that clicking on the logo takes them back to the home screen.
Facts: Open Sick Note Intents
Since the native app already has a feature to open the last treatment directly from the home screen, we were able to determine the paths patients take when accessing sick notes, thus identifying the most valued page/component for opening sick notes.
As indicated in the user test, the numbers confirmed that 58% of our users open their last treatment via the home screen.
UX Solution
Vertex 1
Based on our learnings about the expectation of accessing 'Last Treatments' on the home screen, the connection between future and past treatments, and the 58% of open request intents from the home screen, it was quite clear that 'Last Treatment' should be placed as one of the most important features at the beginning of the home screen, before 'Common Treatments.'
Vertex 2
In addition, I have developed a navigation system with a defined structure and arrangement of components that has the ability to adapt to different circumstances and can be changed if necessary to meet customer requirements or technical environments.
The placement and the number of the components create the core structure of the navigation pattern. By showing or hiding the components, the navigation can adapt to various circumstances.
Vertex 3
Not only that, the most important main pages such as 'Last Treatment,' 'Profile,' and 'Home' are quickly accessible through the navigation and the card component on the home screen, they are covered a second time in the menu.
Three Pillar System
This leads to the principle that even if a component, an icon button that links to a page, in the navigation is hidden, the pages are always reachable. Through the three pillar system, there is always a way to get to the most important pages of the app.
If Profile: Hide
If a partner requests to disable the profile in the TeleClinic navigation, for example, because they don't want to have two profiles prominently placed, there's no need to get nervous. Even if we hide the profile, it can still be accessed through the menu.
If Menu: Hide
Similarly, if a partner requests to disable the menu in the TeleClinic navigation, there is no need to worry. The most important menu items, 'Last Treatment,' 'Profile,' and 'Home,' are still quickly accessible.
Web App Integrations and their different environments
The flexible and versatile navigation ensures a consistent user experience within the TeleClinic web app and various partner apps in different technical environments.
Key Screens
Below you find the menu and the two fundamental levels of navigation: the top level and the sub-level for mobile and desktop.
Credits
Managed By
Made At
.svg)
TeleClinic, headquartered in Munich, is a telemedicine tech company known for revolutionizing digital healthcare solutions in Germany. They provide a platform that connects patients with licensed doctors via video consultations, ensuring accessible and timely medical care.