Client
We were contacted by a large retail business that manufactures women’s apparel. The corporate group made a decision to update the app for one of their top-of-the-line brands. Founded in 2009, the brand is now available in 156 dedicated stores across 4 countries.
Project idea
Redesign the app and boost brand loyalty on tight schedule
The brand already had its own app, designed and developed by its prior partners. The decision to redesign had two main reasons behind it:
- the brand needed to piece together the revamped concept and color scheme;
- users kept asking for updates and fixes in the existing app.
Challenges
Develop an app capable of strengthening the the brand’s hand and boosting their sales
The client already had the final UI kit for the redesign. It’s been quite a while since the app’s first release; the e-commerce market pulled well ahead, and users were expecting the app to offer the features they had already found handy. Therefore, to help boost sales through this channel, the brand intended to not only redesign the app but also add new features.
Meet tight deadlines and make it in time for the “Black Friday”
It was crucial for the team to launch the new version quickly. We got down to development in the summer, showcased the first version of the app in as little as 3.5 months, made a couple of adjustments, and released the app right before November 11—”Black Friday,” a date extremely important for e-commerce.
Our choice fell on Flutter, a cross-platform framework by Google that can save up to 40% of your time and budget on application development.
Avoid critical errors of the old app
In the past, the app would often freeze and have backend and frontend issues. There were times when, once the app was updated, users got de-authorized altogether and their “Favorites” section no longer had the items they had previously added. We thoroughly inspected the reviews in stores and did our best to elaborate on each scenario so that nothing distracts customers from shopping in the new app.
Outcome
In six months, the Surf team developed an updated app for a fashion brand. The project made it in time for “Black Friday,” one of the biggest sales days of the year. Thanks to that, the brand saw a boost in online orders—by 10 a.m., there were already about 300 orders.
Solutions
Market analysis and priorities
Back when the brand emerged on the market in the mid-2000s, it opted for a redefined concept of glamor and vibrant femininity as its aesthetic. But as it kept evolving, the brand positioning was gradually changing. And these changes required a wide-scale redesign.
The business set a course for conciseness: softer natural hues in clothing and minimalistic Scandinavian interior design in its offline stores.
The app needed to be reconsidered as well, since it’s an important part of brand representation on mobile. In fact, it’s a store in a client’s pocket.
We had analyzed the market and pointed out that market leaders pay a great deal of attention to their content. Photographers and stylists frame their photos and position the model in a way that helps an item look natural on mobile, whether in apps or social media. Knowing that played right into our hands as we were developing the app: we already had an idea of how to arrange the home screen and the detail page.
Home screen turned into a cover of a fashion magazine
The home screen is the face of a fashion app. Even the smallest details matter: the shape of items, their color, the way a model fits the frame, the fonts you use. We followed the UI kit provided by the client and made an extra effort to reflect brand positioning on the app’s home screen.
One of the requirements our client had was to make it easy for content managers and marketing managers to arrange and switch blocks by themselves according to current business goals.
Video elements are a crucial, long-term trend in retail. It increases sales via the details page and boosts CTR. By adding clickable video banners to the home screen, you can direct users to specific collections.
All visual components (photos and videos) can be swapped and rearranged on the backend. In other words, if needed, the client can change the way their home screen looks every day without uploading the new version of their app to stores to do so.
Elaborate checkout flow
Every user interacts with an app in their own way. Some find it easier to shop if they go straight to the catalog, while others prefer to get authorized first. In order to give everyone the most comfortable shopping experience possible, every user scenario has to be taken into account. We’ve crafted a simple and friendly flow—the kind that won’t distract users from their main intention and helps them at every step of the way to their purchase.
- By choosing the item they like in the catalog, users proceed to the shopping cart. Items in the list can be easily rearranged with such categories as “Favorites” or “Buy later”. The app will let you know if the item is in stock, available online or for pickup only. You can also see if the item is available in your size in a specific city.
- Having pressed “Proceed to checkout”, users have two scenarios ahead of them: an unauthorized user will be suggested to log in, while a new one will be offered to get registered in a few easy steps using their phone number.
- Whenever a user is getting authorized and puts down a phone number attached to a loyalty card, the app automatically shows the bonus points available.
- Since the business owns a large network of offline stores, customers can pick up their orders in the store where the items are available. Adding several home addresses is also an option, since users may want to place orders in another city.
- Having reached checkout, users can decide what to do with their bonus points: write some off to make a discount or keep saving. Promo codes are also applicable—the total amount pending payment will then be adjusted. After that, users proceed to payment confirmation and the transaction itself.
Improved catalog
The catalog has a number of layouts to choose from. Some like scrolling through a grid of tiles, while others prefer having a closer look at each outfit. To switch to the catalog view of your choice, all you have to do is slide the control thumb across the bar at the top.
The content of a catalog is no less important in a modern e-commerce app. Our client is a large brand with a wide range of goods, so we helped the customers find their way around the items in stock.
- “Smart search” helps choose the items matching a query even before the user gets to the end of the word. For example, a user is starting to type in “skirt”, and the app is already offering ways to narrow down the search: “midi skirt” or “leather skirt”.
- Compact filters don’t take up a lot of space on the screen, but offer all the parameters needed: color, size, specific store and sorting type. The latter includes sorting items according to personal suggestions—that is based on the data collected by the marketing automation service.
Improved product details page
To help users get the most out of a details page, we added a custom double slider. Whenever an item is available in several colors, it is shown on the page. The color is given at the bottom and switches to another available option when tapped on.
Below, you can see the items that make the best match with the product selected; these can be used to create a balanced look.
The more customers learn about a product, the fewer returns the business will face due to the wrong model or size purchased. Therefore, elaborating on the items on the details page is crucial. We have found room for all the essential details: a size guide, a description, availability in stores, and delivery and return policies. Now, it can all be found below the item, displayed as pop-up blocks.
“Favorites”
Any product you like can be added to “Favorites”; in this section, all items are shown along with their current prices. The app receives all product data from the backend.
Digitized loyalty program
The brand loyalty program had been around for a while, almost since the offline stores were first opened. With an app launched, that had to be transferred into the mobile version while retaining all the customers. Today, users are able to create the digital card on their own without the help of a shop assistant; this way, the brand kept their regular customers and attracted new ones.
To create a card, all you have to do is fill out a simple form. All data will be stored in the user profile. To make use of the bonus points in an offline store, customers simply open the app and show the digital bar code at the checkout.
Shorter time to market with Flutter
Since it was essential for the client to meet tight deadlines without affecting quality, our choice fell on Flutter, a cross-platform framework by Google, and here’s why:
- Saving up to 40% of the budget. That’s possible thanks to the single code base, which is then deployed on two platforms, iOS and Android, simultaneously.
- Reduced time to market. Cross-platform frameworks allow launching apps on the market twice as fast as the native one. What it means is users take less time to start interacting with the product and the business to gain profits.
We had to integrate deep linking and establish secure paths to connect the app to the official brand website. Deep linking is a feature standard for e-commerce apps. It helps secure quick access to the internal components of an app.
The navigation in the app is identical to that on specific screens of the website. Thanks to that approach, it’s easier to follow links on a device. If you have the app installed and tap on the website link to a specific item, you will be redirected to the same item page but in the app.
We also made use of AutoRoute, a Flutter navigation package that makes it easier to configure paths via code generation and create deep links. That said, it takes a minimum of code to establish navigation within an app.
Result
- The brand now has a revamped app with no critical errors it used to have in the previous version.
- We successfully responded to the business goals and released the app in time for “Black Friday”, saving around 40% of the budget with Flutter while we were at it.
