Mitty Visotcky Head of Android/iOS

    Why Would a Mobile App Need Pre-design?

    Today, it’s hard to imagine an ambitious product or service without a mobile app. However, developing your own mobile tool is a costly thing to do. Before you even start that, it’s worth making sure that your clients actually need an app and working out the key things they want to see in it.

    Doing everything at once is not the best idea since having a lot of features in your very first release may not pay off while adding to the time to market. That’s why building an app starts with an MVP that you can later expand. But in order to have something to improve on, you first need to build a strong foundation.

    And that’s exactly why we always suggest starting with pre-design before we move on to app development. This step helps us address the following questions crucial to the commercial success of the product and do it in one go:

    • identify the target audience and understand what it wants from an app,
    • pick out the top-priority features an MVP must have,
    • set out the course this product is going to take.

    Stages of pre-design

    In order to plan for long-term development, it’s important to make the right choices right from the start and build the product strategy. Product success and its key metrics (monthly active users (MAU), daily active users (DAU), retention rate, and customer lifetime (CLT) are directly connected to business goals. Consequently, there’s a connection to how profitable the product will be.

    We divide pre-design into the following stages:

    • understanding the project idea,
    • selecting the features,
    • competitor analysis,
    • СJM workshop.
    From idea to CJM
    Let’s have a closer look at each of them.

    Market research, competitor analysis, and project ideas

    This stage involves carefully listening to our client and what it tells us about its business and customers: what they are like, their purchase preferences, their feelings about the app if it already exists. To do that, we team up with our client. What we do to structure the responses is:

    • do a market research,
    • put together a list of questions,
    • interview business owners and decision makers,
    • analyze the existing channels of communication,
    • write a brief.

    We need all of this to work out which business demands we are addressing, who our users are, and what needs we are trying to meet. Here, we analyze the existing channels of user communication and check how effective they are. What is actually a top priority at this stage is to establish the baseline and lay the groundwork for the upcoming research.

    Specifying the features

    This stage involves teaming up with our client to achieve our shared goal of building a product that successfully addresses the needs of both the business and the customer.  In order to do so, we study the users’ current experiences, pains, needs, and motivation. We also take a closer look at a certain market, including the existing solutions, competitors, and their pros, cons, and troubles.

    • We carry out an in-depth analysis of the niche and users.
    • We thoroughly examine the competitors and the reviews of their apps in stores to find out what their users want from an app.
    • We inspect our client’s state of affairs and submit a request for its analytics.

    We need all of this to estimate the scope of work and functional units of the future app. As a result, we put together a competitive landscape analysis, a visual map consisting of two blocks. This allows us to move forward, keeping in mind both the business and customer benefits.

    block 1 and block 2
    Competitive landscape map


    This stage involves putting together a customer journey map (CJM). We use a versatile marketing tool which can prove useful when designing a mobile app. We hold a workshop where we:

    • identify the points of interaction between the user and the service,
    • make an inventory of all the features of the future app, dividing it into blocks,
    • describe the way users react to the app when using it,
    • specify how important each step is to a user,
    • identify the “aha moments” (the strengths of an app likely to get an emotional response) and potential headwinds.

    Essentially, this stage is a two-day workshop involving brainstorming sessions with experts from various relevant departments on both our side and the client’s side.

    workshop pictures
    СJM workshop

    We need all of this to build a project team of both our experts and our client’s experts. As a result, we put together a precise action plan. All we have to do then is bring the ideas to life.

    Our clients appreciate the transparency of our CJMs the most. After all, this stage helps us define the feature set of a product, pick the features critical to an MVP, and lay down the roadmap for the product.

    Clients always know what will be done first and what will come after. Together, we agree on all the details and work out which features to implement within the first iteration of the app and which to leave for later.

    table for MVP
    An example CJM

    You can read about it in detail here.

    Our case. CJM is a crucial stage where you can find all the weak spots in your app. That’s why we opt for an in-depth analysis of negative use cases. Let’s look at an example of a food delivery app. When users order food, they are hungry and not willing to wait. Thus, any negative experience provokes an extreme reaction. Therefore, we should identify all the likely negative scenarios and minimize them.

    In the concept of the app for KFC, we suggested implementing a tool that would enable users to quickly contact customer support in case their order is delayed. To help users monitor their orders, we added detailed information on the order status and moved it to the home screen. After an order has been placed, users may discover that they are unable to order certain meals. To avoid this, we suggested adding a filter that allows users to pick the restaurant that serves the meals they need.

    KFC app mockups
    A KFC app concept by Surf

    In-depth interviews — Custdev

    This stage involves analyzing customer needs and testing project ideas. It is the most essential part of your analysis of the needs of your target audience. At this stage, our ideas and product vision get challenged. Based on the custdev, we confirm our hypotheses and update our priorities and the product road map.

    More often than not, we interview 15 to 30 people pulled from various segments. The number varies from project to project and depends on the number of segments in the target audience.

    In addition to that, we use a trending product framework — Jobs To Be Done. It helps monitor and analyze the needs that people may have, regardless of whether they are lifestyle goals or small routines.

    We need all of this to identify and prioritize the segments of the future target audience. As a result, clients receive a thorough record, including our summary and hypotheses. Here we find out:

    • what pains and needs the users actually have,
    • how useful it is for the customers to have the features we are offering,
    • how marketable our product is,
    • if there is anything we need to change or know,
    • the nuances in the customer needs.

    Our case. Working on the app for Bethowen, we had a Сustdev with various clients of pet stores. As a result, we found out that there are two major factors that make an app appealing to users:

    • familiar items in stock,
    • quick and easy checkout flow.

    The most important thing at this point is to carefully collect all of the insights and artifacts we discovered. One of the insights in the case of Bethowen was the fact that users are not loyal to brands; instead, they need an app that allows them to buy popular items for their pets quickly and easily. And we did just that, thoroughly reorganizing the entire checkout flow and making every purchase quick and easy.

    Bethowen app by Surf

    Job stories

    This stage involves carefully gathering all the artefacts and insights related to customer needs. Here, we examine open-source data, studies, and analytics to determine the business path the company will take.

    We need all of this to gather job stories — insights defining initial needs — at the end of each stage. Further on, we constantly check with them as we go to see if what we are about to do complies with the key customer needs. It’s a reference point, helping us keep all the important data concise and verify anything we might want to do next.

    User Flow Diagram

    This stage involves creating a diagram — a tree of features in the future app. All data and artefacts must be gathered in one place so that nothing important is lost along the way.

    We need all of this to describe each feature, down to a scenario and depiction of each screen and every one of its blocks. The diagram shows the correlation between the features in the app and each of the scenarios separately. Next, we gather up all of the practices and tie them together.

    The project then enters the first stages of development, including prototyping and UX-tests. Let’s take a quick look at those. Based on the artefacts gathered, we build a prototype of the app, i.e., we design the screens in Figma and build clickable prototypes in Invision/Figma.

    Everything is prioritized: first we design the main scenarios, then the secondary ones. At this stage, we are already dividing the user experience into functional blocks and screens.

    The prototype is verified by real-life users. Focus group members are given a clickable prototype of the UI, asked to perform a series of real-life tasks, and then monitored. If the focus group encounters any difficulties, we adjust the prototype. As a result, with each new iteration, we improve the prototype and get closer to the final product.

    Application prototypes: The Hole

    Pre-design custom made for the client

    We can talk all we want about universal development tools, but what’s essential to a good app is a case-by-case approach to each business and each client.

    For instance, in e-commerce, we pay more attention to the checkout flow since the ultimate goal of a shopping app is to buy something quickly and easily. You can read about it in more detail on our blog. Foodtech works with one of the most “dangerous” audiences — hungry people losing patience. Therefore, we must go over every capability that has to do with quick delivery — it is this very factor that plays one of the key roles in a foodtech app.

    A banking app, on the other hand, has more user scenarios than any other kind of app. In e-commerce, the primary goal is to allow users to make a quick purchase, while a mobile bank addresses many more issues, such as opening a new product, managing the existing ones, transfers, payments, and third-party system integrations. Consequently, it will take much more time to go through pre-design.

    But even apps of the same type can have completely different customer interaction procedures and limitations. This, in turn, affects the list of features an app will need.

    Pre-design can also get more complicated when a project is intended for several types of users, such as a student and a teacher, a doctor and a patient, or a driver and a passenger. In such cases, we have to address not only different user scenarios but different needs as well. As a result, the pre-design step may show us that the needs of two different target audiences can only be addressed with separate apps.

    However, in general, the CJM and custdev procedures don’t vary much from industry to industry. In every project, we follow the same algorithm. The only thing that can change is how complicated the user scenarios and roles become.

    Depending on the type of business, pre-design will be useful and can help create an effective product in the following cases:

    • there is no shared vision of the product and its roadmap. Therefore, we need to get a clear picture,
    • there already is a full-scale concept of the product, and we need to understand which features are actually important and should be delivered first,
    • there is already a solution in place; we just need to identify its flaws in order to improve it.

    The people responsible for pre-design at Surf are called the Product Lab. It’s our consulting department that has already released dozens of successful apps. The Lab forms and tests hypotheses, helps streamline the activities in our product teams and build product roadmaps.