How We Optimized the Sales Funnel for Our Ecommerce Client: Mobile App Redesign

Background

Our client is an online and offline electronics retail giant with over 250 brick-and-mortar stores across Ukraine. Within this project, we implemented two native apps, one for Android and one for iOS, to support customer engagement. The first public release was three years ago. The main goal of creating these mobile apps was to get ahead of competitors, enrich the customer experience, and become a leader in the online electronics retail market.

The idea behind the apps was to provide customers with a full-fledged tool that would facilitate each stage of their customer journey, from choosing a product to purchasing it and tracking delivery. This is why the mobile applications we created over three years ago were big and complex. We gradually added mobile-specific features to increase value for end users. Push notifications were a big success and showed the most conversions. You can learn more about our experience building the retail app here.

The idea behind the apps was to provide customers with a full-fledged tool that would facilitate each stage of their customer journey, from choosing a product to purchasing it and tracking delivery

Over the course of a few years, our client’s business changed and the company went through a major rebranding. Our client set new conversion goals for their mobile application. The conversion rates and sales through the mobile app were increasing, but our client felt the app had more potential. In addition, the visual design was falling behind current trends in UI and UX design. All this led to the decision to redesign both the Android and iOS applications.

Our goals

There were several goals we wanted to achieve by redesigning the application:

• Eliminate in-between steps of the app’s sales funnel
• Optimize the app according to business goals
• Catch up with current trends in UI and UX design to increase loyalty

To achieve these goals, we decided to fundamentally rethink the application’s design. This included:

• Changes in the business logic
• User experience optimization
• A new visual style according to current trends and our client’s rebranding
• Updates of old app components (libraries, frameworks, tools, etc.)
• Changes to the app’s architecture

To manage this large number of non-trivial tasks, Mobindustry’s business analyst planned the changes and created a detailed technical specification. Our client and a team of developers, delivery managers, and project managers actively participated as stakeholders.

We knew we would face some challenges while carrying out this massive task. Let’s talk about them.

Challenges

These are the challenges we encountered while preparing and working on the redesign.

1. Analyzing conversion factors

Our challenge was to analyze which elements in the app influenced conversions and what we could do to make them work better. We discovered that there were a few elements that could be improved:

• There were two call-to-action buttons for buying a product: “Add to cart” and “Buy now.” Users typically added items to the cart, though the “Buy now” option was more convenient and faster. So one of the call-to-action buttons didn’t work as well as expected.
• An outdated burger button menu listed all the app’s features. It took users longer to get to a certain feature, and as the app grew, the list of these features was becoming too large.
• On some screens (e.g. personal profile and product description pages), the top menu bar was invisible. The top bar was an important element of the app, as it was the main navigation tool. To access the menu, a user needed to perform additional actions, for example, go back.
• While the search was the most important entry point for conversions, we needed to rethink it as well. In our old design, it was hard to access search through the burger menu.

To access the menu, a user needed to perform additional actions, for example go back

2. Estimating all redesign activities

Estimating the redesign was a challenge itself because the redesign potentially impacted all app ecosystem components, and it was hard to predict what would require attention from developers.
The most challenging task was to estimate the changes to the user experience, as one change influenced all other elements connected to it.

Developers often require additional time to analyze the whole application and check whether it needs refactoring. As a redesign means making lots of fundamental changes, developers will inevitably find outdated pieces of code they’ll need to refactor and update. This makes it harder to estimate an exact number of hours needed to make a certain change.

3. Versatile market trends

When we decided to redesign the app, it wasn’t only the business that had changed. Global UI and UX design trends had also changed, and our client’s competitors had started to update their software accordingly. Our challenge was to find these trends, analyze them, and integrate them into our app.

4. Minimize the influence of personal preferences on the new design

To make our redesign appealing to customers, we needed to minimize the influence of subjective opinions on the decision process. Our client’s marketing director was the main stakeholder for the new design, so it was likely that their personal perception would influence the final decision.

5. Technical implementation

It isn’t hard to make a visual redesign, but changing the UX is a challenge. When the redesign is big, developers inevitably need to change everything, from separate features to the app’s architecture. Though the app offered the same set of features, the changes in its UX required significant modification of the internal logic, including the way the app interacts with both its own components and third-party services.

Solutions

We faced many challenges while preparing and executing the redesign, and here we’ll talk about our solutions.

1. To research conversion rates at all stages of the customer journey with the old app design, we dived into analytics. We discovered that only five screens brought most of the conversions. To make these screens more visible and thus increase the conversion rate, we created a tab menu for them. Here are the screens:

• Search
• Personal profile
• Favorites
• Shopping cart
• Main page

We reorganized the rest of the features to make the remaining side menu more compact: for example, we placed settings into the personal profile.

2. Our business analyst created a detailed specification for all UX changes in the application and provided wireframes that reflected the new business logic. Then our project managers and developers estimated all these changes. To make the estimate more precise, our business analyst communicated with both the client and our developers. This helped us to create a project plan with realistic deadlines.

3. We performed rebranding according to our client’s brandbook so the app would match the updated website and physical stores. In addition, our business analyst performed a complex in-depth analysis of the market and current trends. We also looked at competitors. This allowed us to update the overall app design, as the brandbook wasn’t a complete guide for all the changes we planned.

We took small design details into account as well. For example, to increase loyalty and give some personality to the application, we designed animated loaders.

4. To minimize the impact of personal preferences on the final design decision, we involved a product owner, the marketing director from the client’s side, our designer, and a business analyst. These were key people who influenced the final decision.

In addition, we gathered a focus group that evaluated several versions of the design. They provided feedback, and this helped us to choose the best option.

Apart from that, our business analysis and marketing team used some hard data to review sales funnels and analyze competitors. All this allowed us to choose the best UI and UX design.

5. Our development team thoroughly analyzed the current application and provided an approximate estimate in hours. This estimate was based on a detailed analysis of the current app, a technical specification for all changes, and an impact analysis. Our senior software architect adjusted the app’s architecture according to the redesign plans in the technical documentation. In addition, the estimate included refactoring and library updates.

we gathered a focus group that evaluated several versions of the design. They provided feedback, and this helped us to choose the best option for UI and UX design

To make sure the new design worked properly, developers conducted code review before submitting all code. When everything was ready, our QA team performed full regression testing. Because the task was so complex and impactful, regression testing and code testing were especially important.

Results

Thanks to our business analysis and project management departments, we managed to thoroughly plan all redesign activities with our client’s business needs in mind. We involved our developers, quality assurance specialists, delivery managers, and designers in the process.

The active participation of our client made it a lot easier to approach this massive task. Our business analyst was able to approve technical requirements and wireframes with the client so we could begin development, refactoring, and testing.

This is a complete list of the team members who took part in the redesign activities, along with how many work hours it took them to create a brand-new look and feel for both apps:

We continue to develop the application, add new features, and analyze user behavior in the recently redesigned version.