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.
- Visualize the screens to match the requirements by creating a screen flow diagram, storyboard, or wireframes. There 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.
- In the design show the navigation between screens and buttons.
- Design how people will get the app and onboard. If a profile is required, create a design for it.
- 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.
- 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.
Collaborate with a UX designer, and your team.
- 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.
- 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.
- design methodology encourages a 30-second success.
- Use one solution for multiple personas by using groups and permissions in Jigx Management.
- Keep things in-app, for example opening a site inside the app.