The Weather Network

Mobile App Design

This was a job for a client with specific instructions of adding new features to their pre existing application. Developing the user interface and understanding the user experience for customers to enjoy and engage with photography from users around Canada.

This feature launched and was developed for mobile app users for both iPhone and Android screen dimensions, high-fidelity mockups and wireframes preview linked below.

Case Study: The Weather Network

Project Overview

Client: The Weather Network

Objective: Add new features to the existing application, focusing on developing the user interface and enhancing user experience for customers to enjoy and engage with user-generated photography from across Canada.

Role: Product Designer

Tools: Figma, Adobe Photoshop

Project Dynamic: Solo project

Deliverables: High-fidelity mockups and wireframes for both iPhone and Android screen dimensions.

Problem Statement

The Weather Network app needed an engaging feature that would allow users to share and view weather-related photographs from across Canada, enhancing user interaction and community engagement.

Research and Discovery

User Needs:

  • A platform to share and view weather-related photographs.

  • An intuitive interface that is easy to navigate on both iPhone and Android devices.

  • Engagement features to interact with the community and enjoy user-generated content.

Competitive Analysis:

  • Analyzed similar apps and their user engagement features.

  • Identified the gap in incorporating user-generated content to enhance community interaction.

Key Insights

  • Users are more likely to engage with the app if they can contribute content and view others' contributions.

  • A seamless and visually appealing interface is crucial for user satisfaction.

  • Both iPhone and Android users need a consistent and high-quality experience.

Design Process

1. Ideation and Conceptualization:

  • Brainstormed features and functionalities to incorporate user-generated photography.

  • Sketched initial designs and discussed ideas with stakeholders for feedback.

2. Low-fidelity Prototyping:

  • Created low-fidelity wireframes to outline the app’s structure and user flow.

  • Ensured the design addressed the main user needs for sharing and viewing photographs.

3. High-fidelity Prototyping:

  • Developed high-fidelity mockups with a clean and modern interface.

  • Key Features:

    • Photo Sharing: Users can upload weather-related photographs.

    • Photo Gallery: A gallery to view user-generated photos from across Canada.

    • Engagement Tools: Features for liking, commenting, and sharing photographs.

4. User Testing:

  • Conducted usability testing with a diverse group of users.

  • Iterated on the designs based on feedback to enhance usability and functionality.

Key Features

  • User-generated Content: Platform for users to upload and share weather-related photos.

  • Interactive Gallery: Engaging photo gallery for users to explore and interact with photographs.

  • Consistent Experience: Ensured a seamless experience across both iPhone and Android devices.

Results and Impact

  • User Engagement: Significant increase in user engagement due to the new photo-sharing feature.

  • Community Building: Enhanced sense of community as users interacted through shared photographs.

  • Positive Feedback: Received positive feedback from users appreciating the new features and improved interface.

Reflections and Learnings

  • The importance of community engagement features in mobile applications.

  • The value of a consistent and visually appealing interface across different devices.

  • The need for continuous user feedback to iterate and improve app features.

Conclusion

The Weather Network Mobile App project successfully added new features that enhanced user engagement and community interaction through user-generated photography. By focusing on user needs and providing a seamless experience across devices, the app achieved its objective of increasing user interaction and satisfaction.

Links to High-fidelity Mockups and Wireframes:

Live Preview (iPhone mockup)

Live Preview (IOS)

Live Preview (Android)