*2.3. Layout and Visual Design*

In order to show a consistent look and feel to the user, a professional designer was hired to design and recommend different aspects of the user interface. The designer helped in suggesting layout, fonts and a coloring scheme for the website and consequently the dashboard of the app. There are eight panels (small rectangular windows) on the website, which show different kinds of information to the user depending on the chosen coaching domain for the current week. The first panel shows a picture of the coach and a welcome message corresponding to the current coaching domain. For example, if the current coaching domain is active transportation, the message is: *"Hi Adnan! You have chosen to focus on active transportation this week. Your goal is to spend this week at least 36 minutes of active transportation. I will support your efforts."* The activity data are presented in many different views. Two small panels show the most recent steps and floors count for the present day. Whenever a user visits the website or opens the app, a dynamic script runs to show a summary of the most recent data in the Active2Gether database.

A panel with the caption "Progress to weekly step goal" shows a progress bar towards a weekly goal of 70,000 steps. There is another panel that shows the performance of other users (see Section 2.6 about social comparison below). Another panel shows the type of physical activity based on the chosen domain for the current week (active transport, stair walking or sports activities). In the first week, when no domain has been chosen yet, this panel shows the number of active minutes based on the reported sports activities and active travel choices. A similar panel shows the user's activity in terms of the number of steps. The latter two panels provide an option to the user to view historical data per week, per month or from the beginning. This option is useful for those users who want to see their own past performances. They also provide the user an opportunity to compare his/her performance with the average values of all users. The final panel is dedicated to show the most recent messages. Figure 3 gives an example of the dashboard.

**Figure 3.** Screenshot of an Active2Gether dashboard.
