Case Study: Revamping a 7-Year-Old Feature
Buckle up for a fun ride on the revamp of Prezly’s 7-year-old Media Galleries feature! Check out how we made it even easier for users to upload, sort, and show their media assets!
Media galleries have been an important feature in Prezly for more than 7 years, when it was first launched and when I was just giving my first steps in the UX world (only dreaming that one day I would be working in a company like Prezly).
From logos, media kits, or product shots, Prezly’s media galleries are the go-to way for our customers to share with the world the visual part of their companies, making it a core feature for some users.
Why working on this?
So, why did we decide to tackle this ancient feature? Well, first off, it was already 7 years old. In internet years, that’s practically ancient history. To put it into perspective, back when this feature first saw the light of day, Avengers: Age of Ultron was just hitting theaters, Amazon was unveiling its brand-new Echo, and pandemics were still the stuff of sci-fi novels. Ah, simpler times.
But the age of the feature wasn’t the only reason we decided to give it a facelift. We also noticed that our Media Galleries, or as we used to call it, Newsroom Media Page, was lagging behind our current design standards (no surprise there), plagued by legacy code (shocker), and packed with outdated components (you guessed it).
All of this meant that we found ourselves trapped in a vicious cycle. We kept putting off any work on the page or feature because of the daunting challenges these outdated elements posed. But we knew that something had to give, so we rolled up our sleeves, put on our thinking caps, and dove headfirst into the makeover of a lifetime. And let me tell you, it was quite the ride!
First things first: Understanding Media Galleries
Before we jump into the nitty-gritty of our process and some key takeaways, let’s take a moment to understand how media galleries are used in Prezly. We offer our users two options for adding galleries to their sites:
Option 1: As a Story (post) content
Prezly’s story editor is known for its versatility, and one of its shining features is the ability to add media content to stories. Among those media content types, we have (drumroll, please) Media galleries! To create one, users simply add a content block and upload their media assets, and voila! A gallery is born.
This option is perfect for showcasing media related to a specific topic, like a story about Paris Fashion Week, or a handful of book covers!
Option 2: As a Page
The second option for adding a media gallery to Prezly is by dedicating an entire page to it, which is usually displayed in the site header. To set it up, users head over to their site settings, enable the media gallery page, and upload their media assets. Just like that, the gallery is live and ready to impress.
This option is ideal for featuring more generic media assets, such as a brand’s logo or media kit.
Each option serves a unique purpose, and although we could potentially merge them into one (you’re not wrong), it’s not quite the right time for that. There’s still more work to be done before we can make this dream a reality.
Digging into User Behavior
Before we started brainstorming solutions, we wanted to understand how each of the media gallery options was being used, and whether it was possible to integrate the “story editor gallery block” into the new media galleries page.
We had a hunch that adding a gallery to a story might be a more familiar flow for our users, and we wanted to replicate that experience on the gallery page. Plus, the components were already in place, which would make our job way faster.
Well, turns out our instincts were right! We crunched some numbers and found that in the 30 days before we kicked off this project, 1,274 users added a gallery through the story editor, while only 63 users did so through the gallery page.
We also took a closer look at the usage of the media galleries page to measure how extensive our changes could be. Interestingly, we discovered that the majority of the galleries belonged to just two customers. This was actually great news, as it meant that even significant changes would be manageable since we could reach out to those customers individually.
With this valuable insight in hand, we were ready to dive into the redesign process and give the media gallery page the overhaul it so desperately needed.
The new Media Galleries page
Armed with our assumptions and supporting data, we had a clear roadmap for revamping the media page. We opted to use the editor’s gallery component to let users add their galleries to the media galleries page. Our main focus was figuring out the best way to display all these galleries on the page.
The first major change we implemented was to the page name. Although we had been calling it “media galleries” internally, the actual page title was displayed as “Newsroom media of [newsroom-name]”. This title wasn’t ideal, as it had a strong PR bias (we’ve been expanding beyond PR lately and making Prezly more accessible to non-PR users).
So, we decided to go with a straightforward and accurate title: “Media Galleries”. This name clearly conveys the page’s purpose as a collection of media files, such as images and videos, organized and displayed together.
We also repurposed one of our grid components (the site’s page grid) and made a few minor adjustments to include the necessary features for this page. With these changes in place, the stage was set for a fresh, user-friendly media gallery experience.
- A search input that enables users to swiftly find a specific gallery. This feature will be available only for licenses with 8 or more galleries.
- The capability to rearrange the order of galleries, which will be reflected on their sites (galleries at the top of the page will be displayed first).
- The gallery name and main image are displayed for easy identification, allowing users to differentiate between their content. By clicking on the name or image, users can open the gallery and edit its details.
- The option to modify a gallery’s visibility settings (public or private).
- The number of images within a gallery is displayed, helping users better organize their galleries by importance.
- The gallery author and creation date are displayed, providing context regarding the gallery’s creator and the relevance of the images.
Creating & Editing Galleries
As we mapped out the gallery creation and editing flow, we had two key objectives in mind. Firstly, we wanted to utilize the story editor's gallery component. Secondly, we aimed to ensure that the gallery looked the same during the editing/creation phase as it would when published on the site. This would enable users to visualize how their galleries would appear to viewers and make it simpler to apply any necessary adjustments.
The main challenge, however, was determining the page layout. Should we opt for an aside or create a standalone page for it?
Each solution had its pros and cons, but the aside option emerged as the frontrunner, primarily because it facilitated easier navigation between galleries. Users could simply click the grid and open a gallery in the opened aside, rather than having to open a new page.
From a development perspective, using a side panel for gallery creation and editing proved to be more efficient, as something similar already existed in other Prezly features, such as Story Snippets or Pitches. This allowed us to repurpose those components, streamlining the development process.
Gallery Creation
- Users have the ability to set the gallery title during creation.
- A new gallery description field is included, enabling users to offer more context about the gallery. This was a highly requested feature that wasn’t available in the previous flow.
- Images can be added using the familiar editor component.
- Users can conveniently set the gallery visibility directly from the aside.
Additionally, to guarantee a clear preview of how the gallery will be displayed on the site, we made the width of the side panel larger than the site’s (usual) gallery width. This allows users to see the gallery as it will appear on the most common screen resolutions, ensuring a seamless visual experience.
Gallery Editing
When editing a gallery, users will utilize the same side panel as in the gallery creation flow. However, upon clicking on the image module, a settings panel will emerge (resembling the one in the story editor) that enables users to edit their images, tweak the width and size of the gallery, and adjust the spacing between images. This offers users a familiar interface and an array of options for tailoring their galleries to their preferences. Additionally, it will give users a glimpse of the end result on their sites.
What have I learned from this project?
Looking back, this project might seem like a straightforward task, but trust me, it was one of the most challenging projects I’ve ever tackled.
At Prezly, we use Basecamp’s Shape Up method for our projects (a product development approach emphasizing short, focused work cycles), with a slight modification to the original (instead of the standard 6-week cycles, we also do 2-week cycles) — this project was a 2-week endeavor.
In the past, we had started a project on Media Galleries that got canceled for various reasons, the main one being issues with the “pitch” (project briefing). This made the current project even more crucial to execute successfully, bringing in an extra layer of pressure.
By the end of the project, we had to extend it for an additional 2 days, which in Shape Up terms, is akin to a mortal sin. This gave the team the false impression that we had failed — which we hadn’t.
The most significant takeaway from this project is the importance of carefully examining all aspects of a briefing and asking the tough questions before the project starts. Doing so will help make our lives easier and contribute to smoother project execution.
Before you go
If you enjoyed the story, hit the clap button 👏 below to show your appreciation and help others discover the post. Follow me for more delightful design insights, and don’t hesitate to drop a comment 💬 with your thoughts, questions, or opinions.
See you around 👋
