Major Project // Solenna
25.09.2024 - 08.01.2025 // Week 1 -Week 16
Lim Yi Xvan 0354552
Bachelor of Design in Creative Media
Instruction
Discovery Phase
W1 - 2
Choosing the Topic
The decision to focus on a menstrual health app was also guided by feedback from my lecturer, Mike, who suggested creating a "super app" that offers multiple services to address different user needs. This idea aligned perfectly with my vision to design an app that simplifies and supports menstrual health management while incorporating unique features like a store locator and rewards system, which are often missing in existing apps.
In addition, I considered Sustainable Development Goal 3 (SDG 3: Good Health and Well-being), which emphasizes promoting health for all. This app would contribute by empowering users to manage their menstrual health, access educational resources, and make informed choices.
W2 - 3
Initial Research
To ensure the app addressed real user needs, I began with an in-depth analysis of existing apps and products in the market, such as Clue, Flo, and similar platforms. I reviewed their features and identified several gaps:
- A lack of reward systems to motivate regular tracking.
- There is an absence of a store locator for finding menstrual products in emergencies.
- Limited holistic educational content tailored to different age groups or life stages (e.g., menstruation, menopause).
I also explored case studies of period-related products like Livia, Rael, and Ovira, highlighting the importance of integrating education with practical solutions. User reviews and feedback revealed the demand for:
- Personalized reminders that align with busy schedules.
- A more engaging experience through rewards or gamification.
- Easy access to resources during emergencies, such as nearby stores or product recommendations.
These findings shaped my app's core features and guided the design process to meet underserved user needs.
W3 - 4
User Personas and Problem Identification
To create a user-centered design, I developed detailed user personas based on insights from research and target audience analysis. These personas helped identify key pain points and goals, ensuring the app addresses diverse user needs.
- Difficulty managing menstrual health alongside busy lifestyles.
- The need for tailored educational resources for different age groups.
- Challenges in finding products during emergencies.
By addressing these issues, my app aims to provide
practical, user-friendly solutions that support menstrual
health and empower users to make informed choices.
Ideation Phase
W4 - 5
Feature Planning Based on Case Studies
The ideation process began with analyzing similar apps in the market to identify key features and gaps. These case studies provided valuable insights into industry trends and user expectations, which were used to plan the features for the app.
- Steps Taken:
-
Research Competitor Apps:
- Apps analyzed: Flo, Clue, and My Calendar.
- Focus was on identifying popular features like symptom logging, reminders, and tracking insights.
-
Gap Analysis:
- Noticed that most apps lacked features like emergency store locators or a reward system to motivate consistent use.
-
Feature Prioritization:
-
Compiled a list of features that aligned with user
needs and the app’s objectives:
- Period Tracker: Calendar-based tracking with automatic predictions.
- Store Locator: A map interface for nearby menstrual product shops.
- Reward Points System: Gamification elements to encourage regular use.
- Educational Section: Articles and tips on menstrual health.
-
Compiled a list of features that aligned with user
needs and the app’s objectives:
- User-Centric Refinements:
- Simplified feature complexity based on user feedback to avoid overwhelming first-time users.
Introducing the App Story
The app story reflects the vision and purpose of the project, creating an emotional connection with the target audience.
-
The Problem:
- Many period tracking apps focus solely on tracking cycles, leaving out immediate solutions for emergencies, motivation, or education. Users often feel unsupported during unexpected scenarios, like running out of menstrual products.
-
The Solution:
- The app offers a comprehensive solution by combining tracking, shopping, and rewards into a single platform. By adding a store locator and a point-based motivation system, the app supports users in both emergency situations and day-to-day tracking, making it a true companion during menstrual cycles.
-
Target Audience:
- Women aged 13–35 who value convenience and empowerment, including students, working professionals, and those new to menstrual tracking apps.
W5 - 6
Task Flow Design
Task flow design helped outline how users would interact with the app to complete key actions. This stage focused on creating intuitive navigation paths and minimizing friction in the user experience.
-
Key Task Flows:
-
Tracking a Menstrual Cycle:
- Open the app → Quick View of current cycles → View the calendar → Log symptoms (e.g., cramps, mood) → Receive cycle predictions.
-
Purchasing Menstrual Items from a Store in an
Emergency:
- Open the app → Tap the “Store Locator” → View nearby stores on a map → Shop Products.
-
Earning Rewards:
- Shop Products → Earn reward points → Redeem for discounts or benefits (vouchers) or Premium Contents.
-
Accessing Educational Content:
- Open the app → Navigate to the “Educational Content” section → Browse contents on menstrual health, pain relief tips and self-development related contents.
-
Tracking a Menstrual Cycle:
Tools Used:
- User Journey Maps: Visualized how users move through each feature and identified bottlenecks.
- User Flow Diagrams:
- Created detailed flow diagrams to illustrate step-by-step interactions between the user and the app for each feature. These diagrams helped in refining navigation paths and ensuring a seamless user experience.
Design Phase
The design phase focused on creating a visually appealing
and intuitive interface while ensuring accessibility and
inclusivity. This process was divided into several
sub-stages, including wireframing, visual design, user
testing, and art direction.
W6 - 7
Wireframing Process
Low-Fidelity Wireframes
Low-fidelity wireframes were the foundation of the design phase, focusing on layout, navigation flow, and functionality without diving into visual details. These sketches mapped out key screens such as the home page, menstrual tracker, store locator, rewards section, and educational content interface.
Wireframe Creation in Figma
-
Process:
- Began with hand-drawn sketches to quickly visualize ideas.
- Transitioned to Figma to create low-fidelity wireframes, ensuring a clear structure and flow for the app’s features.
- Prioritized simplicity, ensuring that primary functions like tracking, finding stores, and earning points were easily accessible.
-
Navigation Flow:
- Designed with a minimalistic and logical flow to guide users seamlessly through the app.
- Key screens were linked to form a cohesive navigation experience, emphasizing quick access to core features.
User Interface Decisions:
- Integrated a tab bar navigation system for consistent accessibility to main features.
-
Created modular layouts for educational content and
product listings, ensuring a clean and organized
presentation.
W 7 - 8
User Testing of Low-Fidelity
Wireframes
Low-fidelity wireframes were tested with user personas to gather feedback on usability, layout, and features.
Feedback and Improvements
User Persona 1: Ashley (18, College Student)
- Feedback: Appreciated quick access to important features and navigation ease but suggested adding more visuals or fun animations.
- Improvement: Incorporated playful micro-interactions and animations for a more engaging experience.
User Persona 2: Lynda (29, Fashion Consultant)
- Feedback: Liked the professional layout but requested more articles on work-life balance and stress.
- Improvement: Expanded the educational content section to include topics on stress and self-care for busy professionals.
User Persona 3: Fionna (50, My Mom)
- Feedback: Preferred larger fonts and a ‘do not disturb’ setting, with shorter article summaries for readability.
- Improvement: Added font scaling in settings, a 'do not disturb' mode for reminders, and summary highlights for articles.
User Persona 4: Mizzie (13, My Cousin)
- Feedback: Wanted simpler language, quizzes, and a diary section for emotional tracking.
- Improvement: Revised copywriting to simplify terms, introduced a fun quiz section, and added a diary feature.
W9 - 12
Visual Design & Art Direction
The visual design phase focused on crafting a calming, inclusive, and modern aesthetic to align with the app's purpose and brand identity. The art direction guided the overall visual identity of the app, focusing on creating a calming, modern, and user-friendly aesthetic.
Color Palette
Solution:
- Primary Colors: Soft pinks and rose nude to reflect calmness and femininity.
- Secondary Colors: Light blue to evoke trust, health, and neutrality.
- Action Colors: Dark wine red for actionable elements like buttons and important highlights, ensuring contrast and focus.
Typography
- Font Choices: Poppins for headers (modern and friendly) and Inter for body text (clean and legible).
- Hierarchy: Emphasized a clear text hierarchy, with larger, bold fonts for key features and smaller, softer fonts for secondary content.
- Accessibility: Incorporated font scaling options to support diverse users, including older adults and teens.
Icons and Visuals
Problem:- Navigation ease and action clarity.
- Enhancing engagement and personalization.
- Keeping users engaged and rewarded.
- Icons: Designed simple, illustrated icons for features like cycle tracking, rewards, and store locator, ensuring clarity and accessibility.
- Graphics: Used soft and empathetic visuals, such as illustrations of diverse women, to enhance relatability and engagement.
Logo Design
- Creation with Adobe Illustrator:
- Symbolism: The logo combines a crescent moon and petals, representing cycles, calmness, and empowerment.
- Behind the Story: The crescent moon reflects the cyclical nature of menstruation, while the petals signify diversity and growth. Together, these elements convey the app's mission of providing comfort, support, and inclusivity.
W11 - 12
Rationale and Brand Values
The app’s name, “Solenna,” is derived from the word "solace," emphasizing comfort, support, and relief during menstrual cycles. Its modern, friendly tone aligns with the app’s goals of empowerment, calmness, and trust.
Brand Values
- Comfort and Trust: Gentle pastel tones and readable fonts create a safe, soothing environment.
- Empowerment with Simplicity: Rounded UI elements and intuitive navigation make the app accessible to all users.
- Connection and Engagement: Personalized tracking and dynamic animations promote a sense of belonging.
- Modern Health and Diversity: Inclusivity in design ensures the app caters to teens, adults, and older users alike.
W12 - 15
High-Fidelity Prototypes in Figma
Design Process for High-Fidelity Prototypes
The transition from low-fidelity wireframes to high-fidelity prototypes focused on enhancing visual aesthetics, interactivity, and usability. Here’s an overview of the process:
-
Base Structure
Using the low-fidelity wireframes as a foundation, I began refining the layout by applying branding elements such as typography, color palette, and graphical assets. Each screen was carefully structured to maintain consistency while aligning with the user personas’ needs. -
Adding Visual Elements
- Color Palette: The app's calming pastel tones, including soft pinks, rose nude, and light blue, were applied to create a cohesive visual experience.
- Typography: Headers used the Poppins font for clarity and emphasis, while body text utilized Inter for readability. I incorporated font scaling options to accommodate diverse user needs.
- Icons and Graphics: I added simple, illustrated icons for key features such as cycle tracking, store locator, and educational resources. These icons were designed to enhance navigation and accessibility.
- Animations: Subtle animations, such as button hover effects, transition fades, and celebratory confetti for milestones, were integrated to improve engagement.
-
Interactive Components
- Designed interactive elements like buttons, dropdowns, and sliders in Figma to simulate real-world app functionality.
- Prototyped the store locator feature to show nearby stores, complete with a hover effect for store details.
- Created an interactive shopping cart and checkout flow to mimic the e-commerce experience.
-
Content Hub Design
The educational resource section was designed to include card-style layouts for articles, with an option to view summaries or detailed versions. Interactive features, such as quizzes and animations, were also incorporated to cater to younger users like Mizzie. -
Testing Iterative Prototypes
After completing the high-fi designs, I created clickable prototypes in Figma. These allowed testers to navigate through the app as if it were fully functional, helping me gather valuable feedback.
W15
Feedback from User Testing of High-Fidelity
Prototypes
User Persona 1: Ashley (18) – College Student
-
Comments:
"Easy to navigate; the home screen provides quick access to important features. I love the visuals!" -
Changes Made:
- Kept the layout of the home screen simple and accessible.
- Enhanced the visual elements with subtle animations to improve the aesthetic appeal.
User Persona 2: Lynda (29) – Fashion Consultant
-
Comments:
"The outcome is amazing! The soft hues used in the app are so calming. There are so many educational resources on the content hub. The illustrations are cute. The store locator, shop product, and checkout page are so smooth!" -
Changes Made:
- Optimized the content hub’s design by categorizing educational resources for easier navigation.
- Improved the product listing with hover effects for added interactivity.
- Ensured the store locator and checkout flows remained intuitive and visually appealing.
User Persona 3: Fionna (50) – My Mom
-
Comments:
"Everything looks cool, but some buttons and text in certain sections are a bit small for me. The product page is convenient; I love the hover-to-view-next-image feature. The checkout page looks so real—I thought I was actually purchasing something!" -
Changes Made:
- Increased the font size and button size in sections where readability was an issue.
- Enhanced the product page hover feature for better accessibility.
- Refined the checkout page visuals to balance realism and clarity.
User Persona 4: Mizzie (13) – My Cousin
-
Comments:
"The animations are so cute; they feel youthful and energetic. The content hub is interesting—I hope this app comes to life!" - Changes Made:
- Added more dynamic animations and fun transitions in the educational section.
- Designed and added quick tips in the content hub to make learning more engaging.
W15 - 16
Post-Feedback Changes and Refinements
Based on the feedback, I implemented the following refinements:
-
Accessibility Improvements
- Added a font-scaling feature in settings to cater to users like Fionna who prefer larger text.
- Adjusted button sizes and spacing for better usability across all age groups.
-
Enhanced Visuals and Interactivity
- Refined animations to balance playfulness and simplicity, appealing to younger users like Mizzie while remaining professional for adults like Lynda.
- Incorporated hover effects, subtle transitions, and celebratory animations to make interactions feel more rewarding.
-
Content Optimization
- Introduced shorter versions of articles for users like Mizzie who prefer quick, digestible content.
- Added menopause-related tips and summaries for Fionna, ensuring content is user-friendly for older audiences.
-
E-Commerce Flow Enhancements
- Polished the store locator, product browsing, and checkout flows for a seamless shopping experience, as highlighted by Lynda’s feedback.
- Added interactive elements like hover-to-view-next-image for product pages.
The high-fidelity prototypes effectively addressed user needs across all personas, offering a blend of accessibility, interactivity, and aesthetic appeal. User feedback was instrumental in refining the app, ensuring it caters to a diverse audience while staying true to its mission of providing comfort, empowerment, and convenience.
W16
Creating Mockups and Planning Promotional
Efforts
After finalizing the high-fidelity prototypes and refining the user interface based on feedback, I shifted my focus to creating mockups for promotional collaterals and planning an integrated marketing strategy to build awareness and engagement for the app.
Conceptualizing the Branding for Promotional Collaterals
To ensure that all marketing materials align with the app’s identity, I developed a cohesive branding style that would resonate with the target audience. This included:
- Color Palette: Soft pastel tones such as blush pink, light blue, and warm beige, reflecting the app’s calming and approachable nature.
- Typography: Clean, legible fonts such as Poppins and Inter, emphasizing professionalism and user-friendliness.
- Graphics and Illustrations: Custom illustrations and minimalistic icons inspired by elements from the app, including flowers, self-care woman graphics with her menstrual cycles. These would appear across all promotional materials for a consistent look.
Designing Mockups for Collaterals
I created high-quality mockups for various promotional materials using design tools like Adobe Photoshop, Illustrator, and Figma. The mockups were tailored to showcase how the branding elements could be effectively implemented in real-world scenarios. Here are the key collaterals:
Posters- Design: Bold, eye-catching visuals with minimal text, featuring key app features like the period tracker, store locator, and reward points system.
- Placement: Designed for high-traffic locations like university campuses and public transportation hubs.
- Call-to-Action (CTA): Posters prominently displayed QR codes for app downloads, alongside slogans like “Empower Your Cycle, Simplify Your Life” and “Track. Shop. Earn.”
Social Media Posts
- Formats: Static posts, carousels, and animated reels for platforms like Instagram, Facebook, and TikTok.
-
Content Highlights:
- Educational infographics about menstrual health and self-care tips.
- Tutorials on how to use the app’s features (e.g., period tracking, store locator).
- Promotional campaigns for the reward points system, offering exclusive discounts for early adopters.
- Hashtags: Developed branded hashtags like #EmpowerYourCycle, #SolennaHealth, and #CycleSmart to encourage user interaction.
Tote Bags
- Design: Reusable tote bags featuring the Brand's name and minimalistic floral graphics and woman hugging flowers which represent cycles which encouraged self love and acceptance.
- Purpose: Distributed as giveaways during promotional events and through social media contests. They also align with sustainability goals, encouraging eco-friendly practices.
Final Submission
Final Compilation Deck
Google Drive Link (All Assets):
Final Presentation
Final High Fidelity Prototype
Reflection
Throughout the development process, I faced several challenges that tested my skills and ability to adapt. One of the most significant hurdles was balancing features and simplicity. I wanted the app to be feature-rich and provide value to users, but it was equally important to keep the interface intuitive and easy to navigate. This required careful consideration and multiple iterations to ensure the app met user needs without overwhelming them. Refining designs based on feedback was another challenge. While user feedback was invaluable, implementing changes—such as adjusting text sizes for older users or fine-tuning visuals—required striking a balance between functionality and aesthetics. Managing my time effectively was also a critical challenge, as the project involved multiple phases, from wireframes and prototypes to user testing and promotional designs. Juggling these tasks alongside other academic commitments demanded meticulous planning and prioritization. Additionally, ensuring that visually appealing design elements, such as animations and hover effects, were technically feasible added another layer of complexity to the process.
This project taught me several important lessons, particularly the value of user feedback. Every comment from the personas—whether it was Ashley appreciating the quick access to features or Fionna pointing out text size issues—helped me better understand the diverse needs of the target audience. It reinforced the importance of designing with users in mind and continuously iterating based on their input. I also gained a deeper appreciation for the iterative design process. Each phase of refinement, from initial sketches to high-fidelity prototypes, brought new insights and improvements, highlighting the need for flexibility and openness to change. Time management and prioritization emerged as critical skills, as I had to balance various tasks while ensuring that each milestone was completed on schedule. This experience taught me to focus on high-priority deliverables, such as finalizing prototypes, before moving on to other aspects like promotional materials.
Looking to the future, there are several features and ideas I would like to improve or implement. Enhancing accessibility is a key priority, and I plan to explore features like customizable font sizes, color contrast settings, and voice-assisted navigation to make the app more inclusive. Expanding the educational content within the app is another area of focus, as I aim to add more in-depth articles, videos, and interactive guides on topics such as nutrition, exercise, and mental health related to menstrual health. I am also interested in introducing gamification features to further engage users, such as badges for tracking streaks and leaderboards to encourage consistent app usage. Offline functionality is another improvement I would like to explore, allowing users to access period tracking and educational resources even without an internet connection. Additionally, integrating AI-powered insights could provide users with personalized recommendations based on their data, such as lifestyle adjustments or product suggestions to ease menstrual discomfort.
This project has been a transformative journey for me as a UI/UX designer. One of the most valuable outcomes has been developing empathy for users. Understanding user personas and analyzing their feedback deepened my ability to create designs that are not only visually appealing but also functional and inclusive. I also improved my problem-solving skills by addressing design conflicts and technical constraints, which required creativity and adaptability. Working on this project has refined my understanding of the end-to-end design process, from ideation and prototyping to testing and refinement, teaching me the importance of attention to detail and continuous improvement. Additionally, collaborating with users, peers, and my lecturer helped me strengthen my communication skills and ability to incorporate diverse perspectives. Above all, this project has boosted my confidence in my ability to create meaningful, user-centered designs and solidified my passion for UI/UX design.
In conclusion, this app represents more than just a project—it is a tool designed to address real user needs and contribute to menstrual health and well-being. By combining functional features with an engaging design, I aimed to empower users to take control of their cycles while fostering a sense of support and community. I am deeply grateful to my friends and family, who provided valuable insights, and my lecturer, Mr. Mike, for his guidance and encouragement throughout this journey. I also extend my gratitude to the users who participated in testing and shared their honest opinions, as their feedback was instrumental in shaping the app. Moving forward, I am excited to continue refining the app and exploring new ways to enhance the user experience. This project has been both challenging and rewarding, and it has strengthened my commitment to creating designs that solve real-world problems and make a meaningful impact.
Comments
Post a Comment