What are Use Cases in functional design?

What are Use Cases?

In the functional design of your website you determine exactly what functionality should be included in your website and which templates your website consists of. You also create the templates wireframes so that the designer knows exactly what to design. Another important part of the functional design are the so-called use cases.

A use case diagram is a diagram formatted in UML (Unified Modeling Language). With a use case diagram you note the “use case” of your website and which “actors” use it. The use case is a specific function that is built into your website. Actors are types of users, groups or roles that need to use those use cases. The use cases are always noted in a box that indicates “the system”, in our case a website.

What do use cases look like?

The way you record use cases is standardized, which means that everyone documents use cases in much the same way. This is nice because it increases the portability of the functional design of your website and allows multiple stakeholders (designers, developers, project managers) to work with that document.

In a use case we use the following symbols:

The system: in our case the system is the website. Within the framework of the system you note the specific use cases, the actors are always outside of this. A system can also have a version number. For example, you can indicate in which version of your website a use case is introduced. In the example later in this post you can see how this is worked out.

system use case — The notation for a system in a Use Case Diagram

The actor: the actor is the representation of the role or group that must be able to do something in the website. So it is not an individual such as “Bob” or “Jan” but “Administrator” or “User” or “Premium User”.

use case actor — The symbol for the Actor in a Use Case Diagram

The use case: the use case is an oval containing a name that describes certain functionality. A good use case is one that best describes the purpose of the use case. For example: “view agenda” or “change order overview” or “view product information”. You can then add additional descriptions of the use case in the functional design.

use case symbol — The symbol of a use case in a Use Case Diagram

The arrows: you connect actors and use cases with arrows. This indicates which actor should be able to use which use case. When you draw arrows between use cases, you can indicate whether the two use cases need each other (note “uses” or “include”) or are an optional addition to each other (“extends”).

arrows relationships use case diagram — The arrows you use to create relationships between actors and other use cases

An example of a use case diagram for a website

Suppose you want to create a website where you offer an overview of e-books and also make them available for download to users with a paid account. So there are two types of users, namely the paying and non-paying user. Non-paying users can view the overview of e-books and also read a summary per e-book. Paying users can do that too, but they also have the option to download it. After downloading, paying users can send a free copy of that e-book to someone they know.

In version two of the same platform, paying users can also leave a review on the site about the e-book. They also have the opportunity to read reviews from other users. The purchasing department would also like to see these reviews so that they can optimize their purchasing policy.

In a use case diagram you would plot this as follows:

use cases diagram uml example — An example of a Use Case Diagram with multiple systems, actors and use cases.

What are the benefits of use cases?

The big advantage of using use cases is that you can clearly see at a glance what the different types of users need to be able to do on the website. You can also easily see which functions should be included in which version of the website.

You often write out the use cases in the functional design in detail. You then have a nice overview of functionalities that you can place next to the wireframes. You can then check whether all the use cases mentioned have been properly developed or whether there are still things missing. You can then add that.

Finally, the use cases offer a great instrument to help the agency and client agree on which functions should be included in which version of the website. There can never be any confusion about this because everything is listed in a clear diagram.

How do I create a use case diagram?

There are many tools on the market that allow you to create use case diagrams. You can use that, but you could also create use cases with PowerPoint or Keynote, for example. Google also has a program in Google Drive called Draw.io.

The most important thing is that you organize your use case diagrams neatly to ensure that they are easy to read and look professional. For example, use only one font, align elements properly and make sure everything fits together neatly. This is how you create a use case diagram that is a very valuable addition to your functional design!