Reimagining Weather App Design
Purpose / Context
In this project, I embarked on an explorative journey through comprehensive research, analytical thinking, and the application of UX design best practices. My aim was to evolve a conventional weather report application into a user-centric, intuitive, and visually appealing digital tool. I worked towards transforming complex data into user-friendly displays, cultivating a user habit of consulting the app before water-bound activities, and refining the UI for enhanced appeal.
This project served as a demonstration of an end-to-end UX design process within the scope of app development with the goal of showcasing each stage of the journey, from inception to fruition.
My Role
As the lead of the UX process, I worked independently, using the robust Double Diamond design methodology as a guide. This approach steered me through crucial phases of Discovery, Definition, Development, and Delivery.
Objective
My vision for Tides was to create a tool that provides visually stunning and intuitively understood wind, wave, and weather reports and forecasts. This information would cater specifically to the diverse needs of sailors, surfers, divers, and other water sports enthusiasts.
Problem Statement
Enthusiasts of water sports often need precise and timely weather data for their specific bodies of water. Users require an efficient way to plan their activities in harmony with the prevailing weather conditions, which significantly impact their safety and enjoyment. Success would be reflected in users regularly using the app to safely plan activities and monitor local weather situations related to their choses water sport.
Potential Solutions
-
Encourage community involvement by allowing users to submit personal weather observations seamlessly.
-
Offer detailed hourly, daily, and weekly forecasts, along with real-time weather conditions.
-
Customize Tides to provide specific weather conditions and information tailored to different water sports.
-
Use data from various technical sources, presented through visually simplified and minimalist design for easy comprehension.
Best Solution
Tides empowers users to pinpoint any body of water and gain optimized insights into local conditions. The app offers a customizable profile based on individual water sport preferences, cultivating a space for enthusiasts to interact, plan activities, and share insights. The focus is on real-time condition data, supplemented with localized information sourced from both local shops and individual users. Tides transforms the user experience from mere consumption of data to active participation and community-building, driving engagement and creating a sense of belonging among the users.
Tides is a forward-thinking mobile/web weather forecast application, meticulously designed to enrich the experiences of the water-sports community by facilitating informed planning and fostering dynamic interactions around weather-based excursions.
Research & Analysis
User Interviews
In order to capture a broad yet nuanced understanding of my target users' behaviors before heading out to the water, I handpicked a diverse trio of interviewees - a fisherman, a spear fisherman, and a free diver. This careful selection of users ensured that I received varied insights, painting a more comprehensive picture of the needs, goals, and frustrations of the water-sports community.
From these interviews, I curated a spectrum of behaviors, attitudes, needs goals, and frustrations, grouping them into an affinity map. This helped to distill key insights and highlighted patterns that would inform the next steps of my design process.
User Interview Key Insights
-
There's a widespread emphasis on the accuracy of reports and forecasts, underscoring the needs for reliable data.
-
Spearfishing enthusiasts display a keen interest in nuanced information about swell and wind conditions, reflecting the necessity of detailed, sport-specific weather data.
-
Users found complicated data intimidating and confusing, indicating a need for simplified and accessible data presentation.
-
Popular online tools among my interviewees included Surfline, Magic Seaweed, and Windy, showing potential platforms to draw inspiration from.
-
Spear-fishermen consistently rely on surf weather apps to monitor conditions, demonstrating the value of habitual use of these tools.
-
My interviewees utilized a diverse range of tools for their research and condition checks, suggesting the need for a more unified and comprehensive solution.
Personas
Drawing upon the rich data collected through surveys and interviews, I fashioned two distinct user personas - Charles and Tim. These personas are not just hypothetical constructs but vibrant embodiments of my research findings.
Charles and Tim serve as constant reminders of the user-centric focus of my design approach, anchoring all future design decisions firmly within their needs and goals. In essence, these personas represent the quintessential target users for Tides, and their narratives will be the guiding lights in the continued evolution of this project.
User Journey
To deeply understand the motivations behind Charles and Tim's engagement with Tides, I meticulously crafted user journey maps for each persona.
These user journey maps serve as illustrative narratives of Charles' and Tim's interactions with Tides They effectively encapsulate the sequential steps they would take to achieve their goals, along with the corresponding thoughts and emotions experienced during this process. These visual tools offer a vivid depiction of the user experience, thereby informing decisions to enhance and optimize their journeys.
Concept & Design
Sitemap (Information Architecture)
To lay the foundational structure for Tides, I crafted the initial sitemap. Prioritizing simplicity, I designed the structure to offer multiple pathways to access a forecast. This approach ensures that users have the flexibility to choose the most convenient route, catering to their individual preferences and enhancing the overall user experience.
To validate the assumptions underlying my sitemap, I conducted an open card sort using Optimal Workshop. Participants were given 28 cards in total and asked to categorize them as they saw fit. The results largely aligned with my initial grouping, with a few exceptions that provided valuable insights.
Sitemap Issues and Adjustments
Participants instinctively grouped the "Save to Favorites" card with the "Favorites" screen. Thus, I decided to integrate this as a feature, enhancing the user-friendliness of the app.
Likewise, the "Set Notifications" feature was frequently associated with "Preferences" and other aspects of the "Profile" screen. In response, I adjusted the sitemap to include this feature in the users' profile.
Future Improvements
The participants created a total of 26 categories, with a median of 4 per participant, but their category labels differed somewhat from those in my initial sitemap.
Although the Similarity Matrix clarified these deviations and confirmed that most cards had been grouped as intended, the experience suggests a closed card sort with preset categories might provide better results in the future. This approach could offer more clarity to participants, potentially leading to a more precise validation of the sitemap.
Sketches
Armed with an initial structure for the app, I embarked on the ideation phase and sketched out low-fidelity wireframes using pen and paper. The process began with conceptualizing the navigation, and then I moved on to sketch high-level solutions for three key features that would facilitate my users in achieving the goals identified in the user flows.
-
Search, Filter, & Save to Favorites: This feature will enable users to effectively explore, refine, and bookmark their preferred forecasts.
-
Share Weather Conditions of Recently Saved Location: A feature designed to promote community engagement, allowing users to share real-time weather conditions of their recently saved locations.
-
Chat with a Local Shop to Verify Weather Conditions: This feature adds an extra layer of verification, enabling users to communicate directly with local shops to confirm weather conditions. This strengthens the app's reliability and fosters a stronger connection between users and local businesses.
Taking the high-fidelity screens, I constructed an interactive, clickable prototype using Figma. This transformed the static screens into a dynamic, exploratory experience for the users.
I proceeded to conduct moderated remote usability tests with five participants, utilizing Zoom as the platform. Zoom's screen sharing and recording functionalities facilitated effective communication and seamless test administration.
The participants were assigned three tasks to complete, each task mirroring the main activities of my user personas. This approach ensured that the tests were grounded in realistic, user-centric scenarios, providing invaluable insights into the prototype's performance and usability.
Interactive Prototype
High-Fidelity Wireframes
In the final phase of the wire framing process, I developed high-fidelity wireframes using Figma. It was at this stage that I introduced color to formerly grayscale designs. The transformation provided users with a more realistic prototype, balancing usability with aesthetics.
As I increased the design fidelity, I made several iterations for improvement. One key amendment involved the display of weather data on the forecast screen. Upon reflection, I realized that users might prefer to simultaneously view data for weather, wind, and swell for a specific moment, as opposed to examining these elements separately. This insight prompted a crucial refinement in the data presentation, aimed at enhancing user convenience and comprehension.
Onboarding
I started onboarding with an idea to guide users as they navigate the app helping them understand the basic functions. I opted out of asking users to sign up or bombarding them with requests to grant permissions. I wanted the users to explore and have fun before asking for more information.
You can see that I went through a few iterations with help from user testing and learning more about design systems and material design. The biggest difference was making the decision to have the navigation fixed on the left of the screen.
Prototype &
Usability Testing
Moderated Usability Tests
Im processing the data from the usability test, I created an affinity map to collate and identify trends. This food was instrumental in capturing valuable insights and documenting primary points of friction, user observations, and opinions within a comprehensive rainbow spreadsheet.
I adopted Jakob Nielsen's severity rating scale to categorize the identified errors, which facilitated the prioritization of the most critical friction points.
Ultimately, I produced a report encapsulating these issues, backed by substantial evidence from the usability tests. This report also suggested modifications to the prototype, offering a clear direction for future enhancements and rectifications.
Testing Challenges and Future Improvements
One of the substantial hurdles I faced during the testing phase involved effectively testing and recording the prototype on mobile devices with my participants. I deemed this aspect crucial for providing a more genuine understanding of how the app would perform and flow on a mobile interface.
To overcome this challenge, I requested participants to screen record on their phones while also recording through Zoom on their desktop. This allowed me to observe their reactions in tandem with their interactions on the phone, enabling me to review both recording simultaneously after the session.
However, this process proved to be somewhat complex. Moving forward, I plan to apply this technique only with participants who are more technologically adept.
Preference Test
To further refine the visual design of Tides, I conducted a preference test using Usability Hub. The objective of this test was to gauge user preferences and opinions regarding potential images for the onboarding screens.
By utilizing Usability Hub, I was able to gather valuable feedback from participants and gain insights into their preferences. This feedback will serve as a valuable guide in selecting the most engaging and visually appealing images for the onboarding process of Tides.
Polishing
the Design
Through the rigorous process of usability testing with participants, several key findings emerged. These findings informed valuable changes and refinements for the final prototype.
The culmination of the design process resulted in an interactive clickable prototype. The prototype, accompanied by clearly defined components and a comprehensive style guide, embodies the culmination of user-centered design principles and iterative improvements.
Here are a few examples showcasing what some final screens of the UI might look like, representing the culmination of the design journey and vision of Tides as an intuitive and visually appealing weather app for water sports enthusiasts.
Final Design
Home Screen
The Home Screen went through a few iterations. Starting with a bottom navigation, map, and forecast. I felt like this cluttered up the screen so I moved on to an interactive map that filled the screen.
You can see that I had the search bar fixed to the top of the screen and removed it after a couple iterations and brought it back in the final iteration. I realized after user testing that bringing back the search function would reduce the amount of steps a user would need to complete a task.
Location Screen
This may not seem like it changed much but I struggled with the design for this screen. I wanted to present all the information but also have it structured properly. You can see with the final iteration that a better hierarchy has been developed between all the elements on the page.
Style Guide
To ensure consistency and maintain a cohesive visual design for Tides, I crafted a style guide serving as a reference document, outlining reusable design elements, guidelines, and specifications.
By adhering to the style guide, the UI design of Tides remains consistent and on-brand throughout the application. It provides a clear framework for designers and developers, streamlining the design process and contributing to a unified user experience.
Even in UI-Focused projects, I've come to recognize the indispensable role of UX research. It serves as the compass that guides design decisions, ensuring the product not only looks visually appealing but also delivers a superior user experience. By conducting in-depth user research, analyzing data, and incorporating user feedback, I can create designs that are not just visually pleasing but also intuitive, accessible, and tailored to user needs.
Emphasize the impact of UX Research
Key Learnings
With experience, I've learned to question my own assumptions and avoid relying solely on personal perspectives. Instead, I actively seek out user insights, validate assumptions through user testing, and involve stakeholders in collaborative discussions. This approach fosters a culture of user-centered design, resulting in solutions that truly resonate with and meet the needs of the target audience.
Challenge assumptions and prioritize User-Centered Design
Building on the foundation of design guidelines, I now recognize the value of developing comprehensive design systems. These systems streamline the design process, ensure visual consistency, and promote scalability across products and platforms. By creating reusable components, defining interaction patterns, and maintaining a cohesive visual language, I can rapidly iterate and deliver high-quality designs.
Evolve design guidelines into robust design systems
As a seasoned designer, I understand that growth comes from embracing challenges, accepting failures, and continuously learning from both successes and setbacks. I actively seek opportunities to expand my skill set, stay updated with industry trends and best practices, and engage in professional communities to share knowledge and insights. This mindset of perpetual learning fuels my passion for the field and enables me to deliver innovative and impactful design solutions.
Embrace continuous growth and learning
Having worked on the Tides project, I am proud of the achievements and refinements made to deliver an exceptional user experience for water sports enthusiasts. The extensive research, user testing, and iterative design process have resulted in an intuitive and visually appealing weather app tailored specifically to the needs of the water-sports community.
Looking ahead, I remain committed to continuously enhancing Tides based on user feedback and evolving industry trends. I aspire to further optimize the app's features, streamline the user journey, and explore innovative ways to deliver accurate and real-time weather information to users. By staying dedicated to user-centered design principles and leveraging emerging technologies, I aim to make Tides the go-to app for water sports enthusiasts, ensuring their safety, enjoyment, and seamless planning experiences on the water.
Current state and future aspirations for Tides
Task Analysis and User Flows
The insights gained from the user journey maps allowed me to pinpoint the key tasks that Charles and Tim would likely undertake with Tides.
To ensure that my future designs continue to center around the user, I formulated specific user flows for these tasks. These user flows will serve as my guideposts in mapping out the screens for the upcoming phase of the design process, thereby maintaining a clear, user-focused path forward.
Mid-Fidelity Wireframes
I proceeded to upgrade my designs into mid-fidelity wireframes using Figma. At this juncture, I deliberately chose to limit stylistic design decisions, instead concentrating on the flow and functionality of the app.
While this stage didn't directly contribute to the goal of crafting an aesthetically pleasing weather display, it did help me maintain a focus on creating a seamless user journey to access the forecast. This approach also facilitated multiple iterations, providing a dynamic space to refine and optimize the app's structure and usability.
