# Solution Design

Next, you are ready to map out the requirements of the app. Each requirement or must-have will be represented on a screen in the app. This is the first visual representation of all the screens and will help uncover usability issues. This is where you get to decide how many screens there will be, what each will look like, and put them in a logical order for navigational purposes.

### Steps

1. Visualize the screens to match the requirements by creating a screen flow diagram, storyboard, or wireframes. There are many methods you can use, the easiest is to start by drawing out each screen on a piece of paper. Then add the drawings in Miro, Figma, or the application of your choice.
2. In the design, show the navigation between screens and buttons.
3. For guidance on mobile UI, refer to Jigx [Templates](/building-apps-with-jigx/ui/jigs-_screens_/jig-templates.md) or resources such as: \
   \- [Apple Design - Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) \
   \- [Google -material design principles](https://m2.material.io/design/introduction)
4. Design how people will get the app and onboard. If a profile is required, create a design for it.
5. In your design, you can already decide which features to add, such as buttons, dropdowns, or text fields. This turns your ideas into pictures, which will be converted into navigable screens during the build stage.
6. Draw out functionality that should be available to certain user groups/personas. Think about if people need to see a different view of the screen, i.e., Manager vs employee.
7. Collaborate with a UX designer and your team. \
   ![](/files/OgNEUTgXb8RMnJ4kQR6y)

### Considerations

* Spend time on your design because this determines the look and feel of your app. Add as much information as you can.
* Drive interaction in the app as much as possible with intuitive design, cues and simplicity.
* Personalize screens for users in the screen design.
* Include designs for main screens, and decide if there will be multiple main screens.
* Layout the navigation of the screens, how or what will lead the user to interact with the various elements of the app.
* With every screen think of the usability, this can be how much to include, or how it will display on the screen.
* Enhance the user's experience through well-planned UX and UI design.
* Consider scalability and future-proofing to accommodate growth and expansion.
* Feature overload, including too many features, can lead to a cluttered and confusing user experience.

### Tips

* Only put things on a screen that add value.
* Using a header on screens helps with personalization and visualization.
* Consider scrolling on the screen, for example, if it is a form, two thumb scrolls should be the maximum. For large forms, break it up into sections, and add the sections as a list with right arrows that takes you to a form for that section.
* Have the required input fields on the form with optional fields in another section.
* Limit the number of items returned on the screen in a list or add search or filter functionality.
* Try to minimize navigation and aim for smart navigation.
* Aim for a 30 -40 second engagement on screens, especially forms.
* Jigx design methodology encourages a 30-second success.
* Use one solution for multiple personas by using groups and permissions in [Jigx Management](/administration/management-overview.md).
* Keep things in-app, for example opening a site inside the app.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.jigx.com/getting-started/planning-your-app/solution-design.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.