Client
The store is a large retailer of pet supplies.
Project idea: Create a user-friendly app and increase conversion
The store used to have an out-of-the-box solution meant to prove that this sales channel would be popular with the customers. The company tested the sales process and logic through the app: the next step was to achieve the next quality level.
The out-of-the-box ecommerce software solution lacked the flexibility to adapt to business needs. Therefore, the company decided to create a new app from scratch. The key idea was to make the catalog search and ordering process user-friendly. Together, we reimagined the flow and considered all the use cases. The client’s proactive approach made research faster and more efficient, which helped us create a successful e-commerce app.
The improvements caused in-app sales to triple.
Challenges
The client’s team had a list of pain points and was ready to devote a lot of time to the project. The key challenges lay in user flow and user satisfaction with in-app experience. This posed three goals for us.
1. Make order flow easy and user-friendly
We interviewed the client and conducted a CJM workshop. This helped us identify customers’ basic needs and detect potential problems and barriers. We worked out each step of the customer journey and built a perfect user flow in the app.
2. Increase conversion to sales in the app
The previous app had a 5% visit-to-purchase conversion. Two weeks after the first release the conversion has tripled. This exceeded the client’s expectations.
3. Improve app rating in stores
The app’s store rating was low. Customers left feedback in stores only when they experienced a disappointing situation. The satisfied users would not rate the app — they had to find the app in a store themselves to do it. At the same time, customers liked the new app, and the revenue from this sales channel grew.
To remedy the feedback situation, we’ve added native dialogs to the app: the client can evaluate the app without visiting the store. It’s fast and convenient. With this new feature, the app’s rating in the stores has grown to 4.8.
How we did it
To make the app fit the goals, we started with analyzing the target audience.
Conducted research
The project started with a CJM workshop. CJM (Customer Journey Map) is a tool that allows you to identify customer needs, goals, emotions, and problems at every point of interaction with the product, from awareness to purchase. CJM helps get a helicopter view of the user journey and understand it better — this provides a good basis for further design.
Next, we conducted several in-depth interviews with pet store customers. They revealed two main factors that attract customers to a particular store’s app:
- Products are familiar.
- Order flow is quick and convenient.
We paid attention to negative use cases that caused users to quit the store.
Our study found that the chain brand didn’t matter to the audience much, but people did have more connection with the manufacturers’ brands. This idea formed the fundamental app concept: an ecosystem with ecommerce as a base. The ecosystem app helps pet parents find pet-friendly establishments, groomers, and walking areas. Users can also set a pet profile in it.
These results helped our teams compile a backlog and prioritize the roadmap for the future ecommerce software solution — what features should appear in the first release, and what can wait.
Selected top-priority options for the first release
For the first release, we focused on two key points:
- Creating a handy catalog where users can find goods easily.
- Making order options neat and quick, with each step clear to the customer.
At the same time, we needed to ensure transparency in delivery cost and discount calculation.
To build a high-quality flow, we worked on prototypes a lot. The client team and our analyst went through each of them in detail and discussed the problems the customers already had or could eventually face. Such a thorough study allowed us to create a simple flow that’s clear at all stages. Due to that, the first app release received positive customer reviews.
Ensured functionality-based design
Before we started with the app, the client had a UI kit with corporate colors and a logo for their app. These elements formed the basis of the app design, but we still kept to the main idea: functionality comes first. Therefore, the client’s team checked if each design solution is understandable and accessible to users of all levels. For example, we made some buttons and text larger so that people with poor eyesight would see it well.
Made ordering faster and more convenient
In the new B2B ecommerce software solution, we completely changed the product-to-order flow. The online store had more than 10,000 products: that meant that the order process required a complex logic of working with large tables.
To handle data during ordering more efficiently, we’ve developed storage and models. The storage stores information about the goods the customer has picked. Each model is tied to a specific section of the table, which helps the app process the table information faster and more efficiently. Overall, these improvements made ordering easier and faster for the customer.
Now it only takes a couple of taps to form an order, repeat the previous one, layaway the goods and track their arrival, and add goods to favorites.
We’ve implemented several delivery options: by courier, to a pickup point, or to a chain store. Customers can estimate the courier delivery costs in the app: we’ve added the map and divided it into polygons colored depending on the delivery price. The user needs to tap on an area to check the terms and pricing.
Added search filters for easy catalog use
To make navigation through lots of products in the store quick and easy, we’ve supplemented the product catalog with filters. From the user’s point of view, this is just a single screen where any desired product is easy to find. But we needed to take many points into account during development:
- The data format that users can enter. The quantity field can take the whole numbers only, while the weight field allows for non-integer values. Thus, we accounted for the kilo-pound conversion and avoided errors with weight fractions.
- Potential data conflicts and errors. For example, when the minimum and maximum filter values are equal to zero or to each other.
- Slider position reflecting the values users set. We’ve designed how the slider should move as a user raises or lowers the value.
- Users can switch to product selection from different points. From a regular catalog, a special offer, or a selection on the home page. If a user switches from the special offer, the app instantly filters products by brand and discount. Switching from the regular catalog resets all filters.
Made product cards informative
The client’s team wanted the information on the product card to be as detailed as possible. This required integrations with loyalty programs, inventory control, and the product catalog.
Product listing was one of the most complicated features. The product packages come in different sizes — 8 oz, 1 lb, or even 6.614 lb. Some of them may go for full price, and some may be on a special offer. In B2B ecommerce software solutions, product cards must reflect these details.
In the client’s app, users can switch between different-size packages within one card and see the special prices for each weight option. Every tap is a separate request to the database — it pulls up the image and the price, thus changing the product card. For the user, this process is fast and seamless. Users can find the best price looking through the different packages this way.
In the product card, users can leave a product review and add a picture. When a product gets three or more reviews, it gets an average score.
Implemented loyalty program
Our client was especially meticulous with the loyalty program: we tried to take all possible use cases into account. For example, now users can send points to another user or merge their old profile with the new one to see the complete order history. If the whole family uses a single card, all family members can link the card to their app, but only one can spend points.
Since the user can register both with the phone number and email, many users had two different accounts: one linked to the phone and another to email. It took a lot of effort to synchronize such accounts.
- Users couldn’t merge the accounts themselves. To solve this problem, we’ve implemented complex merging mechanics in the app.
- Users couldn’t link an existing card to both profiles or issue a new one. Previously, if users wanted to link a card to the app, they needed the card number, which was inconvenient. Now, the app links cards to two parameters: phone number and email. Therefore, users can restore and link it with any of the two.
Now, the client’s customers get cashback for their purchases and can pay for up to 90% of their order with bonus points in the app.
Animated error screens
If an error appears, users should understand what’s going on and feel less negative about it. That’s why we’ve animated error messages. An animated pet image appears every time a connection gets lost or any other error occurs. Users also see a cute pet when they enter an empty shopping cart.
Integrated user behavior analytics tools
We’ve integrated the app with user analytics systems: Google Analytics, App Metrica, and Firebase. This helps the client’s team analyze user actions: how many users are active, how many new users joined, at what sales funnel stage they dropped the app, etc. Thus, they can analyze any stage of the user–app interaction, from onboarding to checkout.
Analytics also helps monitor untypical activity and respond to it. For example, when many users delete the app at the same time, or there’s an inflow from countries where the company doesn’t operate.
Improved the app rating in stores
As we launched the first app version, we faced dozens of negative user reviews not directly related to the app functioning: for example, incorrect product price is a backend operation problem that has nothing to do with the app. Nevertheless, such reviews lowered the app rating in the stores.
To improve the rating, we’ve added native dialogs: the app invites users to rate the app after placing or picking up the order. The user doesn’t need to go to the store to rate the app — they can do it in one tap as they make an order. This helped us bring the app rating up to 4.8, which is the top result for pet store apps.
Results
Head of E-commerce
