App Design Mockups #34
Replies: 3 comments 1 reply
-
Beta Was this translation helpful? Give feedback.
-
Thanks for the thread here and for recording the meeting. I agree with @tobymurray about making sure we deliver the info with ease to the widest audience. We need to find the balance in this. I think many products oversimplify and do not expose enough details to favor focus and simple design. What we offer is a complex picture and those who want to know, should have access to the details. I think we should select the key data we communicate first, then the next layer of details we want to expose with little info (i) icons for example to help drilling down. We should have a thought through information architecture in the app guiding the users though what we think are the most important points. I have a question of my own to @Ethan-AirGradient When selecting the sensor and entering the highlighted view |
Beta Was this translation helpful? Give feedback.
-
Hi everyone, I just wanted to share our updated mockups from the call last night. These are based on the initial wireframes that I created (and shared above), but have been fleshed out and fully designed by our designer, Cid. If you have any further feedback, we would love to hear it. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi everyone,
As shown on the call earlier this week, we have designed a few mock-ups of the app (both web view and mobile view). I want to share these here so we have some idea as to the basic functionality and initial direction of the platform. These are intended to provide a general overview of the platform and have not been styled at all. We have already been working on some artwork to make the final version of the app look much better!
Above is an image of the mobile app, showing the 'blocks' that will show on the home screen. As the user scrolls, the blocks at the bottom will come into view.
At the top of the screen, we will show the user's location, and also provide a 'location' and 'share' button. Underneath this, we will show a card which quickly communicates the U.S. EPA AQI (this can also show PM2.5 in ug/m3, depending on the user's presence). Underneath this card, we will show some basic weather data.
Below this, we have the detailed graph. This graph will (ideally) be adjustable, and be able to show everything from the past 24 hours of data to the previous 30 days. There is an information button at the top-right which will have a pop-up AQI threshold explainer, as well as some guidelines on the graph (to show the average concentration/value and the WHO guidelines).
Below this, we have a health card with recommendations. This is intended to clearly communicate with the user the actions they should take based on the air quality. Later on, this may be adjustable, based on user information (for example, if the user has asthma we will provide tailored health-advice).
Below this, we have a card for highlighting a local community group involved in air quality. If this group hosts the monitor, it will show them. However, if a user is looking at a monitor hosted by an individual, this card will instead show a local community group (if there is one). In this case, the contributor mention under the graph will mention the individual hosting the monitor (if they have provided their name) and this card will highlight a local community.
The second to last card will be a heat map. The calendar will show the previous 30-days, and each day will be coloured based on the average air quality that day. Ideally, this will be scrollable so users can see historical data for the past year or more.
Finally, we have a thank you message for all of the contributors. We really want this to be highlighted, and the CTA will likely lead users to the new open source landing page.
The desktop/web view will have the same elements, but will need a different layout. Here is a mock up of our current idea:
The key differences here are that the pollutant breakdown will be more detailed, showing individual pollutant concentrations for all pollutants used in the U.S. EPA AQI. While these readings won't all be available for all locations, we will show them when possible.
Another unique element on the desktop version will be a map that shows nearby monitors and a list of nearby monitors. This feature is intended to allow users to quickly confirm what kind of pollution they are being impacted by - local pollution, or background air pollution.
Users will get to this screen by clicking a location on the map view, which will have similar functionality to the current AirGradient map:
These are still early mock ups and we would welcome your thoughts!
Beta Was this translation helpful? Give feedback.
All reactions