Leading my team to a New Petrolicious
Role: Product Design Lead Team: Two Art Directors, Product Manager, Creative Director, Three Web Developers, Director of Editorial
As a Product Lead of Petrolicious, a vintage-automotive media company with over 500,000 users and 2+ million page views a month, my hands are in all aspects of growing the business. Our company has developed a rich tradition of quality filmmaking, long-form articles, and stunning photography that each instill a timeless quality to them. Eventually, I was given the task to redesign our website. I looked to our audience, foundational values, and mission moving forward in order to develop a modular and collaborative design process that prioritized content strategy, sketching, iterating, prototyping and branding. Below is a new trailer for our award-winning film series.
Research: Asking the Right Questions
Who is our audience? What do they want? How do we create a more interactive community? What type of content do our users desire the most? The first step was understanding our demographic, which was split between the Millennial and Baby Boomer generations. The whole team jotted down their thoughts and assumptions of what values our Petrolicious audience inherited. We then issued a survey to validate these notes. Based on a survey issued by our team, both audiences are highly educated, financially successful (90k+ salaries), and share a deep passion for vintage cars. They also have an affinity for watches, high fashion, new technology, and travel.
However, the millennial generation is the one that was most engaged with our content (time on site), more likely to access our site on mobile, and most engaged with our content on social media. We also discovered that our old content was as much or more popular than our newer content, based on social media stats, total clicks on reintroduced articles, and behavior on youtube. We believed this proved to make our content timeless, a characteristic that dramatically changed our content strategy. Thus, we needed to prioritize their behaviors and interests as primary use cases for our design decisions. My team split up a lot of our audience priorities into sub-groups in order to build clarity on the sub-demographics we were dealing with.
We found that our audience is diverse, but generally prefer our site for its our long-form content and extensive photography— they want to quickly access both on all of their devices. Part of this discovery process involves coming up with personas - for depicting the dichotomy in our target audience, as well as filtering what's truly important to each.
USER-CENTERED DESIGN DECISIONS
A priority was redesigning a user profile experience that leverages the conversations and conclusions from our rich automotive community. To inspire our young audience who wanted to learn more and participate physically with the car hobby, we would design new experiences that bring together automotive guides/tutorials, and upcoming events in their area. Our well-attended Petrolicious Rallies, held twice a year, inspired a lot of design direction for our team in terms of how to best take advantage of our community's desires and habits. We would also leverage our audience' interest in photography, by implementing stand alone features that feature our original photography, build components for Instagram feeds, and brand new content for photo galleries.
INTRODUCE NEW AVENUES FOR CONTENT
Our analytical data and user feedback from surveys proved that our current site was failing in a few areas, particularly with keeping users engaged on our site. So, our misison was to develop a funnel approach to exploring and discovering our archive of content. Our content has an evergreen and timeless quality to them, and thus are still relevant to our audience. Introducing new ways to access that content amongst the newer releases was a major priority in the new user experience.
THE USER JOURNEY
By distinguishing our personas and understanding what problems we are solving for them, I developed flows that represented each of their preferred behaviors on the new site, potential avenues they could pursue towards new content, and ways to connect with the Petrolicious community.
Sketching & Wireframing Flows
I first started sketching a lot of the preliminary screens based on our primary user flows and happy paths. As a team, we reviewed the sketches for approving high level concepts and ideas. Our goal was to introduce a completely new UI and layout for our audience, one that helped organize a lot of our content, and ultimately help the user find what they want.
MODULAR DESIGN PROCESS: COMPONENTS
A lot of the initial sketches were done with mobile in mind, since nearly 50% of our audience are now accessing our site on mobile devices. Once we were comfortable with the high level sketches and concepts, we decided to wireframe modules and templates, rather than full pages. This strategy helps create a consistent system that can easily apply to all different features and experiences on the site, while limiting a lot of time we'd otherwise spend on designing specific pages. Building a grid that could conform content and imagery on all devices, buttons that consistently apply to all use cases, and content templates that would apply in all contexts of an article and film page were integral to creating a consistent, systematic website.
These wireframes eventually really came to life with our clickable prototype. This prototype communicated key user flows, demonstrating the architecture of the site, and certain interactions - like the profile toolbar sliding out from the right.
Our inspiration came from artwork and graphic design from the 1960’s and 1970’s a prime era of vintage car culture and automotive design. Vibrant blues, reds, yellows, and greens dominated the color scheme, and certainly inspired our own direction in embracing that same culture for our audience. The use of tall, sharp typefaces also influenced our direction. So, we used Pinterest to organize a lot of this inspiration.
Based on mood boarding and countless white-boarding sessions, we developed a color scheme that introduced new, vibrant colors to our current color scheme (tan, red, grey). This color scheme is seen in how our content is branded, in our buttons, dropdowns, and graphic art. This direction heavily influenced our decision-making with our UI.
REFLECTION: SYSTEMS DESIGN & AGILE DEVELOPMENT
Thinking in re-usable components, rather than full-page mock ups, helps us to move to the browser quicker and scale the product in a more consistent, flexible way. Article page places heavy emphasis on the diversity of our photography, particularly through the grid, gallery carousels, different sizings of our hero image, and how users can now interact with our photography - sharing them individually and commenting on them. Building these components out in the development process made our workflow very iterative, ultimately saving a lot of time and resources to develop and scale the whole site.
Our agile methodology to development helped us collaborate and incrementally test and iterate our designed modules and templates. By approving and refining parts of the system, we eventually created a website that felt interconnected, consistent in design and language, and familiar on all devices.
We launched our site a few days before Thanksgiving, and the reception was very positive. Our core fans reached out to us through comments, emails, and phone calls to provide their feedback. We take our user feedback very seriously, so most issues they would bring up were reviewed by our team internally and communicated to our development team if they were deemed to be priorities.
Trailing 3-week Launch Stats
User Feedback + Improvements
My focus as a Designer is to consider what needs to improve, what needs to be worked on, and why things didn't meet our expectations. I was proud of our site launch, and the data proved that it was effective, but I was more interested in how to make the site even better and more compelling for our audience.
DEDICATED SECTION FOR PHOTOGRAPHY
Our editorial team wants to produce the best content,films, articles, photography, possible and it is our job to design the best platform and environment for our audience to experience them in the most memorable way possible. That is why we worked on a dedicated section for our award-winning photography, so that our audience can enjoy what used to be a supplementary component of our articles, in a much more significant way.
TWO CONSISTENT POINTS OF FEEDBACK
Our audience felt that it hard for them to choose which article/film to select on the homepage, as well as finding related content within an article. Both of these issues are integral to our users' time on site, so my team came up with two designs. The first projects a major change to our hero carousel, featuring up to 3 films/articles at the same time. This gives more hierarchy to our featured content, and provides the user with more content options above the fold. The second design plays with our article thumbnails and introduces a new way to introduce content within a given article and film.