Company: Flexcar

Role: Creative Director

Client: Flexcar

The flexible alternative to car ownership just got a whole lot flexier.

Services:

Web Design
Illustration
Wireframing
Sitemapping

Art Direction
UX Research
Competitive Research
Content Design

The whole team:

David Ziegler-Voll, Executive Creative Director; Douglas Sullivan, Sr. Copywriter; Mark Alexander, Product Design Manager; Emma Hsieh, Sr. Product Designer; Lucas Dunn, Head of Product; Paul Myers, Sr. Ux Researcher; Kelly Harding, Director of SEO; Ryan Lindner, Motion Designer; Joshua Draper, Senior Front End Software Engineer; George Mitawski, Senior Front End Software Engineer; Adam Jarret, Engineering Manager; Serg Struminski, Sr. Software Engineer;

Flexcar Site Reimagination

2022-2023

When I got to Flexcar, there was a disconnect between the product team’s website presence and the marketing materials coming out of the creative team. After some informal conversations, I found that the feeling was unanimous among all of the designers, product folks and engineers. We needed an overhaul. In response, I created a project at Flexcar to rethink (or “reimagine”) the marketing website pages.

My role on the project was lead and director. I worked cross-functionally with every team in the org to achieve the best marketing site possible, while making concessions where it made business sense to do so. I developed the research, content and design strategy and worked with every team to execute. I pulled in other teams and gave direction where it made sense to do so.

Results

In the following 2 weeks after launching the reimagined home page:

A median of 65% of mobile users clicked the hero CTA button to inventory (up from 16% the same time last year)

Median time on home page URL was 10.42 seconds (up from 6.92 seconds the same time last year)
Clickthrough to inventory overall was 53.4% (up from 48% the previous two weeks)

Project Development

I discovered and documented the following challenges for Flexcar’s website:

The Flexcar brand was misaligned between product and marketing, making the marketing website a hyper-visible point of that misalignment
The website content was inefficient to manage for any single person or team, and as a result the website was missing critical information
The user experience was spread across multiple page builders and a web app, making the core experience choppy, confusing, and degrading user trust
The performance & SEO was not optimized, likely losing conversions
The lack of global styles meant that the beautiful design system created by the product design team weren’t being translated correctly everywhere, and made updates costly and time-consuming.
The lack of a CMS meant that all changes — including typos or image swaps — must be made by an engineer.

In addition, Flexcar had never spent time on a marketing strategy for the website, and as it scaled, it would need better systems and infrastructure.

In response, I met separately in groups with product, design, marketing, C-Level execs, customer care, and research folks to come up with a plan.

In collaboration with the Head of Product and my Creative Director, I wrote three main project goals:

To strengthen the brand — to think beyond the sale and create lifetime value
To address issues within the site that create functional, emotional and cognitive problems, and create more conversions
To move to a new website platform that allows us to scale and use our limited resources smarter

I wrote a project plan, breaking the project up into phases: 1) Research 2) Design 3) Build 4) Test 5) Iterate. I developed a timeline and requested all cross-functional team members involvement, including the headcount that I estimated we would need to complete the work.

I heavily socialized the project plan to be audited and edited by all stakeholders, with especially tight collaboration with the Product Design Manager, Head of Product, Sr. User Experience Researcher, Creative Director, Sr. Copywriter, and the SEO & Marketing Director. I got buy-in. From everyone.

And we got to work.

Research

I championed research as a cornerstone of the reimagination. Because we couldn’t get resources allocated from the Flexcar research team to aid in the project, I framed the research plan and executed 95% of the project’s research by myself.

The research included:

Stakeholder interviews with C Suite, Operations, Product Design, Marketing, Engineering, Customer Care and Creative team representatives — To determine where we’ve been and unearth exciting ideas.
Competitive Analysis — to understand basic high-level information about each competitor, as well as gauge key product features, website functionality, and more
User Testing of 40 users from our key segments on mobile devices (the primary device of our customer) using a test that I created with guidance form the Sr. UX Researcher
Visual Research to evaluate where there are opportunities to elevate the Flexcar brand visually (with contributions from the product design team)
Industry Disruptor Research, to determine what other “disruptors’ in their industry are doing to sell themselves as a new product in their market (with contributions from the Sr. Copywriter)
Interaction & Motion Research to determine opportunities to add movement to our website — with contributions from sr. engineers and the Sr. Motion Designer)

When I completed the research after 6 weeks, I compiled it into a 5 page Research document with patterns and findings highlighted for wider company use. Though nobody asked for this research initially, once completed, it was shared across every team in the company.

UX Design: Sitemapping, Wireframing and more

At the same time as visual design work, I scheduled and planned two collaborative sitemapping sessions for the creative team and product team. This site had to come from the people who understand Flexcar the most deeply, and I knew that at the time, that wasn’t me. I sent them all of the research I had done ahead of time to digest. We completed two hour-long sessions.

During the first session, we ideated. A UX designer bucketed all of our ideas into categories, and marked the ones that felt easy to achieve, or critical. During the second session, I divided the group up into teams and we all took a pass at the Flexcar.com sitemap. We came out of it with four different sitemaps, which I used to create the first draft.

I again heavily socialized the sitemap while providing context and examples — It was meticulously reviewed and revised by all of my stakeholders (from C suite, to customer care, to engineers).

I began fat marker wireframes in order to show basic content design for each page alongside the sitemap.

Visual Design: Style Tiles

Once research was completed, I dove into visual design. Using the visual design research that we had done with the product design team, we hosted a design summit to work out key design details within the brand. I took those details and created four unique design directions for the marketing website. The final direction was inspired by much of the product design team’s visual research contributions as well as my Creative Director’s.

Style tiles are like organized mood boards. They are a great way to get to the meat of the visual design direction quickly without fussing over spacing or precise content — saving days of product design time. You can begin to imagine how the elements could work together in a composition and make decisions quickly.

Because we found that we appealed more to 35-55 year old highly educated urban-dwelling people, the designs were tailored to that crowd.

This was the direction that the Creative director chose, with unanimous support from the product design team.

Content Design & Hi Fidelity Mockups

I took ownership of content design for the marketing pages of the website. I drafted a first pass at all of the copy and imagery for approval from creative stakeholders, at which point I pulled other team members (copywriters and designers) in to work on refinements. The piece of the home page that I did very little on was the cost comparison chart, which was taken over by the product team (details below).

I deveoped the iconography style first in the style tiles, and drew new icons to match, which I refined in the mockups. I composed all of the imagery, with the exception of the user personas in the “Save with Flexcar” chart.

Unfortunately after a month or two of launch, fullstory sessions revealed the almost no users interacted with this beautiful, thoughtfully designed chart.
Though I wasn’t the designer, one happy thing that came from this design (along with the lovely typography) is the glowing line. The product design manager did it quickly, and I recognized a massive opportunity. I helped sell it to the investor as a new brand element, signifying the glow in a car dashboard and making us feel more tech-forward. I incorporated it into the footer design after seeing it here, and brought it into other elements of Flexcar’s brand — but this is where it started!

I developed the icon style and illustrated all of the icons seen here

I created the lifestyle imagery collages out of photos from a 2022 Flexcar photoshoot. The oversized chevron concept is taken from the style tile.

Project Conclusion

In the end, we only ended up having the resources to design a couple of the pages that we had initially planned for. Time was spent reworking the home page many times over after my work was completed. I built a few additional marketing pages using outside resources (page builders and contractors), but we didn’t get the shiny final, full website we had hoped for.

But such is life at a startup!