Project Overview

In today’s busy world, understanding personal movement patterns can help improve productivity, health, and time management. To explore this, I created a movement dashboard that visualises a week of my daily movements, including travel and physical activity. The goal was to analyse and present the data in an engaging and insightful way.

Over five weeks, I designed and developed the dashboard, focusing on data collection, visualisation design, user-friendly interactions, and prototyping.

Design Process

Data Collection

For this project, I chose to track at my movements over a week. I used apps such as Apple Fitness and Life360 to help record my movement of the week.

https://images.squarespace-cdn.com/content/v1/67057b799e2a906e532572af/2c95d551-13d0-4d5c-bdcc-b9d0896b2bf6/Screenshot+2024-10-29+at+20.52.53.png

Initial Ideas & Sketches

Early sketches explored unique ways to present data, focusing on a home page with clickable options and a refined navigation bar.

https://images.squarespace-cdn.com/content/v1/67057b799e2a906e532572af/e323a2a7-1e7e-4f8e-8706-d484e1055dd4/sketches+dashboard.png

https://images.squarespace-cdn.com/content/v1/67057b799e2a906e532572af/3b59830e-a3be-495d-8d0e-ed02d4272135/iPad+Pro+12.9_+-+11.png

Wireframing & Exploration

Several wireframe iterations were created, experimenting with different visual layouts. I tested various concepts, such as circular designs and colour-coded dots for each day, but pivoted after feedback to focus on clearer, more practical layouts.

https://images.squarespace-cdn.com/content/v1/67057b799e2a906e532572af/8d8d0c30-0b13-42ad-80df-196218fbde8d/Untitled+design.png

High-Resolution Mockups

Developed mockups with a bold colour scheme, including deep shades of maroon, green, and orange to distinguish different data sets. I refined the layout by experimenting with gradients, font sizes, and colour contrasts to achieve a modern, cohesive design. I also introduced a clean, sans-serif font to enhance readability and a smoother navigation experience.

Prototyping & Feedback

Content with my design, I created a fully interactive prototype in Figma to simulate the user experience. After this, I presented the design during a critique session, I received constructive feedback on colour contrasts, information hierarchy, and layout adjustment.

https://images.squarespace-cdn.com/content/v1/67057b799e2a906e532572af/9d4b52ae-0b12-483b-9129-9e37de8440f5/Screenshot+2024-11-14+at+19.09.37.png

Final Adjustments