Halo Lab’s mobile app design process — our workflow and case examples

At Halo Lab, we’re here to simplify things for you. Our team knows the ins and outs of mobile app development and is ready to guide you through every step. In this article, we’ll walk you through the mobile app design process, share some real examples from our work, and help you feel confident about making the right choices for your project.

How we design apps — Halo Lab’s workflow

Having worked with platforms of different complexity for quite some time, our team at Halo Lab has learned a thing or two about crafting concepts and transforming them into successful iOS and Android apps. Today, we’d like to share our expertise with you, analyzing each sprint of the design workflow to give you a clear picture of what it takes to create a mobile application.

Step 1. Research phase

Once you’ve got an app idea bouncing around in your head, the Halo Lab team starts with an important stage — product research. We’re here to steer you in the right direction and help your future creation stand out. This approach lays the foundation for a successful application using a solid set of methods in hand. 

Our experts use all sorts of UX research methods to understand your target audience, their needs and frustrations, and, ultimately, what would make their app experience fantastic. With these insights, we’ll be able to craft a user-centric design that delights and retains users.

Gathering information about the project

Before starting the design work, we gather all the important information to get a clear picture of the product. We ask our clients to provide any available data that can shed light on their vision. This includes a list of competitors, references for preferred design styles, specific layout requirements, and detailed customer profiles.

Once we have all this info, key stakeholders and our design team sit down for a chat to brainstorm the best solutions. This conversation helps us ask any extra questions and ensure all necessary details are covered. The goal here is to define and refine the work plan based on the client’s input. It’s a crucial part of the process to keep everything running smoothly from here on out.

Competitors analysis

Next up, we move on to competitor analysis. This step helps us understand what’s already out there and learn from it. We start by reviewing a few similar products, usually around 3–4 examples, to see what’s working and what’s not. Our team digs into niche metrics, market stats, FAQs, and feedback to get a comprehensive view of the landscape. Doing so helps us pinpoint the strengths and weaknesses of each competitor.

We also create basic screen maps to analyze how rivals have designed their functional flows. This gives us insights into the user experience and helps identify the pros and cons of each approach. In the end, we compile all this information into general conclusions that will guide our design strategy.

Customer profile and value proposition

The next stage in our workflow is understanding your users based on the information you’ve provided. We start by analyzing the pains — the negative experiences, emotions, and risks customers face while trying to get things done. Then, it’s time to look at the gains — the benefits customers expect, what would delight them, and what might encourage them to adopt your value proposition. After that, we focus on how the product or service creates value, identifying ways to ease customer lives (pain relievers) and highlighting its benefits (gain creators).

Step 2. Moodboard gathering

Once we’ve nailed down the research and collected all the essential data, the next part is creating a moodboard. This step includes gathering references that will inspire the design of the app. We look for layout samples, typography examples, color palettes, illustrations, and other graphical elements that fit your vision.

Our designers compile all these elements into a cohesive moodboard that serves as a visual guide for the upcoming process. The goal here is to explore several design directions and sync our vision with yours for the future product UI.

The moodboard sets the tone, keeping the team focused throughout the project and ensuring that we’re heading in the right direction.

Step 3. User flow design

After setting the visual tone with our moodboard, we switch to the user flow phase. This step allows us to map out how visitors will navigate through your mobile app. For this, we create a detailed user flow based on your requirements, adding any extra insights from our design team if needed.

If you’re curious about the details of this process, check out our complete guide to user flow in UX design. It’s packed with insights and techniques the Halo Lab team uses to craft user-friendly and efficient apps, ensuring your users have a fantastic experience from start to finish.

Step 4. Wireframes creation

Next, it’s time to create wireframes for the main screens of your app. Our designers build rough sketches that help figure out where everything will go and how it will function. This process helps us nail down the functionality before adding UI design details. If you’re curious about the differences between wireframes, mockups, and prototypes or want to learn more about high-fidelity wireframes, take a look at our dedicated articles. They explain the various stages of the design process and why each one is important.

The timeline for this step depends on the number of pages, but it’s essential to get the structure just right before moving on to the final design.

Step 5. Concepts

Now comes the exciting part — creating the main page concepts. This is where we bring your vision to life and confirm the style of the product. Concepts are essentially early design drafts that represent the look and feel of the app, serving as a graphical representation of the ideas discussed during the research and brainstorming phases. They allow us to explore different design directions and find the best fit for your project.

