Project years: 2022. We continue to develop the project in 2024.
Technology used: Flutter cross-platform framework.
What we did: business analytics, testing, cross-platform development.
Client
The client is a large fashion group that manufactures and sells clothes. The group includes numerous brands, each managed separately to tailor its concept and brand positioning to its target audience.
The company runs retail stores itself and sells franchises. It helps entrepreneurs open stores, maintain brand standards, create a business plan for store development, select store locations, organize deliveries, and hire staff. The company also invests in digital sales channels that allow customers to order clothes through the website or an app.
Early on, the company recognized the growing customer demand for the store ambiance and decided to revamp the stores. The company redesigned the brand and the stores, focusing on making the stores more spacious and digitized to make the shopping experience more like a pleasant journey.
For example, the company implemented a new lighting concept in the fitting rooms. Each cubicle has carefully designed lighting to create a comfortable and relaxed atmosphere for customers during fitting. Additionally, the company installed three-way mirrors to provide a full view of the garment.
In 2022, the company decided to bring the concept of lightness and space to its mobile app. It wanted the app to reflect the fashion trends of the moment, essentially becoming a store on the customer’s phone.
How things were before the project
The client’s app did not fit with the company’s new brand concept: it was outdated and slow. The majority of users were unhappy with their experience and asked for improvements to make ordering clothes easier. Before the update, users struggled to find the right item or complete their purchase for many reasons:
- The app would crash.
- The average screen loading time was 2 minutes.
- Previously selected items wouldn’t appear in the Wish List section.
- Error notifications popped up when users searched for an item’s size or color.
The company’s e-commerce department was responsible for developing the mobile app and website, as well as for improving the user experience. The team constantly monitored the audience’s sentiment to form a promotion and improvement strategy for the company’s digital products.
The company also developed a concept for the new app. It required redesigning the app screens and introducing new mechanics. The company aimed to:
- Create an app based on modern technology that is easy to maintain and doesn’t freeze or crash.
- Attract more users to the mobile app and increase their loyalty.
- Develop the new app in 5 months — in time for Black Friday — and double the conversion rate by the end of the year.
The e-commerce department was looking for a team of developers, testers, and analysts to fight these challenges.
Challenges
The company learned about us from our former clients from the same holding company. The company’s in-house team had developed the backend and design of the mobile app, and we had to:
- Develop the app’s frontend using modern technologies and improve the UX/UI based on the company’s design concept.
- Analyze customer feedback and develop intuitive in-app mechanics for selecting clothes and placing orders.
- Simplify and reduce the number of steps in the user journey to purchase.
- Meet tight deadlines — we had 5 months before Black Friday to develop and launch the app.
The client came to us with detailed tasks because they didn’t want to repeat the bad practices from the previous app. So, we brought together a team of experts who could complete the tasks and share their expertise on how to make the app better. For example, we recommended the client a way to reduce app maintenance costs while increasing revenue: more on that further in this case study.
How we worked on the project
Analyzed the market to find ways to attract more customers
The company was striving for simplicity and minimalism in its branding. More muted, natural tones began appearing in its collections and offline stores, and the new app needed to reflect this aesthetic shift.
We analyzed the app performance with the new design in mind, researched customer feedback and ordering issues, and reworked the app logic.
During our research, we discovered that one of the key trends in the fashion environment in 2022 was a focus on content and visuals in mobile apps. Photographers and stylists specifically set up the shot to look aesthetically pleasing in the mobile app so that customers could check how the garments would fit.
Based on the results of our research, we developed recommendations for the app interface, suggesting how to place elements and how to implement features to achieve simplicity, minimalism, and efficiency. In the new version:
- Elements on the home screen did not clutter and loaded fast.
- Product cards ensured that users could see all the specifics of an item, select color and size, and add it to the cart from a single screen.
- The checkout screen showed the availability of products in different stores.
- Users could view their loyalty card, add gift certificates, or purchase them in the app.
Redesigned the app to strengthen brand positioning and increase sales
The client came to us with a complete UI kit for redesign. It had been 3 years since the release of the first app. Their customers didn’t like reloading the app all the time or tediously searching for an item: they wanted to make quick purchases conveniently. In addition to the redesign, we needed to implement new features that would increase mobile app sales.
We brought together a team of developers and testers to create the design and the app itself on iOS and Android. We had to complete the project in 5 months, as the company wanted to release the app in time for Black Friday, an important date for the e-commerce industry.
We designed the app screen prototypes, presented several versions of the user journey, and suggested improvements that would make the app stand out, such as videos in the product cards or catalog.
In 5 months, we developed an MVP of the app with core features. The client’s team approved and validated the MVP.
Turned the app’s home screen into a fashion magazine cover to attract target audience
The app’s home screen is the face of a fashion brand. Even the smallest details matter: the draping and colors of the clothes, the shot framing, and the fonts. We were working with the client’s UI kit: our goal was to convey the brand’s positioning on the app’s home page.
The client’s team wanted to make it easy for content managers and marketers to quickly edit app blocks so that it meets current business goals. We’ve made it possible to edit and rearrange photos, videos, and other visual components in the backend. This means the client can update the look and feel of the home page without having to re-upload the app to the stores.
We’ve also added video elements to meet the current trends. Video content is an important trend in retail — it helps increase the conversion to purchase through the product card. The client can now place clickable video banners leading to selected collections.
Built the user journey that covers all scenarios for increased conversion
Some find it easier to start shopping in the catalog without authorization, while others prefer to sign up first. We considered all possible user behavior scenarios to provide the best possible shopping experience for everyone. As a result, we’ve created a simple flow that doesn’t distract users from what’s important and helps them get to the checkout.
- The user selects an item from the catalog and adds it to the shopping cart. They can also add it to their Wish List or Buy Later list. The app displays whether the item is in stock (online or store-only), as well as the availability of a preferred size in a specific city.
- The Place Order button leads different users one of the two ways: an unauthorized user will be prompted to log in with their credentials, and a new user will be prompted to sign up using their phone number.
- If the user links a loyalty card to the number provided during authorization, the app automatically displays the loyalty card balance.
- Since the brand has a large chain of offline stores, users can choose to pick up the goods from stores where they are available, as well as add multiple delivery addresses in multiple cities.
- During payment, users can choose whether to spend or keep their loyalty points. They can also use a promo code. After applying it, the app recalculates the total amount and takes the user to the order confirmation screen.
Improved catalog display to help users avoid confusion and make purchases faster
Users can customize their catalog view to suit their preferences. For example, some people prefer a tiled view of the catalog items, while others like to see each image in detail. To change the preview, a user simply moves the slider and selects the view they prefer.
A catalog is an important part of any modern e-commerce application. Since the client’s brand sells numerous items, we worked to make catalog navigation as easy as possible for users.
- Smart Search helps find products even before they finish typing. For example, when the user starts typing “skirt”, the app helps specify the query by suggesting “midi skirt” and “leather skirt.”
- The catalog filter does not take up much screen space but includes all the necessary parameters: color, size, store selection, and sorting types. Users can also sort items according to personal recommendation based on data from the Mindbox platform.
Enhanced item cards to decrease returns
To make the item cards as informative as possible, we used a custom double slider. The card shows if an item is available in multiple colors, and it only takes a single touch to change it to another color.
Below you can see the items that match the selected item as closely as possible: they can be used to complete the look.
The more the user knows about the item, the less the store has to deal with returns due to poor fit or wrong size. We ensured that the product cards contain detailed information about the items. We placed all the necessary information below the items using popup elements: size table, description, store availability, delivery, and return policy.
Added a Wish List to keep customers coming back
The old version of the app didn’t let users add items to the wish list, so users had to keep searching for their favorites over and over again. We added a Wish List section where users can add items they like and see their current prices. The app loads all item details from the backend. The section makes users’ favorite items available for purchase at any time.
Implemented a loyalty program to increase customers’ trust and the number of orders
The company has had a loyalty program almost since it opened its first offline stores. A customer receives a loyalty card after their first purchase. With the launch of the app, it was necessary to bring the loyalty program to this digital channel in order not to lose any customers. We enabled users of the app to issue a virtual loyalty card. This helped the brand retain existing customers and attract new ones.
To apply for the loyalty card, the user fills out a simple online questionnaire. All data is stored in the user’s profile. To use the bonus points in an offline store, the user must show the code generated in the app to a store assistant.
Reduced time to market and development costs with Flutter
It was important for the client to meet tight deadlines without compromising the performance and functionality of the app. We suggested developing the app using Flutter, a cross-platform framework created by Google. The technology allows to:
- Reduce the development costs by up to 40%. This is possible thanks to the use of a single code base for both iOS and Android apps.
- Decrease time to market. Cross-platform development allows a company to get its apps into digital stores twice as fast as native. Customers can start using the product, and the company can start generating revenue from this channel sooner.
In addition to the e-commerce software solution development, we needed to set up deep linking: a user sees an ad, follows the link, and immediately opens the card of that specific product in the app. This simplifies app navigation and increases conversion to purchase. We ensured the security of these links to connect the app to the brand’s official website.
We used AutoRoute, a Flutter navigation package that makes it easy to create deep links and uses code generation to simplify route customization. This allowed us to develop the app’s navigation faster.
Initially, the client planned to create the MVP of the app and then start the development of a fully functional product. Thanks to modern technology solutions and our understanding of the client’s business needs, we were able to use Flutter to create a fully functional product and launch it in the stores.
Results
This was one of the most exciting experiences we’ve had developing B2C and B2B e-commerce software solutions. In 5 months, we’ve created a new shopping app for a major fashion retailer and released it in time for Black Friday. As a result, we saw an immediate increase in online orders, receiving approximately 300 orders in the first 3 hours of the sale.
- The client received an updated app with no critical bugs from the previous version.
- We’ve met the company’s business goals, doubling the conversion to purchase and bringing the share of in-app purchases in total purchases up to 30%.
- We timed the release for Black Friday and received 300 orders by 10 a.m. on the first day of sales.
- Thanks to Flutter’s cross-platform technology, we reduced the development costs by 40%.
The company was pleased with the results, and we offered to continue working on the app’s future updates. Currently, we are monitoring the analytics of the app’s usage and users’ wishes, which we get from feedback forms and the brand’s social media. We aim to incorporate all constructive suggestions into the project development backlog and anticipate having a long-term and fruitful relationship with the client in the future.
