Redesigning and managing Metrno app
Tools
Figma, Figjam, Trello, Jira, Confluence
Timeline
9 months
Project type
Metrnal health monitoring and management app
My role
Product designer
Metronomic was founded with the mission of making healthcare delivery.
Accessible, Affordable, and Accountable.
Materno, is a specialist maternity care platform and patient app designed to address
unmet needs in maternity care in the United States.
Product brief
I joined the company as a Product Designer with a focus on aligning the product to meet user needs and simplifying the overall experience. My primary goal has been to reduce friction and refine both the product and user experience.
Upon joining, I took the initiative to meet with every team member to fully understand their roles, requirements, and challenges. I then conducted a thorough analysis of the product, streamlining workflows and identifying key areas for improvement to ensure a smoother, more intuitive user experience.
Product background
Materno is a cutting-edge digital platform supporting hopeful mothers and new parents through every stage of pregnancy and postpartum. By offering personalised health monitoring, expert consultations, and essential maternal care resources, Materno empowers women to manage their health with confidence. Designed to bridge gaps in maternal care, the platform integrates with wearables for real-time tracking and provides access to healthcare professionals, ensuring better health outcomes for mothers and their babies.
The problem statement
The current application is outdated and lacks practical value for users. It faces several user experience challenges, requiring significant improvements to make it more intuitive, user-friendly, and comfortable for users.
The problem discovery
01
🤨 Lack of context
The user felt that the current applications are not providing the user with the right understanding of what the service can do for them.
02
🗺️ No clear navigation
The users were lost in certain areas throughout the applications resulting the users in confusion and miss understanding.
03
🤦♀️ Frustrating user experience
The application was hindering the user flow and there were lots of breakpoints eventually creating cognitive friction and leading to frustration.
04
📔 Missing emotional connect
At certain area the features are not basically connecting with the mothers and their problems.
Key goals
Visual design
Onboarding
The onboarding process is the initial and, by far, the most crucial interaction point with the product. Ensuring that it is swift, simple, and easy to understand is essential. After reviewing the current screen, we identified several key issues that we addressed:
-
Cognitive load and friction: The initial screens contained too much information, which made it difficult for users to focus effectively. We streamlined the design to reduce cognitive load and minimise friction.
-
Rethinking the user journey: For some users, the signup process raised concerns about trust and security. To address this, we prioritised enhancing the emotional connection and feelings of reassurance throughout the experience.
Before
After
Before
After
Vitals tracking
This is the main section of the app is where users can easily log and track their vitals without any problems. However, when looking at the old user flow, the issue was that users were not able to relate the flow and experience to the specific problems they are going through.
-
Too much and too little information: There was too much information available on the vitals screen, but not enough focus on the right place for users at the right time. This increased the problem of not being able to focus on the most relevant information.
-
Lack of emotional connection: At certain times, users are in pain, and tapping on small areas of the screen can be very difficult for them. Making the app more accessible for these users was a main goal.
-
Information accessibility: The old UI did not differentiate between new and old data. To overcome this, we introduced a simpler and more accessible way to view old data.
In summary, the main goals for improving the app's main section are:
-
Ensuring the user flow and experience are relevant to users' specific problems
-
Providing the right amount of information at the right time to maintain focus
-
Making the app accessible for users in pain or with limited mobility
-
Clearly distinguishing new and old data for easier tracking
Before
After
Before
After
Before
After
Before
After
Profile
The previous profile design was overly cluttered, which led to important information being overlooked by both the team and users. Key details, such as which trimester or provider group the user belonged to, were often missed. We addressed these issues to enhance clarity.
-
Streamlined content: The profile section was content-heavy, making it difficult for users to navigate and comprehend the information. To simplify this, we consolidated various sections and made the information more accessible, ensuring easier navigation for users.
-
Relevant information: Displaying the right information in the appropriate context is crucial. If users have to search extensively for what they need, it detracts from their experience and can negatively impact the product. Our focus is on ensuring that users can easily find the information they require without unnecessary hassle.
Before
After
Website design
The process of selecting and designing the website was enjoyable, as we ended up revamping the style guide. Our primary goals for the website design were to:
Enhance user comprehension and foster a deeper emotional connection. We carefully chose colors and images based on color psychology, considering what users might resonate with during their pregnancy journey.
Our aim was to create a clean and inviting design that avoids clutter and heaviness. Ultimately, we wanted to guide users to the website, help them understand the product, and encourage them to download the app.
Dashboard
Designing a doctor management portal involves handling complex data (schedules, appointments, records) without overwhelming users.
Key challenges include data overload, scheduling conflicts, and user navigation. Solutions involve creating a clean, prioritised layout, smart filters for quick searches, and collapsible sections to minimise clutter. Finally, use a simplified, intuitive navigation system to streamline access to different features.
-
Conflict alerts: Include automatic conflict detection and alert users to overlapping appointments. Provide suggestions for alternative slots that fit both doctor and patient availability.
-
Role based dashboards: Design role specific dashboards tailored to the needs of each user type. For instance, doctors may primarily need access to patient records and appointment schedules, while administrators may focus on billing and overall doctor performance metrics.
-
Multi location support: Build functionality to easily toggle between different clinics or locations, with corresponding schedules and data for each.
-
User Friendly rostering: Simplify rostering by allowing admins to assign shifts across multiple locations and for multiple doctors in a few clicks, ensuring easy adjustments.
The outcome
What I learned!
1. Cross-Functional Collaboration & Leadership:
-
Took the initiative to meet every team member across departments to understand their roles, challenges, and requirements, building a foundation for more aligned product solutions.
-
Led a fullscale analysis of the product, identifying key pain points and streamlining workflows to ensure an enhanced user experience.
2. User-Centred Design:
-
Prioritised user needs by reducing cognitive load, simplifying onboarding, and addressing friction in the initial screens to deliver a smoother user experience.
-
Revamped the signup process by incorporating emotional design principles, focusing on trust and security, making the app more welcoming and reassuring for new users.
3. Product & UX Improvements:
-
Refined the vitals tracking feature to ensure that the user journey aligns with their specific health challenges, providing the right information at the right time and making it accessible for users with limited mobility.
-
Simplified profile management, ensuring the most relevant information (e.g., trimester, provider details) is easily accessible and reducing content clutter.
4. Enhanced Accessibility:
-
Focused on accessibility by designing for users in pain or with limited mobility, allowing them to interact with key features easily, enhancing usability during critical times.
5. Visual Design & Emotional Engagement:
-
Redesigned the website using color psychology and clean layouts to create an inviting, emotionally resonant experience for users during their pregnancy journey, fostering a stronger connection with the brand.
-
Developed a comprehensive style guide for the product to ensure visual consistency and a cohesive brand identity.
6. Advanced Dashboard Creation:
-
Designed a doctor management dashboard that handles complex data, schedules, and patient records without overwhelming users. Streamlined data organization with role specific dashboards and conflict alerts to minimize scheduling issues.
-
Developed multi location support and user friendly rostering systems for seamless shift assignments across multiple locations.
7. Problem-Solving & Continuous Improvement:
-
Consistently addressed user concerns by rethinking workflows, enhancing information accessibility, and incorporating solutions that cater to both user needs and business goals.
