Reflection

We didn’t have a lecture this week so we used the time to do tutorials and get some feedback on what we had completed so far. The feedback I received for my sketches and data collection was all good.

Dashboard

This week I started to create my dashboard in Figma. I started with the overview page, I used the wireframe I created last week to begin. I added colours to the background and some cards. I had to create charts for some of my data such as sleep and steps. I was initially going to create these myself but I was afraid of getting the scale wrong so I used Canva charts. This was a helpful tool as I just had to input the data then I could change the colours to match my dashboard. I added labels for the x-axis and y-axis in Figma after.

Here are the charts I created in Canva.

Here is my finished overview screen.

I then moved on to designing my health tab. This was easy enough as I had the wireframe and graphs already created.

Moving on I went into detail on the health screens by creating a section specifically for sleep, steps and heart rate to enable the user to get all information.

I decided to use line charts to display my heart rate and steps because it allows you to easily visualise trends and patterns over time. With a line chart, heart rate and steps data can be plotted on a Cartesian coordinate system, with time as the X-axis and heart rate or steps as the Y-axis. This allows you to see how heart rate or steps vary over time, and to identify any patterns or trends that may exist. They are also simple and easy to read, making them accessible to a wide range of viewers. They can be customised with labels and annotations to help highlight important features of the data, such as peak heart rate or step counts.

I used a stacked bar chart to display my sleep because it allows you to easily visualise how your sleep is divided into different stages throughout the night. With a stacked bar chart, each bar represents the total amount of time slept, while each segment within the bar represents the amount of time spent in a specific sleep stage, such as awake, deep sleep, light sleep, or REM sleep. They are also easy to read and understand, making it accessible to a wide range of viewers. The different colours used for each segment can help viewers quickly identify which stage of sleep is being represented, and the length of each segment can provide an intuitive sense of the relative amount of time spent in each stage.

These screens are all prototyped on Figma hover and click actions to show more information.