Application Design II - Project

Ahmed Yaman Ibrahim (0341119)

Application Design II - Project

TASK 1 & 2: App Design I Self-Evaluation and Reflection + App Prototype

Initial app proposal

We were given the option to either continue working on our design from App Design I and turn it into a fully working prototype, or to develop a new app from scratch. I chose to develop the design I started on in App Design I, as I felt there were a lot of improvements to be made and would basically be reworking most of the design anyway.



Initial proposal from App Design I and general ideas for improvement


As shown in the proposal, this design is very bare-bones and I intend to redesign the app entirely. As the original working file is no longer with me I decided to create a new prototype and start from scratch. This design is still a work in progress, but I have added all the main features and how they would work together.

Fitness app prototype - reworked

1. Login/Signup


The login page allows the user to log in to the app using their email and password. Alternatively they can sign up for a new account as well; creating a new account directs the user to a page to input their user information, such as their height, weight, target and body type. After finishing, they will be directed to the home page of the app.

2. Home and Workout Plan


The home page provides the user with a quick overview of all the app’s features, such as quick statistics and the user’s workout plan. The user can view their workout plan from here as well as set the days for their routine. Marking items on the workout plan adds that information to the user’s workout time statistics. A navigation bar at the bottom can lead the user to all the other main features on the app.

3. Workouts


The workouts page provides the user with a list of available workouts, which can be filtered by muscle group. Tapping on one of the workouts will provide a video and description of the workout as well as an option to add the workout to the user’s workout plan. A search feature is also available for the user to find a specific workout.

4. Meals


The meals page provides the user with a list of available recipes as well as the amount in calories. Tapping on a meal provides details about its recipe and the option to add it to the user’s meal plan. Marking items on the meal plan adds that information to the user’s calorie intake statistics. A search function is also available for the user to search for specific meals.

5. Progress


The progress page provides a more detailed overview of the user’s statistics and how they are keeping up with their workouts and meals. They can also update their weight here as they move closer to their target goal.

6. Articles


The articles section provides the user with reading material based on various topics such as fitness, nutrition and general health. Tapping on a headline takes the user to the article itself and allows them to save it to read later as well; these saved articles will be found in the respective section accessible from the main Articles screen. As with the other features, a search function is available for the user to search for specific articles.


TASK 3: Micro Interactions

I used the prototype I developed to create an app interaction plan, as shown here.




TASK 4: Final Project

For the final project, I developed most of the main features but I was unable to create all the pages due to time constraints. I also could not develop the plan building feature for meals and workouts as I could not figure out a way to create them without the use of a database in time. I also had trouble with the page transitions and worked on them until submission. I was however able to ensure that the app was PWA-ready.




Popular posts from this blog

Major Project

Image
Ahmed Yaman Ibrahim (0341119) Major Project *Professional Development Week reflection is in the Week 8 section of this post. Week 1 Ideas 1. Gamification platform for schools Based on dissertation topic - An app that gamifies the school experience for students - providing features such as leaderboards, rewards for turning in work on time and for making extra effort, as well as setting sequential objectives and class-wide goals for schoolwork and homework. Teachers would be allowed to reward students based on their performance with badges and other benefits. It would be built as a web app so it can be used with any operating system and can be simultaneously accessed from a mobile phone and a desktop. Sample layout for homepage Main features: Class subjects as individual topics with sequential objectives Reward and scoring system for work submission, to be reflected on a leaderboard Leaderboard that displays students based on performance to encourage competition Badges as a part of rewar...
Read more

Advanced Typography - Exercises

Image
26/08/20 - 23/09/20 (Week 1 - 5) Ahmed Yaman Ibrahim (0341119) Advanced Typography Exercises LECTURE NOTES Lecture 1: Briefing & Typographic Systems 26/08/20 (Week 1) Our first lecture consisted of a briefing of the module to all students followed by a lecture on our first exercise topic: Typographic Systems. We were shown excerpts of the book Typographic Systems by Kimberly Elam for reference. Typographic Systems The 8 typographic systems mentioned above are Axial, Radial, Dilatational, Random, Grid, Modular, Transitional and Bilateral. These systems are meant to serve as a sort of organizational framework for arranging type on a composition in a way that is functional and visually sound. 1. Axial System In the axial system, type is aligned to either side of an axis. This is especially helpful when organizing lists, or several bodies of text on a composition. Fig. 1.1: Axial system examples 2. Radial system In this system, the type extends outward fro...
Read more

Information Design - Individual Projects

Image
21/1/20 - 24/1/20 (Week 3 - Week 7) Ahmed Yaman Ibrahim (0341119) Information Design Individual Projects LECTURE NOTES Project 1: Recipe infographic Week 3 - Week 7 Project 1 consists of creating an A3 infographic poster for a food recipe of our choosing. Lecture 2: Animation Week 3 - Week 7 Project 2 involves creating an animation (max one min.) or looping gif of the recipe. INSTRUCTIONS PROJECTS Project 1: Infographic poster I chose tiramisu for my recipe as I felt it wasn't overly complicated while also not being too simple to fit into a one-minute timeframe for the animation. I looked up a few recipes online to figure out the most common elements in the recipe and began sketching how I could lay out the poster. Fig. 1.1: Project 1 (Layout sketches) I then moved to Illustrator to visualize the design better as I went along creating it. I decided I'd try an isometric design for the tiramisu illustration, so I created a basic i...
Read more