Scenarios & Mockups - swe574-Fall2024-Group1/huddleup GitHub Wiki
1.User Profile
Scenario: Badges that user earned from different communities are listed on the user profile page.
2.Activity Feed
3.Badges
Manuel Badge Scenario:
The community owner Alan wants to create a Community Specific Badge, therefore he goes to the Badge Management.
Community Specific Badges - Automatic Badges with Predefined Criteria Scenario:
Scenario 1: The community owner Alan, creates community specific badge for the community Travel for Food. Ali has been a member of HuddleUp for a while now, primarily engaging with the “Travel for Food” community. He has been posting food recommendations from different locations.When he posted Köskeroglu post, he has earned the "Gourmet" badge, which is given to users by specifically posting food recommendations from 30 different locations.
Scenario 2: The community owner Fred, creates community specific badge for the community Chill Soundscape.
Sarah, a passionate ambient music creator, posts her music composition “Echoes of Yesterday”. As days pass, Sarah's post gains attention. The upvotes climbs to 1,000. Therefore, the system assigns "Soul Whisperer" badge to her.
Community Specific Badges - Manual Badges:
Scenario: In the "Healthy Living" community, owner Jamie decides to award the "Creative Genius" badge to member Alex for consistently sharing innovative recipes that have garnered enthusiastic responses from other members. After noticing that Alex's unique smoothie recipes not only received over 100 upvotes but also sparked a lively discussion on nutrient combinations, Jamie opens the badge assignment modal.
4.Tags
Scenario: Ali logs into the HuddleUp app and navigates to the "Travel for Food" community. From there, they click on the "Tags" button for managing tags.Within the panel, Ali finds the "Tags" section. This section allows community member to create and manage tags that users can apply to their posts. Ali clicks on the "Create New Tag" button and enters the following information: Tag Name: "Turkish Street Food",Description: "We eat on the streets of Türkiye."After filling out the details, Ali saves the tag. Once the new tags are created, Ali drafts an announcement to the huddleup. The message explains the purpose of the new tags and encourages users to start tagging their posts accordingly for better visibility and organization.
Sarah logs into the HuddleUp app and navigates to the "Travel for Food" community. She clicks the "Add Post" button.Sarah fills a location, restaurant name, detailing her experience with the food. Before publishing the post, Sarah sees a "Tags" section at the bottom of the post creation form. She clicks on the tag input field, and a dropdown list of available tags appears.Sarah selects the following tag from the list: French Cuisine. After assigning the tags, Sarah clicks the "Submit" button, and her post is published in the community feed. The tags are displayed under the post, and users can click on them to find related content.
Scenario: Adam discovers new posts through HuddleUp's tag system. He filters by selecting the tag street food.
5.Recommendation
Scenario: Alan begins the registration process by entering her email, creating a password, and filling out basic profile information. After completing her profile setup, the system prompts Alan to select 3 tags that best reflect her interests. A message on the screen reads: “Pick 3 tags that describe your interests so we can recommend relevant content and communities.” Alan is presented with a list of available tags organized by categories. Alan scrolls through the list and selects the following tags: Italian Cuisine,Spicy Food and Breakfast.After selecting her 3 tags, Alan clicks “Continue” to complete the registration process. The system processes her preferences and tailors her experience based on these tags.Upon completing her registration, Alan is directed to the main feed. The system immediately shows her personalized recommendations: Posts, Communities.
Scenario: David discovers new communities through HuddleUp’s recommendation system. The recommendations are relevant due to their shared tags with communities he already follows, and the platform helps him find both popular, active communities and new, exciting groups to join. By using the prioritized recommendation system, David stays engaged and connected to new communities that align with his passions.
1. Coffee Fortune Telling
Scenario: A user joins a coffee fortune-telling community, uploads a photo of their coffee cup, and asks the community for opinions about their fortune based on the coffee grounds.
Step 1: Post Creation (Community-Specific Template)
"Create a Post"
- Title: "What does my coffee fortune say?"
- Photo Upload: A button to upload the coffee photo (JPEG, JPG, PNG)
- Optional Description Field: "I've had this cup in the morning, and I’m curious about the fortune the grounds reveal!"
- Post Button: "Share with Community"
Here, the user can quickly add a title, upload the photo, and describe what they're looking for in the community-specific template. The user can see that a default template is available with an optional photo and description field, tailored for coffee-related posts.
Step 2: Community Engagement (Post Interaction)
"View Post"
- Post Information: Displays the coffee photo, title, description, and user's name..
- Timestamp: Shows when the post was made.
- Upvote/Downvote Buttons: Allows members to vote on the post.
- Comment Section: Allows users to comment with interpretations like "I see wealth in your near future!" or "Looks like a journey is ahead."
- Reply Functionality: Enables users to reply to specific comments for more detailed discussions.
This page encourages community members to engage with the user's coffee post and provide their own fortune-telling interpretations.
2. Create Book Discussion Template
Step 1 - Access the Template Dashboard
Ahmet (moderator) logs into the "Reading Community" and navigates to the "Reading Community Templates" section. He sees a list of existing templates like "Book Review" and "Reading Challenge.", created by other moderators before.
Step 2 - Initiate New Template Creation
He clicks the "Create Template" button at the top of the page. A modal window opens with a form to create a new template.
Step 3 - Fill in Template Details and Add Additional Fields
He enters "Book Club Discussion" as the template name and he writes a description "Start a discussion about the current book club selection."
Ahmet needs specific input fields to guide the conversation:
He adds "Book Title" (text) so members can specify the book and "Author" (text) for the author's name. For structuring the conversation, he adds "Discussion Topic" (text) and "Initial Thoughts" (textarea) to allow for free-form input. Finally, he adds "Meeting Date" (date) to schedule the in-person or online discussion.
Step 4 - Review and Save the Template
Before saving, he reviews the list of fields and confirms they cover all aspects of the discussion.
He clicks "Create Template." The new "Book Club Discussion" template now appears in the template list, complete with fields like "Book Title," "Author," and "Discussion Topic."
3. Post Creation Screen - Plant Identification Community
This wiki page provides an overview of the post creation screen mockup designed for the Plant Identification Community app. The screen allows users to easily capture and share plant photos for identification by other community members.
Overview
The post creation process consists of two primary steps:
- Capturing a Photo
- Writing the Post
During the creation of a post, the app automatically gathers important metadata (location, altitude, time, date) from the user's phone, which can later be manually edited if needed.
Step 1: Capturing the Plant Photo
When the user initiates the post creation process, the app activates the phone's camera. The user is prompted to take a photo of the plant they want to post. This image will be the central piece of the post for the plant identification request.
Action:
- Take a clear, focused photo of the plant to ensure other community members can accurately identify it.
Step 2: Writing the Post
After capturing the plant photo, the user is taken to the second step of the post creation process, where they can add more details to their post.
Fields:
- Post Title: A brief title summarizing the plant or the request for identification.
- Post Body: A more detailed description where the user can add relevant information about the plant, such as its characteristics, the environment it was found in, or any other details that might help with identification.
Automatically Filled Information
In addition to the user-provided content, the following information is automatically gathered from the user's device and added to the post:
- Location: The geographical coordinates or area where the plant photo was taken (e.g., "Eastern Aegean").
- Altitude: The altitude at which the photo was taken.
- Time & Date: The exact time and date of the photo.
Editing Auto-filled Information
The user can manually edit the automatically filled information by clicking on the respective fields (location, altitude, time, date) before submitting the post. This ensures flexibility in case any corrections are needed.
Finalizing the Post
Once the user is satisfied with the photo, the written content, and the metadata, they can submit the post for the community to view and assist with identification.
This post creation screen mockup is designed to streamline the process of sharing plant identification requests, making it easy for users to provide detailed posts while reducing the need for manual input.