UX|UI : Spotti’s Final Design
The main objective of this citizen science project is to encourage people to help the environment and those who want to keep track of climate change in the world. By acting, users will be using this app to report the current weather in their current location to gain data on the global warming and climate change on Earth.
For my last UX/UI post, I will be detailing out the overall design of the interface for Spotti and the ways I improved the prototype design post user testing, as well as what I’ve learned during this project and the insights that I’ve taken away from it.
________________________________________________________________
SIGN UP/SIGN
After testing the app, I learned that user’s wanted more interaction on the Sign In/Sign Up section of the app. First, I added a fill-in for the username, password, and add a profile photo, to give the user an idea of what the app would look like if they made an account or just simply signed in. Next, I removed the large page title and small Sign In and Sign Up buttons on the top corners, in case the user changed their mind and wanted to sign into the different page. Instead, I added a back button to direct the user back to the original sign up/sign in page, where they are able to choose which way they prefer to access the app.
________________________________________________________________
HOME PAGE
After testing the app, I learned that user’s felt that the app was giving off as a weather app, rather than a weather reporting app. On the home page, I changed the message from “It’s a beautiful day to chase” to “It’s a beautiful day to report”. Secondly, to direct the user to start reporting, I added a “START HERE” and an arrow to the report button. Thirdly, I labeled the settings button to a menu option because every option on the page wouldn’t be consider as a setting to the app. Lastly, in the menu option page, I added an “About Us” to explain to the user what the app is about.
________________________________________________________________
RADAR MAP
After testing the app, I learned that user’s wanted to see more than just a map of their location. First, I added a doppler radar image into the map, to give a real-time idea of what the map would look like, if there was a storm. Secondly, I placed a light to heavy rain indicator bar to give the user a way to know the difference in the colors on the doppler radar map. Third, I changed the menu bar on the map, due to users having a had time figuring out what the icon button was to change the type of map that they can view. Instead, I just labeled the button Default and Satellite. Lastly, I added an icon within the doppler radar map that the user can click on to view who reported in that area already.
________________________________________________________________
REPORTING
After testing the app, I learned that user’s wanted more from the reporting page, than just selecting the type of weather. First, I added levels of severity for each of the types of weather, by adding three options: light, average, and severe. Next, I added a message on the page to “Click on them to learn more” to inform the user to click on the type of weather to help them identify and verify what they are reporting. This brings me to the last change that I made within this page, informing the user’s about each of the types of weather. I gave the user the option to click on the type of weather to which a page will pop up with information regarding that type of weather. I wanted to help the user identify with that weather, so I added a photo background behind the information. I also, learned that user’s liked the photo backgrounds within the app and that this was a great opportunity to use this style again.
________________________________________________________________
ALERTS
After testing the app, I learned that user’s wanted more from the alert section of the app than just a message page. So I added an icon and message onto the page that lets the user know that there has already been one report in their area. I also, made the icon and message clickable, which directs the user to the report where they can read the information and even click on the photo to view the image larger.
**SIDE NOTE** This type of interaction will also happen when reviewing other user’s reports in the search section of the app.
________________________________________________________________
CONCLUSION
After user testing Spotti, I learned that I needed to redirect the app to focus more on the reporting aspect rather than it being more of a personal weather app to the user. Also, I learned how important user-testing is whether it’s having as many user’s as you can test the app or using different types of user-testing (basic user, color-blind, visually or motor impaired, or older generation) to avoid any issues for any user. After making all the changes to Spotti, I feel that the app has succeeded it’s purposes, which is designing a citizen science app that is eye-appealing, user-friendly and would help gather data for those studying global warming and climate change.
