Project details

FlagQuizler is an iOS app game that challenges users to test their knowledge of world flags. Users can choose between two game modes: matching flag images to country names or matching country names to flag images. These game modes can be customized by users, or they can opt for one of the pre-made games.

Project type

iOS mobile app | Personal project

My role

Developer / UI Designer

Tools

Xcode, SwiftUI, Figma, Affinity Designer

Date

May2024 (Version 2.0)

Functionality

No items found.

Main View:‍

The initial screen features buttons for game customization and a scrollable menu for pre-made games.
Free users have access to one playable option, encouraging them to explore the app's full potential. They can get the full version of FlagQuizler directly from this screen.
Pro users have full access and zero advertising.

Game Settings View:‍

Enables users to personalize their game experience by selecting specific settings.

‍Game Screen:

There are two game modes: Flag Image to Country Name or Country Name to Flag Image.
Features four interactive buttons displaying country names or flags; correct answers turn green, while incorrect answers turn red.
Displays a progress bar and a count of correct and incorrect answers at the top of the screen.

Results Screen:

Shows the final score and the user's answers.
Adds the final score to the overall score and saves it for future reference.
Allows users to retry the same game or return to the Main View for a new challenge.

Product design & development

FlagQuizler 2.0 introduces several significant updates: a comprehensive UI overhaul, a new game mode, and enhanced game customization options.

My approach for design and development

Design

I started the design creating a mood board in Figma to establish the app's visual direction, and then continued with detailed wireframes to outline the app’s structure and user flow.

No items found.

Draft version

No items found.

Final version

No items found.

Figma - High Fidelity Prototype:
https://www.figma.com/proto/8WPEByH4XbdARX4pEkecYd/FlagQuizzer?page-id=406%3A563&node-id=410-343&viewport=680%2C202%2C0.25&t=3YnPIfJaRsFvCdLl-1&scaling=min-zoom&starting-point-node-id=410%3A343

No items found.

Digital wireframes
‍

No items found.

Figma: HiFi Prototype
https://www.figma.com/proto/kc5sSmV896qbORQ0mzoWBZ/Botanista?page-id=0%3A1&node-id=61%3A150&viewport=540%2C-48%2C0.27&scaling=scale-down&starting-point-node-id=61%3A129
‍

No items found.

Digital wireframes
‍

Light & Dark modes: Launch screen
‍

No items found.

Figma: HiFi Prototype
https://www.figma.com/proto/kc5sSmV896qbORQ0mzoWBZ/Botanista?page-id=0%3A1&node-id=61%3A150&viewport=540%2C-48%2C0.27&scaling=scale-down&starting-point-node-id=61%3A129
‍

Light & Dark modes: Main screen
‍

Figma: HiFi Prototype
https://www.figma.com/proto/kc5sSmV896qbORQ0mzoWBZ/Botanista?page-id=0%3A1&node-id=61%3A150&viewport=540%2C-48%2C0.27&scaling=scale-down&starting-point-node-id=61%3A129
‍

App assets: sounds, icons & images

In this new version of FlagQuizler I updated the look of the app and incorporated new elements for the new paywall screen.

‍
The following elements were designed using Affinity Designer:

Background Image
Paywall visual elements.
App Icon

Development

Platform: SwiftUI ‍

Design Pattern: Implemented an MVVM design pattern to ensure efficient file organization and development.

Main New Features:

Utilized CoreData to persist flag-related information for seamless gameplay.
Added animations on the Results Screen to enhance user experience.
Supported both vertical and horizontal orientations for versatile gameplay.

Recording of the finished app

Launch

Version 1.0: Available for free download on the App Store, with over 100 downloads. Version 2.0: Finishing the development process, this version features the latest updates and improvements, and will be published soon.

Style guide

App icon & graphic elements

No items found.

Color palette

Typeface

Next steps

Currently Working On:
- iPad version.
- Vertical and horizontal orientation for the new version.
- VoiceOver accessibility.