About SWASA
SWASA is a premium face mask brand offering a range of protective face masks designed for safety, comfort, and style. The goal was to create an intuitive, user-friendly mobile e-commerce app that allows users to easily browse, select, and purchase face masks, while providing relevant health information and a seamless checkout experience. The project involved designing and developing the SWASA app with a focus on a clean, modern interface that encourages user trust and boosts conversions.
Problem Statement
As the demand for high-quality face masks surged, SWASA needed to create a mobile application to serve its growing user base. The existing online presence had limitations in providing a seamless and engaging shopping experience. The app needed to:
User Research
Objectives
Methods
Conducted interviews with 10 target users to understand their shopping behavior and expectations from a mask e-commerce app.
A broader survey with 50 participants to collect insights on preferences for mask features, browsing habits, and payment methods.
Evaluated the user experience of competing face mask brands and general e-commerce apps for best practices.
Key Findings
Tools
Figma
Flutter 3
Google Cloud
Facebook app id
Onesignal
Map box
Node JS
Personas
Based on user research, we created two primary personas
Maya
Health-Conscious Shopper
Amit
Busy Professional
Design Process
Development
The app was developed using React Native for cross-platform functionality, allowing both iOS and Android users to access the app. Key features included:
Challenges and Solutions
No. | Challenge | Solution |
01 | Users expressed concerns about data security during online payments | We integrated industry-standard SSL encryption and displayed trust badges during checkout to reassure users. |
02 | Displaying detailed mask specifications without overwhelming users | Created expandable sections for technical details, allowing users to access information on demand. |
Wireframing
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
· Low Fidelity
· Mid Fidelity
Design System
Macaw Blue Green
#54BDCB
Verdigris
#3EB6BF
Typography
Aa
Poppins
Medium
Lorem Ipsum is simply dummy
text of the printing.
Bold
Lorem Ipsum is simply dummy
text of the printing.
Application Logo
Login Screen
Main App Screens
Product detail Screens
Product List for easy access of the product
App Store &
Notification Preview
After the app launch:
Increased Conversion Rates
The app saw a 35% increase in conversion rates compared to the website.
User Engagement
Average session duration increased by 25%, with users spending more time browsing different products.
Customer Satisfaction
Post-launch surveys indicated that 87% of users found the app intuitive and easy to use.
Conclusion
SThe SWASA face mask e-commerce app successfully addressed the needs of health-conscious and convenience-driven users by providing a seamless shopping experience. Through user-centered design, careful testing, and a focus on simplicity and trust, the app was able to drive engagement and increase sales for the brand.
Next Steps
Future updates could include: