Wireframing is very important for a successful design process. It can save design and development cost if done in a proper manner. It helps to freeze the functionalities and collecting initial feedbacks.
In this article, we will create the wireframe by using User Stories of an iPhone Application called as “Busidea App”.
User Stories plays a very important role in requirement gathering of Agile Methodology. Generally, product owner writes User Stories and prepare Product Backlog for the team. But anyone from the team can write the User Stories and verify it with the product owner.
In this article, we will write the User Stories for an iPhone app. Let’s call it “Busidea App” and add a brief introduction of the App.
Busidea App
Great Minds Discuss Ideas
Giving does not mean just giving the money to charity. You can help people by giving them ideas of how to earn.
If you are an innovative thinker you can share your ideas and be the part of other’s life. Join Busidea app and feel the happiness of giving.
Ok, we are done with the introduction of the Busidea App. Now time to learn about the Steps.
Step 1: Identify the User Personas
Basically it is the finding of how many types of users will be there in the system. For Busidea App there will be two types of users:
App User – Who will use the app
Admin User – Who will use the web portal
Step 2: Write Users Stories for each User Role
Following is the template for the User Stories.
Title of the story
Description of the story
As a <role> I want to <feature> So that I can <benefit>
Acceptance Criteria
In this step, we will just write the Title of the story and the Description of the story. You can also skip the Acceptance Criteria by writing more User Stories.
Story 1: User Registration
As a user, I want to create an account by using Google Plus or Facebook or Email so that I can use the Busidea app.
Story 2: User Login
As a user, I want to Sign In by using Google Plus or Facebook or Email so that I can Sign In to Busidea app.
Story 3: Sharing a Business Idea
As a user, I want to share my business Ideas with all other Busidea account users so that I can get feedback in form of like.
Story 4: Deleting a Business Idea
As a user, I want to delete my business idea.
Story 5: View Business Ideas of Others
As a user, I want to see other Busidea app user’s business ideas so that I can give my feedback or take inspiration to start a new business.
Story 6: Business Ideas Filter
As a user, I want to filter ideas by “My Business Ideas”.
Story 7: User Profile
As a user, I want to see my profile page so that others can see my picture and read my bio.
Story 8: Notifications
As a user, I want to get a notification when anyone like my idea.
Story 9: Admin Features
As an admin want to view/delete the app user list.
Step 3: Add Acceptance Criteria for each User Story
Following is the User stories acceptance Criteria template written as Scenario.
Scenario
GIVEN <Some text>
WHEN <Some text>
AND <Some text>
THEN <Some text>
AND <Some text>
Story 1: User Registration
As a user, I want to create an account by using Google Plus or Facebook or Email so that I can use the Busidea app.
Scenario
GIVEN as an unregistered userWHEN I fill out the Google plus or Facebook account informationAND tap on SubmitTHEN I should have an activated accountAND I am taken to the landing page for new users
Scenario
GIVEN as an unregistered user
WHEN I fill out the Email, Password and Confirm Password
AND tap on SubmitTHEN I should have an activated accountAND I am taken to the landing page for new users
Story 2: User Login
As a user, I want to Sign In by using Google Plus or Facebook or Email so that I can Sign In to Busidea app.
Scenario
GIVEN as a registered userWHEN I fill out the Google plus or Facebook or Busidea app account informationAND tap on SubmitTHEN I am taken to the landing page for new users
Scenario
GIVEN as a registered userWHEN I click on Forgot Password
AND Enter registered email address
AND tap on Submit
THEN system should send a reset password link to my registered email id.
Story 3: Sharing a Business Idea
As a user, I want to share my business Ideas with all other Busidea account users so that I can get feedback in form of like.
Scenario
GIVEN as a logged In userWHEN I fill out the Idea TextboxAND the minimum text length of the idea is equal to or more than 50 character AND maximum text length is equal to or less than 300 character AND tap on SendTHEN my idea should be to share with other Busidea app users
Story 4: Deleting a Business Idea
As a user, I want to delete my business idea.
Scenario
GIVEN as a logged In userWHEN I shared an ideaTHEN it should have a Delete buttonWHEN I tap DeleteTHEN it asks for confirmationWHEN I tap on Confirm THEN my idea should be deleted from the systemAND it should not visible to others
Story 5: View Business Ideas of Others
As a user, I want to see other Busidea app user’s business ideas so that I can give my feedback or take inspiration to start a new business.
Scenario
GIVEN as a logged In userWHEN a user shared an ideaTHEN it shows to all Busidea usersAND it has Like buttonAnd it shows total Like Count
Scenario
GIVEN as a logged In userWHEN a user shared an ideaTHEN it shows to all Busidea usersAND it has Report buttonWHEN I tap on ReportTHEN an email should send to the app admin with the account information of that user.
Story 6: Business Ideas Filter
As a user, I want to filter ideas by “My Business Ideas”.
Scenario
GIVEN as a logged In userWHEN a user shared an ideaTHEN it shows to all Busidea usersAND it has Filter of “My Ideas”WHEN I tap on My IdeasTHEN it shows ideas shared by meWHEN I tap on All Ideas
THEN it should show all ideas
Story 7: User Profile
As a user, I want to see my profile page so that others can see my picture and read my bio.
Scenario
GIVEN as a logged In userWHEN a user tap on ProfileTHEN it shows Upload Profile Picture buttonWHEN I tap on Upload Profile PictureAND select an image from my systemAND it should be less than 3mbTHEN it shows uploaded picture as my profile picture
Scenario
GIVEN as a logged In userWhen a user taps on ProfileTHEN it shows Add Introduction text areaWHEN I tap on Add IntroductionAND Introduction text length is less than 300 characterAND I tap on SaveTHEN it added introduction text should show on my profile
Scenario
GIVEN as a logged In userWHEN a user tap on ProfileTHEN it shows the total number of ideas sharedAND it should also visible to all Busidea app users
Story 8: Notifications
As a user, I want to get a notification when anyone like my idea.
Scenario
GIVEN as a logged In userWHEN Busidea app users tap on Like of an ideaTHEN the user who shared the idea gets a notification about it
Story 9: Admin Features.
As an admin want to view/delete the app user list.
Scenario
GIVEN as a registered admin userWHEN I fill out the email and password AND tap on SubmitTHEN I am taken to the landing page for Admin User
Scenario
GIVEN as a logged In Admin UserWHEN a new user is registeredTHEN email and name of registered user show on Admin landing page AND it shows a delete button with the name and email of registered userWHEN I tap on DeleteTHEN it asks for confirmationWHEN I tap on ConfirmTHEN delete the user from the app
