The Quick Take

Headliner hired me to lead a complete redesign of their iOS app. Operating on a tight timeline, I scaled my initial design process down into a single two week sprint, at the end of which I delivered a restructured app that achieved our outcomes. After shipping, we iterated on that foundation and implemented new features based on quantitative learnings from our data and qualitative learnings from usability tests I conducted.

The Company

Headliner is an early stage startup based in Manhattan. They are building a video-based social media network that allows people to share their opinions on current events as they unfold.

My Role

At the time of my joining, Headliner had recently decided to pivot in a new direction, and wanted someone who could quickly and efficiently handle all levels of the redesign. As the sole designer at the company, I did everything from user research through UX, UI, and visual design.

Step One: UNDERSTANDing USER Needs AND BUSINESS NEEDS

TL;DR The first part of my process was to fully understand the current user experience and our outcomes for the redesign.

To begin any project, I begin by gathering as much information as possible about the problem I'm trying to solve. For the Headliner redesign, I conducted ten user interviews, dug into their prior user research, explored every aspect of the current product, and scoured their analytics. This gave me a solid sense of the state of the product from both a qualitative and quantitative perspective. After that, I worked with the founders and product team to define the user needs and business needs for our redesign. I culled all of that work into a single Jobs To Be Done story that we could all keep top of mind during the sprint. It's incredibly helpful to condense this information into a single, simple sentence. It gives the team a guiding light to benchmark all future ideas against. In terms of business needs, I also wanted to make sure we came to a consensus on a single metric we would use to define our success. I've found that this practice forces teams to prioritize and get on the exact same page before the process even begins. In addition, it galvanized us toward a single, clear goal.

User Research driving design decisions

Exploring the scope of our video feeds

STEP TWO: SCOPE AND REQUIREMENTS

TL;DR The second part of my process was using the knowledge gained from step one to define scope and content requirements.

After understanding the current state of the app and the outcomes for our redesign, it was time to make the tough decisions about what features were most likely to have the greatest impact. Given the two week timeline, we played a game of tetris, analyzing cost in design and engineering time, estimated value-add to our users, and estimated value-add to the business. Eventually, we landed on a skeletal structure we felt really good about. After that, we dove into each piece of that skeleton and defined the subsequent content requirements. This was all done using words and very simple sketches alone. By resisting the added detail and complexity of mockups, we were able to stay focused on the high-level goals of the features and avoid wasting time on the minute details before they truly mattered. Finally, defining our scope in this way allowed engineering to get working on the backend before they had mockups, and let me design within concrete constraints.

Step 4: Wireframe, Hi-Fidelity, Prototype, Test

TL;DR Armed with a hypothesis on the best structure for achieving our goals, it was test and validate time.

Usually, I like to wireframe out multiple solutions, throw them into quick prototypes, and user test each version. Given the expedited timeline of the redesign, it made sense to skip wireframing and go straight into the visual design. I created a hyper quick style guide using Craft, used an 8pt grid, and threw together a starting point we could build off of. I used Marvel to build prototypes and used their "Share Link" feature to get the prototype onto the phones of my user testers. I initially just recruited friends from a slack channel I started for designers (ask me if you want to join!) and then tested people who better fit our target audience by offering them $20 for a 30 minute test on Craigslist. Being that the test can be completed over Google Hangout and thus remotely, it was easy to execute multiple tests daily without lag time. This constant stream of feedback helped immensely both in iterating and in keeping ourselves aligned with the experiences and motivations of our users. 

A rough, early prototype exploring some ideas for the "Watch" experience. 

Using Framer to illustrate animations and micro-interactions

Step 5: Deliver

TL;DR Delivery was a breeze using Zeplin, Marvel, and Framer.js 

Once we had validated that the core of the user experience was working smoothly, it was critical to get the product out and into the hands of real users as quickly as possible. Our engineer had been kept tightly in the loop from day one, and when elements were locked down he was the first to know. He had a concrete vision of the final product before I even delivered the rendered screens. For animations and micro-interactions, I coded things up in Framer so that we could be on the exact same page. For the handoff of the screens we used Zeplin, which saved a ton of time on my end by removing the need to export anything at all. It also increased efficiency on his end by creating a "single source of truth" that held our style guide and all of our assets. This, combined with the prototypes, made it a breeze to see both the high level picture of our vision as well as all the nitty-gritty semantic details.

Step 6: Measure and Iterate

Within three weeks of starting at Headliner, my redesign had shipped, and we were tracking metrics and running user tests. In the end, my redesign, combined with some deft moves from business and marketing, ultimately led to a gigantic surge in usage. The app went viral, and made it up to Number 6 on the app store in the "free apps" category. We were incredibly excited to see this influx of users as it allowed us to get data that validated the design decisions we had made. Within five weeks of my joining our key metric for success, daily videos watched, had increased over 30x.

Tracking events using Localytics