Bringing the Contentful brand into the product
Updated Contentful brand
The marketing website and external brand went through a dramatic refresh, and as a result the web app UI looked like a different product entirely.
The Contentful web app was badly in need a refresh, especially after the new Contentful brand was introduced. Furthermore, how can we make the Contentful web app more usable and welcoming to non-technical users when approaching a brand refresh on key screens?
Empty states refresh
To get started, I performed an audit of all empty states in the web app, as well as all versions of the space home tab
To establish the final illustration style, our product design manager worked with marketing to align on an illustration style for the product.
I provided concept ideas for each empty state and worked with our product design manager and marketing writer to develop copy and illustrations for each empty state.
Space home redesign process
To keep this opportunity small, we opted not to make changes to the onboarding example content or flows, but rather refresh the space home and make usability updates to improve the page. I looked at how the current onboarding space homes were performing with both qualitative and quantitative data. One challenge here is that, at one point, Contentful started directing editor users to a specific user journey, but the example content for that journey was too technical and meant for experts. How can we simplify that content for our editor users to better understand without adding scope creep and creating new content for these users?
Usability testing results before the brand refresh
- Editors felt the onboarding flow did not meet their expectations. Users felt overwhelmed by all of the content
- Users did not understand product-specific concepts based on information presented during onboarding process and space home (e.g. content type, spaces).
- Users who felt they understood it had a skewed understanding: they didn’t realize it was an example app, they thought it was their Contentful onboarding
- There is a 46% drop in engagement between the 1st step to second step
- There is a 85% drop in engagement from the 2nd step to 3rd step
Usability testing results after the brand refresh
- Editors feel there is consistent communication from the marketing site to the web app.
- Users understand that the example app is a sample education course catalog. And Users did not express feeling overwhelmed, at all!
- Users did not express any confusion about terms.
- Users expressed interest in previewing the sample content first, then exploring and modifying content once they understand what they’re looking at.
- Users feel that the case studies are nice to have available to explore.
- Users feel the experience is meant for them