Usually, we develop 2 different concepts depending on the type and goals. Each idea showcases the possible design direction, including potential animations, and provides a detailed description of the vision behind it. These concepts help visualize the final product and give stakeholders a tangible sense of the app’s aesthetics and usability. They also facilitate early feedback, allowing us to see different design options and provide input before moving to the detailed design phase.

Step 6. UI design

At this stage, we turn to the UI design phase and create the polished, final design based on the confirmed concept, wireframes, or any existing branding. This is where the visual elements come together to create an engaging and user-friendly interface. We focus on details like typography, color schemes, iconography, and overall aesthetics to come up with a cohesive and appealing look.

Lastly, if needed, our designers create a clickable prototype of the product. This interactive model helps you see how everything will work together, providing a clear picture of the complete product.

Step 7. Preparing design for the development

The final part is to prepare the design for development. This phase involves organizing files to ensure a smooth handoff to the coding team. We clean up and properly name all the layers, keeping every element consistent and easy to understand. Plus, we create all necessary states and hovers for buttons, inputs, tabs, pop-ups, error states, and more. Such attention to detail is crucial to avoid any confusion or misinterpretation during the development.

The last step is putting together a comprehensive Design System. This includes all the unique elements of the interface, providing detailed guidelines on conditions, spacing, and typeface sizes that will be used in the final product. 

Developers, in turn, use all these files to write the code that makes your app work, covering everything from the layout and navigation to the interactive elements and backend functionalities. Our goal is to provide a smooth transition so that everyone can focus on building the app without any guesswork. 

Examples of mobile application design

Seeing is believing, and there’s no better way to understand the power of great design than by looking at real examples. In this section, we’ll showcase some of the standout mobile applications we’ve designed.

Project Luna

Project Luna is an innovative product that combines the features of online banks, trade network apps, and finance trackers. Our task was to create a mobile app that allows users to track their expenses across various retail networks. Given the vast number of stores, we needed a solution with easy and quick access to transaction lists for each one while maintaining a clear visual separation of content by theme.

During the design of this app, we focused heavily on functionality to ensure it met all user needs. Our team leaned on the iOS design system, integrating familiar navigation, lists, and inputs to create a smooth user experience. This includes using native features like swipe actions for deleting items, pull-up sheets for details, and multi-select with long press. 

To tackle the issue of endless scrolling commonly seen in traditional banking apps, we designed the interface to display expenses in separate categories (stores). This way, users can view relevant information without sifting through a continuous list of transactions. We also implemented quick access to favorite or frequently used merchants through mini-cards, allowing people to see their balance, expenses, and statistics with just one click.

Additionally, features for planning expenses in specific categories, enabling users to set aside funds for future purchases, were included. This helps in budgeting and saving by reducing unnecessary spending. Users can also make transfers between contacts and view detailed statistics and transaction types, all with minimal clicks to save time. Our goal was to display all necessary information on one screen without excessive scrolling, and we successfully achieved this.

Acton street

Acton Street is an innovative AI-powered education app designed exclusively for iOS, leveraging HID guidelines to create a smooth and intuitive experience. This app offers limitless learning opportunities through interactive chatbot conversations, personalized to each user’s needs.

When users first download the app, there is a need for a catchy sign-up. To achieve this, we start the process with a welcome screen featuring a video and app highlights. This immediately shows users what to expect and how to interact with the app. The onboarding is simple and clear, with each step presented on a separate screen. A progress bar was also added so users can see how many steps are left.

Our main goal was to present all the necessary information on the main screen without overwhelming users. First, our designers displayed notifications, recommendations, and app updates. We also featured “People by Similar Interests,” showing random online users with similar study subjects, and “Last Subjects,” listing the most recent topics the user studied. Additionally, the “Suggested Subjects” section offers topics based on user preferences or other parameters.

We incorporated three main modes to cater to different learning styles. The “Talk to Your Tutor” mode allows users to choose any topic for study, with the bot asking questions and users earning points for their answers. “Multiplayer” offers a similar experience but includes friends or random players for a more social learning environment. There’s also a free chat input where users can write anything they want, akin to ChatGPT, without structured questions or point systems.

