Author: Anjali Kushwah
A Free Bootstrap Theme by UX Saints
Shades is a free bootstrap theme which is designed and developed by Anjali Kushwah. This theme is free for personal and commercial use. It contains a flexible, UX friendly full-screen menu from Codepen! and images from Unsplash! & Pixabay!
Mobile-First Responsive Design
Full-Screen Product Display
Inner-page Design
A Free Photography Based Website Template by UX Saints
Haridwar is a full-screen slider based responsive template to display the locations or visiting places. You can also use it to showcase your photos with animated captions. This template is free for personal and commercial use.
Single Call-to-Action
Full-Screen Responsive Slider
Designing of a Mobile App by Using Wireframes
This article is showing mockups of an iPhone Application called as “Busidea App”.
Click here to see the Wireframes of Busidea App
Click here to see the User Stories of Busidea App
An Illustration of Growth of Leaders who Develop Leaders
Wireframing of a Mobile App by Using User Stories
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”.
Click here to see the User Stories of Busidea App
Few of the wireframing tools are listed here like Wireframe CC, Balsamiq Mockups, UXPin, Axure RP, Adobe XD and Moqups to create the wireframes. Following wireframes are made by using the Moqups tool.
Click here to see the Mobile App Designs of these wireframes
Tip of the Day About Response Time
Writing User Stories Is Not So Difficult If You Follow a Few Steps
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 user WHEN I fill out the Google plus or Facebook account information AND tap on Submit THEN I should have an activated account AND 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 Submit THEN I should have an activated account AND 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 user WHEN I fill out the Google plus or Facebook or Busidea app account information AND tap on Submit THEN I am taken to the landing page for new users
Scenario
GIVEN as a registered user WHEN 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 user WHEN I fill out the Idea Textbox AND 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 Send THEN 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 user WHEN I shared an idea THEN it should have a Delete button WHEN I tap Delete THEN it asks for confirmation WHEN I tap on Confirm THEN my idea should be deleted from the system AND 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 user WHEN a user shared an idea THEN it shows to all Busidea users AND it has Like button And it shows total Like Count
Scenario
GIVEN as a logged In user WHEN a user shared an idea THEN it shows to all Busidea users AND it has Report button WHEN I tap on Report THEN 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 user WHEN a user shared an idea THEN it shows to all Busidea users AND it has Filter of “My Ideas” WHEN I tap on My Ideas THEN it shows ideas shared by me WHEN 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 user WHEN a user tap on Profile THEN it shows Upload Profile Picture button WHEN I tap on Upload Profile Picture AND select an image from my system AND it should be less than 3mb THEN it shows uploaded picture as my profile picture
Scenario
GIVEN as a logged In user When a user taps on Profile THEN it shows Add Introduction text area WHEN I tap on Add Introduction AND Introduction text length is less than 300 character AND I tap on Save THEN it added introduction text should show on my profile
Scenario
GIVEN as a logged In user WHEN a user tap on Profile THEN it shows the total number of ideas shared AND 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 user WHEN Busidea app users tap on Like of an idea THEN 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 user WHEN I fill out the email and password AND tap on Submit THEN I am taken to the landing page for Admin User
Scenario
GIVEN as a logged In Admin User WHEN a new user is registered THEN email and name of registered user show on Admin landing page AND it shows a delete button with the name and email of registered user WHEN I tap on Delete THEN it asks for confirmation WHEN I tap on Confirm THEN delete the user from the app