Designing any product? try to design it for “Mobile first”, everyone said this
First work that I had been assigned with after joining, is designing an interface for the BreeZo an “Air Quality monitoring android app”. As this was a start-up so I had to take care of everything from illustration to colours to typography everything(From Design direction to Interface & Experience design). But here I will share here only the BreeZo android app interface Design part.
BreeZo android app:
I start by sketching the home screen first, after completing the research and information architecture and when the paper prototype is completed then came on to the Figma. The story after that…
At first, how the user moves in BreeZO, a rough idea of that
Now we will move screen by screen:
Company logo with a white background, as it tells its user who is responsible for the content inside the app and who brings it to you.
These screens explain what you are getting into and how to use it? Three screens are more than enough to explain that and to simplify the explanation, the text is provided with an illustration(Visceral design).
“Visceral design is about the initial impact of a product, about its appearance, touch, and feel”
-Don Norman(Emotional design)
The first two-screen is all about appearance and information, with the third screen options are provided to take action on. On the base of which home screen will be modified.
Every onboarding screen is provided with two-button “Skip & Next” which has almost the same work but why? Because we want the user to move forward without any delay, as if the user has to find these button then there is some chance of exploiting his/her experience.Illustration link
The things which are needed to be on the home screen are location, a graph telling change in pollutant level with location and time, information about different pollutants with an option to save it for future references. Now the problem of UI designer arises as, how that much information can be arranged in one screen? How to create meaning out of it? What are the things that need extra attention?
At first, the location is placed on the top left, as all the information on the screen is about that location and if the location changes everything on that screen changes. So we need to highlight it such that the first thing the user will see is location.
Which is followed by a line of quick details like AQI, pollutants level, Exposure and weather info, so that the user who only wants to know the AQI at his location has that information quickly and there is no need of him/her to hustle through all those graphs and extra information if he/she don’t need it.
Now the graph, as space in mobile is very less to show graph properly, to overcome that problem I first thought of horizontally scrollable graph, but I noticed as the graph is in between pollutant level and time we can show the graph for days, weeks, months, etc. at a time, which is easy to scan. A green line is used on the graph to show the healthy air quality below it as we cannot use all AQI colour on the Y-axis of the graph due to the smaller area(but I used it in the cover image of this post).
One more thing that is associated with the graph is how to see different pollutant on that graph which is already showing one pollutant? How to place two things(time & pollutants) that affect one graph so that it did not create any confusion?
Solution for that is by finding which of the two affect the more on graph and then placed accordingly after considering Law of common region and area of the mobile screen which is close in reach of the thumb. So this image will show how it is done
After doing all this I noticed that it is very difficult to see which pollutant is selected and the problem arises how to connect the selected pollutant with its number on the top line. This is solved just using colours how? See below :)
Search is a major thing in any product these days, the user who did not get which he/she is looking for in an app then they directly click on search, where we have a lot of space to show different options. That's why I decide to put most polluted cities on that screen and also news section is moved into that screen. Then the whole workflow for search is will be…
From search, you can directly choose your location or choose one of those most polluted cities.