Iconography, Graphics, and Buttons

Icons

Icons play a crucial role in the Sqwell app, aiding users in navigation and information retrieval, particularly on the individual park pages. On these pages, an interactive map provides users with an intuitive understanding of the amenities available at each park. This feature enhances user experience by visually representing park facilities, allowing for efficient exploration.

  • Set 1 of icons used in Sqwell App
  • Set 2 of icons used in Sqwell App
  • Set 3 of icons used in Sqwell App
  • Set 4 of icons used in Sqwell App
  • Set 5 of icons used in Sqwell App

Scavenger Hunt Badges

Earn special park badges by completing a Scavenger Hunt followed by a quiz. The badges you receive depend on your quiz scores. From left to right, examples of badges range from the prestigious Champion’s Badge to the Bronze Badge.

  • Sample Scavenger Hunt badges from Champion to Bronze - Central Park
  • Sample Scavenger Hunt badges from Champion to Bronze - David Lam Park

Navigation Bar Icons

The Sqwell app utilizes familiar icons in its navigation bar for user-friendly predictability:

Sqwell Navigation Bar Icons

Home

The Home icon directs users to the main landing page.


Community

The Community icon leads to the Community page, featuring the Community Leaderboard and Upcoming Events for nearby parks.


Parks Library

The Parks Library icon, represented by trees, grants access to a library of parks available in the app, along with additional activities specific to each park.


Profile

The Profile icon directs users to their profile settings, including account preferences, visited parks, image galleries, and the Monthly Park Report.

These icons are chosen for their clarity and ease of understanding, ensuring smooth navigation for all users.

Buttons

Active

Sqwell active button

Active buttons in the Sqwell app are prominently displayed in orange to ensure visibility and to catch the user's eye.

On Press

Sqwell on press button

When a button is pressed, it transitions to our dark green color, providing feedback to the user and indicating that the button has been interacted with.

Disabled

Sqwell disabled button

Disabled buttons are visually distinguished by being grayed out, clearly indicating that they are not currently available for interaction.