WIKIA IMAGE GALLERY
Modernizing an old image gallery design on Wikia
Context → Problems → Goals → Design process → Result
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.
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.
2. Customizing options : Many layout options for creating a new image gallery brought about inconsistent design looks of image galleries across the Wikia network.
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.
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.
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.
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.
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.
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.
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.