KETHAN
Responsive Web Design for
E-Shelter
Timeline
20 days
My Role
UX designer
Deliverable
Responsive web and App
Platform
Adobe XD
The Product
E Shelter is a website cum app which helps people to search for emergency shelters around them in emergency times or users can even book the shelter of their choice in advance and if not used within 365 days, they can get their amount back.
Problem
Many people die without getting proper shelter in times of any emergency like war, natural calamities etc. The recent example was the Russian Invasion of Ukraine.
Solution
With the E shelter app, users can find shelters immediately during any kind of emergency or they can even book the shelters of their choice in advance as a precautionary measure.
People can get free shelter or a paid shelter with little extra recreational facilities like gym, swimming pool, movie theatre, etc.
Understand the Users
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users wanted an emergency getaway from ground reality. However, there were no websites or apps specifically made for Emergency Shelters, which frustrated and frightened many target users. This helped us become the first mover in the market.
Persona
Sinchana
Age: 22
Location: Kharkiv
Education: Engineering
Hometown: New Delhi
Goals
-
Info to safeguard themselves.
-
To know about nearest emergency shelter.
Frustration
-
No tool/app to find emergency shelters.
-
People demand a hefty money for information.
Even though I was ready to pay a hefty amount, I could not get any information regarding the emergency shelters.
Bio
Sinchana, who used to work as a junior software engineer in Ukraine, escaped from the war-torn country. She said, “Even though I was ready to pay a hefty amount, I could not get any information regarding the emergency shelters. I took shelter in an underground metro station where there were no proper toilet facilities or food.”
Sinchana finally escaped from Ukraine and came back to her hometown after 15 days since war was announced. She had no information about any safety shelters, food or even escape plans. She wants some information in case of emergencies.
Ideation
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on searching for shelter nearby and checking for basic facilities.
Paper to Digital
I then brought my idea to an interactive digital low-fidelity prototype and brought it to five potential users to collect feedback.
User Research
I conducted a user testing session on five participants. I then took the responses through note-taking in a spreadsheet to find common themes amongst the participants.
Usability Study findings
I made two major changes based on usability findings.
1. Design variations
I applied design changes like providing buttons horizontally with the pictures related to it below them.
Before Usability Study
After Usability Study
2. Design changes
I applied design changes like providing buttons horizontally with the pictures related to it below them.
Before Usability Study
After Usability Study
Mockups
Hi-Fidelity Prototype
.png){kind=tracking}
Mobile Prototype
Responsive Design
Sitemap
With the app designs completed, I started work on designing the responsive website. I used the E Shelter sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Responsive Designs
Mobile Web
Tablet Web
Desktop Web
Accessibility Considerations
1
Clear labels for interactive elements that can be read by screen readers.
2
I used minimal color themes across all the screens.
3
I used a familiar user flow that different apps use in common.
Impact
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy. The design even contained fewer colors for accessibility.
What I Learned?
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
.png){kind=tracking}
