How I Appified Refinery29.com

Designing a Refinery29 mobile app concept from persona to prototype

Published in

Tradecraft

9 min readNov 30, 2015

As a a product designer at Tradecraft, I’m constantly looking for new ways to challenge myself and sharpen my design skills. In addition to doing client work for early stage startups in the bay area, we are also encouraged to take on personal concept projects to round out our skill set.

In order to emulate the challenges that many designers face, I decided to take an existing website and turn it into a mobile app, giving myself a time constraint of four weeks. The website I chose was Refinery29.com, one of my favorite content sites, and one that I’ve been reading religiously since 2008!

Disclaimer: I am not affiliated with Refinery 29, and cannot pretend to understand all the constraints the designers there work under. This project was done as a personal project to exercise my design skills only.

Process

I followed a full-cycle product design process to ensure that my designs were fully backed up by user research and that I constantly tested and validated my assumptions:

Persona & Task Flow

First up in my process was to create a provisional persona to ensure that I was constantly designing with a real person in mind, and that the needs of this persona would be the driving force behind all my design decisions.

It wasn’t that difficult to come up with the Refinery29 ( hereon abbreviated as R29) reader persona, as a lot of my girlfriends back in New York read it regularly!

According to the needs of Celia, I hypothesized that the following key features of R29 would be extremely important to Celia:

Quick and seamless access to news and inspiration that is important to her.
Easy way to share content via social media to her friends.
Digestible content that can be consumed during her commute and retrieved at odd hours during the day.

I later validated these needs during my user interviews, and made sure that I constantly updated my persona to reflect my learnings from talking to real users.

I then mapped out a task flow of what Celia’s R29 app journey could look like:

The task flow is where I also began to explore a new feature idea of bookmarking. Bookmarking is a functionality that isn’t often implemented natively on a website, as most people use browsers to bookmark on the web. But on mobile apps, especially mobile content sites, bookmarking has become more and more ubiquitous. It has also become an extremely popular feature for busy urban readers, like my persona Celia, who often reads mobile content on her commute and doesn’t always have time to go through entire articles. I thought this would be a nifty feature to introduce into the app, and bookmarked the thought to validate later.

Card Sorting

Next, I used card sorting as a tool to determine the categories I should include in the R29 app. I had some idea of what these categories could be, but I wanted to make sure I validated them through card sorting. I also wanted to understand more about R29 readers’ mental models and their interpretation of the content and the brand, so I could map my app’s categorization to that.

The Methodology:

51 cards
6 R29 Readers

Before the card sort, I asked readers to think back to the last time they read content on Refinery29.com and describe the scenario to me. Then I asked them to arrange the information on the cards into categories while in that mindset.

I started with an ‘open’ card sort ( where people can determine and write down their own categories), and then moved on to a ‘closed’ card sort with pre-set categories after patterns began to emerge.

Findings:

Readers were generally confused by articles about politics and international news, and thought they didn’t belong on the site.

“Why would I go on Refinery29 to read articles about politics? I wouldn’t even trust Refinery29 to have good coverage of this kind of content.”

On the desktop site, there are two pages called “shopping”- one under the “fashion” category, featuring articles about shopping advice, and one under the main navigation featuring a list of products that linked out to E-Commerce sites. All card-sorters did not know that this
E-Commerce functionality existed, and questioned it existence.

“I wouldn’t go on Refinery29 to shop.”

On the desktop site, videos are put in a separate “videos” category.
Card-sorters were torn between whether to include videos within content categories, or to keep them in their own category.

“It’s annoying when I’m reading and a video suddenly pops up, but it also seems weird to have videos as their own category.

Based on my findings, I developed the following site map:

I delineated four main categories that resonated the most with card sort users: Fashion, Beauty, Lifestyle, and Pop Culture, along with a clean, concise “My Account” sections with bookmarked articles and settings. As international news and politics were not categories that R29 readers would expect to see on the site, I made the decision to not designate specific categories for these articles, and just have them accessible on the home screen or by search.

The four main categories as they later appeared on the tab bar

I made the decision to not include the ‘shopping’ section as a feature of the app, and focus on the main value of R29, the content, instead. This is supported by an article I read recently on how R29 is ditching the “commerce + content” revenue model to focus more on content and branded experiences.

I also decided to have videos interlaced within the content categories, rather than giving them their own separate navigation category. The videos will not play until clicked on, and will be clearly marked as videos. Readers will also be able to navigate to videos specifically under each content category in the side menu navigation.

User Interviews

In parallel to card sorting, I conducted 8 user interviews to both validate my persona and to better help inform my design decisions.

Based on my persona, Celia, I interviewed 8 R29 readers and asked them:

Think back to the last time you read an article on R29.com on your phone. When was that and where were you?
What is the last article you remember reading on R29.com?
Have you ever used a bookmarking app on your phone? If so, how often?
What is your favorite content app, and why do you like it?

The following findings informed my design decisions:

In addition, my biggest insight from user interviews was that the most important aspect of a content site to readers was by far (surprise!) high quality content. When asked about their favorite content site, readers were much more likely to mention a niche content site that specialized in creating specific content very well (e.g. Vice magazine, news blogs, Buzzfeed) than a one-stop site with all different types of content (like Huffington Post). This helped validate my decision to focus on the four main categories of content R29 is most well-loved for.

With these insights in mind, I moved into wireframing.

Wireframes

Based on the information architecture, user flow, and my experiment hypotheses, I created the following iOS wireframes:

In parallel, I also began converting my designs into material design wireframes for Android:

Ultimately, I decided to take the iOS wireframes all the way to high fidelity, but I wanted to make sure the content I included could easily scale between both both platforms, and maintain a consistent style.

Style Guide

Before I created my hi-fi prototype, I created a style guide to ensure that the style of the mobile app I designed remained consistent with the style of the website.

This style guide was initially based on the current website, but was constantly updated according to the design decisions I made later on in the process.

*Note: Refinery29.com went through a full redesign as I was creating this project, so some styles have changed. I chose to keep my original style guide as a reference for this concept project.

Here are some snippets of my style guide:

Hi-Fi Prototype, Version 1

After soliciting feedback from fellow cohort-mates and friends, I translated my iOS wireframes into a hi-fi prototype, which I created with Marvel, following my style guide. Below are some of my screens from the initial hi-fi prototype:

Usability Testing & Iterations

But a hi-fi prototype isn’t much use if it isn’t validated as usable. I needed to validate my prototype through usability testing with real R29 readers.

I went out into the wild, gathered 5 R29 readers, and tested my prototype on them with the following prompt:

Imagine you’re on your morning commute and you want to catch up on some news, so you open the R29 app.

Find an article about skincare and save it to read for later.
Now find that article again from your saved articles, open it and read it.

Testing results were extremely positive. All readers intuitively understood where the bookmarking icon was and what it meant, and could easily find skincare articles within the beauty category, as well as the bookmarked articles page. They also understood that they could open and close slideshow view and swipe through the slideshow while reading an article.

There were, however, a few insights that brought to light final changes I could make to improve my design, and I chose the most actionable insights to implement:

Validation Testing Insights vs Final Design Decisions

Here’s an example of what happened to the bookmarking flow after I uncovered insights from usability testing. A once four-step flow (click on bookmark icon > confirm> close window> done) was now two steps (click on bookmark icon> done!) :

Final Prototype

My final prototype was informed by all the prior research I conducted as well as the final results from usability tests. I also cleaned up the visual design to make the interface cleaner and more readable, and added in design for sponsored content / branded experiences, as this could be a major source of monetization for R29. See my other medium article on monetization for publishing tech: