Introduction
Life Track is a wellness app that integrates nutrition, fitness, and health tracking into a single, calming, and motivating experience. The project was born from a personal interest in health and wellness and shaped through extensive user research.
Problem
"Current health apps are overwhelming, number-driven, and fragmented. Users want a simple, motivating space to track their overall wellbeing."
Despite the booming health and wellness market in the UK, existing apps like MyFitnessPal and LifeSum focus too narrowly on metrics without addressing overall wellness. Users need a more holistic, intuitive solution
Design Process
1. Empathise
Conducted user interviews with participants aged 25–35
Identified key frustrations: apps felt boring, confusing, and demotivating
Uncovered needs for holistic tracking, motivational reminders, and ease of use
2. Define
Defined the problem:
Users need an all-in-one wellness app that offers simple navigation, positive reinforcement, and both health and nutrition education — not just numbers.
User Personas:
The Organizer: Wants quick, simple meal tracking without tedious input
The Home Chef: Loves food quality and cooking, seeks intuitive logging tools
3. Ideate
Designed task flows for core actions: adding recipes, logging runs, receiving notifications
Brainstormed solutions for personalization and visual motivation
Sketched initial low-fidelity layouts focusing on clear, calming design
4. Prototype
Built mid- and hi-fidelity wireframes using Figma
Developed a calming style guide with muted greens, beiges, and simple typography (Poppins)
Created a clickable prototype focusing on clarity, consistency, and ease of use
5. Test
Conducted usability testing with multiple users
Main feedback: refine login page layout, align text and buttons consistently, simplify navigation
Revisions made: improved spacing, standardized icons, streamlined color palette, clarified task prompts
Outcome
Improved user engagement through motivational design elements
Created an all-in-one platform for food, fitness, hydration, and health tracking
Users found the revised app intuitive, calming, and motivating to use
Reflection
This project taught me:
The critical value of iterative testing
The importance of early and thorough user research
How visual consistency enhances usability and user trust
To balance data tracking with emotional motivation in wellness design
"With more time, I would expand Life Track with a food labelling system (traffic light colours), inclusive accessibility features, and deeper personalization based on user lifestyles."
Prepare your CSV file
Make sure your file is exported as a "CSV" file, also known as a "Comma Separated Values" file. If you encounter any issues you'll want to verify your file is UTF-8 encoded and less than 5mb. If your file is larger than that, try removing columns you may not need. See below for additional information on specific fields.
Tip: You do not have to import every column from your CSV. Only fields set up in your CMS collection in the next step will be imported.
Rich Text Fields
Formatted text content needs to be formatted as HTML. Many tags are supported, such as paragraphs and headers <p>,<h1>, <h2>), formatting (<em>, <i>, <strong>), links (<a>), lists (<ol>, <ul>, <li>) and images (<img>). Images from URLs will be automatically downloaded from their original source and imported into Framer.
Image Fields
Images in your CSV content must be URLs to an image. They will be downloaded and imported into Framer. Relative paths are not supported.
Date Fields
Recommended format is ISO8601 compliant, for example: 2023-12-17T14:42:00. The shorthand value of year-month-day is also supported, for example: 1982-12-01. Long format strings may work, but will depend on your browser, for example: Tue May 12 2020 18:50:21 GMT-0500 (Central Daylight Time). All time data, including time zone information, will be stripped from the date.
Color Fields
A color formatted as CSS hexadecimal RGB code, rgb, hls or hlv expression, or a named color. All variants with an alpha value are also supported. Examples: #00ffee, rgb(0, 153, 255), hsla(204, 100%, 50%, 0.5), blue, darkgreen, rebeccapurple.
Toggle Fields
A boolean value. Y, yes, TRUE, 1 will be interpreted as the toggle being "Yes", all other values will be "No".
Prepare your CMS Collection
Here is a checklist to prepare your CMS collection for importing.
Verify each field/column in your CSV has a matching field in your CMS collection with the same name.
Include a unique field for each item, often named "Slug"
Verify that your data types match (eg. a CMS Date field for a date field in your data)
Tip: Framer uses your Slug field to identify each item, and will use it to update that item with repeat imports.
Import your CSV file
You can find the Import feature by going to the CMS in your project, and clicking "Import" in the toolbar. From there, you can select your CSV file for importing. You may also drag & drop your CSV file directly into the CMS collection interface.
Tip: Importing supports Undo / Redo actions. If you're not happy with the import, you can simply undo the change with CMD+Z on MacOS or CTRL + Z on Windows. Redo will not re-run the import, but instantly apply the changes to the collection.
Updating or Re-Importing
To update your content, you can import into the same collection again. If any item in the new import has a slug field that matches one of the items in your collection, you will be able to update it or skip importing it again.
Importing Content
Dec 9, 2024