UX/UI Designer
contentful.jpg

Contentful

1500w.jpeg
 
 

DETAILS:

Client:
Contentful GmbH

Project:
Homepage Redesign

Role:
Web UX Designer

Target Personas:
Developers & Business Leaders

Timeline:
1 x design sprint
1 x development sprint
(Q4 2018)

Contentful GmbH

OVERVIEW:

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.

200+

Employees

70m

Total Funding

20,000

Avg. daily visitors


IDENTIFYING PROBLEMS:

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?

 
 
 
 

1 - Ideation

1.a ‘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?


1.B - Crazy 8’s workshop

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

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

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

 
 

2 - 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.

 
 

INTERVIEW 1:

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

INTERVEW 2:

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

 
 

3 - Low-fi Prototyping

wireframe2.jpeg
wireframe 2.jpeg
 

4 - 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.

 
cf.jpg
 

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.”

These are just a few examples of what the results offered and the next steps would be to address the issues and also look to quantitative data to gain a further understanding into how the new homepage is performing.

 
research.jpg