Menu
Blog UI
Crowdcube
Improving the readability and discoverability of articles on Crowdcube through a new blog UI.
The problem
Crowdcubes blog is now full of 100’s of articles featuring great content for entrepreneurs and investors alike. The newly redesigned core webpages offer new ways to surface this content, meaning the blog now needs to be focused around the latest news and increase the hierarchy of articles, to help guide users through this ever-growing area of content. The UI also needed an update to make it consistent with the new patterns brought in from the rebrand project.
The solution
A new blog UI adds increased hierarchy through an extended featured article section. The new UI also includes clear top-level filters, search and breadcrumbs to empower users to navigate through the blog to their chosen content with ease.
News hub UI
The news hub is the new home of Crowdcubes blog. It includes a dedicated hub for users searching for content relating to investing, raising or Crowdcube its self. Within each hub is 1 main top-level article, 4 featured articles and then a chronological list of the latest articles published. This structure allows Crowdcube to feature more relevant content and gives users a small preview of the article content, so they can be sure they are in the right place before clicking to view the whole story.
Article header UI
As a part of the new blog UI, I also worked on redesigning the article pages. The new design has readability at its core, now featuring a much shorter line length, a redesigned featured image and title section. This structures the page around the journey of a users eye, making the experience as natural as possible.
Article footer UI
Articles on Crowdcube are now signed off from the author, with a summary of what they do. This adds a nice personal touch allowing users to see the person behind the article. Next to the author UI sits a range of clickable categories the article relates to, making it easy for users to follow up and dive into further reading on Crowdcube.
