Solution basics

The first dive into the specification and all its aspects: exploring the definition of the solution and its various elements, such as modules, pages, and more.

Click here for a deep dive into the solution editor overview

Solution

A solution is a term used for an end-user application or system. It intends to solve a problem for your end users. This is the top-level view of a software product.‍

In describing a solution, you are in essence defining how your software functions towards the user. What struggles in the domain does the solution seek to address and how does the solution propose to solve it?

This is also the place where you establish your team’s common understanding of your domain definitions, and the language used in the solution industry so that both the design and the services can be constructed in a language that the business can understand and evaluate.

// Solution structure
Solution 
├─ Module A
|   └─ Page 
|   └─ Page
|      └─ Section
|         └─ Functional use case
|             └─ UX flow
|      └─ Section
└─ Module B

Examples of different solutions:

  • A desktop application for keeping inventory of a storage space

  • A web application for organizing shifts for staff in a grocery store

  • A communication system for an elementary school’s teachers and parents

Module

When the description of your solution is satisfactory, your designers and product leads can start documenting the proposed designs and prototypes of the product.

A module is a functionally isolated part of the software that has distinct ownership over its functionality and revision lifecycle. Placing a boundary in the application at points where it makes sense to divide responsibilities for parts of the software.

Examples of modules could be:

  • User and account

  • Payment

  • Inventory

  • Content management‍

Modules are specified with their functionality, the work that needs to be done within the boundaries of the module.

Page

A page represents a single screen or view that users interact with. Each page within the application can be described in the solution specification and/or functional use case, including its layout, content, navigation elements, and functionality. Additionally, wireframes or mockups may be provided to visualize the design of each page.

User Interface (UI) mockups can be uploaded for a visual reference. Both high and low-fidelity designs can work to give enough details for describing UI Flows.

Sections

A section refers to a subdivision within the document that focuses on a specific aspect of the use case. Each section provides detailed information and guidance related to that aspect, contributing to the overall clarity and comprehensiveness of the specification.

The idea is to keep breaking them down into a structure of nested sections to define the interface.

Sibling section

A section can be added on the same level as others, and we refer to them as Siblings

Page
- section
- section

Child/nested section

In other scenarios where your UI requires it due to complexity, you can also nest underneath sections under sections.

Page
- section
    - child section
- section
    - child section

Check the tutorial video below for a more comprehensive overview of how to write your solution, modules and pages:

Functional use case

A functional use case (UC) consists of a description where you can the high-level functionality is provided to the end user. For example:

The user searches for a travel destination in a search box, and the user uploads contact details to their profile.

Further, it can contain more elements of the UC such as

  • UI Designer notes

  • UX Product notes

UI Designer notes

For every User Interface (UI) element there’s a UI designer note where your designer and product lead can describe the functionality and the restrictions you envision for that part of the UI.

An example of a UI designer note could be:

  • Displayed information

  • Buttons

  • Areas that can expand and collapse

  • Drag and drop interfaces

  • Popups and triggered displays of information

You can also enrich the UI designer note with functional acceptance criteria that serve as hard boundaries for the implementation of the element. These can even be foundational for testing later on.

UX Product notes

The UX Product notes allow you to add notes and provide a more detailed description regarding the intended user experience for a specific functional case.

UX flow

The UX flow represents a specific path intended for the user.

Functional acceptance criteria

A list of qualifications that the implementation of the UX flow needs to fulfill. Usually, functional details are not easily communicated through the illustrated UI.

Examples of acceptance criteria could be:

  • Assurances for accessibility of variable screen types and sizes (don't show on mobile, etc)

  • Front-end effects and animations (disabled buttons, etc)

  • Error handling such as password length not matching, etc

After all the UI flow’s expected behavior is documented, the functional specification should be complete. The next step is to start linking the functional specification to a set of underlying services to achieve the desired functionality.

Check the tutorial video below for how to write your detailed specifications - Sections, Functional Use Cases, UI Designer Descriptions, UX Product Notes and Acceptance Criteria.


Linked Use Cases flows

The starting point for service design in a solution

This part should be done by people familiar with your existing services. Like a system architect or product manager.

The UX flows within your Solution rely on functionality from the service, which will be provided through service flows.


Service

A service refers to a discrete unit of functionality or capability provided by a system or application.

Each service is defined by its inputs, outputs, behavior, and interactions with other components of the system. Describe the requirements for the underlying technical flows that will enable you to build the desired functionality.

To learn more about Services, visit our detailed Service basics article


Functionalities

Richt text editor

Our Rich text editor allows you to write your specifications using advanced styling options (heading, bold, italic, bullet points, and many more) and to embed media, images, and hyperlinks.

AI Functionality

Our AI functionality will provide your code generator with the needed domain-driven product information so you can work on your code much faster and with reduced costs.

Comments

You can also comment on different sections of your solution allowing you to add notes to the development process that can be seen and answered by your colleagues.

Commands

Uniscale offers a wide range of commands that allow you to write your specifications and build your solution in a matter of one simple click.

Share Solution

As you work on developing your solution inside Uniscale, you can also share it with your colleagues and bring in more people to work with you.


Last updated