Giving power to AirQo’s mobile search feature
AirQo is a google funded AI project focused on air quality data management in African cities
Roles: UI/UX Designer, Project lead
Team Members:
Paul Zana
Hakim Luyima
Project goal
The search feature on the mobile App is not interactive. It doesn't allow users to explore air quality data in locations close to them. After a brief from the stakeholders, they wanted the mobile app to allow users to explore air quality data in different cities. We saw the search feature as an opportunity to allow them to do this.
Solution
Our criteria focused on 4 main points: speed, customer orientation, awareness, and expectation. For a more powerful search option we;
- Moved the search button to the bottom of the screen making it easier to access
- Offer visual support by using different colours to differentiate Air Quality concentration levels
- Allowed users to filter their search
- Allowed users to see their recent searches
- Added location suggestions to the feature.
- Made it independent so it's not reliant on the addition of new features to show its viability.
UX Research
Usability testing
UI/UX Design
UX Strategy
Our Journey
-
Testing with part of the team
During this phase, we spoke to users who are part of the team to understand how they search for Air quality on the map and also to understand some of the frictions they face when searching for air quality.What users say
All users believed that the search feature could be improved by conveying more specific information such as;Search by AQI range
Suggested searches
Recent location history
News & air quality of other African cities.
*This particular request if applied would require the introduction of a whole new feature of the app hence feature loading
When asked about the fastest way users could find the AirQuality of a location using the app;
1/3 of the users would refer to the map before making a cold search.
2/3 of the users would do a cold search to find the location.
-
Once the usability issues were resolved, We moved on to design the final screens in Figma. Our goal was to create a feature that met the criteria of the Loveable product framework while also addressing the concerns brought up by the users that we interviewed.
During this phase, we designed two iterations of the feature. We followed the design guidelines of the already existing products of the organisation so that the feature could remain consistent with not only the app but also their other products, their Web App and their website.
We kept the design light focusing on the results of our user research. We added filters, recent searches and search suggestions.
-
We also tested the search page, where we asked the users to test pages that showed different types of content. This mainly aimed at finding out 1) What content was important to users while searching and 2) The layout of the content.
The first content option was suggestions based on the user's nearby locations and the second was Explore African Cities which prompts the users to check on the Air Quality in other African cities.
The members preferred the Recent searches to suggest the African cities option better.
This was because of the following reasons.
It connected more with the organizational vision which is Clean Air for all African cities.
It allowed users to explore the air quality readings of other African cities.
This process brought us closer to version 1 of this feature. The solution we came up with after this was based on the results of this testing.
-
Implementing these new changes is currently underway and will be made available to all users in the next version of the AirQo Mobile app. We can't wait for users to explore air quality data from African cities like never before.
As the AirQo design team, we commit to continuously improving the search function to accommodate more Air Quality data needs & use cases. That's it for now, breathe clean!
Learnings
I learnt a lot during this project. I got to work on a team with an experienced designer whose guidance helped define this project's process. It was great working in a team bouncing ideas off each other and learning from one another. It further showed me that we produce our best work when we collaborate not only with designers but also with stakeholders and most importantly the users.
I also found it interesting listening to the feedback and ideas we got from different users and stakeholders that helped frame the solution.