WEARCAST
Your Smart Weather and Wardrobe Assistant
WearCast revolutionizes daily preparation by merging real-time weather forecasting with personalized wardrobe management. Offering dynamic weather insights, smart outfit recommendations, and a digital closet for seamless organization, it ensures users are prepared for any condition. With features like daily outfit planning, interactive forecasts, and customizable settings, WearCast delivers an intuitive and stylish user experience. This app exemplifies my expertise in crafting innovative, user-centric solutions that combine functionality with sleek design.
Year
2024
Category
UX / UI DESIGN



Research
The research phase of WearCast’s design process was critical to ensuring the app addressed real, validated user needs. We employed a combination of qualitative and quantitative methods to uncover pain points and opportunities, working collaboratively across teams to solve user challenges and refine the app through iterative design.
Understanding the Problem
Our initial hypothesis identified key challenges for users in cities like Manchester:
Weather Unpredictability: Users struggled to dress appropriately for sudden rain, wind, or temperature changes.
Time Pressures: Mornings were often hectic, leaving little room for outfit planning.
Wardrobe Overwhelm: Many users reported owning large wardrobes but frequently reusing the same items due to lack of organization.
These issues shaped our research questions: How can we simplify morning routines? How can weather and wardrobe insights work together to create a seamless experience?
Research Methodology
User Interviews:
We conducted 12 one-on-one interviews with users who fit our target demographic:Participants: Urban professionals aged 25–35 who commute and care about style.
Key Insight: 9 out of 12 participants mentioned checking both weather apps and wardrobe options in the morning, but found the process disjointed and time-consuming.
Surveys:
A survey distributed to 100individuals across the UK revealed:84% experienced outfit regret due to unexpected weather at least once a week.
73% wished they had a system to pre-plan outfits for the week ahead.
67% admitted to wearing less than 50% of their wardrobe regularly.
Ethnographic Observation:
We shadowed 5 users during their morning routines.Finding: Users spent an average of 7–10 minutes switching between weather apps and physically searching through their wardrobe for appropriate items.
Competitive Analysis:
We analyzed 5 leading apps in weather and wardrobe management:Gap Identified: None integrated real-time weather with outfit recommendations in a meaningful way.
The research phase provided actionable insights grounded in real user behavior, resulting in a solution that directly addresses pain points while enhancing usability. This thorough approach ensures that WearCast is not only functional but indispensable for its users.
Design
Challenges and Solutions
Balancing Simplicity and Functionality:
Challenge: Users wanted both quick access to essential features and the option to explore advanced functionalities.
Solution: We layered the interface, prioritizing primary features on the main screen and advanced options in collapsible menus.
Optimizing the Weather-Style Connection:
Challenge: Ensuring outfit suggestions were relevant to both the user’s style and the weather conditions.
Solution: Introduced machine learning-driven recommendations that adjusted based on user feedback and historical data.
Wardrobe Usability:
Challenge: Users needed a way to organize extensive wardrobes without feeling overwhelmed.
Solution: Developed an intuitive tagging and filtering system that allowed users to categorize items effortlessly.
Design Process
1. Ideation and Wireframing
We started with low-fidelity wireframes to map out key user flows, ensuring that each step aligned with the needs identified in the research phase:
Challenge: Users needed weather insights and outfit suggestions to coexist without overwhelming the interface.
Solution: A split-screen layout showcasing the weather dashboard on one side and outfit recommendations on the other, with swipe gestures for easy interaction.
2. Iterative Prototyping
We developed mid-fidelity prototypes to refine the app's structure and functionality:
First Iteration Feedback:
Users found the navigation intuitive but requested clearer categorization for wardrobe items.
Advanced weather metrics were too prominent, creating cognitive overload.
Refinement:
Reorganized the wardrobe section with icons and filters for quicker access.
Simplified the weather dashboard to prioritize temperature, precipitation, and UV index, with advanced metrics accessible via a dropdown.
3. Visual Design
The visual design reflected a sleek, modern aesthetic with a dark theme to appeal to the target audience’s professional and style-conscious nature:
Color Palette:
Dark background (#121212) for contrast and readability.
Vibrant orange (#FF7A59) and cool blue (#3B82F6) accents for visual hierarchy.
Neutral grays for secondary elements to reduce clutter.
Typography:
Bold, sans-serif fonts for headlines (e.g., Poppins) to convey clarity and energy.
Clean, sans-serif body text (e.g., Roboto) for readability.
4. Component Design
Each feature was broken into modular components for easy scalability:
Weather Dashboard:
Designed as interactive weather cards with swipe functionality for hourly and weekly forecasts.
Included icons for quick interpretation of temperature, precipitation, and wind speed.
Wardrobe Manager:
Created digital closet categories with drag-and-drop functionality for organizing items.
Integrated camera upload and tagging options for a seamless user experience.
Outfit Suggestions:
Displayed recommendations with an editable style preview.
Added a refresh button for alternative options and a pre-planning tool for future days.
5. Interaction Design
To enhance the user experience, we incorporated fluid animations and gesture-based interactions:
Gestures:
Swipe to explore weather forecasts or switch outfit suggestions.
Drag-and-drop items to the planner for scheduling outfits.
Animations:
Subtle transitions between screens to maintain continuity.
Feedback animations when users interact with features like wardrobe tags or weather metrics.



©2025 mob! design
GO BACK TO TOP