This is a 12-week project developed by a team of 9 members includes 5 designers and 4 developers, with a strong focus on accessibility and creating a smooth, user-friendly experience.
Overview
My Role
UI/UX Research | UI/UX Designer
Duration & Team size
12 Weeks | 5 Designers | 4 Developers
Project Type
Mobile App, B2B & B2C Platform, Accessibility-Focused Product
Constraints
- - Mobile-first solution that solves real-world issue
- - Compatible with both iOS and Android platforms
- - Integrates native device capabilities
Tools Used
Figma, FigJam, Pencil & Paper, Premiere Pro, After Effects
Design Process
Our design process follows a user-centered and iterative approach to ensure impactful and effective solutions:
UX Research
1. The Problem
Most of the times seniors don’t feel confident using phones or the internet. Scammers know this and try to cheat them with fake calls or messages. Sometimes they fall for it, and it’s hard to recover their money or trust. Even those who haven’t been scammed live in constant fear. We wanted to create something that makes them feel safe and supported.
Pain Points I Discovered
Seniors are often not aware of which calls or messages are real or fake.
Reading
small text or clicking small buttons is hard for them.
They’re scared to ask for
help or feel embarrassed.
Sometimes seniors don’t have anyone to check if a
message is real or not.
They feel lonely and unsupported while using digital
tools.
2. Accessibility Was Very Important
From the start, we focused on making our app easy and comfortable for seniors to use. We studied some apps like GranPad, MediSafe, Workout for Older Adults,that seniors were already using, to learn and understand what works well like UI patterns, big text, colours, voice support, and large buttons. We also spoke with seniors to understand their struggles with scams and technology. Based on this, we created user profiles and tested our early designs with real users. Their feedback helped us improve the app step by step. We were keen in keeping our app to be clear, simple, and accessible for everyone.
3. User Persona
4. Competitor Analysis
SafeMilo stands out because it offers more than just call and message screening. Other Apps like Scam Shield only focus on screening, but SafeMilo also has a Learning Module to teach seniors about different scams. Unlike Verify Scams, SafeMilo gives real-time updates from trusted organizations, keeping seniors informed about the latest scams. Plus, the 24/7 AI Chatbot in SafeMilo helps users instantly, which apps like Trend Micro Scam Check don’t offer.
UX Design
Our design process started with competitor analysis and user research, shaping the Information Architecture (IA) that guided user flows and wireframes. The platform includes a on-boarding process, login, home page, news screen, learning modules and a chatbot with core features. We then created mid-fidelity wireframes, refining them into high-fidelity mock-ups with branding, UI components, and custom illustrations.
1. Information Architecture
While designing the information architecture for SafeMilo I ensured the easy navigation with clear features. Using the user research findings and User Flow Mapping, I designed a simple, intuitive layout to make the app friendly to seniors .
2. User Flow
After the research, I’ve identified two important flows:
1. Effortless onboarding - simplifying the user’s first experience.
2. Home page interactions - optimizing call-to-action buttons for
engagement.
Additionally, the News screen flow was highlighted as important for keeping
users informed.
3. Wireframes
First, I designed the onboarding flow, dividing it into five key steps: Welcome screen, permission request, and a feature walkthrough. I then created the Home page with limited, focused content and designed the News screen using a stacked card layout for easy browsing.
UI Design
I started by working on the branding for the app, exploring different colour palettes based on the adjectives I came up with for the app’s vibe. As a team, we finally decided on the final colour palette. Once that was set, I moved on to creating the UI kit components, like buttons, form fields, and icons, to keep everything consistent across the app.
1. Logo
The logo combines two key elements: Milo the fox, the app’s mascot, and a shield, which represents protection. Milo adds a friendly and approachable touch, while the shield emphasizes safety and security, aligning with the app’s purpose. The logo combines two key elements: Milo the fox, the app’s mascot, and a shield, which represents protection. Milo adds a friendly and approachable touch, while the shield emphasizes safety and security, aligning with the app’s purpose.
2. Mascot
Our biggest challenge was making technology feel friendly to seniors, especially those who may not be tech-savvy. To address this, we introduced Milo the fox, a cheerful mascot that adds warmth and familiarity. But here’s where it got slightly more complicated - as a scam protection app, we couldn’t just be friendly. We also had to look protective and credible.
3. Brand Colors
For SafeMilo, we chose a colour palette that feels trustworthy, friendly, and safe to build seniors’ trust. With enough contrast for readability, the palette creates a sense of security and warmth, making the app feel safe and easy to use. Overall, it balances accessibility with a protective, user-friendly environment for seniors.
4. Typography
Montserrat is a type choice for SafeMilo as it offers clear, readable text that’s easy on the eyes, which is important for seniors. Montserrat's clean, modern design ensures both headers and body text are legible, creating a consistent and user-friendly experience, aligning with our purpose.
5. UI Kit Components
The component library focuses on rounded edges for a clean, friendly look. Bold colors are balanced with plenty of white space and subtle lines. Custom illustrations in a simple line-drawing style add a unique touch. This design process helped bring our vision to life, making the product functional, attractive, and easy to use.
6. Accessibilty Test
7. High-Fidelity Screens
We created high-fidelity wireframes for SafeMilo, showing detailed designs with layouts, colours, typography, and interactive elements. These wireframes represented the final product, including screens for event creation, task management, vendor bookings, budget tracking, and guest RSVPs. They helped align the design and development teams and gave stakeholders a chance to see and give feedback before development started.
Usability Test
Following are the redesigned screens based on the usability test feedback for the SafeMilo app.
1. Bottom Navigation Simplified
Initially, we had 4 items in the bottom nav. Based on testing feedback, we reduced it to 3 key sections to minimize cognitive load and make navigation easier for seniors.
2. Large Button Size
We increased button sizes beyond the standard mobile tap area to improve usability and reduce frustration. This change made the app feel more comfortable and accessible to users with limited dexterity.
3. Reworded Scam Terminology
We simplified technical terms into everyday language (e.g., "fake message scams" instead of "phishing") and added tooltips for clarity. This helped users understand the content faster and feel more confident while learning.
Marketing Materials
I took full ownership of creating the entire proposal document from structure and research to content and visuals. It was a comprehensive effort, and I’m incredibly proud of how it turned out. It clearly communicates the design decisions, user insights, and solution flow, making it a strong foundation for the project.
As part of the marketing efforts, I created both short-form and long-form videos for Instagram and LinkedIn using Adobe Premiere Pro and After Effects to enhance engagement and brand storytelling.
Key Challenges and Takeaways
Following are the key challenges and takeaways identified and documented by me while working with the SafeMilo application.
Key Challenges
1. Designing for Low-Tech Users:
Creating an interface that feels intuitive for seniors with minimal tech experience.
What I did: Simplified navigation with clear icons, fewer screens, and step-by-step onboarding to avoid confusion.
2. Accessibility Compliance:
Ensuring the app meets accessibility needs like screen readers, contrast, and touch-friendly elements.
What I did: Following WCAG guidelines, conducting accessibility checks, and testing with users who have vision and motor challenges.
3. Maintaining Trust and Security:
Building a product that seniors feel safe using, especially when handling sensitive scam-related content.
What I did: Strongly recommended to have familiar, trustworthy visuals (e.g., mascot + shield), clear language.
4. Educating Without Overwhelming:
Teaching users about scams without making the app feel heavy or stressful.
What I did: Use short lessons, voice-overs, friendly tone, and interactive quizzes to keep learning light and engaging.
5. Designing with Empathy
Understanding the emotional side of fear, shame, or hesitation in users who may have been scammed.
What I did: Conducted interviews with compassion, avoid judgmental language, and designed with warmth and reassurance in mind.
Key Takeaways
1. Simplicity Wins with Seniors:
A clear, calm interface helps build confidence and comfort in tech use.
2. Accessibility Isn’t Optional:
Designing for readability, clarity should be part of every design decision.
3. Trust Is a Visual Language:
Color, icons, and tone play a big role in making users feel safe and supported.
4. Empathy Drives Better Design:
Listening closely to user’s emotions and fears leads to more thoughtful, human-centric solutions.