Centauro: mobile site case study

New Centauro’s PWA site brings a multichannel shopping experience to customers

Project: Centauro PWA site
Target user: young adults that practice any kind of physical activity
Role: UX/UI Designer 

Challenge

The sports and fitness gear market in Brazil grew 22% in 2016. Centauro, a long-standing leader in the segment with hundreds of stores, faces competition with big online business with aggressive sales strategy. In 2017, it approached Taqtile to understand its mobile site’s weaknesses and redesign it taking advantage of its multichannel brand strategy to increase online sales. We've decided to leverage the experience building a PWA site (Progressive Web App).

Together, we framed the goal:

How might we offer customers a multichannel shopping experience to leverage online sales on the mobile site?

Research 

The research goal was to discover the main pain points along the customer journey while shopping online for fitness clothes, shoes and others. We wanted to understand what customers behave when shopping on mobile and if they understand the advantages of a multichannel brand. 

Customers interviews and competitors usability test

We showed customers the former Centauro’s mobile site alongside their competitors. While they were browsing and completing tasks, they gave us good insights on how Centauro is perceived compared to competition and what their desires, feelings and worries are while buying sports gear online.

Stakeholders interviews

For understanding what feeling Centauro wanted the design to express, we've run a Look & Feel Test with stakeholders, showing them several benchmarks and inspirations. For each, they told us what they liked and disliked. After, we designed 3 different visual versions and got them voted by stakeholders. Then, we prototyped the winner and showed it to users.

Usability tests

We’ve showed customers the prototype with the key pages alongside the competitors’ mobile site. We gave them tasks to complete and got key insights that guided us throughout the project.

Key takeaways

  • Users felt that the site was cleaner and more straightforward than competition
  • Some Android users had difficulties with the bottom bar navigation, taking considerable time to find their way on the site
  • They praised the navigation by audience and by sports on the home page
  • Pickup options interested some segments of users and could be a key differentiator on shopping decision

Design & Development

Design System

Because we use a Design System, we optimized time by not designing every single page on Sketch. Instead, the developer and I worked close together in Sprints mapping the screens and components that needed to be designed.

Typography and colors were chosen based on their brandbook and then adapted to digital design, such as increased contrast for passing WCAG test.

Shipping options

The biggest challenge was to fit on the m-site all the shopping and pickup options that the desktop site featured. Because Centauro is also a marketplace, products from different sellers could have different shipping options.

Usability tests

After designing several versions for the checkout flow, we've decided with the team and stakeholders what would be the best version. So we went to a busy shopping mall to interview 5 users. They've provided us key insights to proceed with the final design.

Delivery 

Home Page

Divided by audience, the new home page now also features recomended products and users can also search for products related to the sport they practice.

Product Details Page

This is the most important page for the purchase decision, so we wanted to address most of the user needs discovered on the tests. 

Cart

The cart was redesigned following usability best practises listed on Baymard M-Commerce book, such as linking the product to their product detail page.

Single-Page Checkout

As the mobile site is also a marketplace, the checkout was the most challenging page, because of the several shopping options:

  • Now, the m-site give customers the choice to easily pick up their favorite products in Centauro’s stores, avoiding shipping costs.
  • For some products, the customer also can choose scheduled delivery.
  • For other products, the client can choose a faster shipping method for when they need the product right away, such as before a trip, although it has a cost increase.

Conclusion

Now, m-site's users have the same power to customize their shopping as the desktop users. After several rounds of usability tests, users found the interface cleaner and found the products they wanted faster than before.