🔗Part 1: From idea to kick-off
🔗Part 2: Backlog and Interface
Introduction
This is the second article in a series about building a mobile application from scratch. We would like to remind you that this series of articles outlines the steps we took to develop an application for kids' fitness. In this article, we will discuss how we created a backlog and designed the application's interface.
UX design
UX, which stands for User Experience, refers to how applications behave and interact with users. Often, UX and UI (User Interface) work are combined, and designers proceed with UI development while keeping UX in mind. This is a viable option, but from our perspective, it is better to separate UX as a distinct phase.
UX design is typically implemented using wireframes or primitive design elements, focusing more on functionality rather than the application's appearance. There are numerous excellent UX tools available for this purpose, although in our case, we didn't use any specific tool and instead brainstormed using a whiteboard.
We went through several iterations on the whiteboard to find the most suitable flow. Below is an image depicting the initial design idea that we discussed:
We design applications for kids, and our focus is on simplicity and functionality. In our case, we envisioned a simple onboarding process with a few screens to gather user information. After onboarding, we planned to have a Main Screen where users can view basic statistics and manage their physical activity programs. From the Main Screen, users have the option to navigate to:
- Training: Run one of the subscribed training programs.
- Statistics: Review their own statistics and check for additional details.
- Achievements: View their achievements and badges.
It's important to note that successful mobile applications are never static. They are constantly being improved, with new features added over time. Therefore, as you read this article and compare our UX to the actual application, you may find differences. Even between the first and second articles, significant changes have occurred. We have adopted a different approach to training and programs than initially planned. This is a normal part of the development process. When changes are made to a released app, we typically update only the UI files to reflect those changes. In most cases, the UX is developed only once for the initial version of the application, based on brainstorming sessions within the team. So, when you review the UX, please keep in mind that it is the result of our brainstorming for the initial version of the app.
UI design
UI design is a challenging and intricate process because it determines the visual appearance of your application. Through UI design, we define colors, styles, and flows that end users will interact with. We suggest following these steps for UI design:
- Select colors
- Define style
- Design an icon
- Start first screens
Let's review these steps one by one.
- Select colors: Every application has its own color scheme and style. We recommend starting by selecting colors and tones that you plan to use consistently throughout your application. By defining a color palette, your UI designers can ensure a cohesive and unified style across the entire app.
- Define style: Style selection determines the overall look and feel of your app. For example, a game might adopt a cartoon style, while other apps may have a more business-oriented aesthetic. At this stage, we recommend seeking inspiration from competitors or other apps in different domains. You can explore the App Store or Google Play Market, search online, or even utilize AI tools for inspiration. In some cases, you can work closely with designers to create your own unique style through iterative processes. Initially, it's advisable to leverage existing approaches, and if all goes well, you can always consider a facelift for your app later on.
- Design an icon: It's important to create an icon for your application at this stage. Often, the icon and its style are integrated into the overall design. The icon should be meaningful, stylish, and simple. Avoid complex icons or logos, as they can be difficult for users to understand and appreciate. Look at how famous brand icons are designed—simple, yet smart. Try to follow this approach and ensure your icon aligns with the selected style.
- Start with the first screens: Begin designing and iterating on a few screens to get a sense of the overall concept and feel. Once you are satisfied with the initial screens, you can give the green light for UI designers to work on designing all the flows within the application. We strongly recommend having everything designed before starting the implementation phase. By following this approach, you can save a significant amount of time by minimizing the need for rework. Design first, implement second—unless exceptional cases require a different order.
It's important to note that the UI may change even after the application is released. Good applications often undergo evolution, and sometimes the final UI can be significantly different from the initial design. This is a normal part of the process as long as the changes are executed smoothly and according to plan.
Below are a few screens with which we started UI for our Kids Fitness App:
When you read this text, our app likely looks significantly different from its initial version. We constantly strive for improvement and embrace change wholeheartedly.
Backlog and user stories
Just after or in parallel to UI design you can start building the backlog for the system. We have a separate article on our website about the backlog, its meaning, and its importance for the project. We recommend reading it in the scope of this article.
Conclusions
Once you have UX, UI, and Backlog you're ready to start the development phase. We recommend using Scrum as a development approach for mobile app development. The most optimal Sprint duration should be 2 weeks. Do your best to have a testable and working prototype even with one big button or one window after the first sprint and grow this prototype with new functionality every Sprint. There are thousands of materials about Scrum, read some of them to understand how it works and follow everything there. Everything! Good luck with your app development. In our next article, we will describe the Scrum process and the main things you need to concentrate on while developing a mobile app.
