Framer Website Redesign
Context
A flexible Emergency Profile template system is needed to manage crises like active shooters, fires, and earthquakes. It should support event scheduling, communication channels, mustering points, and safety protocols for both evacuation and alert-only scenarios.
Role
Lead Product Designer
Timeline
5 Weeks
Core features
Core features
Custom Profiles
Give user the ability to customize profile and situations
Custom Profiles
Give user the ability to customize profile and situations
Message Partificpants
Create messages and choose which participants should recieve it
Message Partificpants
Create messages and choose which participants should recieve it
Mobile Friendly
Ensure that mobile users can view and initiate emergencies
Mobile Friendly
Ensure that mobile users can view and initiate emergencies
Custom Profiles
Give user the ability to customize profile and situations
Message Partificpants
Create messages and choose which participants should recieve it
Mobile Friendly
Ensure that mobile users can view and initiate emergencies
Impact Statistics
We started with in-depth secondary research using the data from our analytics team and drawing hypothesis and insights on what needs to be exactly worked on.
90%
User Satisfaction
90%
User Satisfaction
90%
User Satisfaction
40%
Fewer Errors
40%
Fewer Errors
40%
Fewer Errors
13min
Drop Onboarding Duation
13min
Drop Onboarding Duation
13min
Drop Onboarding Duation
Design Process
We started with in-depth secondary research using the data from our analytics team and drawing hypothesis and insights on what needs to be exactly worked on.
Research
Conduct secondary and primary research
Research
Conduct secondary and primary research
Synthesis
Extrapolait and synthesis data for deisgn
Synthesis
Extrapolait and synthesis data for deisgn
Ideation
Develop designs and prepare for testing
Ideation
Develop designs and prepare for testing
Reflection
Iterate final design and launch feature
Reflection
Iterate final design and launch feature
Current Problems
Limited Customization for Emergency Scenarios
Manual Processes Increase Response Time
Ineffective Communication
Difficulty in Planning and Reusability
Lack of Comprehensive Reporting
Response Time
During Evacuations, safety officers need to see how efficiently people are being evacuated on sites
Communication Channels
Certain participants did not recieve clear communication through difference channels
Onboarding & Learning
A lot of time is being spent with Onboarding team to educate users
Response Time
During Evacuations, safety officers need to see how efficiently people are being evacuated on sites
Response Time
During Evacuations, safety officers need to see how efficiently people are being evacuated on sites
Communication Channels
Certain participants did not recieve clear communication through difference channels
Communication Channels
Certain participants did not recieve clear communication through difference channels
Onboarding & Learning
A lot of time is being spent with Onboarding team to educate users
Onboarding & Learning
A lot of time is being spent with Onboarding team to educate users
Statistics and Secondary Research
We started with in-depth secondary research using the data from our Pendo and drawing hypotheses and insights on what needs to be worked on exactly.
30%
User Satisfaction
30%
User Satisfaction
30%
User Satisfaction
57%
Profile Errors
57%
Profile Errors
57%
Profile Errors
24min
Average Time Spent
24min
Average Time Spent
24min
Average Time Spent
Findings from Primary Research
After the in-depth secondary research from the team, we conducted usability tests, floated surveys and also user interviews to understand users and their perceptions.
We had 22 participants for our usability testing, 87 surveys, and 15 interviews
Main Feedback
Onboarding Calls
Clients had to keep calling our onboarding team to understand how to set up
Onboarding Calls
Clients had to keep calling our onboarding team to understand how to set up
Confused Messaging
Users did not fully understand to whom or what messages are being sent
Confused Messaging
Users did not fully understand to whom or what messages are being sent
No Reporting
Reporting data is the only way user can run more efficiently
No Reporting
Reporting data is the only way user can run more efficiently
Onboarding Calls
Clients had to keep calling our onboarding team to understand how to set up
Onboarding Calls
Clients had to keep calling our onboarding team to understand how to set up
Confused Messaging
Users did not fully understand to whom or what messages are being sent
Confused Messaging
Users did not fully understand to whom or what messages are being sent
No Reporting
Reporting data is the only way user can run more efficiently
No Reporting
Reporting data is the only way user can run more efficiently
Notable Quotes
Sergio - Safety Officer
Users did not fully understand to whom or what messages are being sent
Kimberly - Onboarding
Clients had to keep calling our onboarding team to understand how to set up
User Journey
The Redesign
After extensive meetings with the research team to identify key themes and align stakeholders on the direction, we kicked off the redesign with a team of four designers, collaborating to create a user-centered and cohesive design strategy.
Low-Fi Mockup
After extensive discussions with the team to identify key themes and align stakeholders on the direction, we began with low-fidelity mockups to establish a clear vision for the design approach.
Hi-Fi mockup
After finalizing low-fidelity designs with the product manager, I introduced larger configuration profile buttons with icons for easy identification. Simplicity and accessibility were key, especially for emergencies, while maintaining design continuity remained a top priority.
Hi-Fi message modal
Our biggest challenge was finding an effective way to manage messages. The existing system lacked clarity and ease of use, so I redesigned it by detaching messaging from its current flow and introducing a modal pop-up for configuration. This approach improved focus, reduced cognitive load, and provided a more intuitive, structured way for users to manage messages efficiently.
Mobile Mockups
Mobile mockups were developed in parallel, focusing on quick actions like emergencies, drills, and messaging, as users rarely configured profiles on mobile. This streamlined approach reduced cognitive load and aligned with user needs.
Validating the designs
We tested our redesign with 30+ users through task-based testing, A/B comparisons, heatmaps, and click-tracking. User interviews and surveys provided insights, ensuring improved usability, reduced friction, and alignment with user needs.
Interviews
Gathered detailed feedback from target users.
Interviews
Gathered detailed feedback from target users.
Five Second Test
Ensured users could easily navigate to key sections.
Five Second Test
Ensured users could easily navigate to key sections.
A/B Testing
Conducted A/B testing of the layout to ensure users can navigate effectively
A/B Testing
Conducted A/B testing of the layout to ensure users can navigate effectively
“I love the way everything looks. The larger buttons and icons help me see everything clearly and faster. The biggest win for me is the reporting aspect of it, I can find out whats happening on my sites during evacuations and drills”
-Annonymous User
“I can’t believe this is the same page I was using a few weeks ago. It’s night and day. I can now customize and understand the message template”
-Annonymous User
The Redesign
After extensive meetings with the research team to identify key themes and align stakeholders on the direction, we kicked off the redesign with a team of four designers, collaborating to create a user-centered and cohesive design strategy.
Low-Fi Mockup
After extensive discussions with the team to identify key themes and align stakeholders on the direction, we began with low-fidelity mockups to establish a clear vision for the design approach.
Hi-Fi mockup
Once the low-fidelity designs were finalized and aligned with the product manager, I introduced new UI elements, including larger configuration profile buttons with icons to help users easily identify their settings. Keeping the icons simple and accessible was crucial, especially in emergency situations. Ensuring design continuity remained a top priority throughout the process.
Hi-FI message modal
Our biggest challenge was finding an effective way to manage messages. The existing system lacked clarity and ease of use, so I redesigned it by detaching messaging from its current flow and introducing a modal pop-up for configuration. This approach improved focus, reduced cognitive load, and provided a more intuitive, structured way for users to manage messages efficiently.
Mobile Mockups
Mobile mockups were developed in parallel, focusing on quick actions like emergencies, drills, and messaging, as users rarely configured profiles on mobile. This streamlined approach reduced cognitive load and aligned with user needs.
Validating the designs
We tested our redesign with 30+ users through task-based testing, A/B comparisons, heatmaps, and click-tracking. User interviews and surveys provided insights, ensuring improved usability, reduced friction, and alignment with user needs.
Interviews
Gathered detailed feedback from target users.
Interviews
Gathered detailed feedback from target users.
Five Second Test
Ensured users could easily navigate to key sections.
Five Second Test
Ensured users could easily navigate to key sections.
A/B Testing
Conducted A/B testing of the layout to ensure users can navigate effectively
A/B Testing
Conducted A/B testing of the layout to ensure users can navigate effectively
“I love the way everything looks. The larger buttons and icons help me see everything clearly and faster. The biggest win for me is the reporting aspect of it, I can find out whats happening on my sites during evacuations and drills”
-Annonymous User
“I can’t believe this is the same page I was using a few weeks ago. It’s night and day. I can now customize and understand the message template”
-Annonymous User
Impact Statistics
We started with in-depth secondary research using the data from our analytics team and drawing hypothesis and insights on what needs to be exactly worked on.
90%
User Satisfaction
90%
User Satisfaction
90%
User Satisfaction
40%
Fewer Errors
40%
Fewer Errors
40%
Fewer Errors
13min
Drop Onboarding Duation
13min
Drop Onboarding Duation
13min
Drop Onboarding Duation
Reflections…
The current system’s limitations—lack of customization, manual processes, ineffective communication, and inconsistent design—hinder emergency preparedness and response. By enabling tailored profiles, reusable templates, and a consistent, user-friendly interface, we can address these challenges, improving safety, efficiency, and user confidence.
Data driven
Leveraged data to enhance design decisions & boost user engagement.
Data driven
Leveraged data to enhance design decisions & boost user engagement.
Working at extreme pace
Delivered top-notch designs quickly in a high-pressure environment.
Working at extreme pace
Delivered top-notch designs quickly in a high-pressure environment.
Stakeholder alignment
Convincing stakeholders to take a different direction.
Stakeholder alignment
Convincing stakeholders to take a different direction.
Notable Quotes
Sergio - Safety Officer
Users did not fully understand to whom or what messages are being sent
Sergio - Safety Officer
Users did not fully understand to whom or what messages are being sent
Kimberly - Site Adminitrator
Clients had to keep calling our onboarding team to understand how to set up
Kimberly - Site Adminitrator
Clients had to keep calling our onboarding team to understand how to set up
The Redesign
After extensive meetings with the research team to identify key themes and align stakeholders on the direction, we kicked off the redesign with a team of four designers, collaborating to create a user-centered and cohesive design strategy.
Low-Fi Mockup
After extensive discussions with the team to identify key themes and align stakeholders on the direction, we began with low-fidelity mockups to establish a clear vision for the design approach.
Hi-Fi mockup
Once the low-fidelity designs were finalized and aligned with the product manager, I introduced new UI elements, including larger configuration profile buttons with icons to help users easily identify their settings. Keeping the icons simple and accessible was crucial, especially in emergency situations. Ensuring design continuity remained a top priority throughout the process.
Hi-FI message modal
Our biggest challenge was finding an effective way to manage messages. The existing system lacked clarity and ease of use, so I redesigned it by detaching messaging from its current flow and introducing a modal pop-up for configuration. This approach improved focus, reduced cognitive load, and provided a more intuitive, structured way for users to manage messages efficiently.
Mobile Mockups
Mobile mockups were developed in parallel, focusing on quick actions like emergencies, drills, and messaging, as users rarely configured profiles on mobile. This streamlined approach reduced cognitive load and aligned with user needs.
Notable Quotes
Sergio - Safety Officer
Users did not fully understand to whom or what messages are being sent
Sergio - Safety Officer
Users did not fully understand to whom or what messages are being sent
Kimberly - Onboarding
Clients had to keep calling our onboarding team to understand how to set up
Kimberly - Onboarding
Clients had to keep calling our onboarding team to understand how to set up
User Journey
User Journey