The shop is a large retailer of pet supplies.

    Project idea

    To create a user-friendly app and increase conversion

    When we started our cooperation the shop already had a mobile app. The app had been developed based on an out-of-the-box solution and designed to prove the company’s hypothesis that the sales channel would be popular with their customers. The company tested the process and logic of the sales through the app in practice. Their further step was to achieve the next quality level.

    The out-of-the-box solution lacked the flexibility to adapt to the business needs. Therefore, the company decided to create a new app from scratch. The focus lied on making the app user-friendly in catalog search and ordering. We brought in our product vision formed within the ten years of experience with the leading e-commerce products and our design expertise and succeeded in task solving. The resulting app is state-of-the-art and easy-to-use and caused a three-fold increase in sales through the channel.

    The Client’s team was well-prepared: they had a list of pain points and were ready to devote a lot of time to the project. Together we thought through the flow and considered all the use cases. This approach on the part of the client’s team helped to make the research phase more efficient and faster and create a successful e-commerce application.


    To implement user-friendly and easy order flow

    Together with the Client team, we conducted a CJM workshop and a series of in-depth interviews. This helped us to identify the basic needs of the customers, find out many possible problem situations and barriers. Working out each step in the customer journey in the application helped us build the perfect flow. 

    To increase conversion to sales in the app

    The ‘visit -> purchase’ conversion in the previous app was 5%. 2 weeks after the launch of the first version of the new application, the conversion has tripled. This was beyond the client’s expectations.

    To improve app ratings in stores

    The app’s store rating was low. Customers left feedback in the store only when some negative situation appeared, and they wanted to change it. The satisfied users did not rate the app. After all, to do this, you need to enter the store. At the same time, customers liked the new application, and the revenue from this sales channel grew. To remedy the situation, we have added native dialogues to the application: the client can evaluate the work in the app without visiting the store. It’s fast and convenient. With this tool, the app’s rating in the stores has grown to 4.8.

    How we did it

    We performed a research

    The project started with a CJM workshop. CJM (Customer Journey Map) is a tool that allows you to identify the needs of the customer, their thoughts, desires, and problems at every point of interaction with the product from awareness of the need to purchase, taking into account their goals, emotions, doubts, and fears. It helps to get a high-level look at the user journey, better understand it and therefore provides a good basis for further design. Read more about this service here. 

    The next step was a series of in-depth interviews with pet store customers, that revealed 2 main factors that attract customers to a particular store’s app:

    • familiar assortment;
    • convenient and fast ordering procedure.

    We paid attention not only to positive, but also to negative use cases, because of which users can refuse the services of the store.

    In the course of the study, we found out that the audience is not strongly attached to the brand of the chain itself, but has more connection with the brands of manufacturers. The concept of the application was based on this problem. This is how the idea of ​​an ecosystem for pet parents was born, with pet-friendly establishments, groomers, walking areas, and a pet profile. The e-commerce aspect has become not a goal in itself, but only a solid foundation for this.

    These results helped to define the significance criteria. Together with the Client team, we have compiled a backlog, prioritized and determined the roadmap for the future application —  what are the features to be included in the first release, and what can be left for later.

    Top priority options for the first release

    For the first release, we focused on two main stages: creating a convenient catalog with easy navigation and product selection and quick ordering options, where each step is clear and transparent for the customer. The key task is to assure maximum transparency in calculating delivery costs, applying discounts, accuracy and ease of ordering.

    To build a high-quality flow, we worked a lot with prototypes. The Client team, together with our analyst, went through each of them in detail, discussed what problems the customers already had or could eventually face. Such a thorough study allowed creating a flow, that is simple and clear at all stages. Therefore starting with the first release, the app received positive customer reviews.

    Functionality-based design

    Initially, the Client had their UI kit, corporate colors, and logo. The elements formed the basis of the app design. But even in design, the client kept to their main idea: functionality comes first. Therefore, the Client team, first of all, checked whether this or that design solution is understandable and convenient for users of all levels. For example, some buttons and text were made large so that people with poor eyesight would not have any problems.

    Ordering procedure

    In the new app we completely changed the flow of product selection – order. Since the online store has more than 10,000 products, correct ordering required a complex logic of working with large tables.

    The standard units engaged in the ordering procedure were extended with a storage and models. The data already selected by the customer are kept in the storage. Models made it possible to process the table information faster and more efficiently, as each of them is tied to a specific section of the table. Overall, it made the ordering procedure easier and faster for the customer.

    Now a customer of the shop can in a couple of taps form an order, repeat the previous one, layaway the goods and follow their arrival, add the goods to favorites.

    We implemented in the app several delivery options —  by courier, to a pick-up point or a chain store. To make it possible for the customer to estimate the cost of delivery by courier, we did a lot of work with the map: we divided it into polygons depending on the delivery price and marked them with different colors. The user needs to tap on the desired area of ​​the map to immediately check the terms.

    Filters for easy catalog use

    To make the navigation through the variety of products in the store quick and easy, we implemented filters in the product catalog. From the user’s point of view, this is just a single screen where any desired product is easy to find. But there are many points to be taken into account in the process of development:

    • The data format that can be entered by the user —  thus, the quantity field can be filled with the whole numbers only, while the weight of the feed package is not necessarily divisible by 2,2 pounds and non-integer values ​​are allowed there.
    • The eventual errors are to be provided for —  for example, when the minimum and maximum filter values ​​are equal to zero or each other.
    • The slider should move as the value is increased or decreased by the user.
    • The user can switch to a selection of products from different points —  from a regular catalog, a special offer, or a selection on the home page. If the user switches from the special offer, the products are instantly filtered by brand and discount. In case of switching from the regular catalog, all filters must be reset.

    Informative product card

    The client’s team wanted the information in the product card to be as detailed as possible. For this purpose the app needed to be integrated with loyalty programs, inventory control, and a product catalog. 

    Product listing was one of the most complicated features to be implemented. The product packages may be of different weights —  for example, 0.441 lb, 2.205 lb, 6.614 lb, 11.023 lb. Some of them may be sold at full price, and some — at a special price. These details must be reflected in the product card.

    In the Client’s app, the user can switch between packages of different weights within one card and see the special prices valid for them. Every tap is a separate request to the database, which pulls up the image and the price, and as a result, the product card changes. But for the user, the process is fast and seamless.

    Looking through the different packages the user can find the best price

    In the product card the user can leave a review for the product and add a photo. The products with 3 and more reviews are assigned an overall rating.

    Loyalty programme

    The loyalty program has become an important part of the application. Customers of the Client’s network actively use it, paying up to 90% of purchases with bonuses and receiving cashback.

    In terms of the client’s thorough approach to the program implementation we tried to take into account all possible use cases. For example, we added the possibility to present points to another user or merge 2 profiles —  the old and new one —  and see the complete order history. If the whole family uses a single card, all family members can link the card in the application, but only one can spend points.

    It took a lot of effort to synchronize the ‘doubled’ accounts. Since the user can register in the online store of the network both with the phone number and email, many users had two different accounts: the first was linked to the phone, the second — to email. The users had no opportunity to merge them on their own. Additionally, they were unable to link an existing card to both profiles or release a new one. To solve this problem, we implemented a sophisticated mechanism for merging accounts in the application.

    You can issue a virtual loyalty card or add an existing one in the app. We link the card to two parameters: phone number and email. Therefore, it can be restored using any of them. Previously, it was possible to retrieve a card only by its number, which was inconvenient for users.

    Animation for errors

    We added animation in the application. The animated pet images appear every time a customer enters an empty shopping cart or an error occurs (for example, no Internet connection).

    Tools to analyze users’ behaviour

    We integrated the app with some user analytics systems such as Google Analytics, App Metrica, and Firebase. 

    This helps the Client’s team analyze user actions: how many users are active in the application, how many new users joined, at what stages their way down the sales funnel is interrupted more often, etc. Thus, they can analyze any stage of interaction with the application —  from onboarding to the checkout moment.

    Analytics also helps to monitor anything untypical in the application and take action. For example, many users delete the application simultaneously, or users inflow from countries where the company is not present.

    Improved the app rating in stores

    As we launched the first version of the application, we were faced with frequent negative user reviews that are not directly related to the app functioning (for example, incorrect product price refers to the backend operation and does not depend on the application in any way). Nevertheless, such reviews affect the overall app rating in the stores. And the rating of the old app was low.

    To improve the situation, we added native dialogs to the application: we invite the user to rate the application after making or picking up the order. The user does not need to  go to the store to evaluate the application, it can be done with one tap during the ordering procedure. The tool helped us improve the rating of the app. Now it is 4.8, which is the top result for pet store applications.


    Within the very first 2 weeks since the new app was launched we received 800 orders and witnessed a 15% conversion. It’s a huge result in our industry. Surf has established a most convenient customer engagement process. All issues, questions, and suggestions are discussed immediately. The project team is personally involved in all flows examining each of them in detail.

    Head of E-commerce

    Contact us
    Let’s discuss your project together
    CEO photo white

    Vladi Makeew

    CEO of Surf
    Drop a file here or click to upload
      Hidden span