Interaction Design

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, UXPinAxure RPAdobe XD and Moqups to create the wireframes. Following wireframes are made by using the Moqups tool.

 

mobile-app-wireframe-signin

mobile-app-wireframe-share-ideas

mobile-app-wireframe-notifications

mobile-app-wireframe-sidebar

mobile-app-wireframe-help-privacy

Mobile App Designs of these wireframes are coming soon…

 

Interaction Design

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

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:

  1. App User – Who will use the app
  2. Admin User – Who will use the web portal

 

Step 2:  Write Users Stories for each User Role

user-stories-mobile-app

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
Usually Presented as Scenarios

 

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

user-stories-acceptance-criteria

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

Click here to see the wireframes of these User Stories

 

Branding

How to Design a Great Logo that Makes Your Client Happy

Estimated Timeline: 2 Weeks

Meeting Required: Minimum 2

 

Step 1: Start-Up Meeting

start-up-meeting-step1

Meet with your client to find the answer of these questions:

  1. What is the exact logo text?
  2. Understand the Business.
  3. Know about the Target Audience.
  4. Do they need a Wordmark logo or a Graphic mark logo?
  5. Ask for 5 logos they like.
  6. Ask a tagline which represents their business goal. It’s not necessary to add it on a logo but this will help to streamline your thinking about the branding ideas.

 

Step 2: Think

start-up-meeting-step2

Start thinking and write down all your ideas along with the images to share with your client.

  1. Take help from Google or Nature to grab information, to increase your thinking area but not to steal any logo idea.
  2. Think at least for 4 days.

 

Step 3: Second Meeting

start-up-meeting-step3

Meet again with the client to finalise 2 ideas

  1. Provide suggested color palettes to the client as per the business.
  2. Ask them to finalise the color of their business identity.

 

Step 4: Artwork

start-up-meeting-step4

It’s time to do the actual artwork.

  1. Take the top 2 ideas and do the initial sketch work.
  2. Search fonts which suit your ideas.
  3. Create the black-in-white version of the logos and create at least 3 samples for each idea.
  4. Check if your logo samples are Simple, Scalable, Memorable, Versatile and Relevant.

Note: Make sure your logo samples should look good and readable in small size.

 

Step 5: Finalisation

start-up-meeting-step5

A few more tweaks and you are done.

  1. Send logo design samples to the client.
  2. Add colors to the finalised logo and ready to see the happy faces. 🙂