How to create User Stories and Wireframes

An important aspect of building personal projects are user stories and wireframes.

User Stories

The power of user stories is that they help you:

• Plan the scope of your app (example MVP vs Phase 2).
• Can be translated into future tasks(example is future Trello).
• Should be use to decide what is needed on your wireframe.

User stories is when you write down, in the most simplest form, how a user will use your app. You do this from the user's point of view, not the developer. The user isn't concern with the technology used in the app.

User stories helps you place safe limits on your app. A big issue for aspiring developers is tackling projects that are to big or to broad.

I encourage you to brainstorm and write down as many stories as possible. Afterward, prioritize the user stories with labels like MVP, Phase 2, or version 3 to create a development roadmap. For your MVP, you want to include the minimal stories needed for a working app that can be completed in a short time period.

User Stories Example: Imagine I have a "To-do app" as my project.

• As a user, I can add a todo item.(MVP)
• As a user, when I am finish writing a todo message (item), I can click a submit button to add it.(MVP)
• As a user, I can delete a todo item by clicking an icon near that indicate chosen todo. (MVP)
• As a user, I can click on an icon near the chosen deleted todo item and it will revert back to normal. (Phase 2)
• As a user, I can modify a todo item. (MVP)
• As a user, I can reorder the list of todo items. (Phase 2)
• As a user, I can colorize the todo items for prioritization. (Phase 2)

Based on my user stories, I need the following tasks in Trello for the MVP:

1. Input field
2. Submit button
3. Red "X" icon next to todo item for delete action.
4. Green "Pencil" icon next to todo item for modify action.

Based on my user stories, I need the following on my MVP wireframe:

• Input field to enter the todo (MVP)
• Submit button near the input field (MVP)
• A red "X" icon that is next to the todo for deleting.(MVP)
• A green "Pencil" icon near a todo for updating(MVP)

Wireframes

Wireframes helps you to have a clear goal or picture of what you are building before you start coding. Similar to driving a car, it’s like having a map to your destination before you go on a long road trip.

Some tips:

1. Use your user stories to create your wireframe. This helps to avoid “emotional driven design” or clutter. Instead of “This looks good” or “I want to build this cool thing”, you should be “My user needs an input field or submit button according to the user story”. This is more practical and MVP focused.
2. Use pencil and paper to draw out multiple iterations of your app. Similar to having a conversation where you are explaining a problem over and over, you will eventually arrive at a design that's workable.
3. Next, use a digital wireframe tool to recreate your design. Take a moment to walk through how a user will use your app step by step. Boss Tip: Write those steps down. You may find that you are missing something.
4. When finished, export that image and show to others. Get some initial feedback. Be able to talk through your idea.
5. Add color and images to your digital wireframe.

Resources

Wireframes

1. My favorite tool is Adobe XD

2. A blog post listing 11 free tools

Great user story articles:

1. https://www.atlassian.com/agile/project-management/user-stories
2. https://www.producttalk.org/2012/04/user-stories-are-better-than-prds/
3. https://www.producttalk.org/2012/09/user-stories-arent-as-simple-as-they-seem/

Comments

[Ilya Markin]

Learn the essentials of app design by exploring this detailed guide on how to create wireframes for an app: How to Create a Wireframe for an App. It’s a great resource for anyone interested in the foundational steps of building intuitive and effective app interfaces.

[Alina Dunec]

Hi! I think that creating Wireframe is relevant during the development process. It allows you to show the customer how close your idea is, and whether it is worth making changes.
Designers create a sketch first, then a wireframe, which turns into a mockup after revisions. When the static samples of the interface are approved, they move on to a prototype, which clearly shows how the user will see the application.
In general, the sequence of creating warframes is as follows:
UI/UX market research
drawing up a site visit plan
creating a wireframe
testing your wireframe

For more information on the creation of a wireframe and its features, please refer to the article

[ConstEricB]

You made wireframing so much easier for me to understanding. Thank you