Overview

The myResponder app is a critical mobile application by SCDF designed to empower Community First Responders (CFRs) to respond to emergencies like cardiac arrests. I contributed to the app's redesign and enhancement, focusing on user-centered design, functionality, and seamless deployment across platforms.

Background

The app underwent a major redesign to address usability gaps and enhance its visual appeal. The primary goals included:

• Improve critical response times.

• Make features more intuitive for CFRS.

• Aligning the new design with SCDF's branding.

The Team & My Role

• Project Manager

• Business Analysts

• Product Owner/ Users

• Development team

My Role: Bridging the Gap, Pixel by Pixel
As a UX/UI consultant, I was the bridge between the design vision and the technical reality of myResponder. My focus was on ensuring a user-centered product that was both visually consistent and technically feasible through consistent collaboration with developers, BAs, PM, and stakeholders.

Journey Mapping

To ensure clarity for stakeholders, I charted the As-is and To-be user journeys:

• As-is Journey: Identified pain points, such as app crashes, onboarding overwhelm, and previous mobile number registration conflicts.

• To-be Journey: Proposed solutions, including NRIC-based signups, simplified onboarding steps, and resource consolidation under a "Learn" section.

Bridging Development Needs with User-Centered Solutions

Collaborated with the development team to methodically address and resolve all tasks outlined in the Excel sheet for both the Admin Console and Mobile App. Key actions included:

• Consistency: Ensured seamless alignment between the mobile app and admin console by harmonizing components such as navigation, login screens, and user workflows.

• Usability: Focused on critical functionalities like AED mapping, case management, and timeout mechanisms to enhance user efficiency and CFR readiness.

• Accessibility: Enhanced UI layouts, ensured font scalability, and optimized designs for smaller screen sizes to provide a more inclusive user experience across diverse devices.

• Systematic Prioritisation: Reviewed each item, from detailed feature tweaks (e.g., animations, unauthorised page designs) to broad usability improvements (e.g., login and logout workflows), ensuring timely implementation.

Key Contributions & Scope

1. App Icon & Logo Branding

• Redesigned the app icon and branding to modernize the look while preserving the existing design language.

• Integrated SCDF’s livery pattern and adjusted the heart symbol’s thickness and alignment for better scalability across platforms.

• Developed a comprehensive style guide, detailing logo usage, spacing, and color palettes to maintain consistency across all applications.

For the redesign of the myResponder app logo, I collaborated closely with stakeholders to address specific requests while ensuring the logo remained scalable, visually consistent, and aligned with SCDF’s branding. The brief was to slightly revamp the app icon while maintaining its original concept and color scheme.

Centralising and Enlarging the Heart Icon
The heart symbol was adjusted to be more prominent and aligned centrally to improve balance and visibility.

Refining Line Thickness
The heart's outline thickness was reduced by 30% to make the design appear more modern and sleek without compromising legibility.

Incorporating the SCDF Livery Pattern
A signature SCDF livery pattern was added at the base, cropped and resized to align seamlessly with the overall design.

Color Adjustments
The logo colors were refined to match the official SCDF palette, using their "Lifesaver Red" for consistency across all applications.

 2. Human/Animal Avatars Integration

• Designed a human avatar system to combine animal avatars, reflecting Singapore’s cultural diversity and enhancing relatability for users.

• Worked on technical feasibility with developers to ensure seamless avatar integration into both the mobile app and admin console.

 3. Case Simulation Screens

• Designed step-by-step case simulation screens for emergency scenarios like cardiac arrests, starting with static visuals in the initial release due to timeline constraints.

• Evolved the screens into an enhanced interactive version, introducing animations in later iterations as part of the long-term vision.

 4. iOS and Google Play Store Preview Screens

• Designed preview screens and marketing banners for App Store and Play Store listings to highlight app features and attract new users.

• Ensured alignment with platform-specific guidelines for optimal visibility and impact.

5. Widget Redesign

• Redesigned the myResponder app widget to include three critical shortcuts: Call 995, Report Fire Hazard, and View AED, improving accessibility and usability during emergencies.

• Enhanced from the original single-button widget (Call 995), enabling faster access to vital actions directly from the home screen.

6. Admin Console Enhancements

• Gamified Learning Experience: Designed and sourced engaging badge icons, contributing to a gamified learning system that motivates users to complete training modules.

• Streamlined Training Access: Enhanced the e-learning module library UI, making it easier for users to access and track their learning progress.

• Proactive Session Security: Implemented user-friendly timeout mechanisms and security reminders, ensuring smooth session management and minimizing the risk of unauthorized access.

• Clear Responder Differentiation: Developed a map UI to visually differentiate between "SGSecure" and "myResponder" profiles, improving the clarity of responder roles in emergency situations.

• Account Security Management: Designed a timeline-based lockout reminder system, improving user understanding of account access and security protocols.

• Optimised AED Asset Tracking: Refined the AED inventory UI with status tracking, providing SCDF administrators with a clear view of physical resource availability and status.

7. UI/UX Testing and Spotting Issues

• Beta Testing and Feedback: Conducted reviews of beta app versions and admin console features, comparing them against Figma designs to spot UI/UX inconsistencies. Used annotated screenshots to document issues such as mismatched padding, font size deviations, and layout misalignments. Collaborated with developers to prioritize fixes, ensuring pixel-perfect results.
  
  

• Real-World Testing: Installed beta app versions on an Android device using SDKs downloaded via invitation links from AppCenter. Simulated real-world user scenarios to test features like navigation flow and interactive elements. Identified discrepancies between designs and the developed app, such as component spacing and visual hierarchy, ensuring optimal alignment with design specifications.
  
  

Challenges

1. Case Simulation Screens

• Designing the case simulation screens was a significant challenge. Initially developed as static images with step-by-step instructions, I envisioned an interactive animated experience for a more engaging user interaction. However, due to timeline constraints, the interactive version was only ready several months after release, requiring temporary compromises.
  
  

2. Turn-by-Turn Navigation

• While the app aimed to enhance the emergency response experience, the lack of turn-by-turn navigation was a limitation. This was due to OneMap API constraints, which restricted the ability to provide precise navigation to emergency locations.
  
  

3. Minimum Screen Size Constraints

• Adjusted screens to ensure compatibility with various screen resolutions (e.g., 320px vs. 360px).

• Handling component wrapping layouts posed challenges, especially on smaller screens. Balancing usability, readability, and scalability required significant adjustments to ensure the UI worked seamlessly across various devices.
  
  

4. Delayed Feature Rollouts

• Features such as "Cases Today" map and "Chat Features" were planned as critical functionalities but were only rolled out after a few releases due to prioritization for the MVP and technical dependencies.

Media Coverage

The launch of the enhanced myResponder mobile app by the Singapore Civil Defence Force (SCDF) has been widely covered across prominent news outlets, highlighting its new features aimed at empowering Community First Responders (CFRs)

From Concept to Reality
Implementation & Collaboration

Impact and Achievements 

• The redesigned myResponder app has had a significant impact on both Community First Responders (CFRs) and SCDF officers, improving emergency response efficiency and user engagement. Key benefits include:

Impact on Community and Stakeholders

• Community Responders: Empowered CFRs to act swiftly and effectively during emergencies through streamlined workflows, intuitive user interfaces, and quick access to critical features like AED locations and emergency simulations.
  
  

• SCDF Officers: Simplified operational management with enhanced admin console features, including AED tracking, responder profiles, and real-time case updates.