The UI screenshots have improved upon the versions shown in previous milestone 3 by adding in a navigation bar so that the user can easily transition between different pages and have a clean glimpse of what the ReLeaf app’s functionality is. The “Learn More” button is now taking the user to a separate page where the user can freely access more information regarding the tragic cause. We also wanted to incorporate a short blurb about each of the articles instead of revealing the entire article page so that the user doesn’t have to endlessly scroll through the listed articles.
Moreover, we applied our visual style guide by choosing primary and secondary colors that best matches our logo and theme of the app which is using different shades of green. We wanted to consider the different states of button as well, such as active versus inactive buttons so that the user can have cues of when to click versus not. For the buttons such as “Donate” and “Volunteer”, we handmade the icons and saved it as a PNG so that we can use them as buttons for the UI elements. Lastly, we made sure that the typography of the app is consistent throughout all screens.
Most of our UI design changes, pertaining to both usability and interaction design, are housed in the news feed, which is also the main view of the application.
The article card has the most significant amount of change from the previous iteration, with each news article housed in a visually discernible “card-container”. There are changes to make spacing between text more consistent, and we made the “learn more” CTA more usable through feedback (change in color) once a user hovers.
These buttons, blue and just functional has new interaction design changes, similar to the “learn more” CTA, letting the user have context in terms of what they’re viewing.
It’s hover-able to signify whether it can be clicked, and shows which option is active.
The navigation bar also works in a similar way, with the active page being seen in our brand’s primary green, while the other navigation elements are hover-able (signifying that they can indeed click on that).
In terms of UI changes, our aim was to solidify a set of common interaction patterns that serve the use case of our target audience,
The user can go to another “page” in the news feed by clicking another page on the navigational tab bar, and new news articles are loaded according to whether the user wants US related or Global news
Note: this all still gets loaded on the same page (News Feed).
The user can toggle between US related and Global news articles, with the news articles loading on the same page.
These demonstrate substantive actions because the first action consists steps like using the navigation tab bar to access different “World” news or “US” based news and having stream of news articles being loaded onto the same newsfeed page. The second user action allows the user to use the toggle function to switch between “US” and “World” news articles, while being loaded on the same page.
The secondary actions that the user can take is using the Donate or Volunteer button for the user to “pay” forward to a cause that’s happening globally or in US. The “Learn More” button allows the user to get more information about the given news article in case that the short blurb about the recent news isn’t enough.
Both of these actions demonstrate the app’s core functionality to increase people’s awareness on tragic news that are happening in the “World” and the “US”, and empower the people to take control by helping to either pay forward through donations or volunteer their time for causes that may happen nearby their location. These actions differ from one another because the first action is using the navigation tab bar to load other news articles on the newsfeed, whereas the second action is using the toggle function to switch between US and World news articles to have these articles loaded on the same page.