How do we arrange the UI/UX design process to speed up the mobile app development and save the resources of our customers?

While working with the client side of the mobile app, the project team goes through two important steps. At first, UI/UX designers create screen mockups, and after that, developers start the layout development. At this stage, a problem arises: Not all design effects can be implemented both on iOS and Android. During the screen layout development, the developers might find some elements they can’t implement. In this case, they have to ask designers to remake the mockup. As a result, the process of design and layout development slows down.

In this article, we are sharing the list of design features and errors that can slow down the project work. Also, we are explaining how we have arranged the work in our design team to deliver interface design in the least possible time. Our workflow helps us speed up the mobile app development process and save the resources of our customers.

What errors in UI design slow down the development process?

We have talked to a mobile developer and asked what issues at the UI/UX design stage slow down further development.

Issue 1: Incorrect size of clickable elements

Clickable areas are located around some UI elements on the screen. They are small spaces where the user is supposed to tap while using the app. Clickable areas can be located around buttons, icons, or blocks.

To set the clickable areas right, the developer needs the sizes of UI elements and padding to be set correctly. If the sizes of clickable elements and paddings are set incorrectly, it is hard to fit them into the interface. That’s why such an interface takes longer to develop. To avoid this issue and speed up mobile app development, designers need to carefully set the paddings and sizes according to iOS and Android guidelines.

Issue 2: Customization of standard elements

There are some standard elements that are better not to be changed during the design process. A navigation bar in iOS systems is one example of a standard element. This element usually consists of one title, and it’s better not to add a subtitle to it.

If you change the standard layout and ask the developer to create a custom navigation bar with a title and subtitle, the developer will have to recalculate the paddings and change the font size. As a result, the elements may overlap one another, and the size of the bar may change. This will slow down the development, and the app might be rejected by the store. In this case, to speed up the mobile app development, it’s better not to change standard elements at the stage of design.

Issue 3: System elements are not taken into account during the design

In the process of design, it’s better to create a layout taking into account system elements such as status and the home bar. When designing layouts, designers need to retreat 54px from the bottom or top of the screen mockup and place UI elements within this space.

Some designers forget that 54px includes 34px for status and home bars. As a result, UI elements are placed too far from the edge of the screen. Inexperienced coders may not notice this error, and it might remain in the interface for a long time until someone notices it. Therefore, to accomplish the mobile app development faster, it is necessary to review the design mockups before handing them over to layout developers.

Issue 4: Multiple shadows under one UI element

Sometimes we can’t resist the desire to make the mockup look more attractive and add several shadows at once to one UI element. Not all of them can be implemented in both native and cross-platform applications.

For example, on Android, only one type of shadow can be implemented. The system visualizes a card that has been physically raised above the surface, and the light source is placed in front of it. More shadow types can be implemented on iOS. While within cross-platform development, developers need to implement shadows for two systems separately and adjust them to the design by eye. That’s why it’s better to leave only one shadow behind the UI element. Although the design will look less sophisticated, the app performance won’t be affected, and layout development will be accomplished more quickly.

Issue 5: Blur on non-static elements

It’s better to implement a blur effect to static elements such as background or areas around photos. It is better not to use it to blur the content behind panels or product cards. Unfortunately, Android does not have system and hardware support for the blur effect. That’s why it’s almost impossible to create panels and cards with the use of this effect. In this case, we also have to think about app performance and development speed rather than the beauty of the mockup.

How we arranged the work process in the design team to avoid these issues

Mobile developers in our company rarely ask designers to rebuild the mockups,as we managed to build a system that helps us design attractive and intuitive interfaces while taking into account all the requirements of developers. Based on our mockups, engineers can develop apps quickly, ensure high app performance, and make the project work more cost-effective for our customers. That’s what we do to shorten the release cycles.

1. Make reviews

We create a lot of interface mockups: design concepts for customers, detailed mockups ready for layout development, as well as cases and shots for Dribbble and Behance. That’s why we have created a system of in-built reviews. As a part of it, each mockup created by one designer is usually reviewed by his senior colleague.

Thus we can improve all common mistakes at the design stage and help our designers improve their skills all the time. During the review, designers check the sizes of clickable elements and paddings. Finally, when a review is completed, the developers get a clean and verified mockup ready for layout development.

2. Establish cooperation between designers and developers

We arrange the project work so that designers and developers act as a team, not as separate entities. Project teams run project meet-ups, where they can plan the work and discuss ins and outs of projects. To add, our designers can contact developers either in the task tracker or in corporate chats and discuss the screen mockups. During this process, they can fix errors, discuss non-standard UI elements, or plan the process of creating animations.

3. Use our own design system

A design system is a set of rules and UI elements a company uses in its work. Our lead designers have created a design system with directions and checklists for the design of mobile applications aimed to remind designers about paddings and points to complete before sending the mockup to a developer.

To add, the design system displays sets of ready-made elements like icons, panels, and buttons. Designers can use these elements like Lego pieces and quickly assemble beautiful mockups. The elements from the design system help us create interfaces faster and make them easy to develop.

4. Remind about the capabilities of operation systems

During 15 years on the market, we designed many apps and learned which effects can be applied to iOS and Android applications. That’s why we can always advise both beautiful and easy-to-implement solutions, so our customer doesn’t waste resources. We can always suggest removing unnecessary customization, shadows, or blur elements in case they affect development and app performance.

Also, we define the project requirements with the customer before starting the design process. Thus we reduce the number of interactions required to build a detailed interface design.

5. Help designers with training

Except for reviews, we provide designers with the opportunity to buy courses or books about UI/UX design. There are a lot of people on our team who are passionate about their work, and we give them the ground for the development of their skills.

Wrapping up

All four steps mentioned above help us speed up mobile app development. Our designers deliver mockups within 2–3 weeks, and then the development process starts. Without reviews, the design system, and the requirements definition, the number of iterations would grow, and so does the price of the whole mobile app.

With this approach, we can get MVPs to the market faster. We have recently launched two mobile apps: Oddscrowd betting app and Lainappi rental service. Our team managed to accomplish the design and development of Oddscrowd within 3 months, while Lainappi was designed and developed within 5 months.

If the solid foundation of these projects wasn’t laid at the stage of design, our team would spend a lot of time remaking the interface and code, which would postpone the release. Right now, we keep working on these projects and scaling them at the request of our customers.

If you have a project idea or want to showcase your idea to an investor, do not hesitate to contact us. Our team will create screen mockups that can serve as proof of your idea’s feasibility. And once the mockus are approved, we can move to the development stage.