PROJECTS

PASSION PROJECT

My passion project is called Strive. It is a fitness app that has multiple features. The difference between my app and other apps is that this is an all-in-one app since most apps only have one or two features maximum. My stakeholder is a gym employee and he is also a personal coach with a long fitness journey and experience.

LO1 - INSPIRATION, VISUAL DESIGN TECHNIQUES AND UCD PRINCIPLES

In this section I explain the inspiration that I found for my design and the moodboard that I created for it. I also explain the visual design techniques that i implemented and which ucd principles apply to my prototype.

This fits the following learning outcomes: LO1.

Gitwiki about lo1

Summary of explanation

Link Between Learning Outcomes (LO) and What I Did:

...exploring emerging trends and developments in media, design and technologies.

Fitness apps are often made with multiple health features such as sleep, fitness, and nutrition.

  • Personalization: Light and Dark mode is a trend which has been around for a while.
  • Gamification: Badges, ranks, and progress bars are often used to keep users engaged.

Exploring emerging design trends:

You create engaging concepts and translate them into interactive validated media products by applying user-centered design principles, visual design techniques...

User-Centered Design Principles:

  • Keeping it consistent: I used the same color combinations throughout all the pages, including having the same main color green in both the light and dark modes.
  • Use plain language: I made sure to type all of the content myself and have it written in simple English. Think of the lines of motivation, for example.
  • Reduce user effort: I made it easy for the user to find where certain things are. For instance, it's very simple to add a new measure of your weight because of the large plus icon. It is also easy to find the light and dark mode switch.
  • Provide feedback: If something is clickable, an animation of some sort will be provided. Implementation of popups is also being considered.
  • Simplify navigation: Five navigation buttons allow users to move through all the pages. For example, users can't go to the calories page by clicking on the calories section on the dashboard.

Visual Design Techniques:

  • Color Theory: Green is often associated with success, progress, and positivity, which fits the purpose of the app.
  • Typography Hierarchy: Some important features have a bigger weight, such as the amount of weight lost or gained and the number of reps and weight completed.
  • White Space: I added white space around the edges of the screen so the focus is more on the app. I also implemented white space in places that often feel too cluttered.
  • Contrast & Emphasis: Previously, the blue had too much contrast, which shifted emphasis to the background instead of the content. With a muted green color, the white text inside has more contrast, shifting the emphasis to the content.

LO2 - VERSION CONTROL, CODE COMMENTS AND DOCUMENTATION

Here I explain and show the documentation of my code, the readme file but also that I push it regularly and have clear commit messages.

This fits the following learning outcomes: LO2.

Gitwiki about lo2

Summary of the explanation

I recommend you view the detailed documentation on my Gitwiki since there are a lot of screenshots and links directly to the branches, repositories, commit histories etc.

Use of CHATGPT:

In S2, I got feedback from Ame that there is nothing wrong with using AI or code from tutorials, but it would be a good way of learning to let ChatGPT explain the code and then add comments based on this explanation. I have done this for most of the JS in my passion project, and I feel like it has helped me expand my knowledge more. I wrote all of the comments myself in a way that helps me understand what’s going on better.

Explanation:

Link Between Learning Outcomes (LO) and What I Did:

You document and comment your code using version control in a personal and team context and communicate technical recommendations.

LO3 - ITERATIONS

In this section I explain and show a side by side comparison of iterations that I made based on feedback from my stakeholder. I also explain why the change is an improvement.

This fits the following learning outcomes: LO3.

Gitwiki about lo3

Summary of the explanation

I recommend that you view the detailed documentation since on there there is an image of the before and after side by side between versions with feedback and why it is an improvement.

Since I show the feedback that I got with screenshots from my stakeholder as well as a side by side comparision between versions, you should really visit the detailed documentation for the best experience.