WP7: Dissecting we.Muslim app | Part 1 - Wireframe

What app do you want to build? Draw it out on a whiteboard or Visio. When you put your ideas out, our brain cells engage and we can estimate the things we might need: buy 3rd party SDK, need an app server for push notification, learn new API, etc.

This is the first part of a series titled “Dissecting we.Muslim app”. I will be presenting two sessions on Microsoft TechEd Middle East:

  1. Developing for Windows Phone 7 - End to End
  2. Understanding Marketplace and Making Money with Windows Phone 7 Applications

And what better way to deliver sessions based on real-world app?

The we.Muslim App Story

I was advised to deliver something that can relate to the Middle East region if possible. Since I don’t have time to do market research, I will build a utility app for myself and hopefully will be useful to others too.

I’m a Muslim in a foreign land who travels a lot. And carries a Windows Phone 7. So I need an app that:

  • can show me the prayer time of current city. If I travel to another country, I should be able to change the city and the new prayer times are loaded
  • can show me where Mecca is (direction of prayers)
  • can update me of various Islamic holidays or events (eg. recently government have declared that Prophet’s birthday PBUH falls on Feb 15)

This app will allow me to teach my audience how to use Bing Maps (for Mecca direction) and push notification (for pushing Islamic holiday notifications).

Without further ado, here goes my Wireframe sketches…

Scenario 0: The Splash Screen

Splash screen is my app’s second impression after Application Icon. My vision is that when user taps the we.Muslim icon, he should not see that default clock ticking gray-background image. He should see a splash screen that follows the user’s timezone… if it’s night, a night background image should be shown, if it’s afternoon, an afternoon background image should be shown..

Besides the background image, the Splash Screen is used to do some checking: whether Airplane Mode is enabled (hence no GPS/location-based services), if Internet is available (for Bing Maps rendering), etc. Like a game preloading, I want the next experiences of my app to be smooth.



Scenario 1: Home Screen (Prayer Time)

And this will be the most looked-at info, at least every 2 weeks I will be opening this screen:



Scenario 2: Qibla Direction

This page will be accessed if there are no mosques nearby and I wish to know which direction to face Mecca for prayers. When drawing this scenario, I did research on how to find direction to Mecca. I found out about 2 things:

  1. Shortest Distance (Great Circle formula) vs Rhumba Line (constant bearing formula)
    Whilst determining Qibla, the curvature of the Earth poses a problem: the shortest line over the globe (the Great Circle) does not have a constant bearing whereas a line of constant bearing (the Rhumb Line) will be longer and in a different compass direction.
  2. TRUE NORTH and Magnetic North
    True North is the geographic north pole where all longitude lines meet.
    Magnetic North tends to shift and refers to the pole of the Earth's magnetic field. In mid 2002, true north and magnetic north were approximately 590 miles apart.
    There’s an article from Princeton University describing this True North vs Magnetic North stuff.

So rather than picking just one, I’ve decided to provide 3 ways of finding the direction to Mecca: 1) Shortest Distance, 2) Constant Bearing and 3) GPS.

The GPS method will be fun since currently Windows Phone 7 Developer Tools does not expose the Compass API yet. So it will ask the user to walk around until it finds which direction you are walking towards, and once you get the walking direction, you can calculate which direction is Mecca.



This wireframe has forced me to learn some stuff (finding bearing between 2 locations, how push notifications work, Location-based services, etc).

However this wireframe do not provide me a proper UX guideline, and most importantly: the graphic assets that will be used.

Stay tune for the next section on…. Composites!

Share this post: | | | |
Published Tuesday, February 8, 2011 11:12 PM by zeddy


# WP7: Dissecting we.Muslim app | Part 2 - Composites

Wednesday, February 9, 2011 6:43 AM by Z & his Startup

Part 1 of the series shows how the Wireframe reminded me to prepare various codes (bearing calculation

# WP7: Dissecting we.Muslim app | Part 4 – PROPER Splash Screen

Saturday, February 19, 2011 6:49 AM by Z & his Startup

Prev Posts in the Series: Part 1 – Wireframe Part 2 – Composites Part 3 – Icon Sizes Notice that I put

# WP7: Dissecting we.Muslim app | Part 5 – Get Current Latitude Longitude

Sunday, February 20, 2011 3:42 AM by Z & his Startup

In this part we will use Location Services to get current coordinates. I’ve created a class that you

# WP7: Dissecting we.Muslim app | Part 6 – Get Area Name from Latitude Longitude

Monday, February 21, 2011 3:30 AM by Z & his Startup

Given a latitude longitude coordinate, let’s now resolve this to a meaningful Area, Country string. Previous

Powered by Community Server (Commercial Edition), by Telligent Systems