Hi everybody,

We are happy to present to you, after long hours of work, our Flagmania mockup.
You can watch it at this link: https://www.lucidchart.com/documents/view/4baf-f714-4fb921cd-8e09-09cd0abeb545
The mockup contains all 5 games at all game levels (opening and login screens, game menu, level selection, games and high scores screens).

Working Process:

At the beginning we planned on building the mockup with axure that we familiar with from other courses. But, when we realized that due to really tight schedule of both of us, we won’t be able to meet, we decided to look for another environment that will allow us to works collaboratively from different locations (and this is also a very important aspect of social learning), and that’s how we found lucidchart.com that allows trial account.

During the build, we were using the Berlin girls design from earlier steps of the project as the base to the build, that and the fact that lucidchart provides iphone ui components, were really helpful for us.

There were some difficulties during the build, part of it is the fact that the “Flagmania” idea contains a lot of games and levels and we wanted to make the mockup as detailed as we can, The biggest difficulty however, was the relatively small resolution of the iphone that made us make some changes to the games (for example, changing the size of board at the memory games to a bit smaller boards) but we believe we handled it pretty well.

a bit about the Mockup:

** at each step on the mockup, you can press the “Show Hotspots” button in the upper right corner in order to view the available interactions on the current page.

  • Home Screen:
    • this screen will open after login to the app or at every click on the button on the top left corner.
    • in this screen we can see the user name and the flag of the user country, log-out option and links to all 5 games.


  • Games Screens:
    • after selection a game from the list, in 5 out of 5 cases the user will be directed to select the game difficulty or watch the high scores page.
    • after selecting the difficulty the user will be directed to the selected game and difficulty.
    • when selecting the 5th game – GPS Questioning, the user will first be directed to locating screen where he will be asked to approve his location and from there the user will be directed to select the game difficulty
  • High Scores:
    • the high-scores screen will display the top 5 users and their scores for each game level
      (Memory-Starter, Memory-Advanced etc.).
Hope you’ll find the mockup nice and helpful,

Please let us know what you think,

Shiran and Na’ama.