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

Alizila for Alibaba

The Challenge

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.

The Solution

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.

Existing Site

Alizila Existing Site Homepage Alizila Existing Site Article Page

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.

Browsing Experience

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.

Alibaba's Corporate Site

Navigation

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.

Alizila Old Sidebar

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.

Design Process

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.

Alizila Phase I Sitemap

Phase I Sitemap

In the first phase of our redesign, we simply replaced the homepage but preserved the same basic structure of the site to allow time for content migration. The Phase I sitemap shows the original structure of the site, and how disorganized the navigation and information architecture had become at that point.

There was no clear logic to how content was organized on the site, and many of the categories were arbitrary and included the same content. Also, there was no easy way to filter the content or sort by tags.

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.

Alizila Homepage Desktop Wireframe Alizila Homepage Mobile Wireframe
Alizila Article Page Desktop Wireframe Alizila Article Page Mobile Wireframe
Alizila Navigation Desktop Wireframe Alizila Navigation Mobile Wireframe

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

Alizila Desktop Homepage Visual Design

Brand Voice
Our clients at Alibaba described their company culture as bold, open, and innovative, which did not come through in their previous site. We decided that the consumer face of Alibaba needed to be reflected in their press site.

Modular Flexibility
Content modules within the sidebar and body of the page can also be turned on or off to accommodate changes in the editorial schedule.

Relevant Content
By surfacing categories on the homepage and not just within individual category pages, users are able to quickly preview content in each category and find what interests them. Through helping users find interesting content, we can reduce bounce rates and increase time spent on site.

Adaptability
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.

Mobile Support
By creating a responsive design for the new Alizila, we ensured that Alibaba's messaging could reach an even broader, more tech saavy audience.

Alizila Desktop 11/11 Homepage Visual Design Alizila Mobile Homepage Visual Design

Discoverability
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.

Alizila Desktop Article Page Visual Design Alizila Mobile Article Page Visual Design

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.

Alizila Phase II Sitemap
Alizila Category Page Desktop Wireframe Alizila Category Page Mobile Wireframe
Alizila Press Page Desktop Wireframe Alizila Press Page Mobile Wireframe
Alizila Video Page Desktop Wireframe Alizila Video Page Mobile Wireframe
Alizila Business Page Desktop Wireframe Alizila Business Page Mobile Wireframe

More Projects >

IBM Watson Health

At IBM Watson Health, we use cognitive computing to tackle tough problems in healthcare.

Product Design • UX

Insight Banking App

I designed an app for better mobile banking.

Product Design • UX • Visual Design

Compass USA

At Group SJR, we reimagined the official site of a leading food services provider to emphasize their unique history and values.

UX • Content Strategy

Alizila for Alibaba

At Group SJR, we designed a media portal for Alibaba to express their brand voice through engaging content.

UX • Content Strategy

Advocating for mental illness online

At Group SJR, we designed a mental health advocacy site providing online resources and expertise from veterans of the field.

UX • Content Strategy

LeanOnWe Brand Identity

At Vaudeville Ventures, we developed the brand identity for a home care startup.

Branding • Visual Design