Design for the eCommerce giant

Advance Auto Parts is a fortune 500 American company with more than 74 thousand employees According to Wikipedia in the US and Canada. When they contacted us, their company’s website and design language was outdated compared to other more developed part of their business. Yet they maintained a high conversion rate. E-commerce for Advance Auto Parts is an important branch of the business. Their site reaches around 14 million views per month According to similarweb.com, Mar 2018 and brings in a bunch of sales. For that reason, leadership of AAP decided to refresh their e-commerce site and chose Ramotion to update the design and support front-end development. Our mission, together with AAP managers, was to update the design language without conversion loses. The second goal was to increase purchase conversion and ARPPU (Average Revenue per Paying Users).

Background

Our collaboration with AAP started from a mobile prototype. At the time, we didn’t know that it was just the tip of the iceberg of the full amount of tasks that the company had. Eventually, we got a call from AAP. They wanted to understand if we had more available resources, so when they got a positive answer, they provided more information about upcoming tasks. Soon after, our collaboration with the retailer giant was started.

The first major step was updating the user interface guidelines to have consistent elements, typefaces, and other web design details inherited from the previous design team. Development resources were waiting to begin as soon as the design was finished, so we had a tight timeframe. The amount of design tasks was huge! We had only 3 months to learn, update, and refine everything.

We needed to select designers with the necessary skills to meet the deadlines. For this kind of task it’s always important to understand the amount of work, complexity, and required skill level. We started with all specialists that we had available at that time, because we did not have enough time to form a special team, and we decided that we would make further decisions based on the results of the next two weeks. Thanks to this, we were able to start work quickly, and by the end of the second week, we had approved the final design team.

After two months, we accomplished 70% of the e-commerce tasks and AAP developers started working. We then decided to split our design team because we had other pending tasks for new branches of client’s digital strategy. The design team was split into one group supporting front-end developers and the other designing new AAP subsites. At the end of the third month, the design team had accomplished the main task and provided an updated style guide for the design of the main e-commerce site, including cross-platform support for mobile and tablets. The next stage of our work was designing the new subsites and supporting our developers who had started working on the main e-commerce site to help client’s in-house developers accomplish all the work on time.

Our development team started their work with a chat widget that could be integrated into any page of the AAP site and serve to contact technical support agents. This part required the adoption of complex and responsible architectural solutions. The chat needed to support a very large load of simultaneously active components and connections, so we had to optimize traffic overhead. We developed the back-end server which allowed us to minimize the timeframes for back-end testing and make sure that the service works under heavy traffic. As soon as our developers successfully accomplished this task, we had the opportunity to include more engineers into the project, so we could simultaneously proceed with the development for the help desk, rebates, and ideas sections, the feedback portal, and product search engine. We chose React JS together with Flow (which makes JS code statically typed).

This approach allowed us to exclude most errors at compile time, and as a result, speed up the debugging and development process. Besides creating the front-end code, our developers had another major task — the creation of a unified authentication. The challenge was that Advance Auto Parts as major enterprise used different services and contractors, so we had to confirm a lot of things and do a lot of integration tests with all services to ensure that the final result worked perfectly.

Your work was excellent. The end result of the design was within my expectations. At the beginning we had some hiccups in regards to direction and sense of who owns the decision making. After several discussions I feel that we picked up the pace and started producing.
Antonio Beretini, Director,
Digital Product Innovations & eCommerce

Process

The main project challenges were stringent deadlines and working with the legacy that we inherited from the previous design agency. Our design team had to get familiar with the structure of the design sources and the overall architecture of the website as well as understand why some of the design decisions were made. After that, the next step was to deconstruct the whole website and reassemble everything with the improved user experience, modern visual language, and refreshed workflow to make it look and feel in harmony with the company spirit.

The design team dealt with four components of eCommerce simultaneously (shop, rebates, chat, and help desk), while our developers were working on the front-end. This approach required immediate responses from our designers to update anything or provide the design for tests so we could proceed further. After a couple months of hard work, we closed most of the foreground tasks. Subsequently, the design team overtook the developers, which allowed them to proceed further in a more planned fashion.

We used Invision for design collaboration. Our team used it for prototyping, providing results, and getting feedback. It served as an agile board where all participants could see recently uploaded results, comment, and download all the necessary design assets for development. Tasks were organized into several sections (Next up, In work, For review etc.). This approach helped us to stay synchronized, track progress, and take action immediately. As soon as we accomplished the most important design tasks, we added Jira’s agile board into our process.
It was more familiar to developers so we were able to continue efficiently.

One of the key aspects of such quick turnaround was the ability of the AAP Managers to make most of the design and development decisions. At the same time, he was able to manage other tasks in the AAP departments that were involved in the process. This aspect gave us the ability to get quick feedback and make decisions efficiently.

Final

The project lasted about 11 months, within which we did a lot of work. After completing the tasks assigned to us, further work was continued by the client's in-house specialists whom they were able to hire. We believe that this is the right approach for any firm despite the fact that we always want to continue working on every project we have as long as it possible because the more you can learn the product, its customers, and people who run the business, the more you can soak up the spirit and bring more subtle results.

Watch next

Onboarding a la Carte