Refinery29 is a digital media publisher with a focus on young women. At its peak Refinery29 reached an audience of over 500 million globally. At its core, Refinery29 published written content and also produced entertaining videos. They later expanded into producing experiential events, the most notable one being 29Rooms.
My Role
In February 2015 I was recruited to work for Refinery29 by a former co-worker from Say Media, Aziz Hasan. I was tasked with improving the user experience of the Refinery29 website to match its remarkable storytelling. I contributed to designing features that would make articles more engaging as well as scale the design of the website to support growing new content categories and the integration of more video content. I also experimented with new and different storytelling formats optimized for mobile web and in native apps.
Design System (Reverie)
One of my core responsibilities was to maintain the design of the main website at refinery29.com. At the time, the homepage and top-level category pages (e.g. Fashion, Beauty) had their own bespoke page layouts. In fact, right before I joined, the design team had just completed a redesign of the Fashion page that was a 3-month effort.
As the Editorial Team expanded into more categories and were rapidly publishing anywhere from 20-30 articles per day there was a need for more category pages and a redesign of the homepage to highlight more content. Instead of tackling each page design one-by-one, I proposed an updated design architecture that would follow a repeatable system of cards and cluster modules that could sustain an infinite amount of pages with the ability to be controlled by Editors.
I presented this idea to the broader organization through a prototype project named Reverie (because it was born from a daydream). With ReactJS gaining in popularity among the Engineering team, this prototype eventually drove an effort to overhaul the codebase into a scalable component-based system.
ThisAM iOS App
In 2016 there was a desire for Refinery29 to have their own native mobile app. At the time we noticed other media organizations were essentially duplicating their web experiences in native app form. As a product team we believed this approach did not leverage the experiential benefits of having a native app. In addition, adding another platform for our Engineering team to build and maintain that was basically a duplicative experience would not be the best usage of their resources.
We instead wanted to create an app that focused on a smaller topical area that could leverage push notifications in a meaningful way and have a habitual component to it. We evaluated metrics across the Refinery29 website to find signals on what types of content series were driving a considerable amount of traffic.
After identifying opportunities, we rapidly ideated and prototyped what an app might look like using the content from these areas that we could test with users.
Work & Money content was a relatively new content vertical that Refinery29 was exploring at the time. Refinery29 was just beginning the Money Diaries series and the first few stories that were published were incredibly successful. We sat with the Editor, Lindsey, to try and conceptualize what an app could look like in this space. I helped to mock up an idea for a Work-Life companion app that could help users navigate their careers from getting help with an interview to how to negotiate getting higher pays.
As we began to sculpt out this idea, we quickly found how limiting it might be. It would not create regular touchpoints with users, but instead we found that they would only utilize it during times of stress and anxiety. We did not want users to associate our brand as the go-to destination when having these feelings.
Another app idea we tested was with Horoscopes. Horoscopes did relatively well and was a regularly occurring content format on the website. We also had beautiful, unique art accompanying each sign every month.
I prototyped what a Horoscope app could look like using InVision App and was able to test it with co-workers and in in-person usability tests to evaluate what people thought about it.
From the feedback we received we ultimately decided to pass on the concept due to the competitive landscape. People can get horoscopes from many different places. Additionally, power users trusted specific astrological experts. As far as brand positioning, Refinery28 wanted to align more with Fashion, Beauty, and Entertainment—not in Astrology.
The app idea we ended up going with was based on our daily article series, 8 Things You Need to Know This AM. Every morning at 9:00AM Refinery29 would publish a round up of news and entertainment stories that have developed since the previous day that users should know about before they tackle their day. The point was so that people would be informed about what's going on so they can engage in meaningful conversations if they come up throughout the day. It was a simple idea that showed success on our website and had a daily habitual component to it.
I workshopped the idea with the Engineering Lead, UX Designer, and also the Art Director and Editor who published the series every morning. I created a HTML/CSS prototype that took multiple iterations to get to alignment. The app was successfully launched in February 2016 and had almost 50,000 installs in the first month with 40,000 active users after 3 months.
Bespoke Landing Pages
Major events that Refinery29 held throughout each year needed accompanying one-off striking web experiences. I took on the responsibility of working with the event designers to craft custom landing pages to promote these events from zero-to-one. Since these pages would only serve a purpose for only a short period of time, I handled both the page design and development of these landing pages without the help of an Engineer.
A designed and developed the landing pages for 3 consecutive years of Refnery29's NewFronts presentations. NewFronts is almost like the digital media's version of an Apple Product launch event. Refinery29 would present their upcoming content intiatives to potential advertisers and hopefully spawn new brand partnerships.
I also helped design and develop the landing page for Refinery29's debut experiential event, 29Rooms. The 29Rooms landing page was where people would find out about the event and purchase tickets. It was widely successful and the event completely sold out.
Experimental Web Story Formats
Refinery29 wanted to always push the boundaries of storytelling. I would often experiment with new ways for our reporters, producers, and graphic designers to tell more enaging stories. The goal was find ways to communicate information in more engaging ways that would stick with the readers minds. I took on the challenge of exploring different creative formats for us to tell stories on the mobile web beyond paragraphs of written content.
With Snapchat finding immediate success and Instagram soon following with their stories format, we wondered if it would be possible to tell a story we typically would produce in a 5-10 minute YouTube video or 1000-2000 word essay, instead using a 5-15 second bite-size sequential video format. Additionally, would it be possible to do this on the mobile web (vs. a native app) as an alternative template to our typical long-form written article pages.
We first demonstrated a wireframe of how a story like this might look using an animated Keynote. At the time we had an on-the-ground team in Minnesota following Ilhan Omar's run for a congressional seat. They were producing both a long form video and written story documenting her background and campaign. We collaborated with them to also capture vertical short-form videos to experiment with this new experience we were experimenting with. The end-result was this new alternative web article experience, where instead of landing on a long form written article you entered a 25-slide Instagram story-like experience telling the same story.
I developed the entire experience using the videos our team collected in Minnesota and also worked through many limitations of the mobile web such as memory leaks (solve by replacing some videos with static images) and also cross-browser prevention of autoplaying videos with audio (solved by having the user click a "start" button at the beginning).
Around the same time, other big organizations were experimenting with the same story format. The New York Times published a story on the Syrian War using a similar format and Google rolled out a new video-based "Amp Stories" format a few months later that attempted to create the same experience (it was later discontined).
While we were able to demonstrate that it was possible to execute this type of story on the mobile web, we determined that the overhead to produce a story made specifically for this format would distract our video production teams from their main focus of building our YouTube channel.
Another main focus of mine was to find little ways to elevate the experience of our article pages through small interactive or motion elements that would support written content. For each story, an Editor would pair with a graphic designer to create custom visual graphics to reinforce the story being told. My role was to take it a step further and help bring that art to life.
I built an internal tool that I named GetEmbed that our graphic designers could use to help make their artwork more dynamic within the stories they were assigned to. Following the instructions and PSD Templates I provided, they could generate an HTML embed code to drop into any story through the CMS. This would allow them to add dynamic graphical elements to help tell their stories.
Side Projects
Throughout my time at Refinery29 I would frequently start side projects, often collaborating with folks on the Graphic Design team. For example, we had once published an article about the Justin Timberlake "it's gonna be May" meme that quickly exploded in traffic. Within the same day I built a fun soundboard web app for people to get Justin Timberlake to announce May on-demand.
I also partnered with Sydney Hass, an illustrator from the design team, to build a Valentine's card generator for Valentine's day. The tool collected several illustrations of celebrities and quotes and randomly paired them with different heart-themed borders and backgrounds to generate unique card designs. These could be shared and posted to friends Facebook walls.