MyObservatory Overview

Redesign of the MyObservatory mobile app homepage experience to make rainfall products easier to access.
‍
I led the UX process end-to-end: uncovering pain points through interviews and usability testing, iterating prototypes with stakeholder and developer feedback, and refining the design system for long-term scalability.

Outcome: The simplified layout improves scanability and makes weather information easier to access on the go. By refining the design system foundations, the project also set up a consistent, reusable structure for future updates.

  1. 🧢 Role

    UI/UX Designer

  2. 🙌 Collaborator

    Product Owner, Developers

  3. 🗓️ Date

    2021

Stakeholder request

Redesign the homepage to give users faster, simpler access to rainfall products.

Methods

Conducted interviews, usability tests, and design reviews to identify pain points and validate wireframes.

Insights

🌤 Trust in accuracy
During storm season, users switch to MyObservatory because they trust its local forecasts (e.g., typhoon tracks, location-based rain alerts) more than international apps.
‍
🌤  Hidden favorites
Popular tools like the 9-Day Forecast and location-based lightning alerts were buried in menus or occasionally disappeared, creating frustration.
‍
🌤 Feature Overload
Users feel most features are unnecessary or for professionals.
‍
🌤 Legibility issues
Busy background images and light text created poor contrast, making critical weather information harder to read.

UX design principles

Based on stakeholder requirements and user interview insights, I created a set of simple design principles to guide decisions and keep both the team and stakeholders aligned.

Wireframe

After gathering stakeholder requirements and user interview insights, I created wireframes to visualize solutions and collect stakeholder feedback.

Stakeholder Feedback
‍🌤 Expected a few additional forecasting widgets.
🌤 Requested the chatbot remain visible on the homepage at all times.
🌤 Preferred using a live location photo instead of an illustration.

Prototype 1

Based on internal feedback, I created a clickable prototype to prepare for usability testing with users and to gather input from the development team.

User feedback
👤 Some of the terminology used are very professional, it's not very straight forward
👤 Most users were aware that he page can be scrollable side ways to view other locations's weather

Dev team feedback
💻 Concern about mixing the warnings and other shortcuts together
💻 Concern that displaying too many images/ data will effect the app performances.

Design System Foundations

As I revisited this project, I took the opportunity to document its design system foundations. Beyond organizing components, this exercise strengthened my accessibility awareness and my ability to define reusable patterns, a practice I now bring into future projects.

Final

After several iterations, the final design improved legibility and surfaced the most relevant content at the right time, avoiding overload and helping users quickly access what they need.