WIKIA IMAGE GALLERY

Modernizing an old image gallery design on Wikia


Context → Problems → Goals → Design process → Result

Context

A majority of our users land article pages on Wikia from SERP(Search Engine Result Page). In the process of redesigning the article page in 2014, our design team and product team need to refresh old image galleries to make them aligned with our new article redesign goals.

Problems

Re-evaluating the existing image gallery was my first step to identify main UX issues of the old image galleries on Wikia.

1.Infinite height : Images galleries are currently not constrained by their height, allowing them to take up infinite vertical space on the page and limit a users ability to find more content below the image gallery.

One of the image gallery examples on article pages

2. Customizing options : Many layout options for creating a new image gallery brought about inconsistent design looks of image galleries across the Wikia network.

Customizing layout options

3. Old cropping rules : Old cropping rules to fit images into thumbnail containers of an image gallery caused irregular spacing in-between a grid of images. This made image galleries look messy and unprofessional, which had a negative impact on Wikia’s brand awareness.

Goals

Fixing those existing problems was not all of this project. It should be easy for users to browse and discover images that they might be interested in.

Business Goal 1(BG1) : we want to keep or increase CTR of images in the galleries
Business Goal2(BG2) : By standardizing the height of image galleries in the new style, we want to increase average page views per visit by 2%.
User Goal 1(UG1): I want to quickly browse and find interesting images on an image gallery.
User Goal 2(UG2): I want to view an interesting image in high resolution.

Design process

Research

Internal Data Analysis : Internal data on Wikia image gallery helped me better understand where our image gallery was at. According to the data, 87% of image galleries ha fewer than 10 images. This data helped me make design decision on how many images were going to be shown by default.

Internal data from Engineer team

Competitive analysis: Facebook image gallery

Cons : Making up to 5 images visible as default increases their discoverability and accessibility. Its metrostyle grid is also visually sexy to users.

Pros : when there are more than 20 images in the gallery, it is not easy to browse all of them through the lightbox without carousel.

Facebook image gallery rules

Competitive analysis: Medium image gallery

Cons : Medium Image gallery is optimized for up to 4 or 5 images because they are very well arranged in one row or two.

Pros : Once the number of images is over 4 or 5, the rest of the images begin to be stacked right under the previous ones.

Medium image gallery rules

Wireframes

The arrangement of images will vary depending on the amount
Flow diagram of inline browsing experience

Prototyping

Our team made a working prototype to get real feedback from power users before going to the production. Me and product manager made a questionnaire based on user’s goals that we set up. Overall feedback from power users was very positive. we could also figure out some UX issues which brought up in the process of Design reviews.

Results

A majority of power users really love the new image gallery due to its modern design and functionality. New image gallery don’t affect metric of page per visit, it keeps image views across Wikia even though it’s height is dramatically reduced.

Like what you read? Give Eunsung Song a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.