The New Starbucks.com.cn: Bold, mobile-first and hyper-personalized

Following our success with mobile apps and digital payment, we worked with Starbucks to create a boldly redesigned, mobile-first and hyper-personalized Web experience to support their omni-channel play.

Starbucks is one of the few massively successful foreign brands in China, with nearly 3000 stores and counting. Since 2016, we’ve been executing on their digital strategy in China.

Having successfully launched completely redesigned mobile apps with Alipay and WeChat payment methods, creating a mobile-first Web experience was the obvious next step on our omni-channel roadmap.

Mobile-First Starbucks Website

A bold design and data-informed user experience

Working closely with Starbucks’ digital team, we moved in fast-paced product design sprints, creating quick functional prototypes and gradually building a UI Kit that defined a design language that would seamlessly integrate with the redesigned mobile apps.

  • Starbucks Website Screenshot
  • Starbucks Website Screenshot


Our extensive analytics tracking across all of Starbucks’ platforms combined with user interviews allowed us to define new priorities. The focus now lies on loyalty, the store locator, hyper-personalization and educational content, with the parallel launch of the Coffee Blog and Design Studio.

Coffee Blog and Design Studio

We’re continuously running A/B testing to help us refine our design choices.

A game of speed, scale and data

For hyper-personalization and omni-channel to work, the website needed to be a true extension of the rest of the digital ecosystem. Our solution taps in the same data backend that ties everything together: mobile apps, WeChat, CRM, Point of Sales…

Digital Ecosystem

Under the hood, we power the site with Jekyll and React, along with a few Node.js micro-services. This helps us deliver a blazing fast experience that scales to millions of users, with a virtually bulletproof security.

Jekyll and React with Wiredcraft

This approach pushed us to create new tech, including a professional CMS solution for Jekyll, Jekyll+, and Chinese support for our high speed full text search engine.

Analytics and SEO that mean business

We needed to establish Starbucks as the main authority for coffee in China. We created a custom tailored information architecture and SEO implementation, and created a brand new coffee centric blog, 1912 Pike, to support that goal.

As usual we wanted to validate all of our assumptions with analytics. With more than 6 times the number of tracked events, we now have a much more comprehensive picture of users’ behaviors all tied up to conversions, from app download and account creation to outbound e-commerce transactions on Tmall.

Analytics and SEO at Wiredcraft

With Google Tag Manager, Baidu Tuiguang and Mare, we get the quantitative and qualitative facets of our audience. We are now able to run our analytics in a truly agile way, running multiple A/B tests and campaign experiments in parallel.

The results? Drastically lower bounce rates and an order of magnitude greater engagement with significantly improved conversion rates across the board.

A stepping stone to bringing omni-channel

With this new platform, we’re closing the gap in Starbucks omni-channel’s strategy and laying out a solid foundation for us to rapidly push new features across all online properties.

Starbucks' mobile-first website

We’re already looking towards the next steps to blurring the lines further between apps, Web, WeChat and offline interactions. Stay tuned.

“Wiredcraft is different and knows how to get things done. Their strong technical chops, rigorous processes and no-nonsense mindset makes them one of the best teams you can work with to ship any kind of digital product.”
Philip Man, Product Manager, Digital Ventures, Starbucks
Ronan Berder
Founder
Posted on March 12, 2018 in Design, Technology, Case studies

Share this post

Scan to open in WeChat

Stay tuned

Follow our newsletter or our WeChat account; every other week you'll receive news about what we're up to, our events and our insights on digital products, omnichannel, cross-border ecommerce or whatever the team fancies.

  • Add us on WeChat

  • Subscribe to our newsletter