Launching an enterprise-ready website for Contentful

Contentful is an API-first, cloud-based platform that allows users and enterprises such as Nike, Spotify and Telus to power their sites and apps.

333m

Total funding

20k

Daily visitors

200+

Employees

Identifying opportunities:

In 2018, Contentful updated their business strategy and decided to move their primary focus of B2D (business to developers) approach, and open up a B2B motion as well, targeting business leaders that would help capitalise on new enterprise model.

We decided the best approach to do this quickly, would be to redesign the company homepage, that at the time focused solely on encouraging developers to sign up and try the product.

After initial qualitative feedback (aggregated from previous research) and quantitative analysis from Google Analytics, we found that 95% of our users use the product to build websites (when the homepage is focusing on VR, apps etc.). We decided to also address this in the redesign.

Areas to target:

Hero Banner

  • How can we explain Contentful’s offering easily to non-technical users?

  • How can we enable two flows: one for developers, and one for business leaders?

Content Merchandising module

  • How can we merchandise some of our new B2B assets and encourage form fill?

Social Proof module

  • How can we showcase some of our customers success stories?

  • How can we further explain what the product does?

Final CTA module

  • How can we encourage both users to take action?

Ideation

‘How Might We’ Statements

Before any ideation workshops I came up with a list of HMW statements that would help us reframe some of the problem statements into opportunities instead. It was important that the HMW statements where focused while still allowing the participants to be creative. Examples include:

  • How might we appeal to non-technical users such as business leaders, CTOs etc.

  • How might we explain what content infrastructure means?

  • How might we showcase the projects built by our clients?

  • Appeal to the majority of our users who want to set up a website based project?

Collaborative workshop

Crazy 8’s

As a next step, I invited key stakeholders, two developers and a product manager to take part in a Crazy 8’s ideation workshop where I challenged them to come up with 8 sketches in 8 minutes for each HMW statement. This generated a number of exciting ideas and as a next step we voted on our favourites based on the business goals and technical feasibility.

This exercise was really useful, as having diverse participants led to a number of varying ideas that helped drive the final design. It also helped gain stakeholder buy in as we involved them early in the process and there would be no surprises further down the line.

Finally, as Contentful is a fairly complex project built primarily for developers, it was great to have two present to help course correct us if we misunderstood any of the technical details. They were also happy to be involved and could also advise on technical limitations and time estimations.

Results of Crazy 8’S workshop

Results of Crazy 8’S workshop

Expert Interviews

As part of my research, I also interviewed two Contentful experts (a developer evangelist and a solution architect). These two colleagues spend a large proportion of their job talking directly to customers and were also useful in providing learnings and insights into both our customers viewpoints, and also where able to provide technical knowledge on the product itself.

Internal Developer Evangelist

Key Takeaways:

  • New features to promote on our homepage that users are excited about (e.g GraphQL endpoint)

  • Competitor analysis of Prismic, CosmicJS etc.

  • Helped us identify with our developer audience to see if our messaging was correct and key features where highlighted effectively

Internal Solution Architect

Key Takeaways:

  • Provided feedback on the first prototype - course corrected us when certain technical elements where incorrect

  • Provided us with new customer logos and examples to highlight certain use cases and examples

Low-fi Prototyping

Refined winning ideas to later mock up as low-fi wireframes

wireframe2.jpeg
wireframe 2.jpeg

Hi-fi Prototype

The final design had to be prototyped and adjusted according to the project timeline. We decided to follow a lean UX approach and test a MVP version of the homepage and gather user research feedback to help us iterate in the next sprint.

We decided to test the version of a customer website who built their site using Contentful, then we illustrated the concept of content models and how this is directly related to the JSON code underneath. We believed this is a diagram that would be simple and something that our developer persona would understand quickly.

User Testing Results

After building and shipping the first iteration, I conducted a round of user tests with 10 participants to ensure our designs where meeting the business goals that we initially set out. We were pleased with the overall outcome and identified some areas for future iterations

Key insights:

  • 80% of users found the new hero module effective in communicating the companies proposition
    “It’s simple, effective and provides a quick snapshot into what Contentful offers.”

  • 100% of users round the new homepage to appear trustworthy, reliable and attractive

  • 40% of users found the animation too quick and suggested slowing it down

  • 80% of users commented on the new customer examples being the core module that increased trust
    “What stands out most is the customers, Spotify and urban outfitters are what I know the most.. gives me peace of mind, this company can be trusted.”

See it in action
contentful.com

cf.jpg