Hi~ I'm Anka!

Please observe the provided style guide while designing the prototype for the fitness app. Follow the guidelines outlined below to ensure consistency and accuracy in your design.

Style guide:

Fitness App Style Guide for Four Tasks

Certainly! Below are the style guidelines for creating paper prototypes for the fitness app:

1. Task 1: User Registration

Screen 1: Welcome Screen

• Drawing of App Logo: Clear, bold lines representing the logo.
• Text (Welcome Message): Legible handwriting in sentence case.
• Button (“Sign Up”): Draw a rectangle with rounded corners, label it clearly as a button.
• Annotations: Use arrows to indicate the flow. Add annotations if any specific instructions are necessary.

Screen 2: Registration Form

• Fields (Name, Email, Password): Draw rectangles or lines for input fields, label them clearly.
• Button (“Create Account”): Draw a rectangle with rounded corners, label it clearly as a button.
• Link (“Already have an account? Log In”): Use underlined text or a different color to indicate a hyperlink.
• Annotations: Use arrows to show the next step. Clarify any additional actions with annotations.

2. Task 2: User Profile Creation

Screen 1: Profile Picture Upload

• Drawing of Placeholder Avatar: Clear representation of a generic avatar.
• Button (“Upload Profile Picture”): Draw a rectangle with rounded corners, label it clearly as a button.
• Link (“Skip for now”): Use underlined text or a different color to indicate a hyperlink.
• Annotations: Use arrows to indicate the flow. Add brief annotations if needed.

Screen 2: Personal Information

• Fields (Age, Gender, Weight, Height): Draw rectangles or lines for input fields, label them clearly.
• Button (“Continue”): Draw a rectangle with rounded corners, label it clearly as a button.
• Link (“Skip for now”): Use underlined text or a different color to indicate a hyperlink.
• Annotations: Use arrows to indicate the flow. Add annotations if any specific instructions are necessary.

3. Task 3: Setting Fitness Goals

Screen 1: Goal Selection

• Heading (“Set Your Fitness Goals”): Legible handwriting in uppercase.
• Options (Lose Weight, Build Muscle, Maintain Fitness): Draw rectangles around each option, label them clearly.
• Button (“Next”): Draw a rectangle with rounded corners, label it clearly as a button.
• Annotations: Use arrows to indicate the flow. Add annotations for clarity.

Screen 2: Goal Details

• Field Labels (Weight Loss Target, Target Date): Clear labels for input fields.
• Fields: Draw rectangles or lines for input fields, label them clearly.
• Button (“Save”): Draw a rectangle with rounded corners, label it clearly as a button.
• Link (“Skip for now”): Use underlined text or a different color to indicate a hyperlink.
• Annotations: Use arrows to indicate the flow. Add annotations if any specific instructions are necessary.

4. Task 4: Discovering Workouts

Screen 1: Workout Categories

• Heading (“Explore Workouts”): Legible handwriting in uppercase.
• Categories (Cardio, Strength, Flexibility): Draw rectangles around each category, label them clearly.
• Button (“Explore”): Draw a rectangle with rounded corners, label it clearly as a button.
• Annotations: Use arrows to indicate the flow. Add annotations if any specific instructions are necessary.

Screen 2: Workout Details

• Labels (Workout Name, Duration, Calorie Burn): Clear labels for workout details.
• Details: Draw rectangles or lines for workout details, label them clearly.
• Button (“Start Workout”): Draw a rectangle with rounded corners, label it clearly as a button.
• Link (“Go Back to Categories”): Use underlined text or a different color to indicate a hyperlink.
• Annotations: Use arrows to indicate the flow. Add annotations if any specific instructions are necessary.

Activity 2: Design Paper/computer based prototypes and conduct usability testing using prototypes.

Task 1: User Registration

Paper Prototype for Task 1:

Screen 1: Welcome Screen

• [Drawing of App Logo]
• “Welcome to FitnessPal”
• “Start your fitness journey today!”
• [Button: “Sign Up”]

Screen 2: Registration Form

• [Fields: Name, Email, Password]
• [Button: “Create Account”]
• [Link: “Already have an account? Log In”]

Task 2: User Profile Creation

Paper Prototype for Task 2:

Screen 1: Profile Picture Upload

• [Drawing of Placeholder Avatar]
• [Button: “Upload Profile Picture”]
• [Link: “Skip for now”]

Screen 2: Personal Information

• [Fields: Age, Gender, Weight, Height]
• [Button: “Continue”]
• [Link: “Skip for now”]

Usability Testing:

Conduct usability testing for each task using the paper prototypes.

Usability Testing Instructions:

1. Task 1: User Registration

• Explain the scenario: “Imagine you are starting your fitness journey. Your goal is to create an account on the FitnessPal app.”
• Instruct the user: “Please follow the paper prototype to create an account.”
• Observe: Watch the user as they perform the task, noting any challenges or confusion.
• Ask Questions: After the task, ask the user about their experience, including what went well and what they found difficult.
• Collect Feedback: Pay attention to specific feedback on the design, layout, and overall user experience.

3. Task 2: User Profile Creation

• Explain the scenario: “You’ve just created your account on FitnessPal, and now you need to set up your profile by adding your profile picture and filling out your personal information.”
• Instruct the user: “Please follow the paper prototype to set up your profile.”
• Observe: Watch the user as they perform the task, noting any challenges or confusion.
• Ask Questions: After the task, ask the user about their experience, including what went well and what they found difficult.
• Collect Feedback: Pay attention to specific feedback on the design, layout, and overall user experience.

Iteration: After conducting usability testing, take note of the feedback and areas where users faced challenges. Make any necessary adjustments to the paper prototypes, such as modifying the layout, adding clarifications, or improving the usability. After making these changes, you can continue with additional paper prototypes or move on to digital prototypes for further testing and refinement.