Home / How we’re improving our web development processes through user stories

How we’re improving our web development processes through user stories

Tom Chute presenting his talk to the office.
Tom Chute presenting his talk to the office.

Last week, Pragmatic Team Leader Tom Chute presented a talk to the team on User Stories and Project Goals. For the last year, we’ve been moving to a more Agile way of running projects. This starts from the outset as we collect user stories in our discovery and definition sessions with new clients.  This is so we can better understand our clients and their customers’ objectives from the start, and make innovative websites that achieve these goals through agile development.

In Tom’s talk to our team, he covered the following:

  • The hierarchy of user stories. Epic > Stories > Tasks
  • Why stories are important, and how they make up an Epic
  • How you can capture a user story
  • Linking user stories to overall project goals

The hierarchy of user stories

An epic is a large project involving different people and stakeholders over an extended period of time.

Stories are smaller projects within an epic. An epic can’t be completed unless all the stories within it are.

Tasks are the small (but important) day to day individual activities you must do to complete a story. These involve tasks such as changing specific styling, editing a layout or meeting to discuss an integration.

Capturing Stories:

Capturing user stories is important because they’re objectives all project stakeholders, regardless of technical know-how, can understand. They help us as web developers and designers get in the mind of the different website users, so we can make it as easy and simple for them to complete their goals.

Importantly, user stories help us uncover tasks that may have been overlooked in a client’s project brief.

Persona template:

We use the brilliant templates provided by Roman Pilcher as the basis of our user story collection here at Pragmatic. For all of these points, you should only list the relevant details for your project.

Choose a name and a picture of your user persona so you can develop sympathy and understanding about the user.

What are their details? This should cover:

  • Gender
  • Age. Include an age range of around 10 years for older generations and shorter age ranges for younger years. For example, the interests and lifestyle of those in their 30-40s is very similar, whereas an 18-20 year old will be very different to a 15-16 year old.
  • Occupation. Their career or if they’re a homemaker or are unemployed and looking for work.
  • Income. The lower the income, the tighter your persona’s income salary should be. For example, you would have 16-18k for a lower income persona, but a 60-80k range for higher incomes.

If you wanted to go into more detail (we would recommend you do if it is relevant for your project) you should also include their:

  • Social status. Are they upper, middle or working class?
  • Personality. Introvert or extrovert? Do they have a Type A or Type B personality?
  • Lifestyle. Sexual, spiritual, political, dietary, etc.
  • Usage patterns. When they’re likely to be using your website (day, time, time of the year).
  • Attitudes. Are they confident, optimistic, sincere, or reliable? Or perhaps they’re angry, frustrated or jealous? They could also be indifferent, or complacent.
  • Brand loyalty. Are they likely to always shop from the same brand for your product, no matter what? Or do they always go for the cheapest or more convenient option?

The goal

  • Why does your persona want or need the client’s product/services?
  • What benefit will the client’s website give to the persona?
  • What problems will the client’s website solve for the persona?

For example:

The client, Joanna, has an online florist shop that offers personal flower displays and boutiques with a next day delivery service throughout the whole of the UK.

The persona:

I’m Samantha, a married, female, 30yr old, middle class, accountant with a yearly salary of 35k. I have a very busy lifestyle. I am likely to use the website when I am buying flowers last minute for friends and family as thank you gifts and for special occasions. I will use the site on my tablet or mobile while on the go on my morning commute. I like the ease of use of brands, and am loyal if their products and services are more convenient for me.

The goal:

As Samantha, I want to buy flowers online to send to my mother on Mother’s Day.

I can enter my name, email address, a message with the flowers, my mum’s address (delivery address), my card details and my billing address. My mum will receive the flowers and I will receive an email confirmation with my receipt.

The story:

Now we know the goal and what information Samantha needs to complete it, we need to break it down into the tasks Samantha must complete on the website to achieve her goal. This makes up the story.

  1. Samantha visits the website
  2. She clicks the Mother’s Day flowers selection
  3. She clicks on the flowers she likes, taking her to the product page.
  4. She clicks on the “add to cart” button.
  5. There is an option to continue shopping or go to checkout. Samantha chooses checkout.
  6. This takes her to the shopping trolley, which offers the option to add a message to her flowers.
  7. She clicks on add a message
  8. She enters her message and clicks save
  9. She clicks on the checkout CTA
  10. This brings up the delivery details form
  11. She fills it out and clicks next
  12. This brings up the billing details form with credit card details and billing address
  13. She fills it out and clicks next again
  14. This comes up with all the details asking her to confirm her order. Also on this screen is the option to hide the price on the receipt. She ticks the box to hide the price and clicks confirm order.
  15. Credit card authentication screen
  16. Checkout complete. Email confirmation received.

It is important to also look at the process from the admin journey so we as developers can understand what the company needs to do to provide their services and products. This is because it greatly impacts the way the website’s backend performs.

  1. Joanne at the florist receives Samantha’s order via her WooCommerce dashboard
  2. Joanne prints off the receipt and shipping label within WooCommerce
  3. She prints the personalised message from Samantha to go with the flowers
  4. She then picks out the flowers Samantha chose and packages them up with the message and receipt
  5. Joanne marks the order as completed in WooCommerce
  6. The courier arrives and takes the flowers
  7. The online tracked shipping is updated to say the flowers have been dispatched
  8. They’re delivered to Samantha’s mother
  9. The online tracking says the flowers have arrived

Keeping agile

Now we know the project’s goals and our client’s user personas, it is important that we stay agile while developing the stories and the tasks. The project’s goals will always be fixed, but the journey both we and the user takes to get there can change and adapt in order for it to be the smoothest journey possible.

We know a project goal has been completed when the user story can be tested. Very simply: can the user get to the end of their story? If yes, the test and the element of the project is complete. If not, we’ll run a retrospective workshop and find out why not, and if we need to change the way we’re approaching completing the story.

We’re always looking for new ways to improve our processes, and have found that the above methodology is the best way of involving project stakeholders in our production process. This means our websites are user focused from the outset, which is a great way to approach any project!

If you’re looking for a conversion optimised website with an efficient user journey both you and your clients will love, get in touch!