David Knell | Portfolio (for Coda)

Explore

Gallery

David Knell | Portfolio (for Coda)

Portfolio

Home Page Redesign

My Roles

UX & UI designer

Acting Product Manager (ie, I was delegated all the PM work)

Copywriter

Team mentor: the marketing team had never done a traditional development project before, so I continually guided the project lead and other team members through the process

The Problems

The company website's home page had no clear call-to-action to guide visitors to where we hoped they would go.

The company didn't even have a vision of where we wanted visitors to go.

The home page had a carousel at the top of the home page. Carousels are a symptom of a lack of vision and priority for a home page and even the company's marketing strategy in general.

This is the previous version of the Home Page:

⁠

Research to Requirements

I relied on members of our sales, marketing, support, and internal consulting teams to develop personas so that our designs balanced the needs of all user segments.

Our core team interviewed representatives of each persona, both users and non-users. I mainly wanted to determine what actions they wanted to take on our website and what they needed to feel and know to decide to do it. (To me, this is what marketing ultimately boils down to.)

At the time, we thought software Product Managers would be an excellent new market for us, so I scheduled interviews with several PMs in the local community.

The interviews with PMs proved valuable: they disproved our hypothesis. PMs just weren't interested in what we offer. So at my suggestion, we pivoted away from PMs and focused instead on our core market of marketing researchers, professors, and pricing managers.

From all our interviews, and from our own objectives, I created a list of requirements for the home page redesign project and worded them as user stories.

⁠

A member of our marketing research consulting team used our software to rank order the user stories by what we believed each persona wanted most out of the marketing side of our website. (Surveying real users and non-users would have been better.) This was important as, if we ran out of time toward the end of the project, I wanted to make sure we got the most important requirements completed. We could always add in the nice-to-haves later.

⁠

Architecting the path to purchase

I felt strongly that every page on the marketing side of the website needed to end in one or more CTAs: Tour, Try, or Buy. In addition, many pages should link to related pages that also end in those CTAs.

⁠

I used a layout that's familiar to our stakeholders to explain how website visitors will move through our website and eventually end in a purchase. The castle draws guests to the center and, from there, they can navigate to all lands but, sooner or later, to Fantasyland. So too will our home page CTAs draw website visitors to subscribe to our products.

⁠

Design

For really hairy design challenges or projects with a significant impact on the company, I like to get as many ideas from as many different heads as I can. So I'll organize a design studio activity or what I've come to call a "sketch party."

I invite the project team plus anyone else at the company wants to come (because we're about 40 people, and most don't come, this isn't a problem). I give us all 2 minutes to sketch a way to achieve a few specific goals the design needs to achieve, repeat 4 times, then we all briefly present our sketches and our thinking behind them. Everyone is given a few colored dots to vote on their favorite ideas.

⁠

Sketch parties have immense benefits:

Because people from across the company are invited, I end up with a diversity of perspective I wouldn't get on my own.

Everyone loves to contribute, and those who contribute feel heard. Besides just being a great thing on its own, this facilitates buy-in and engagement throughout the life of the project.

The resulting artifact of a sketch party is a pile of sketches with colored dot "votes" that provide a heatmap of the ideas that resonated with people across the company. This is fertile material I can use to start honing in on candidate designs.

I created wireframes, high-fidelity mockups, and prototypes, refining them over and over. I used Sketch, Adobe XD, Figma, and InVision Studio because, in the summer 2018, each had features the others didn't (eg, animation, "code" view).

⁠

Dev Process

Before our company formally adopted Scrum, I regularly encouraged our development process to be more Agile.

⁠

A/B/n Testing

I A/B/n tested of the hero section text (and the button text on a secondary page) and we settled into the options that performed the best. (With more budget, I would continue to A/B/n test all aspects of the copy and layout on an ongoing basis.)

The Result

Here is the final Home Page design:

Before

⁠

After

⁠

⁠

Gallery

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.