To make the app more engaging, we designed the interface to be friendly and motivating, adding gamified elements like points, levels, and competitions with friends. This approach stimulates students to learn actively and enjoyably.

Handle 

Handle is an instant convenience store for U.S. college campuses. They deliver snacks, beverages, ice cream, and more in 15 minutes or less, using a student workforce and electric vehicles. When Handle contacted us, they had an app already, but it needed a fresh design to better connect with their target audience — college students.

For this mobile app, we designed an interface that’s super easy to navigate for both Android and iOS devices. Users can browse a wide range of snacks and drinks, add items to their cart, and checkout without any problems. We also added GPS tracking for couriers, allowing students to see exactly where their delivery is at any given time. To cater to audience preferences, our team introduced “Student Baskets,” a set of ready-to-order combo packs, making it easy to get popular items quickly.

Recognizing the need for quick reordering, we added a “Reorder” feature for previous orders, making it convenient for users to get their usual snacks without starting from scratch each time. To help new users get familiar with the app, the Halo Lab designers included onboarding guide screens that introduce the app’s features step by step. 

To make the platform visually fun, we used patterns inspired by food delivery packaging and smiley mascots. The design features colors like Dark Blue, Purple, Orange, and Yellow to keep things creative while using a Paper tone background for a warm, friendly feel. With this approach, our team restyled Handle that “delivers goodies in a flash” to be even friendlier, easier, and smarter.

Carbon Diet

Carbon Diet is a nutrition coaching app designed to help people achieve their health and fitness goals through a sustainable approach. When they reached out to us, they already had a functional UX but needed a fresh UI to match their new branding. Our task was to integrate their new colors, fonts, and styles into the app, bringing a modern and cohesive look.

We started by ensuring Carbon Diet’s app looked great in both light and dark themes. This meant improving the contrast of buttons and input fields using white and blue, which worked well in both styles. For the onboarding process, our designers included photos of real people to create a stronger personal connection and boost social proof.

Since the app features multiple metrics, charts, and tables, we visually divided the screen into two blocks: one for stats and another for more detailed information. This approach made it easier for users to digest the data. Gradients used in the background and buttons were styled as diamonds to maintain consistency with the branding, ensuring the app would be easily recognizable across different platforms.

The product is available on iOS and Android, with no desktop versions, making it a purely mobile experience. When designing this application, our team adhered to Apple Human Interface Guidelines (HIG) and principles of Material Design for Android to ensure a great user journey across both devices.  

Our principles for creating awesome mobile apps

Creating a mobile app is one thing, but making it a success is a whole different challenge. In this section, we want to share some valuable insights and top tips for designing a mobile app that delivers an exceptional user experience.

Make it easy to navigate

Making an app easy to navigate is a top priority — visitors should never have to guess where they need to go next. At our studio, we ensure this by placing a navigation drawer or tab bar in a highly visible place to users. Keeping the layout familiar helps too, so visitors can move through your app intuitively without any confusion or frustration.

Our design approach also focuses on usability and accessibility. We provide clear feedback for user actions, such as changing button appearances when tapped and displaying error messages in forms to guide visitors smoothly through their interactions. To accommodate all people, including those with disabilities, we adhere to standards like WCAG, keeping apps accessible and easy to use for everyone.

Take care of typography

Typography might seem like a small detail, but it plays a huge role in how an app feels. Picking the right fonts can make the platform look professional and polished. At Halo Lab, our selection process starts by pulling together a shortlist of potential fonts from sources like Google Fonts and Adobe Fonts. We look for similar products and analyze the choices they’ve made, all while considering current design trends. 

Moving on, our designers test these fonts using real content samples to see how they read and look. Throughout this process, we get the whole team involved in internal discussions to gather feedback and find the perfect fit for your project. By prioritizing cleanliness and readability in typography choices, we stick with easy-to-read fonts and avoid the clutter of too many varying styles. However, we’re always ready to explore bolder, more unique stylistic choices if you have a specific vision.

Once a final decision is made, we integrate the fonts into the design and conduct further tests on readability and functionality. This ensures that everyone can interact comfortably with your app, no matter what device they’re using.

Consistent typography with varied weights keeps your app looking sharp and readable on any device.

Choose the right color scheme

