Alizila for Alibaba
Alibaba's press site, Alizila, covers a variety of stories related to China and e-commerce and represents Alibaba's outreach to foreign media and investors. As lead UX designer at Group SJR, I spearheaded a redesign of the Alizila user experience in 2015.
Creative Director: Rachel Moog-Lagé
UX: Jennifer Hou
Visual Design: Joseph Li
Alibaba, the Chinese e-commerce giant, needed a way to engage foreign journalists and press in the weeks leading up to and during their 11/11 Singles Day sale, the biggest shopping event of the year in China. Alibaba’s official press site, Alizila, was misaligned with the larger Alibaba brand and had suffered from lack of quality in design and editorial, resulting in low awareness, doubts about content origin and accuracy, and lack of reader engagement.
As the UX lead on this project, I designed a modern press site that aligned closely with Alibaba’s brand voice, helped users find and share relevant content, and had the editorial flexibility to adapt to changes in the retail season.
At the time, Alizila was intended to be a destination for all Alibaba and Chinese e-commerce related news. Among tech journalists, our strategy team found that the broad focus of the site detracted from its core identity as Alibaba’s official mouthpiece in the foreign market, its key differentiator from scores of other sites writing about e-commerce and China, many of which published better quality content or had more journalistic credibility.
The existing Alizila site was not responsive and provided a poor experience for readers on mobile. The size of the header distracted readers from the content below and was inconsistent with the visual style and behavior of Alibaba’s corporate site, shown below.
The navigation was confusing as several content categories overlapped, and the category titles were too broad to understand what type of content they contained. Without using search, visitors had a hard time locating articles on specific topics they were interested in.
Despite the variety of content on the page, the existing layout limited editors’ ability to amplify content because it only had one promoted slideshow module, while the rest of the content had to be presented in reverse chronological order. Due to this limitation, editors began to add content they wished to promote to the sidebar, resulting in a disorganized and unpleasant browsing experience.
Content that was not appropriate for the sidebar was added there anyway due to restrictions on the main content area. For example, an inline featured video was included in the sidebar despite the fact that it was too small to view within that space. Because a lot of information was shown with an equal degree of emphasis, it became more difficult to notice what was important.
I worked with the content strategy team at Group SJR to form UX strategy around several years’ worth of existing content we needed to migrate into the new site, as well as the planned editorial calendar our team had proposed. We performed a content audit to understand the different content types published on the site, which included written articles, image, videos, slideshows, and press releases. I also performed a heuristic analysis of the existing site to identify current problems.
In order to launch a new design by 11/11 before all of the older content had been fully migrated, we decided to roll out the site redesign in two phases. The first phase would introduce an improved homepage and article pages for new content, while preserving the existing structure of the site and links to older content. In Phase II, we would improve the information architecture and redesign every page of the site.
Phase I Wireframes
I wireframed many different configurations of the content modules on the homepage and category pages in order to show how they could be adapted to different phases of the editorial calendar. This is the final version of the wireframes for Phase I, in which we would redesign the homepage and article pages, but use the structure of the original site to preserve existing articles before they were migrated and reformatted for the new site.
Mobile Browsing and Sharing
It was crucial for us to improve the mobile experience of Alizila, which prior to our redesign had not been responsive. I designed a persistent social sharing feature that would enable users to quickly save or share an article without disrupting their reading experience. Because a primary driver of traffic on content sites is social sharing, we needed to shape content in a way that would translate well across different platforms and devices.
Phase I Visual Design
We designed different two different states for the site, a default state, and a state for when a promotional event such as 11/11 was in progress. This enables the site editor to respond quickly to changes in the retail environment by easily switching between the two states.
By creating a responsive design for the new Alizila, we ensured that Alibaba's messaging could reach an even broader, more tech saavy audience.
Through analytics, we understood that many of our visitors found Alizila through links on social media or other publications. The first page they saw was not usually the homepage, but a “side door,” one of the articles on our site that had been shared or indexed. Since this was extremely common, it became crucial to present readers with links to other relevant content directly on an article page so that they would continue exploring the site. This strategy also included giving visitors the tools to find interesting content on the site using article tags and categories, as well as a newsletter for site updates on a particular topic.
Phase II + Next Steps
The Alizila Phase I Redesign was launched in the weeks prior to the 11/11 shopping event as a part of the marketing surrounding that day. For Phase II, we advised the Alibaba team to create more memorable categories within the site to establish a distinctive editorial point of view. These category pages would include strong visual cues that indicate what type of content the reader could expect, better content recommendations based on relevance, and the ability to filter categories by tags, allowing users to pinpoint the exact topic they would like to read about.