In an agile team, should a user story contain links or screenshots of the UI elements? If not, where do you put design?

For example:

As a user, I want to log in to the Website so I can access the admin panel.

Story Description:

Here's the design for more information on how it looks like. [Link to the design] or a screenshot.


5 Answers 5


First, I'll say that every Agile shop I've worked in has done it differently. So the answer for you is probably, "Do whatever is best for your audience." (The devs, I assume.)

In my current job, Project Owners write and maintain the User Stories. (I've never, as a UX Designer, created one.) They are written to be platform and design agnostic. That is, they describe what has to happen, but they say nothing about how it happens or what widgets are used.

The UX team attaches wireframes or prototypes to the User Stories so they're handy for the devs, who work from both.


I'm a fullstack developer rather than a designer, for me, the UI design is matter of hobby. I always work with agile methodologies, mostly of time, Kanban. The User Story is just a feature of the software and generally does not contain any prototype of how it can be or look.

Each User Story travel across some stage. For example, in SCRUM and Kanban, the first stage is Development. But this stage doesn't means only code, this stage covers from design to implementation. Is normal to divide a User Story into small tasks, this tasks must be estimated in points or time and this causes the User Story value.

So, once your User Story to development into your Sprint backlog, the user changes to this (for example):

As you can see, the User Story needs divide in tasks, so the team assign one member to one o more tasks needed to complete it, and of course, include designers.

Remember: the team must work together even if are distinct areas. This assures you a solid software.

  • But do you attach the final design to the user story before dev starts?
    – Noah
    Mar 20, 2017 at 11:22
  • The design, as you can see in the picture, is a normal task inside the user story. So, it must be developed when the user story moves to dev stage.
    – user97554
    Mar 20, 2017 at 12:07
  • But do you attach it to the user story?
    – Noah
    Mar 21, 2017 at 9:05
  • @Noah How do you think that you can build an UI using frontend technologies if you not attach the UI design once you finish it? When the story is moved to development stage, you don't have any design or code. When the designer(s) of the team finish the UI design, it is attached to the user story and the frontend guys do their job.
    – user97554
    Mar 21, 2017 at 11:56
  • But frontend is also development, isn't it?
    – Noah
    Mar 21, 2017 at 15:01

This depends on the assignee of your User Story. Your example explains that a user should be able to login to the admin panel through the website.

A developer/designer would ask: - How does the user login? Facebook, Email or other methods - Where is the login form located on the web page? - What error messages do I need to show?

I would suggest to clarify your User Story in a way the team can understand the task better. Therefore design or wireframes are not needed.

As a user, I want to log in to the Website using my email address and password so I can access the admin panel. I want to be presented with an error message in case I have used the wrong credentials. The log in form should be accessible from every page through the main navigation.

  • That was just an example. You would have the supportive details information in the acceptance criteria. In my case, a story goes to engineering and design happens in an ad-hoc way.
    – Noah
    Mar 19, 2017 at 15:10
  • Does this mean, that the design is made during/after development? In this case I would suggest to add wireframes/UI to the story in order to clarify on the tasks. Mar 19, 2017 at 16:04
  • Design is worked on before development. Engineering gets the fully fleshed version of the design.
    – Noah
    Mar 19, 2017 at 16:35

What we do currently in my team is to use the user stories in order to communicate better between our team members and between our team and our client.

What do I mean by that?

  • We write the user story with a few details, as you have written it above
  • We "break" the story in pieces. The UX designer writes down the steps, such as “As a …,” “I want …,” and “so that …”
  • We discuss that internally with the team (design & development) and after some iterations, we come to an agreement
  • We send it to the client & we seek for agreement
  • We make the design & evaluate it with our users
  • We start with the development

So, yes the design goes with the story, but as long as the story is discussed already with the team members & the clients to get an approval. Of course, this is one way of working. If someone has to suggest improvements on this, please, I would love to!


I don't normally put images of anything in my user journeys but I've seen examples of where it's done.

What you want to avoid is distracting readers from the narrative because you divert them to a complex interface. If you are going to use images make sure it supplements the part of the journey you're on.

You might also be getting confused with storyboards which combine screenshots/wireframes etc with narrative

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.