Appropriate colors help set the tone and mood of the app. They can evoke emotions and influence how users feel when they interact with the platform. Our team usually starts with analyzing the target audience and the brand’s unique characteristics to understand which hues will be most appealing. 

We employ color wheels and color theory to pick up primary, secondary, and accent tones that harmonize well together. Using tools like Adobe Color and Coolors, our designers experiment with various schemes — including analogous, complementary, and triadic combinations — to find the perfect palette.

Accessibility is important when selecting colors. We ensure there’s enough contrast between text and background hues to keep everything easy to read for everyone, including people with visual impairments. Tools like Contrast Checker help us adhere to standards, making each user satisfied.

Also, adding a dark mode is a great practice. This option is super popular and can improve the user experience by reducing eye strain in low-light environments. It offers a sleek and modern look, and many people prefer it, especially when using their devices at night.

Keep things simple

Simplicity is the best friend. Users love a clean, straightforward interface that’s easy to navigate and understand. Overloading an app with too many features or complicated designs can overwhelm people and make their experience worse. 

At Halo Lab, we live by the rule that “less is more.” It means avoiding long text blocks and opting instead for short, understandable phrases. When a lot of information needs to be conveyed, our designers break it down into smaller, more digestible parts. This approach is complemented by the use of simple icons, clear fonts, and understandable images, all aimed at making the interface more intuitive and visually appealing.

Our experts structure content so that users can quickly find the information they need. We use headings, subheadings, lists, and other elements, placing the most important data in prominent places, while less critical ones might be hidden or detailed on specific pages. To separate elements and reduce visual noise, designers utilize white space, improving readability and the overall perception of the page.

Additionally, we strive to minimize the number of actions users need to take to achieve their goals. This includes minimizing the number of steps in processes, simplifying forms, and decreasing the amount of clicking necessary.

Build a clear visual hierarchy

The design of the application should make it easy for users to navigate the interface. That’s where a clear visual hierarchy becomes essential. We start by organizing content so that the most important elements grab attention first. 

Our approach involves several techniques to create this visual order. It employs different font sizes and weights to establish a hierarchy among headings, subheadings, and body text, making it easier for users to scan and find information. Contrasting colors are used to highlight crucial elements and create visual accents, like using bright colors for call-to-action buttons.

We also consider the placement of content. For instance, our designers position the most crucial information at the top or center of the page, surrounding it with ample white space to draw focus. To help users identify functionalities or sections quickly, visual cues and icons are integrated. With these strategies in hand, we help people intuitively navigate the app, find what they need fast, and have a more enjoyable experience.

Platform-specific peculiarities in app design

When designing a mobile app, you mainly have to choose between the iOS or Android platform, each with its unique recommendations and user expectations. As we discussed earlier, there are two main guides to follow — Human Interface Guidelines and Material Design Guidelines.

iOS, for example, involves following the first set of standards. Its designs favor minimalism, focusing on clarity and depth. Shadows and layers create a sense of hierarchy, giving users a clean and intuitive interface. This approach helps people navigate apps effortlessly, aligning with the sleek and modern aesthetic Apple devices are known for.

On the flip side, Android design adheres to the second one. These emphasize bold colors, larger touch targets, and a tactile, responsive user experience. Material Design is about creating a visual language that merges classic design principles with the innovation of technology. This means using vibrant colors, meaningful motion, and spatial relationships to guide the user’s experience, making Android apps feel dynamic and engaging.

Whether users are swiping on an Apple device or tapping on an Android, following these design guidelines helps keep them engaged and satisfied.

Your vision, our expertise

If you are still unsure whether to develop a mobile app, take a look at the opportunities it presents. First, this is an excellent way to attract new customers. Mobile apps are finely tuned to meet user needs, offering features that unlock new dimensions of people interaction. They excel in personalization, use location services to boost engagement, and provide offline capabilities, being functional even without internet connectivity.

The mobile app design process we’ve outlined above provides a structured approach, but in practice, it’s rarely so linear. Depending on the scope, steps overlap or happen at the same time, requiring us to be flexible and adapt as we go. The journey from idea to polished app is dynamic, with each phase influencing the next.

With our experienced team by your side, you’ll navigate the complexities of mobile app design with ease. Collaborating with Halo Lab turns your vision into a reality, guiding you through each step of the process. If you’re ready to bring your app idea to life, let’s make it happen together.